AMPの実装方法（本当に必要な場合）：AcceleratedMobilePagesのクイックスタートガイド

検索者と検索エンジンはどちらも、ウェブページが非常に高速であることを望んでいます。 したがって、ページ速度がGoogleの検索アルゴリズムのランキング要素であることは当然のことです。

複数の調査によると、ページの読み込み時間もサイトの収益、つまりコンバージョンと収益に大きく影響します。

Accelerated Mobile Pages（AMP）の使用は、モバイルデバイスを使用しているユーザーのWebページを高速化する1つの方法です。

AMPには、追加のメリットがあります。Google検索のAMPカルーセルに表示され、検索者により良いエクスペリエンスを提供します。

AMPはあなたのサイトに適していますか？

もともと、AMPソリューションはメディアサイトを対象としていました。 Googleは、ニュース記事が検索結果からほぼ瞬時に表示されるように支援したいと考えていました。

時間の経過とともに、AMPは他のタイプのサイト、特に広告主、広告技術プラットフォーム、eコマースサイト、およびパブリッシャーに広がりました。

現在、一部のWebサイトはAMPの実装から恩恵を受けています。 小売業者や他の多くの企業は、AMPを使用してランディングページを高速に提供しています。 また、この形式の広告は表示される可能性が高くなります。

あなたがあなたのウェブページをより速くする方法を探しているなら、AMPはあなたにぴったりかもしれません。

レスポンシブで十分に高速なWebページには、AMPはまったく必要ありません。 グーグルのゲイリー・イリーズはこれを公に言った。 そして、このビデオクリップでその理由を説明します。

AMPを実装するための代替手段は何ですか？

• コンテンツ配信ネットワーク。 CDNは、サイトで最も重いリソースファイルをエンドユーザーに近づけることで機能します。 移動距離が短いほど配信が速くなるため、モバイルデバイスでのページの表示が速くなります。
• 完全に実装されたHTTP/2 。 HTTP / 2プロトコルは、Webでのデータ転送を高速化します。 したがって、市場のインターネット速度が4Gまたは5Gで、WebサイトがHTTP / 2に対応している場合は、おそらくAMPはまったく必要ありません。
• プログレッシブウェブアプリテクノロジー。 PWAを使用すると、Webサイトをネイティブモバイルアプリのように動作させることができます。 これらについては以前に書いたことがあります（プログレッシブWebアプリとはを参照）。

これがそのHTTP/2ステートメントを説明するためのストーリーです。

コンサルティングクライアントの1つである米国企業は、数千のWebページをAMPに変換しました。 4人のスタッフがプロジェクトを完了するために5週間働きました。

結果？ 彼らのAMPページは、モバイル検索ユーザーにわずかに速く表示されました。 しかし、ウェブサイトのランキングとトラフィックは影響を受けませんでした。 後から考えると、彼らの時間と労力は、新しいコンテンツの作成に費やされたほうがよいでしょう。

AMPソリューションは、ネットワーク速度が遅い国/地域で最も効果的です。 たとえば、Bruce Clay Indiaのオフィスは、一部のクライアントにAMPを実装するのに役立ち、良好な結果が得られています。

AMPが適切であり、開始する準備ができていると思われる場合は、基本的な最初のステップの概要を説明します。

AcceleratedMobilePagesを実装する方法

ウェブサイトにAcceleratedMobilePagesを実装して結果を追跡するには、次の3つの基本的な手順があります。

1. AMPページテンプレートを作成します。
2. AMPページを公開します。
3. 分析で追跡します。

以下で各ステップの詳細を確認します。詳細については、AMPのドキュメントにもリンクします。

サイトのどの部分をAMPにするかを決定したら、AMPページを作成、公開、追跡するための基本的な手順は次のとおりです。

1.AMPページテンプレートを作成します

AMPを実装する最初のステップは、Webページテンプレートを作成することです。

AMPは多くの異なるパブリッシングプラットフォームと統合されています。 AMPのクイックスタートガイドでリストを表示し、コンテンツ管理システムを選択して詳細を取得できます。

AMPテンプレートを最初から作成できます。 または、既存のHTMLページをAMP形式に変換することもできます。 ドキュメントには、すべてのオプションに関する情報が記載されています。

AMPテンプレートを作成するためのポインタ：

• AMPのページテンプレートを作成するときは、AMPの仕様を満たしていることを確認してください。 HTML形式などのガイダンスは、AMP仕様ページにあります。
• ページのスタイルを設定するとき、JavaScriptを自由に使用することはできません。 レイアウトの見栄えを良くするために必要な数のカスタム<amp*>タグを含めます。 これには、レスポンシブイメージ、ビデオ、およびオーディオの使用が含まれます（詳細については、AMPの置き換えを参照してください）。
• 複雑にしないでおく。 結局のところ、AMPのポイントは、クリーンで簡素化されたWebページを作成することです。
• 各ページにドメインへの何らかのナビゲーションを含めます。 ロゴ、画像、またはテキストからリンクできます。 AMPページはGoogleキャッシュから提供されるため、検索者にリンクを提供することは、AMPページをウェブサイトに保持するために不可欠です。
• Webページに広告を保持する必要がある場合は、それらを移行する必要があります。 amp-adコンポーネントを使用します。 <amp-ad>を使用できない場合は、AMPテンプレートに広告を含めないでください。 （AMPの広告について詳しくは、こちらをご覧ください。）
• 最後に、AMPページを検証します。 エラーまたは警告が1つだけ発生すると、ページがAMPキャッシュから除外されます。 したがって、検証は重要なステップです。 一般的な検証エラーについては、このページを確認してください。

AMPプロジェクトによって作成されたこのビデオでは、ページを検証する方法について説明しています。

2.AMPページを展開します

私は最初にAMPであなたのウェブサイトから1つか2つのタイプのページをテストするという考えが好きです。 理想的には、Googleがモバイル検索結果でAMPバージョンを提供しているかどうかを確認できるように、ランク付けされたページをいくつか含めます。

サイトのクロール速度によっては、GoogleがページのAMPバージョンを検出、チェック、インデックス作成するまでに数日かかる場合があります。

ロールアウトを少なくとも1か月間実行します（実行できる場合はそれより長くします）。 ページがトラフィックを獲得している限り、AMPをサイト全体に展開する価値があることを確認するのに十分なデータを構築します。

3.アナリティクスで追跡する

AMPページのパフォーマンスを追跡する必要があります。 AMPアナリティクスは通常のGoogleアナリティクスとは異なるため、このガイドを読んでその仕組みを理解してください。

社内またはサードパーティの分析を介してページを追跡できます。 多くの分析ベンダーには、amp分析用の組み込み構成があります。

amp-pixelを使用して、他のすべての単純な追跡とamp分析を行うことができます。

追跡を設定する際の技術的な推奨事項：

• 記録する内容を定義するには、必ず正規URLおよびその他の変数を使用してください。 これは、AMPによるトラフィックの増減を理解するために不可欠です。
• amp-analyticsでextraUrlParams属性を使用して、「type=amp」などの正規URLにクエリ文字列パラメータを追加します。 これにより、アナリティクスでAMPページを通常のウェブページと簡単に区別したり、必要に応じてカスタムセグメントを作成したりできます。 このようにして、AMPの起動前後のページの合計トラフィックを比較できます。

補足：AcceleratedMobilePagesの仕組み

AMPページがどのように瞬時に読み込まれるのか疑問に思われる場合は、通常のウェブページとは異なる方法で最適化されているためです。

以下に、ページを表示するためにブラウザが実行する必要のある作業量を削減するためにAMPが実行する最適化を要約します。 （AMPプロジェクトサイトの完全なリストを参照してください。）

AMPプロセスでできることは次のとおりです。

• 非同期JavaScriptのみを実行–大きなファイルがロードされるのを待ちません。
• リソース（画像、広告、iframeなど）のサイズを静的に設定する–ブラウザーは、ページが最初からどのようにレイアウトされるかを正確に認識しています。
• 拡張機能がレンダリングをブロックしないようにする–拡張機能が来る場合でもページを待つ必要はありません。
• サードパーティのJavaScriptをクリティカルパスから遠ざける–広告などはサンドボックス化されたiframeに制限されています。
• インラインCSSのみを許可–肥大化したCSSファイルはページを遅らせません。
• フォントのダウンロードが開始されるまでHTTPリクエストはありません–フォントの効率を維持します。
• スタイルの再計算を最小限に抑える–すべてのDOM読み取りは、ページをレイアウトするために事前に行われます。
• GPUで高速化されたアニメーションのみを実行–グラフィックスプロセッシングユニットは視覚的なアニメーション（変換と不透明度）を処理し、CPUへの負担を軽減します。
• リソースの読み込みに優先順位を付ける–最も重要なリソース（フォールドより上）が最初にダウンロードされます。
• 事前にレンダリングされたコンテンツを介してページをロードする–ユーザーが選択する前でも、折り畳み上のコンテンツが利用できる場合があるため、クリックするとすぐに表示されます。

このビデオでは、AMPがWebページを高速化する方法について説明します。

結論

AMPは、Webページを高速化し、モバイルユーザーにより良いエクスペリエンスを提供するための1つの方法です。

Webページを拡張する準備ができている場合は、この記事の基本的な手順とAMPのドキュメントに従って開始してください。 GoogleのAMPロードショーワークショップの1つに参加できる場合もあります（世界規模のスケジュールはこちらをご覧ください）。

しかし、ほとんどのサイトに対する私のアドバイスは次のとおりです。再考。

ビジネスにとって重要でない限り、AMPを実装しないでください。

Webページを別の形式に変換するために投資する時間は、すべてのユーザーに役立つ優れたコンテンツの作成に費やすほうがよいでしょう。

モバイル最適化の実践についてもっと知りたい場合は、利用可能なこれらのモバイルSEOサービスを必ずご覧ください。

この投稿を共有してください。 今後の新しい投稿が無料で受信トレイに配信されるようにするには、ブログを購読してください。