AMPとは何ですか？ Accelerated MobilePagesの完全ガイド

公開: 2018-08-22

セクション1：Accelerated Mobile Pagesとは何ですか？

モバイルファーストの考え方は定着しています。この声明は、ビジネス側と消費者側の両方に当てはまります。

ユーザーに言うと、購入する前に携帯電話に相談するのは非常に控えめな表現です。モバイルインターネットの使用量は、世界中のデスクトップモバイルの使用量を上回っています。インド、メキシコ、インドネシアなどの国でさえ、スマートフォンの使用量はデスクトップの使用量の4倍以上です。

米国だけでも、毎日300億のモバイルの瞬間（顧客が電話を調べてすぐに答えを期待する瞬間）があります。これは、あなたのブランドがユーザーに欲しいものを提供するために毎日300億のモバイル機会を持っていることを意味します。

それでも、モバイル広告の支出はモバイルメディアの消費に遅れをとっています。

ユーザーが購入するのではなくモバイルでブラウジングすることに多くの時間を費やすのには理由があります。ユーザーはモバイルデバイスを使用していると、すぐに満足できることを望んでいます。

この質問に答えてください–モバイルウェブページが読み込まれるのをどのくらい待ちますか？

GoogleとSOASTAが収集したデータによると、消費者の40％が、読み込みに3秒以上かかるページを離れています。

3秒。

それはあなたがあなたの広告を好きでそれをクリックしたユーザーの注意を維持しなければならないすべての時間です。そして、あなたのウェブページが前述の時間にロードされないならば、あなたはそれがどれほど説得力があるかにかかわらず、無駄に広告を作成しました。悪いニュースは、データによると、ほとんどの小売モバイルサイトの読み込みに約6.9秒かかるという事実です。これは、ユーザーの40％がページを放棄するまで待つ時間の2倍以上です。

Webページの速度がバウンス率にどのように影響するか

モバイルWebページのバウンス率を測定する場合、速度は重要な要素です。これをさらに掘り下げる前に、速度は主にモバイルサイトのバウンス率の2つの側面、つまりDOMの準備時間とページ全体の読み込み時間で考慮されることを説明することが重要です。

1. DOM準備時間： DOM準備時間は、ページのHTMLコードがブラウザーによって受信され、解析されるのにかかる時間です。これは、バウンス率の最大の予測因子です。 HTMLコードがいつ受信されて解析されるかをユーザーが認識していない場合でも、画像などのページ要素をロードする前に、コードをロードする必要があります。 HTMLコードに時間がかかりすぎると、Webサイトの読み込み時間が遅くなります。モバイルWebページのDOM準備時間を短縮するには、ブラウザーがHTMLコードを解析するのをブロックおよび防止するJavaScriptの使用を避けるのが最善です。 JavaScriptを使用するページ要素には、ページをロードする前に外部サーバーからフェッチする必要があるサードパーティの広告とソーシャルウィジェットが含まれます。

2.全ページの読み込み時間：全ページの読み込み時間には、画像、フォント、CSSコードなどがウェブページに読み込まれるまでにかかる時間が含まれます。全ページの読み込みが速いほど、バウンス率が低くなります。

ウェブページの全ページの読み込み時間を短縮するには、画像やフォントを最適化し、読み込み時間が遅くなる可能性のあるサードパーティのファイルを避ける必要があります。

ページの読み込み時間は、ページバウンスの最大の理由の1つです。さらに悪いことに、ユーザーはページを放棄するだけでなく、調査によると、ユーザーの79％は、ウェブページでのエクスペリエンスが遅いと戻ってこないでしょう。

ページの読み込み速度に関する次の驚くべき啓示を検討してください。

平均的なモバイルサイトは、3G接続を介してロードするのに19秒かかり、モバイルサイトの77％はロードするのに10秒以上かかります。
Googleは、ウェブページの読み込みに1秒かかるごとに、コンバージョンが20％減少することを発見しました。比較すると、5秒で読み込まれたサイトは、19秒で読み込まれたサイトの2倍のモバイル広告収益を上げました。
ユーザーの61％は、アクセスに問題があったモバイルサイトに戻る可能性はほとんどありません。

これは何を意味するのでしょうか？

モバイルページの読み込みが瞬時に行われず、ユーザーにとって十分な速度がない場合、モバイルページはバウンスし、おそらく戻ってこないでしょう。
これがモバイルWebページで発生しないようにするには、モバイルWebサイトを増幅してクリック後のランディングページを作成することが重要です。

AMPとは何ですか？

Googleは、モバイルウェブページが最適な速度で動作することを保証するために、Accelerated MobilePagesオープンソースプロジェクトを立ち上げました。

AMPプロジェクトは、デバイスや配信プラットフォーム間で一貫して高速、美しく、高性能なWebページと広告を作成できるようにすることで、「未来のWebを一緒に構築する」ことを目的としています。

AMPは、何千もの開発者、発行者、Webサイト、流通会社、および技術会社と共同で構築されました。これまでに15億を超えるAMPページが作成されており、100を超える主要な分析、広告技術、CMSプロバイダーがAMP形式をサポートしています。

AMP形式でモバイルページを作成すると、次のようになります。

1.パフォーマンスとエンゲージメントの向上： AMPオープンソースプロジェクトで作成されたページはほぼ瞬時に読み込まれ、モバイルとデスクトップの両方でスムーズで魅力的なエクスペリエンスをユーザーに提供します。

2.柔軟性と結果：企業は、KPIを維持および改善しながら、コンテンツの提示方法と使用するテクノロジーベンダーを決定する機会があります。

以前にAMPページをクリックしたことがあるかもしれませんが、気づかなかっただけです。あなたが気づいたかもしれない唯一のことはあなたがクリックした後どれだけ即座にページであるかということでした。 AMPで作成されたWebページでは、検索結果に稲妻インジケーターが表示されます。

検索結果でAMPを認識する方法は次のとおりです。

これは、通常のWebページと比較したAMPページの外観です。

AMPページがすぐに読み込まれる理由は、AMPがHTML / CSSとJavaScriptを制限し、モバイルWebページのレンダリングを高速化できるためです。通常のモバイルページとは異なり、AMPページはGoogle AMPキャッシュによって自動的にキャッシュされるため、Google検索での読み込み時間が短縮されます。

ユーザーは、モバイルデバイスを使用しているときに一定の期待を抱き、意味のある、関連性のある、より高速なエクスペリエンスを求めています。ターゲットオーディエンスの期待に確実に応えるには、AMPが最善の策です。

このガイドでは、AMPオープンソースプロジェクトについて知っておく必要のあるすべてのことを説明します。 AMPがどのように機能するか、およびページの読み込みが非常に高速になる理由について、正確な手順を説明します。

このガイドでは、AMPの使用がさまざまな業界のビジネスのコンバージョンを増やすのにどのように役立ったか、およびページをAMP化したときに得られるメリットについてのケーススタディも取り上げます。最後のセクションでは、Accelerated Mobileのクリック後のランディングページとは何か、および訪問者により速く、より関連性の高いクリック後のランディングページを提供するためにページを作成する必要がある理由について説明します。

セクション2：AMPはどのように機能しますか？

Googleは2016年2月にAcceleratedMobile Pages（AMP）オープンソースフレームワークを立ち上げました。このフレームワークは、ユーザーが日常的に扱う不格好で遅いモバイルエクスペリエンスではなく、最適化された緊密に統合されたユーザーエクスペリエンスを作成する必要があったために構築されました。基本。

Googleは、最適化されたモバイルウェブページエクスペリエンスを作成するための正確なパスを提供するフレームワークを作成するためにAMPプロジェクトを開始しました。 AMPオープンソースプロジェクトは十分に文書化されており、簡単に展開でき、検証可能であり、Webページのデザインでユーザーファーストを優先することについて意見が分かれています。

ほぼ2年前の立ち上げ以来、2500万のドメインが40億を超えるAMPページを公開しています。

発売によりAMPページの数が増えるだけでなく、速度も上がるため、Google検索からAMPページを読み込むのにかかる時間の中央値は0.5秒未満になりました。

AMPを使用すると、ウェブサイトのトラフィックが10％増加し、ページでの滞在時間が2倍になります。 AMPを使用するeコマースウェブサイトでは、AMP以外のページと比較して売り上げとコンバージョンが20％増加します。

AMPは、企業がWebページの合理化された、クリーンで関連性のあるバージョンを作成するのに役立ち、ユーザーに高速なモバイルWebエクスペリエンスを提供します。

Chartbeatは、2016年6月から2017年5月までのAMPを使用した360のウェブサイトのデータを分析し、AMPページを使用する一般的なサイト運営者がAMPコンテンツのすべてのモバイルトラフィックの16％を確認したことを確認しました。

AMPページの読み込みは標準のウェブページの約4倍であり、ユーザーは標準のモバイルウェブページよりもAMPページを35％多く利用しています。

AMPページを使用する理由がわかったところで、AMPの仕組み、レスポンシブWebデザイン、Facebookのインスタント記事、プログレッシブWebアプリとの比較を見てみましょう。

AMPの3つのコアコンポーネント

AMPページは、次の3つのコアコンポーネントで構築されています。

AMP HTML

AMP HTMLは基本的にHTMLですが、信頼できるパフォーマンスのためにいくつかの制限があります。最も単純なAMPHTMLファイルは次のようになります。

AMP HTMLのほとんどのタグは通常のHTMLタグですが、一部のHTMLタグはAMP固有のタグに置き換えられています。これらのカスタムタグはAMPHTMLコンポーネントと呼ばれ、一般的なタグパターンをパフォーマンスの高い方法で簡単に実装できます。 AMPページは、検索エンジンやその他のプラットフォームでHTMLタグによって検出されます。

ページの非AMPバージョンとAMPバージョン、またはAMPバージョンのみを選択できます。

AMP JavaScript（JS）

AMP JSライブラリは、AMPHTMLページの高速レンダリングを保証します。 JSライブラリは、インラインCSSやフォントトリガーなど、AMPのすべてのベストパフォーマンスプラクティスを実装します。これにより、リソースの読み込みが管理され、カスタムHTMLタグが提供されてページのレンダリングが高速になります。

AMP JSは、外部リソースからのすべてを非同期にするため、ページ上の何もレンダリングをブロックすることはできません。 JSは、すべてのiframeのサンドボックス化、リソースが読み込まれる前のすべてのページ要素のレイアウトの事前計算、低速のCSSセレクターの無効化など、他のパフォーマンス手法も使用します。

AMPキャッシュ

Google AMPキャッシュは、キャッシュされたAMPHTMLページを提供するために使用されます。 AMPキャッシュは、すべての有効なAMPドキュメントを配信するために使用されるプロキシベースのコンテンツ配信ネットワークです。キャッシュはAMPHTMLページをフェッチしてキャッシュし、ページのパフォーマンスを自動的に向上させます。

最大の効率を維持するために、AMPキャッシュは、HTTP 2.0を使用している同じオリジンから、ドキュメント、JSファイル、およびすべての画像を読み込みます。

AMPキャッシュには、ページの動作が保証されていること、およびページの速度を低下させる可能性のある外力に依存しないことを確認する検証システムが組み込まれています。検証システムは、ページのマークアップがAMPHTML仕様を満たしていることを確認する一連のアサーションで動作します。

検証システムの追加バージョンは、すべてのAMPページと一緒に利用できます。このバージョンでは、ページがレンダリングされたときに検証エラーをブラウザーのコンソールに直接記録できるため、パフォーマンスとユーザーエクスペリエンスに影響を与える可能性のあるコードの複雑な変更を確認できます。

AMPの3つのコアコンポーネントは連携して機能し、ページをすばやく読み込むことができます。次のセクションでは、AMPページを非常に高速にするために組み合わせる7つの最適化手法について説明します。

すべてのAMPJavaScriptは非同期で実行されます

JavaScriptはページのあらゆる側面を変更でき、DOMの構築をブロックし、ページのレンダリングを遅らせることができます。どちらの要因もページの読み込みを遅くします。 JavaScriptがページのレンダリングを遅らせないようにするために、AMPは非同期JavaScriptのみを許可します。

AMPページには作成者が作成したJavaScriptは含まれていません。代わりに、すべてのインタラクティブページ機能はカスタムAMP要素によって処理されます。これらのカスタムAMP要素にはJavaScriptが含まれている場合がありますが、パフォーマンスの低下を引き起こさないように注意深く設計されています。

AMPはiframeでサードパーティのJavaScriptを実行しますが、ページのレンダリングをブロックすることはできません。

すべてのリソースは静的にサイズ設定されます

画像、iframe、広告などのすべての外部リソースは、ページリソースがダウンロードされる前に、AMPが各要素のサイズと位置を決定できるように、HTMLサイズを指定する必要があります。 AMPは、リソースのダウンロードを待たずにページのレイアウトを読み込みます。

AMPには、ドキュメントのレイアウトをサイズのレイアウトから分離する機能があり、ドキュメント全体をレイアウトするために必要なHTTPリクエストは1つだけです。 AMPは、ブラウザでの高価なスタイルのレイアウトや再計算を回避するように最適化されているため、ページリソースの読み込み時に再レイアウトは行われません。

拡張メカニズムはレンダリングをブロックしません

AMPは、拡張メカニズムがページレンダリングをブロックすることを許可しませんが、ライトボックスやソーシャルメディアの埋め込みなどの要素の拡張をサポートします。これらは追加のHTTPリクエストを必要としますが、ページのレイアウトとレンダリングをブロックしません。

ページがカスタムスクリプトを使用する場合、最終的にカスタムタグが付けられることをAMPシステムに通知する必要があります。次に、AMPは必要なタグを作成して、ページの速度が低下しないようにします。たとえば、amp-iframeタグがAMPにamp-iframeタグがあることを通知する場合、AMPは、何が含まれるかを知る前にiframeボックスを作成します。

すべてのサードパーティのJavaScriptはクリティカルパスから除外されます

サードパーティのJavaScriptは同期JS読み込みを使用します。これにより、読み込み時間が遅くなる傾向があります。 AMPページはサードパーティのJavaScriptを許可しますが、サンドボックス化されたiframeでのみ許可されます。これを行うことにより、JavaScriptの読み込みでメインページの実行をブロックすることはできません。サンドボックス化されたiframeJavaScriptが複数のスタイルの再計算をトリガーしたとしても、それらの小さなiframeにはほとんどDOMがありません。

iframeの再計算は、ページのスタイルとレイアウトを再計算するのに比べて非常に高速に実行されます。

CSSはインラインでサイズに制限されている必要があります

CSSはレンダリングをブロックし、すべてのページの読み込みもブロックし、肥大化を引き起こす傾向があります。 AMP HTMLはインラインスタイルのみを許可します。これにより、ほとんどのWebページへの重要なレンダリングパスから1つまたはほとんど複数のHTTPリクエストが削除されます。

インラインスタイルシートの最大サイズは75kbである必要がありますが、これは非常に洗練されたページには十分な大きさですが、それでもページ作成者は適切なCSS衛生を実践する必要があります。

フォントのトリガーは効率的です

Webフォントは通常サイズが大きいため、高速読み込みにはWebフォントの最適化が重要です。いくつかの同期スクリプトといくつかの外部スタイルシートを含む一般的なページでは、ブラウザはすべてのスクリプトが読み込まれるまでフォントのダウンロードを待機します。

AMPフレームワークは、すべてのフォントのダウンロードが開始されるまで、HTTP要求をゼロと宣言します。これが可能になるのは、AMPのすべてのJavaScriptにasync属性があり、インラインシートのみが許可されており、ブラウザーによるフォントのダウンロードをブロックするHTTPリクエストがないためです。

スタイルの再計算が最小限に抑えられます

AMPページでは、すべてのDOM読み取りがすべての書き込みの前に行われるため、フレームごとにスタイルの再計算が1回だけ行われるため、ページのレンダリングパフォーマンスに悪影響を与えることはありません。

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

高速最適化を実行するには、GPUで実行する必要があります。 GPUはレイヤーで動作し、これらのレイヤーでいくつかのことを実行する方法を知っています。レイヤーは移動したりフェードしたりできます。ただし、GPUがページレイアウトを更新できない場合、GPUはこのタスクをブラウザに提供するため、ページの読み込み時間には適していません。

アニメーション関連のCSSのルールにより、アニメーションをGPUで高速化できるようになります。つまり、AMPでは、ページレイアウトが不要になるため、変換と不透明度でのアニメーションと遷移のみが許可されます。

リソースの読み込みが優先されます

AMPはすべてのリソースの読み込みを制御し、リソースの読み込みに優先順位を付け、必要なものだけを読み込み、遅延読み込みされたすべてのリソースをプリフェッチします。

AMPがリソースをダウンロードすると、ダウンロードが最適化されるため、最も重要なリソースが最初にダウンロードされます。すべての画像と広告は、ユーザーに表示される可能性が高い場合、スクロールしなければ見えない位置にある場合、または訪問者がスクロールする可能性がある場合にのみダウンロードされます。

AMPには、遅延ロードされたリソースをプリフェッチする機能もあります。これらのリソースは可能な限り遅くロードされますが、可能な限り早くプリフェッチされます。このように、物事は非常に高速にロードされますが、CPUはリソースがユーザーに表示される場合にのみ使用されます。

即座にページをロード

新しいAMP事前接続APIは、HTTPリクエストが行われるとすぐに可能な限り高速になるように、頻繁に使用されます。このため、ユーザーがナビゲートすることを明示的に指定する前にページがレンダリングされるため、ユーザーが実際にページを表示するまでにページが使用可能になり、ページが即座に読み込まれる場合があります。

AMPは、Webコンテンツを事前レンダリングするときに多くの帯域幅とCPUを使用しないように最適化されています。 AMPドキュメントがインスタントロード用に事前レンダリングされると、フォールドより上のリソースが実際にダウンロードされ、サードパーティのiframeなどのCPUを大量に消費する可能性のあるリソースはダウンロードされません。

次のビデオを使用して、「AMPがページを高速化する7つの方法」を確認することもできます。

AMPがどのように機能するかがわかったところで、AMPがFacebookのインスタント記事、レスポンシブWebデザイン、プログレッシブWebアプリとどのように比較されるかを見てみましょう。

AMP対Facebookのインスタント記事

Facebookは2015年にInstantArticlesを立ち上げ、出版社がFacebookの人々に信じられないほど高速で没入型の読書体験を提供できるよう支援しています。 Facebookのインスタント記事は次のとおりです。

標準のモバイルウェブ記事の10倍の速さ
平均して20％多くのインスタント記事が読まれます
70％の読者は、インスタント記事を放棄する可能性が低くなります

Instant Articlesは、パブリッシャーがFacebook上で高速でインタラクティブな記事を作成するのに役立ちます。これらには、次の利点があります。

高速で応答性：ユーザーがどの接続やデバイスを使用しているかに関係なく、インスタント記事は即座に読み込まれます。記事は、モバイルストーリーテリング体験に変換されるため、使いやすいです。
インタラクティブで魅力的：記事の没入型エクスペリエンスにより、記事はよりインタラクティブになります。そのため、インスタント記事はモバイルWeb記事よりも30％頻繁に共有されます。ニュースフィードであなたのストーリーのリーチを拡大するのに役立ちます。
簡単で柔軟な現金化：現金化はインスタント記事の不可欠な部分です。 Articlesでビジネスを成長させるために、直接販売された広告を拡張し、利用可能な広告在庫をFacebookのオーディエンスネットワークで埋め、さらにはネイティブブランドのコンテンツを作成することもできます。

AMPページとInstantArticlesはどちらもユーザーに高速な読み込み時間を提供し、ページのバウンス率を下げてエンゲージメントを高めるのに役立ちます。実際、Facebookのインスタント記事はAMPページよりもさらに高速に読み込まれます。

ただし、AMPページの採用率はインスタント記事よりもはるかに高く、これは主にFacebookがニュースフィードのテキスト記事よりもビデオを優先するようになっているためです。これにより、New YorkTimesやTheGuardianなど、いくつかの出版社がInstantArticlesの使用を停止しました。

パセリによると、グーグルはパブリッシャーの外部トラフィックのトップソースとしてフェイスブックを追い抜いた。 Googleは現在、サイト運営者の外部トラフィックの42％を占めています。

しかし、Facebookがメディアやコンテンツのウェブサイトへの主要なトラフィックソースとしてGoogleを超えてInstant Articlesを立ち上げたとき、AMPの立ち上げと成功により、Googleが再びリードを取り戻しました。

AMPプロジェクトの成功は、それがオープンソースイニシアチブであり、ビジネスパートナーシップではないという事実にあります。 FacebookがInstantArticlesで行ったように、ユーザーを特定のアプリに限定するのではなく、AMPプロジェクトは、パブリッシャーがモバイルWebページを作成する方法を変えることを目的としています。

AMPとレスポンシブWebデザイン（RWD）

Googleが2015年の初めにMobilegeddonを立ち上げて以来、モバイルフレンドリーなウェブサイトの作成はマーケターにとって優先事項でした。レスポンシブウェブデザインは、柔軟性に焦点を当てたウェブページの作成を支援することを目的としています。レスポンシブウェブページはどのデバイスや画面でも機能し、より優れた、より魅力的なモバイルウェブエクスペリエンスを提供します。

基本的に、AMPとレスポンシブウェブデザインはどちらも、ほぼ同じ基本的な構成要素を使用して、HTMLとJavaScriptなどのモバイルページを作成します。ただし、次のような違いがあります。

1. RWDは柔軟性に重点を置いています：レスポンシブウェブデザインはあなたのウェブサイトに柔軟性を追加します。訪問者の画面サイズに自動的に応答するページを作成できます。これにより、ページのリーチが可能になり、さまざまな画面サイズでユーザーに優れたモバイルエクスペリエンスを提供できます。レスポンシブウェブデザインは、純粋にモバイルに焦点を当てているわけではありませんが、すべてのデバイスとすべてのユーザーエクスペリエンスで機能します。

2. AMPは速度に重点を置いています： AMPオープンソースフレームワークは速度、特にモバイルページの速度に重点を置いています。 AMPは、モバイルWebコンテンツにインスタントレンダリングを導入しました。インラインスタイルシート、遅延読み込み、リソースのプリフェッチ、その他の最適化手法を使用することで、フレームワークはモバイルページを即座に読み込むことができます。

3. AMPはWebページで機能し、RWDはWebページを置き換えます。AMPをページでのみ使用することは可能ですが、AMPは、Webサイトを再設計せずに、既存のレスポンシブまたはレスポンシブWebサイトに追加することもできます。ただし、Webページをレスポンシブにするには、ページを再設計する必要があります。

4. AMPは、より優れたユーザーエクスペリエンスを提供します。モバイルユーザーエクスペリエンスを決定する主な要因は2つあります。つまり、ページ要素がモバイルフレンドリーで速度が速いということです。レスポンシブウェブデザインは、ユーザーの画面に合わせてページ要素をスケーリングすることでうまく機能しますが、AMPページと比較すると速度がひどく失敗します。

5. AMPにはJavaScriptの制限があります：レスポンシブWebデザインは、すべてのサードパーティスクリプトとメディアライブラリを優先します。AMPページについても同じことは言えません。ページの読み込みを高速化するために、AMPフレームワークのJavaScriptおよびCSS機能は非常に制限されています。

AMPは静的ページ（動的コンテンツをあまり含まないページ）に適していますが、RWDはあらゆるタイプのページに使用できます。ただし、レスポンシブWebページの読み込みには少し時間がかかりすぎるため、訪問者はバウンスし、おそらく二度と戻ってこないでしょう。ユーザーに高速でモバイルレスポンシブなエクスペリエンスを提供したい場合は、AMPページの使用を検討する必要があります。

AMPとプログレッシブウェブアプリ（PWA）

プログレッシブウェブアプリは、ウェブを通じて配信されるモバイルウェブアプリであり、ネイティブアプリのように動作します。PWAとネイティブアプリの主な違いは、PWAをGoogleやアプリストアからダウンロードする必要がないことです。

プログレッシブウェブアプリはウェブブラウザ内で動作するため、インターネット接続がそれほど強くなくても、すぐに読み込まれます。 PWAは事前キャッシュを使用してアプリが最新の状態に保たれるようにし、ユーザーが最新バージョンのみを表示できるようにします。

プログレッシブウェブアプリの必要性は、上位1,000のモバイルウェブサイトが上位1,000のネイティブアプリの4倍のユーザーにリーチするという事実から生じました。ただし、これらのWebサイトは、モバイルアプリよりも平均して20分の1の時間でユーザーを引き付けます。

つまり、モバイルWebサイトは訪問者を引き付けるのに適していますが、訪問者を引き付けることはできません。

PWAは、ネイティブモバイルアプリと同じように表示、操作、および動作するように設計されています。ユーザーは、他のモバイルWebサイトと同じように、ブラウザーでそれらに遭遇します。そのサイトを利用した後、ユーザーは自分のデバイスにWebアプリをインストールするように求められます。インストールすることを選択した場合、アプリはネイティブアプリと同じ方法でデバイスにダウンロードされます。

PWAは次のとおりです。

信頼性–ネットワークの状態が弱い場合でも即座にロードされます。
高速–スムーズなアニメーションで、ぎくしゃくしたスクロールなしで、ユーザーの操作にすばやく応答します。
魅力的–デバイス上のネイティブアプリのように感じ、没入型のユーザーエクスペリエンスを提供します。

モバイルウェブアプリがGoogleによって概説された必要な要件を満たしている場合、モバイルウェブアプリはユーザーにダウンロード可能として提供できます。

AMPとPWAの主な違いは次のとおりです。

AMPを使用して、高速でシンプルなエクスペリエンスを作成することもできます。プログレッシブウェブアプリを利用して、動的でありながら遅いユーザーエクスペリエンスを作成できます。または、両方をWebデザインに組み込むことで、すばやく開始して高速を維持することもできます。

今日、AMPをプログレッシブウェブアプリと一緒に使用することが一般的になりつつあり、開発者は3つの方法で両方を活用しています。

1.プログレッシブウェブアプリとしてのAMP

コンテンツが主に静的であり、AMPの限られた機能に満足できる場合、このオプションを使用すると、プログレッシブWebアプリとして超高速のエクスペリエンスを作成できます。例として、AMPは次のように構築されています—プログレッシブウェブアプリは完全にAMP課金されています。オフラインアクセスを許可するServiceWorkerと、「ホーム画面に追加」バナーを表示するマニフェストがあります。

2.プログレッシブウェブアプリへのAMP

AMPとプログレッシブウェブアプリを一緒に使用するもう1つの方法は、AMPページをウェブサイトへのフックと考えることです。瞬間的な負荷でユーザーを捕らえ、プログレッシブWebアプリケーションに巻き込みます。これにより、クイックロードAMPページを最初のオプションよりも動的なPWAと組み合わせることができます。

3.プログレッシブウェブアプリのAMP

AMPとPWAの場合のように、すべてまたはまったくである必要はありません。 AMPを使用してすべてのページを作成する必要はありません。また、AMPとPWAをフックとロッドとして分離する必要もありません。これで、実際には1ページの小さなサブセクションのみをAMPできるため、動的機能を完全にトレードオフすることなく、サイズを縮小し、読み込み時間を短縮できます。

これには、「シャドウAMP」と呼ばれる別の形式のAMPを使用することが含まれます。これにより、AMPをWebページの領域内にネストできます。結果は、プログレッシブWebアプリケーションのシェル内のAMPです。

ワシントンポストは、PWAとAMPが連携して、エンゲージメントを向上させ、読み込み時間を短縮する理想的な例を紹介しています。ワシントンポストが最初にウェブサイトをレスポンシブにしたとき、彼らの速度は3500ミリ秒でした。彼らがAMPを採用したとき、ページの読み込み時間は1200ミリ秒に短縮され、AMPCDNテクノロジーの助けを借りてさらに400ミリ秒に短縮されました。

ウェブサイトの負担を軽減するためにPWAを採用した後、ユーザーは中断することなく非常に高速なページの読み込み速度と、より優れたユーザーエクスペリエンスを楽しむことができました。

Accelerated Mobile Pagesプロジェクトを使用すると、すぐに読み込まれるモバイルページを作成できるため、訪問者はバウンスするのではなく、ページをより適切に利用できます。 AMPページの作成に関連する最適化手法により、ページの読み込み時間が短縮されるだけでなく、訪問者に優れたユーザーエクスペリエンスが提供されます。

次のセクションでは、ページでAMPフレームワークを使用したときに得られる正確なメリットに焦点を当てます。

セクション3：AMPのメリットと制限

AMPは、Webページの読み込みを高速化することで、ユーザーエクスペリエンスを向上させ、訪問者がページに長く留まるようにします。 AMPはAMPHTMLを使用して、モバイルページの読み込みを高速化します。実際、GoogleのGary Illayesによると、AMPページの読み込み時間の中央値は1秒で、平均的な標準HTMLページの4倍です。

ページのバウンス率とページ速度の関係についてはすでに説明しました。AMPの仕組みと、PWA、RWD、Facebookのインスタント記事との比較について詳しく説明しました。

ガイドのこのセクションでは、AMPのメリットと制限に焦点を当て、AMPページを作成するときに何のためにインストアしているのかを詳細に説明します。

AMPのメリット

モバイルウェブページの読み込みが速くなると、ユーザーエクスペリエンスとKPIが自動的に向上します。 AMPページを瞬時に読み込むことで、Google、LinkedIn、Bingなどのすべてのデバイスとプラットフォームで一貫して高速なウェブエクスペリエンスをユーザーに提供できます。

AMPは、モバイルページに次の利点を提供します。

視聴者を引き付ける

AMPページの読み込み時間の中央値は1秒未満です。つまり、ユーザーがAMPページにアクセスすると、探していたものがすぐに表示されます。ページが即座に読み込まれるため、ページとの関わりが長くなり、オファーについてよりオープンになります。これにより、ユーザーが実行したいアクションを実行する可能性が高くなります。

収益を最大化

ページがコンバージョンをロードするのにかかる1秒ごとに、12％減少します。つまり、オーディエンスを引き付けてROIを向上させたい場合は、モバイルページが訪問者の期待される速度を確実に満たすようにする必要があります。

AMPフレームワークを使用すると、広告、クリック後のランディングページ、Webサイトなど、あらゆる場所でユーザーに高速なエクスペリエンスを提供できます。

柔軟性と制御を維持する

AMP形式を採用すると、AMPに最適化されたWebコンポーネントを利用しながら、独自のブランドを維持することができます。 CSSを使用してWebページのスタイルをカスタマイズしたり、動的コンテンツを使用して必要に応じてデータをフェッチしたりできます。

また、A / Bテストを使用して、顧客にとって可能な限り最高のモバイルユーザーエクスペリエンスをテストおよび作成することもできます。

運用の複雑さを軽減する

AMPページを作成するプロセスは非常にシンプルで簡単です。 DrupalやWordPressを含むCMSを使用している場合は特に、アーカイブ全体を変換することができます。

各AMPページのコードを最適化するために特別なスキルを設定する必要はありません。AMP形式は完全に移植可能であり、ユーザーがどのようにアクセスするかに関係なく、AMPページは一貫して高速です。

ROIを最大化する

作成したAMPページは、さまざまな配布プラットフォームに同時に配布できます。これにより、AMPページと非AMPページの両方に広告を配信できます。つまり、広告を一度作成すれば、どこにでも印象的なブランドエクスペリエンスを提供できます。

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

AMPプロジェクトは、誰もがより優れた、より高速なモバイルユーザーエクスペリエンスを提供できるよう支援することで、ウェブの未来を保護するオープンソースイニシアチブです。 AMPプロジェクトに参加することで、AMPプロジェクトに参加し、オープンで高速なWeb上でビジネスの持続可能な未来を築くことができます。

より良いユーザーエクスペリエンスを提供する

もちろん、高速化されたモバイルのクリック後のランディングページを使用することの最も明らかな利点は、ユーザーの満足度がはるかに高くなることです。 2人に1人が、ウェブサイトが読み込まれるまでわずか10秒待つ必要がない場合、プロセスを15〜85％高速化すると、訪問者の幸せに大きな影響を与える可能性があります。

SEOブーストを取得

Googleのアルゴリズムは、ページ速度とモバイルの応答性を考慮に入れています。モバイルでのページの読み込みが速いほど、検索エンジンの結果ページでのランクが高くなります。

AMP対応のすべてのページは、検索結果の有料広告の上でもカルーセル形式で表示され、タイトルの下に緑色の稲妻が表示されます。

AMPページを使用すると多くの利点がありますが、AMPにはいくつかの欠点もあります。

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

サードパーティのJavaScriptを使用する機能がないため、ターゲットを絞った広告体験を提供できる分析および追跡機能に別れを告げる必要があります。

それだけでなく、Googleの軽量バージョンのJavaScriptでは、データの転送を必要とするページ要素をAMPページで使用することはできません。

GoogleAnalyticsの追跡なし

Googleは、サーバーにアクセスする代わりに、キャッシュされたバージョンのAMPページをユーザーに使用します。これが、AMPページの読み込みが非常に速い理由の1つです。キャッシュを使用するとページの読み込みが速くなりますが、GAを構成し、AMPページに個別のトラッキングコードを適用しない限り、Googleアナリティクスはユーザーからのアクセスを追跡しません。

Googleタグマネージャーを使用してGoogleアナリティクスでAMPページを追跡する方法は次のとおりです。

AMPページには一連の長所と短所がありますが、訪問者に高速で最適化されたモバイルエクスペリエンスを提供したい場合は、AMPの長所が短所を確実に上回ります。

次のセクションでは、AMPを使用してKPIを達成し、ROIを向上させた企業のケーススタディに焦点を当てます。

セクション4：AMPのサクセスストーリー

モバイルウェブページについて話すとき、速度は収益に等しい。 SOASTAの調査によると、ページの読み込み時間が100ミリ秒遅れても、コンバージョン率が低下する可能性があります。

AMPがモバイルウェブページに与える影響を強調するために、GoogleはForrester Consultingに、AMPを使用してサイト運営者とeコマースウェブサイト全体でEconomicImpact™の総合調査を実施するよう依頼しました。

この調査では、AMP形式を使用している4つのWeb企業に焦点を当てています。 Forresterは、4社の結果を見て、3年間のAMPの実装から期待される収益を予測するモデルを作成しました。

このモデルを利用すると、月間サイト訪問数が400万、利益率が10％のWebサイトは、AMPページの埋め込みコストを取り戻し、6か月未満の期間でプラスの利益を得ることが期待できます。

これらは、研究から収集された主要な結果です。

売上転換率が20％増加。この調査のためにインタビューした2つのeコマースWebサイトで実施されたA / Bテストでは、AMPページのコンバージョン率が20％増加し、Forresterモデルに基づいて年間利益が20万ドルを超えることが示されました。
AMPサイトのトラフィックが前年比で10％増加しました。モデルに基づくと、サイトトラフィックの増加により、追加の売り上げと広告ビューが発生し、最初の1年間でサイトの年間利益が75,000ドルを超えることになります。
1回の訪問あたりのページ数が60％増加します。 AMPページは、サイトにアクセスする人が60％増加し、サイトに滞在する時間が2倍になり、リピーターが0.3％増加したと述べた、eコマースとニュースのパブリッシャーにとって好調でした。

AMPは比較的新しいフォーマットであり、明らかに、その採用にはいくらかのコストがかかります。ただし、AMP形式を実装することの見返りは、初期コストを上回ります。

GizmodoはAMPページを使用して、モバイルで3倍高速になります

Gizmodoはユーザーエクスペリエンスに重点を置いており、トラフィックの半分はモバイルWebサイトからのものであり、読者にモバイルでコンテンツを利用してもらいたい場合は、Webサイトが高速で明確であることを確認することが不可欠です。

The blog implemented a number of optimization techniques in order to increase their mobile engagement, such as improving page load times, removing unnecessary page scripts, lazy loading for below the fold page elements, and setting a fallback font for web fonts. Still Gizmodo team thought something more could be done to improve user experience for mobile users.

Head of Gizmodo's Data Analytics, Josh Laurito felt this was their main challenge:

We delivered the same (large) JavaScript & CSS payloads to users on mobile and desktop, making it difficult to improve one experience without degrading the other.

Gizmodo found the solution to their problem by implementing the AMP framework in May 2016, and is currently publishing all their posts on AMP pages, they are even creating AMP versions of their previous posts.

Gizmodo has now published over 24,000 AMP pages and is receiving 100k visits to these pages daily:

AMP has helped make Gizmodo mobile pages 3x faster than the regular mobile website, and over 80% of Gizmodo's traffic from AMP pages is new traffic compared to under 50% of all mobile sessions. Plus, the blog has a 50% increase in impressions per page view on AMP.

TransUnion increases conversions with AMP

TransUnion had a problem of slow loading mobile pages that were causing higher bounce rates and lower mobile conversion rates compared to desktop conversion rates. The credit reporting agency wanted to create a best-in-class mobile website on their CMS, HP TeamSite to improve user experience and get the high return on investment.

TransUnion started using AMP with the hope of increasing mobile conversions at an efficient cost per order. As their website was already mobile friendly, TransUnion didn't need to redesign the content – they went online with AMP pages in a week.

The AMP pages loaded in 1.6 seconds on a 3G connection compared the non-AMP pages that loaded in 7.1 seconds. TransUnion's AMP pages quickly starting bringing 3% more conversions, bounce rate was lowered by 26% and users spent 2.5x more amount of time on the website:

Implementing AMP pages provides users with a faster mobile experience which leads to a decrease in bounce rates and an increase in conversions.

When engaging mobile visitors, creating AMP pages gives you the highest probability of engagement and conversions.

The next section will highlight the importance of AMP post-click landing pages, and how connecting optimized AMP ad post-click landing pages leads to better post-click landing page.

SECTION 5: Why you should create AMP post-click landing pages

The stats have spoken – fast loading pages lead to a lower bounce rate and higher conversions. The best way to create lightning-fast pages is with the AMP framework.

Though the AMP framework was first developed for news stories and articles, it has since then evolved to include AMP Ad post-click landing pages as well.

To ensure that mobile users experience doesn't stay restricted to websites, the AMP framework has introduced AMP Ad post-click landing pages – pages created in AMP HTML that load incredibly fast, in less than one second.

The Accelerated post-click landing page or (ALP) loads fast because of the following optimization techniques:

Pre-connect to post-click landing page: Typical ads don't know the URL of the actual post-click landing page. However, ads connected with ALPs always know the URL, this initiates a pre-connect request to the respective post-click landing page, and the page loads instantly.
Pre-fetch post-click landing pages: The non-CPU intensive resources that are visible on the first viewport of the post-click landing page are downloaded before the user clicks the ad, so the page loads instantly.
Using Google Cache URL: when you input a canonical destination URL for a creative, the ad server can switch it to the AMP version of the URL (with trafficker consent) using the AMP URL API. The ad server can also embed code required by the creative to pre-fetch and pre-connect to the post-click landing page. Ad servers like DoubleClick for Publishers (DFP) are integrating such features over the next couple of quarters to make trafficking of AMP post-click landing pages easy.
No redirects: AMP eliminates redirects to the ad server, AMP only initiates redirect requests once the user has landed on the post-click landing page. The format supports the amp-pixel component for third-party tracking redirects which can be performed on the post-click landing page.

AMPで構築されたクリック後のランディングページは、ユーザーがモバイルAMP広告をクリックしたときに開始する合理化されたモバイルエクスペリエンスを継続するためのフレームワークを使用して設計されています。

Here's how AMP Ad post-click landing pages compare to regular ad post-click landing pages:

This is how fast an ALP loads once the ad is clicked, not only that but the user can easily go back to the content they were reading before the clicked the ad:

Accelerated post-click landing pages give a better post-click landing page to visitors because:

Users will be more willing to click on ads when they know their ad expectations will be met.
Marketers will benefit from increased user engagement, lower bounce rate and higher conversions.
Marketers will benefit from boosted revenue with better ads while allowing their readers a way back to their content.

Creating ALPs seems like a no-brainer when you consider the fact that Google looks at post-click landing page experience as one factor to determine ad rank, which ultimately contributes to your click-through rate.

And while publishers have embraced frameworks like AMP to speed up web content delivery on mobile devices, the marketing industry has not yet caught up. As more consumers and B2B buyers spend more time on mobile, marketers and advertisers are forced to adapt with mobile-optimized campaigns.

Businesses that are using AMP pages are already seeing massive ROI, so what's holding you back from creating Accelerated post-click landing pages?

How to create AMP pages with Instapage

In February 2018 we announced our partnership with Google to develop Accelerated Mobile Pages (AMP) functionality in the Instapage platform. They invited us to speak at their global AMP Conference where we discussed How to Balance AMP Limitations with Optimization Features.

Fast forward to May 2018 and Instapage now empowers marketers with the ability to create post-click landing pages using the AMP framework. The AMP framework allows for faster page load speeds on mobile devices, enabling you to provide a better user experience for mobile browsing.

With this new Instapage capability, digital marketers can create AMP post-click landing pages directly from our platform in a matter of minutes just by following these steps.

Step 1: Create a new page

Select AMP Page from the modal:

The next screen prompts you to name the page. This is different than the standard builder where it asks which template you wish to use (or build from scratch). AMP pages are built from scratch, so no template options are available.

Step 2: Add elements to the page

The second difference you will see is that Timer and HTML widgets are absent from the toolbar, but you still have the remaining widgets:

AMP does not support HTML/CSS or JavaScript so you won't find those settings in the Instapage AMP builder. You will, however, still see these options:

Note: Collaboration (“Comment”) and Instablocks™ are both functional within the AMP builder. Unfortunately, heatmaps and Global Blocks are not applicable.

AMP post-click landing pages have a 75KB limit, and each widget in the Instapage AMP builder is weighted. As you build a page, a validator operates in the background so that your page doesn't exceed the 75KB limit. If you reach 80% of the limit, this warning indicator appears near the bottom of the screen:

Step 3: Create a variation to A/B test

Click “Create an A/B Test” and add a new variation or import one of your own:

With the new variation, you can either duplicate, pause, rename, transfer, or delete it at any time:

Step 4: Validate the page

As you continue building and approach the 75KB limit, another indicator appears requesting you validate the page to confirm it is within acceptable limits:

Should the page pass validation, you will see this on-screen message:

終了して[公開]をクリックすると、75KBの制限を超えた場合に通知されます。

検証が完了すると、ページを公開する準備が整います。

ステップ5：公開

WordPressとカスタムドメインは、AMPのクリック後のランディングページをInstapageに公開できます。青い公開ボタンをクリックした後、どちらの方法も選択できます。

WordPressの場合、WebサイトのInstapageプラグインをインストールしてサインインし、新しいAMPのクリック後のランディングページをWordPressに公開します。

それ以外の場合は、ドメインとサブドメインを入力します。

ページが公開されるとすぐに、ダッシュボードのページの横にAMPロゴが表示されます。

モバイルページでバウンス率が高く、ページの読み込み速度が遅いために訪問者のエンゲージメントが低い場合は、AMPページを作成することをお勧めします。

AMPフレームワークは、ページ速度だけでなく、ユーザーに快適なモバイルエクスペリエンスを提供する最適化手法を展開します。 AMP広告のクリック後のランディングページを作成すると、最適化された、高速で関連性の高いクリック後のランディングページを訪問者に配信できます。

Instapageは現在、GoogleのAMPフレームワークを使用してモバイル向けに最適化されたクリック後のランディングページを作成できる唯一のクリック後のランディングページプラットフォームです。 AMPで作成されたクリック後のランディングページは、ほぼ瞬時に読み込まれ、スムーズにスクロールします。

今すぐInstapageでAMPページの作成を開始して、モバイルブラウジングエクスペリエンスを向上させ、品質スコアを向上させ、より多くのコンバージョンを生成してください。