ウェブ上には約 150 万の高速モバイル ページ (AMP) があります。

AMP は読み込み時間を短縮するだけでなく、不要な JavaScript、CSS、遅延読み込みを排除します。 これは、さまざまな組織がクリーンで合理化された Web ページを開発し、ページ速度を 3 倍にするのに役立ちました。

この記事では、AMP のコンポーネント、その仕組み、利点、制限、およびプログレッシブ Web アプリ (PWA) やレスポンシブ Web デザインと比較した AMP の立ち位置について説明します。

AMPとは？

AMP を理解するために、AMP とは何かを説明しましょう。

3 つのコア コンポーネントと最適化技術の組み合わせにより、超高速のユーザー エクスペリエンスが保証されます。

AMP のコア コンポーネント

AMP は、HTML、JavaScript、キャッシュの 3 つの要素で構成されています。

AMP HTML

AMP HTML には AMP 固有のタグも含まれているため、通常の HTML タグとは異なります。 カスタム タグとも呼ばれるこれらのタグを使用すると、コード内で AMP を簡単に実行できます。

AMP HTML は、ウェブサイトの信頼できるパフォーマンスのために一部の HTML コードを制限します。 Google 検索エンジンやその他のプラットフォームは、HTML タグを通じて AMP を認識します。

AMP JavaScript

AMP JavaScript ライブラリは、AMP のベスト パフォーマンス プラクティスを実装して、AMP HTML ページの高速レンダリングを保証します。 ベスト プラクティスには、インライン CSS とフォント トリガーが含まれます。

レンダリングの遅延を防ぐために、外部リソースからのすべてが AMP JS と非同期になります。 また、AMP JS は遅い CSS セレクターを無効にし、リソースを読み込む前にページ要素を事前計算して、ページのパフォーマンスを向上させます。

AMP キャッシュ

キャッシュは、ページのパフォーマンスを改善するためのよく知られた手法です。 AMP は、有効な AMP ドキュメントの AMP キャッシュの形式で、プロキシベースのコンテンツ配信ネットワークを利用します。

AMP キャッシュには、独自の検証システムが付属しています。 システムは、AMP HTML 仕様に対してページのマークアップを検証する一連のアサーションを使用します。

検証システムの別のバージョンは、検証エラーをブラウザーのコンソールに直接記録し、パフォーマンスと UX に影響するコードの変更を確認できるようにします。

最適化手法

AMP フレームワークを構成するコア コンポーネントがわかったところで、ページの高速読み込みを可能にする最適化手法について見ていきましょう。

非同期 JavaScript 実行

JavaScript はページのレンダリングを遅らせ、DOM の構築をブロックする傾向があるため、AMP は非同期 JavaScript のみを許可します。 JavaScript がレンダリングを遅らせないようにすることが重要です。そうしないと、ページの読み込み速度に直接影響します。

すべてのリソースの静的サイズ

AMP は、リソースが読み込まれる前に各要素のサイズと位置を決定することを好みます。 これが、画像や広告などの外部リソースが HTML サイズを示す必要がある理由です。 この情報を利用して、AMP はリソースのダウンロードを待たずにページのレイアウトを読み込みます。

伸縮機構

AMP は速度を上げるために多くの不要な Javascript、CSS、および HTML をブロックしますが、ライトボックスやソーシャル メディアの埋め込みなどの要素の拡張を許可します。

サードパーティの JavaScript を使用しない

サードパーティの JavaScript は、同期読み込みのために読み込み時間が遅くなります。 AMP ページでは JavaScript を使用できますが、サンドボックス化された iframe でのみ使用できます。 サンドボックス化により、Javascript はメイン ページの実行をブロックできません。

インラインおよびサイズ制限のある CSS

CSS は肥大化を引き起こす傾向があり、レンダリングも遅延します。 AMP HTML はインライン スタイルを使用して、ウェブページへの多くの HTTP リクエストを削除します。 インライン CSS 用に 50 KB を確保する必要があります。これは、洗練された Web ページに十分なスペースです。

効率的なフォント トリガー

一般的なページは、同期スクリプトといくつかの外部スタイルで構成されています。 スクリプトが読み込まれるまで、ブラウザーはフォントをダウンロードしません。

GPU で高速化されたアニメーションのみを実行する

重いアニメーションには GPU アクセラレーションが必要です。 GPU はすべてのタスクをレイヤーで実行します。 それでも GPU はページ レイアウトを更新できません。 タスクを Web ブラウザーに任せますが、速度の観点からは効率的ではありません。

リソース読み込みの優先順位付け

AMP が高速を維持する 1 つの方法は、リソースの読み込みを優先することです。 必要に応じてリソースをロードするだけでなく、遅延ロードされたリソースもプリフェッチします。

ページの即時読み込み

AMP は、ユーザーが移動先のページをポイントする前でもレンダリングされるため、即座に読み込まれます。 これは、多くの帯域幅や CPU を使用することなく、AMP 事前接続 API によって可能になります。

AMP の利点

アプリのページが標準より速く読み込まれると、ユーザー エクスペリエンスが向上します。 これにより、さまざまなデバイスやプラットフォームでの Web エクスペリエンスが向上します。 これらのイノベーションにより、AMP には多くの利点があります。

より多くの顧客を引き付ける

Web サイトの訪問者は、必要な情報をすぐに入手できます。 これは、AMP のロード時間の中央値が 1 秒未満であるため可能です。 このような短い読み込み時間は、ページのエンゲージメントを高め、訪問者が CTA に反応する可能性を高めます。

収益を最大化する

1 秒のダウンタイムがコングロマリットの市場価値の運命を左右するように、Web サイトで 1 秒の遅延が発生すると、コンバージョン率が 12% 低下します。 AMP は、ウェブサイト、広告、クリック後のランディング ページでより高速なユーザー エクスペリエンスを提供します。

柔軟性を維持する

AMP を使用すると、最適化された Web コンポーネントを使用する機会があります。 CSS を使用して Web ページのスタイルを設定し、データを取得してから、A/B テストを実施して、最高のユーザー エクスペリエンスを確保できます。

複雑さを軽減

AMP の作成プロセスは単純明快です。 CMS アーカイブを含め、アーカイブ全体を簡単に AMP に変換できます。 AMP ページを最適化するための特別なスキル セットは必要ありません。

ROIを最大化

AMP ページが作成されると、異なるプラットフォームに同時に配布されます。 AMP のこの機能により、AMP ページと非 AMP ページの両方で広告を使用できます。 したがって、広告を作成してすべてのプラットフォームでブランド体験を提供し、広告予算の ROI を最大化できます。

持続可能な未来を創造する

オープンソース プロジェクトである AMP は、より高速で優れたユーザー エクスペリエンスを提供することを目的としたアプリの構築を目指しています。 モバイル アプリやウェブサイトに AMP を導入することで、この持続可能な未来の一部になることができます。

ユーザー エクスペリエンスの向上

最終的な目標は、より優れたユーザー エクスペリエンスを構築することです。 AMP を使用すると、読み込み時間が 15% から 85% 速くなります。 ほんの 1 秒の改善にすぎないとしても、AMP を試す価値はあります。UX がどれだけ改善されるかに驚くかもしれません。

ブーストSEO

ウェブサイトをランク付けする際、Google のアルゴリズムはページの読み込み速度とモバイルの応答性を認識します。 モバイル Web サイトの読み込み時間は、ページ ランクを決定するのに役立ちます。 読み込みが速いほど、検索エンジンの結果ページで上位にランクされます。

AMP に最適化されたページには、タイトルの下に緑色の稲妻アイコンがあり、読み込み速度が速いことを示しています。 AMP 対応のページは、SERP の有料広告の上にカルーセル形式で表示されます。

AMP の制限事項

AMP ページが多くの利点を提供することは間違いありませんが、見逃せない欠点がいくつかあります。 ここにそれらのいくつかがあります。

サードパーティの JavaScript はありません

AMP は JavaScript を制限するため、開発者は分析機能を追跡できません。 その結果、カスタマイズされたユーザー エクスペリエンスを提供することが難しくなります。

Google アナリティクスの追跡なし

AMP が高速である理由は、AMP が Google アナリティクスを使用することも制限します。 Google は、サーバーからページを読み込む代わりに、AMP のキャッシュ バージョンを使用します。 GA 構成を作成し、別の追跡コードを使用しない限り、訪問者数は追跡されません。

AMP と他の最適化されたフレームワークの比較

AMP はモバイル ページの読み込み時間を短縮する革新的な方法ですが、最適化されたフレームワークは AMP だけではありません。 これが、代替案に反対する方法です。

AMP 対 Facebook インスタント記事

AMP ページと Facebook Instant Articles はどちらも、情報の読み込みプロセスを高速化します。 AMP ページは Web の代替手段と比較して人気がありますが、Facebook インスタント記事のエンゲージメント率と速度は AMP よりもはるかに高くなっています。 これは、Facebook がテキストとビデオの記事を優先し始め、開発者がインスタント記事の使用をやめたためです。

AMP 対レスポンシブ ウェブ デザイン

モバイル Web サイトは、2015 年に Google がモバイル フレンドリーなアルゴリズム (mobilegeddon と呼ばれるイベント) を開始して以来、Web アプリケーションを支配してきました。 レスポンシブ Web デザインで作成されたモバイル Web ページは、さまざまな画面サイズと向きに対応する柔軟な形式を提供します。

一方、AMP は 2016 年に登場し、Web ページの読み込み時間を高速化しました。 どちらのページもコーディング部分に Javascript と HTML を使用していますが、AMP は一般的に速度に重点を置いており、インスタント コンテンツ レンダリングも導入しています。

AMP は既存のレスポンシブ Web サイトと Web ページの再設計を必要とせずに結合しますが、レスポンシブ Web ページを開発して別のページと結合するには、再設計が必要です。 レスポンシブ Web デザインは、速度に取り組むのではなく、Web ページをスケーリングします。 AMP には、レスポンシブ Web デザイン ページよりもはるかに高速に Web ページを読み込むことができる、より制限された機能があります。

AMP 対 PWA

AMP は速度を重視して最適化されていますが、プログレッシブ ウェブ アプリケーション (PWA) はウェブサイトのルック アンド フィールを重視しています。 PWA は、ユーザー エクスペリエンスを中断することなく Web ページを動的に更新します。

AMP と PWA を併用すると、高速なページ レンダリング プロセスで動的な Web サイトを作成できます。

モバイルページを AMP 化する

AMP、Facebook Instant Articles、PWA などのさまざまな最適化されたフレームワークを使用すると、モバイル ページでのエンゲージメントの低下や直帰率の高さを言い訳にすることはできません。 AMP 最適化手法を利用して、強力なエクスペリエンスを提供し、Google の速度に対する期待に応えます。

AMP を使用してウェブサイトを最適化しますか? モバイル開発プラットフォームも必要です。 G2 で利用可能なすべてのオプションを参照してください。