より速いページ読み込み速度を超えてユーザーエクスペリエンスを改善する9つの最新のAMPアップデート

公開: 2019-10-16

クイックリンク

署名された交換
サーバー側のレンダリング
入力マスキング
ビデオの最適化
最適化されたリスト
サードパーティの統合
ライトボックスモード
カスタムJavaScript
AMPツールボックス
InstapageAMPデモを入手する

Googleが2015年にAMPを発表して以来、ページの読み込み速度を上げ、モバイルユーザーエクスペリエンス全体を強化しています。オープンソースフレームワークの人気は高まり続けています。

それだけでなく、フレームワークは大幅に更新され、ページ上の要素の膨大な配列、より優れた機能とオプション、および改善されたインターフェイスをサポートします。これらはすべて、ユーザーエクスペリエンスを継続的に改善します。

これが最新の新しいAMPアップデートの一部です。

あなたがまだ気づいていないかもしれない9つのAMPアップデート

1.署名された交換

AMPが始まったとき、Googleはプライバシーを保護するインスタントロードWebコンテンツを配信するためにトレードオフを行いました。 1つは、アドレスバーに表示されるURLが、発行元のドメインではなく「google.com/amp」で始まっていることです。

これは、最も顕著なAMP批判の1つでした。ドメイン名はコンテンツのブランディングと公開に不可欠であるため、企業は、コンテンツが実際に由来するドメインの代わりにAMPURLをGoogleに表示することを望んでいませんでした。

2019年4月、Googleはソリューションを発表しました。これは、インスタント読み込み機能を維持しながらコンテンツの元のURLを表示する方法です。その解決策は署名された交換です。

グーグルは述べています：

署名された交換は、Webパッケージ仕様で定義されているファイル形式であり、ブラウザがドキュメントをオリジンに属しているかのように信頼できるようにします。 これにより、ファーストパーティのCookieとストレージを使用して、コンテンツをカスタマイズし、分析の統合を簡素化できます。

ただし、最も重要なのは、ユーザーがGoogle検索を使用して「http // google.com / amp」リンクではなくAMPリンクをクリックすると、署名されたエクスチェンジにサイト運営者の実際のURLが表示されることです。

これは2つの理由で大きな問題です。

ドメイン名はブランドアイデンティティの中核部分です
独自のURLを使用してAMP分析を取得する方が簡単です

（注：Googleは、パブリッシャー、ブラウザー、検索コンテキストがすべてサポートしている場合にのみ、署名付きエクスチェンジにリンクします。つまり、コンテンツの署名付きエクスチェンジバージョンと非署名付きエクスチェンジバージョンの両方を公開する必要があります。）

2.サーバー側レンダリング（SSR）

サーバーサイドレンダリング（SSR）は、AMPページをさらに高速にロードするために適用できる手法です。実際のところ、最大50％高速です。

SSRは、ページをクライアント側にレンダリングするフレームワークのfirst-contentful-paint time（FCP）を改善することによって機能します。クライアント側のレンダリングの欠点は、ページのレンダリングに必要なすべてのJavaScriptを最初にダウンロードする必要があることです。これにより、ページコンテンツの読み込み時間が遅くなり、バウンス率が高くなる可能性があります。

解決策として、AMP SSRはAMPボイラープレートコードを削除し、サーバー上でページレイアウトをレンダリングします。

（注：AMPボイラープレートコードは、ページの読み込み中にコンテンツがジャンプするのを防ぎ、AMPフレームワークがダウンロードされてページレイアウトが確立されるまでコンテンツを非表示にするために存在します。そのため、AMPページは他のクライアント側フレームワークと同じ問題を抱えています。 JavaScriptがダウンロードされるまでブロックされます。）

ボイラープレートコードを削除することにより、AMP SSRはFCP時間を50％高速化します。

SSRによるAMPの最適化は、AMP仕様のルールに違反するため、ドキュメントが無効になります。ただし、セットアップ中にフラグで示されている限り、AMPバリデーターはSSRされたAMPを有効なAMPとして扱います。

現在、AMPSSRで使用できるツールは2つあります。

AMPオプティマイザー—最適化されたAMPを生成するためのNodeJsライブラリ
AMP Packager —署名された取引所にサービスを提供する際に使用できるAgoコマンドラインツール

3.入力マスキング

オンラインでフォームに記入するのは非常に面倒なので、ユーザーは記入できません。これは、画面が小さく、ナビゲーションが難しいモバイルデバイスに当てはまります。しかし、ご存知のように、フォームはリードを収集して販売を完了するために不可欠です。

フォームの完成プロセスをより簡単で時間効率の良いものにするために、AMP対応の入力マスキング。この機能により、開発者はスペースやインタースティシャル文字などの書式を追加できます。これは、ユーザーが日付、支払いの詳細、電話番号などを入力するときに特に便利です。

今日のデジタル世界でオンラインで情報を送信する人が増えるにつれ、より簡単で高速なシステムを持つことですべての違いを生むことができます。

4.ビデオの最適化

AMPの多くの利点を高めるために、いくつかのビデオの改善が導入されました。

ドッキング
最適化が適切に実装されていない場合、モバイルWebページ上のビデオはユーザーの表示を妨げることがよくあります。これにより、ユーザーエクスペリエンスが低下し、将来のコンテンツを表示できなくなる可能性があります。

この新しいドック属性は、ユーザーがページを下にスクロールしたときに現在視聴されているビデオを最小限に抑え、障害物なしにコンテンツとビデオを同時に表示できるようにします。

ビデオがドッキングする場所と方法をカスタマイズして、ユーザーにビデオを提示するための最良の方法を見つけることもできます。

ビデオプレーヤー
もう1つの新しいアップデートは<amp-video-iframe>で、これを使用すると、必要なすべてのAMPビデオインターフェイス機能（自動再生、ドックなど）を含むカスタムビルドのビデオプレーヤーをインストールできます。

ビデオ広告
ビデオ広告は、IMA SDKをサポートする任意のビデオ広告ネットワークからAMPに統合および最適化できるため、広告と収益の両方を追跡できます。

5.最適化されたリスト

AMPは最近、Webページのリストを最適化するために2つの新しいコンポーネントを追加しました。

サイズ変更
<amp-list>を使用すると、ユーザーの操作時にリストコンテナーのサイズを変更して、さまざまな種類のコンテンツに合わせてサイズを変更するタイミングを指定できます（たとえば、<amp-list>にユーザーがタップする<amp-accordion>が含まれている場合）。）。

無限スクロール
無限スクロールが利用できるようになったため、ユーザーがアイテムのリスト（検索結果、製品カードなど）の最後に到達すると、リストにはさらに多くのアイテムが自動的に入力されます。

これにより、ユーザーは「次へ」ボタンをクリックして別のリストページにアクセスする代わりに、1つのページからより多くのコンテンツにシームレスにアクセスできます。

6.サードパーティの統合

ブランドがユーザー情報を記録するには、Cookieとデータ収集が不可欠です。ただし、GDPRにより、データの同意とプライバシーに関するルールが厳しくなり、すべてのサイトで規制されています。これにより、多くのサイト運営者は、GDPRごとにデータを収集するためにサードパーティの同意管理プラットフォーム（CMP）に依存するようになりました。

これを念頭に置いて、AMPは<amp-consent>を立ち上げたため、CMPはAMPと簡単に統合できました。つまり、AMP対応のWebサイトは、互換性の問題なしに、引き続きCMPを使用してユーザーデータを収集および管理できます。また、データ同意UIを統合し、情報を提供する前にユーザーにプロンプトを表示することもできます。

7.ライトボックスモード

ライトボックスを介して画像を表示する—ユーザーが再び閉じるまで要素を展開して画面全体に表示することがますます一般的になっています。ただし、位置とサイズが異なる2つの画像間を補間する必要があるため、開発者がライトボックスモードにスムーズに移行するのは難しい場合があります。

これにより、AMP UIワーキンググループがライトボックスの遷移を最適化し、画像の視認性を向上させました。

現在、<amp-lightbox-gallery>は、広告主にWebサイトのさまざまなサイズを試して、ユーザーに画像を表示する方法を最適化する機会を提供します。

8.カスタムJavaScriptの可用性

最新のGoogleAMPアップデートの1つは、<amp-script>の可用性です。JavaScriptを別のワーカースレッドで実行するオプションを提供するため、広告主は、高速な読み込み速度を維持しながら、カスタムJavaScriptをAMPページに追加できます。

新しい<amp-script>を使用すると、既存のAMPコンポーネントでは不可能だったユースケースをカバーできます。また、AMPページと非AMPページでコードを共有したり、JavaScriptフレームワークを使用したりすることもできます。

AMPチームが<amp-script>用に作成したいくつかの例は次のとおりです。

Vueを使用したTodoMVC
パスワードチェッカー
D3.jsを使用した記事のデータ視覚化
次のセクションに進む前に、各セクションの検証が必要な複数ページのフォーム：

ただし、AMPのパフォーマンス保証を維持するには、いくつかの制約があります。

コンテンツのジャンプ—予期しないコンテンツのジャンプを回避するために、<amp-script>ではページのコンテンツを変更するためにユーザーの操作が必要です。
ページの読み込み— <amp-script>はユーザーの操作なしにページのコンテンツを変更しないため、ページの読み込み時にコンテンツを変更することもありません。
スクリプトサイズ—単一の<amp-script>で使用されるスクリプトは150kB未満である必要があります。
APIサポート—すべてのAPIがWeb Worker内でサポートされているわけではなく、一部のDOMメソッドとプロパティはまだ実装されていません

（注：<amp-script>は、React、Preact、Angular、Vue.js、jQuery、D3.jsなどの既に使用しているフレームワークと互換性があります。）

9.AMPツールボックス

AMP Toolboxは、AMPページの公開を簡素化するためのコマンドラインツールとJSAPIのコレクションです。ツールボックス内の各ツールは、個別にダウンロードして使用できます。

AMP CLI
AMP Toolboxに含まれるほとんどの機能で使用できるコマンドラインインターフェイスで、NPMを介してグローバルにインストールできます。

AMPリンター
新しいtoolbox-linterは、AMPドキュメントでよくある間違いやベストプラクティスをチェックします。

AMPオプティマイザー
AMP Optimizerサーバー側は、AMPパフォーマンスのベストプラクティスを実装することにより、AMPページのレンダリングパフォーマンスを向上させます。

AMPキャッシュURL
AMPページがすべてのAMPキャッシュで機能するかどうかを確認することをお勧めします。これを行うには、toolbox-cache-urlコンポーネントを使用できます。これは、発信元URLをAMPキャッシュURL形式に変換するためです。

AMPキャッシュリスト
これにより、すべての公式AMPキャッシュのリストが提供されます。これは、AMPドキュメントをAMPキャッシュからすばやく更新または削除するときに役立ちます。

AMP CORS
多くのAMPコンポーネント（amp-listやamp-stateなど）は、CORSリクエストを使用してリモートエンドポイントを利用します。 AMP CORSは、AMPページに必要なすべてのCORSヘッダーを自動的に追加する接続/エクスプレスミドルウェアです。

AMP検証ルール
これは、AMPバリデータールールをクエリするためのJavaScriptライブラリです。

InstapageAMPのクリック後のランディングページのデモを入手する

AMPはモバイルの最適化で一般的になっているため、このような一貫した更新は、開発者、パブリッシャー、および広告主にとって不可欠であり、有益です。上記の最新のアップデートはすべて、ユーザーエクスペリエンスを改善し、ブランドにウェブサイトの機能とページ上のエンゲージメントを強化するための実験とテストを行うためのより多くのオプションを提供するのに最適です。

AMPの広告クリック後のエクスペリエンスについては、カスタマイズされたInstapage AMPデモを入手して、デザイナーフレンドリーなビルダー、組み込みのバリデーター、高度な分析などを使用して、高速読み込みページを数分で作成する方法を確認してください。