モバイルページの高速化: WordPress モバイル最適化用 AMP

インターネットでのサーフィンやブラウジングは、高速かつ簡単である必要があります。ウェブマスターは、ウェブサイトのパフォーマンスを最適化し、サイトの速度を向上させることでこれを可能にしようと常に努力しています。これを達成するための優れた方法は、WordPress 用 AMP を使用することです。

Web サイトは主に大きな画面向けに設計されています。しかし、より小さな画面の数は増えており、ラップトップやパーソナルコンピュータを追い越すことさえあります。現在、モバイルはデジタルメディア時間の 65% を占めています。ハンドヘルドデバイスでは、大きな画面と同じくらい、またはそれ以上の速度でページを読み込む必要があります。

コンテンツの高速読み込みに対するこの需要を満たすために、特定のモバイルプラットフォーム向けに設計されたアプリが Apple (ニュース)、Facebook (インスタント記事)、Snapchat (Discover) で利用可能です。今年初め。 Google は、モバイルコンテンツの配信を高速化し、より良いユーザーエクスペリエンスを提供するために、Accelerated Mobile Page（AMP）を導入しました。

AMPとは何ですか?

AMP プロジェクトは、2015 年 10 月に Google によって発表され、2016 年 2 月に開始されました。これは、パブリッシャーにモバイルに最適化されたコンテンツを一度作成すれば、モバイルウェブ上のあらゆる場所に即座に読み込まれる手段を提供するオープンソースの取り組みです。

2016 年 2 月 24 日、Google はモバイル検索結果ページのカルーセルに AMP 準拠のコンテンツの展開を開始しました。ユーザーはカルーセルをスワイプして、読みたい項目をタップできます。 Pinterest は、通常のモバイルに最適化されたページに比べて、ページが 4 倍高速になり、使用するデータ量が 8 分の 1 になったと報告しています。これは、ページのフォーマットと配信方法によって可能になります。

2016 年 8 月の時点で、Google 検索のインデックスには 1 億 5,000 万件を超える AMP ドキュメントがあり、毎週 400 万件のペースで増加しています。 8月初旬、Googleは強化コンテンツ向けのGoogle検索のプレビューも開始した。今年後半にはさらに広範囲に導入される予定だ。

検索プレビューの AMP

ここで、AMP 対応検索の高速読み込みページを垣間見ることができます。携帯電話のリンクを使用して確認してください (デスクトップでは機能しません)。

どの Web サイトで AMP を使用する必要がありますか?

2月にこのプロジェクトが出版社向けに開始された。しかし、AMP の採用は出版業界をはるかに超えて、エンターテイメント、旅行、電子商取引などに広がっています。

早期導入者からは好意的な報告が届いています。 Washington Post は、AMP ドキュメントの読み込み時間が 88% 改善され、携帯電話からのリピーター数が 23% 増加したと報告しています。 eBay は、AMP に切り替えている大手 e コマース企業の 1 つで、1,500 万近くの AMP ベースの商品閲覧ページを抱えています。近いうちに、これらのページは検索で発見されるようになることが予想されます。

では、どの Web サイトが AMP を使用すべきでしょうか?トラフィックをモバイルに大きく依存しているユーザーは間違いありません。しかし、ますます多くのユーザーがモバイルデバイスを使用してインターネットを閲覧することを選択していることを考慮すると、WordPress (または任意の Web サイト) 用の AMP は良い追加になるかもしれません。

AMP では何が違うのでしょうか?

このコンテンツ配信システムは AMP HTML フレームワークに基づいており、通常の HTML よりも高速です。

これは、通常の HTML フレームワークから JavaScript コンテンツをすべて除いた無駄のないバージョンです。 JavaScript の場合、フレームワークは共通の AMP JS ライブラリに依存します。
コンテンツは共通のクラウドにキャッシュされて保存されるため、サーバーへのクエリやフェッチに必要な時間が削減されます。

他にも多くの違いがありますが、ここで挙げた 2 つの違いを簡単に広範に理解できるはずです。

パブリッシャーとブログが AMP を有効にする必要がある理由

モバイルで読み込みが遅いページを読むことがユーザーにとって意欲を失わせるエクスペリエンスである限り、パブリッシャーはモバイルでの広告からの収益を逃すことになります。 AMP は、訪問者を Web サイトに連れてきて長期間維持するのに役立ち、クリックによる収益を生み出す可能性があります。

AMP ページは稲妻アイコンの横に表示され、通常の Web ページと区別されます。視聴者がこのオプションをクリックすると、AMP ビューア内の AMP ページに直接移動します。それだけでなく、コンテンツは Google 検索ですぐに利用できるようになり、Twitter、LinkedIn、WordPress、Parse.ly、Adobe Analytics、Nuzzel、Pinterest などのソーシャルプラットフォーム経由でアクセスできるようになります。

さらに、サイト運営者は Google Analytics にアクセスして、ページのパフォーマンスを観察できるようになります。最高のコンテンツを選び出し、それを使用して Web サイトのパフォーマンスとユーザーエクスペリエンスを最適化できます。

AMP には、高いパフォーマンスとユーザーエクスペリエンスを考慮するため、パブリッシャーのリソースを優れたコンテンツの提供に集中できるというもう 1 つの利点もあります。

AMP に必要な最適化

AMP は実際には、Google の要求に応じて統一された方法で行われる Web サイトへのさまざまな最適化です。 Web ページを AMP に準拠させるために実行する必要があるさまざまな最適化は、次のとおりです。

非同期 JavaScript のみを許可します - ページのレンダリングが遅延しないようにします。つまり、作成した JavaScript は使用できず、ページのインタラクティブなコンテンツを処理するには AMP 要素に依存する必要があります。 iframe 内の JS は許可されますが、レンダリングを妨げない場合に限ります。
すべてのリソースのサイズを静的に設定する – AMP は、画像や iframe などのリソースのダウンロードを待たずにページを読み込みます。これらのリソースのサイズは HTTP で指定する必要があるため、ダウンロードを開始する前にこれらのリソースのサイズと位置がわかります。
拡張機能メカニズムがレンダリングをブロックしないようにしてください – ページに拡張機能が含まれる場合、カスタムスクリプトはそれについてシステムに通知する必要があります。そのため、AMP が拡張機能に何が含まれるかを認識する前でも、拡張機能用のスペースが作成されます。ライトボックス、Instagram の埋め込み、ツイートの拡張機能は、追加の HTTP リクエストが必要であっても、ページのレンダリングをブロックしないため問題ありません。
すべてのサードパーティ JavaScript をクリティカルパスから遠ざけてください – カスタム JavaScript はサンドボックス化された iframe でのみ許可されます。こうすることで、メインページの読み込みがブロックされなくなります。
すべての CSS はインラインでサイズ制限されている必要があります – これは、クリティカルパス内の HTTP リクエストの数を減らすのに役立ちます。
フォントのトリガーは効率的である必要があります - AMP システムは、フォントのダウンロードが開始されるまで HTTP リクエストを許可しません。
サイズの再計算を最小限に抑える – 再計算によりレンダリングが遅れるため、最小限に抑える必要があります。
GPU 対応アニメーションのみを実行します – すべてのアニメーションは GPU (グラフィックプロセッシングユニット) で実行できる必要があります。
リソースの読み込みを優先する – 必要なコンテンツのみが最初に読み込まれ、広告と画像はできるだけ早く取得されますが、必要な場合にのみ読み込まれます。これにより、CPU への要求が最小限に抑えられます。
瞬時にページを読み込みます – プリレンダリングは帯域幅と CPU を大量に消費します。 AMP プリレンダリングは、最初に必要なコンテンツのみを読み込み、必要な場合にのみサードパーティの iframe やその他のリソースをダウンロードします。

標準的な範囲の広告フォーマット、広告ネットワーク、テクノロジーが利用可能になります。同時に、速度を妨げない限り、出版社は独自のフォーマットを選択することもできます。

WordPress に AMP を追加する方法

Google には、基本的な AMP HTML ページの作成、ステージング、AMP 準拠の検証、公開および配布について参照できるチュートリアルがあります。 AMP ページを検証することは重要です。そうすることで、Twitter や Instagram などのサードパーティは、ページが自社のプラットフォームで適切に表示されると確信できるからです。

WordPress.com でホストされている Web サイトに関する限り、何もしなくても自動的に WordPress がサポートされます。自己ホスト型 WordPress ウェブサイトでは、プラグインをインストールすることで AMP for WordPress を有効にすることができます。

Automattic による AMP WordPress プラグイン

WordPress ウェブサイトで AMP プラグインをダウンロード、インストールし、有効化すると、投稿には動的に生成された AMP バージョンが自動的に追加されます。 URL (example.com/my-post/amp) の末尾に amp を追加すると、これらのページにアクセスできます。 Pretty パーマリンクを有効にしていない場合は、リンクに ?amp=1 を追加します（example.com/?p=100&=1 のようになります）。他の唯一のステップは、上で説明したようにページをテストして検証することです。

このプラグインの設定や機能にはまったく気づきません。 AMP Analytics には、独自の JSON 構成コードを貼り付けることができるダッシュボードオプションが 1 つ追加されていますが、それだけです。

このプラグインは Automattic 安定版の公式プラグインであり、現時点ではページとアーカイブをサポートしておらず、ページをカスタマイズすることもできません。ただし、これは非常にシンプルで使いやすいオプションであり、カスタマイズに関するガイダンスは Github のドキュメントで見つけることができます。

AMP for WP – モバイルページの高速化

もう 1 つの優れた無料オプションは、AMP for WP です。この無料の WordPress プラグインは、迅速かつ簡単なセットアップを提供します。インストールして設定を有効にし、Web サイト用の AMP の自動生成を開始するだけです。おまけ – このプラグインはマルチサイト互換性もあります。

AMP (投稿、ページ、アーカイブ) の有効化、モバイル広告エリアの追加、構造化データ (SEO の重要な部分)、Yoast SEO メタタグの統合、高度なインデックス/インデックスなしオプション、プッシュ通知、ネイティブの設定が組み込まれています。 AMP コメント、カスタム AMP 翻訳 (英語以外の言語を使用している場合は、これを更新する必要があります) など。無料のプラグインとしては設定が非常に包括的で、素晴らしいです。

何よりも、このプラグインにはデザインオプションが用意されているため、AMP 出力のルックアンドフィールをカスタマイズできます。付属のデフォルトの AMP テーマを使用するか、AMP テーマフレームワークを使用して独自のデザインを作成します。

AMP for WP は、機能 (CTA や AMP キャッシュなど) を追加するためのプレミアム拡張機能や、WooCommerce、Advanced Custom Fields、Contact Form 7 などの人気のあるプラグインのサポートも提供します。

WordPress に AMP を追加するその他の方法

もちろん、これが WordPress を利用したウェブサイトに AMP を追加する唯一の方法ではありません。 AMP for WordPress Web サイトに役立つその他のプラグインには次のものがあります。

WP AMP – コーディングなしでカスタム AMP デザインを作成し、SEO を強化します。
Accelerated Mobile Pages (AMP) for WordPress – Web サイト用の AMP テーマを作成します。
カスタム AMP – AMP コンテンツのカスタマイズに役立ちます。
Facebook インスタント記事と Google AMP ページ – 広告と分析をサポートし、WordPress から Google AMP ページにコンテンツを直接公開および管理します。
Glue for Yoast SEO & AMP – デフォルトの WordPress AMP プラグインが適切な Yoast SEO メタデータを使用し、AMP ページのデザインを変更できるようにします。

WordPress に AMP を追加する必要がありますか?

Google が Web ページを検出するために AMP は必須ではありませんが、Google が最終的にはより広範な方法で AMP プロジェクトを実装することを目指していることは明らかです。現時点では、AMP に準拠していることは、Google による検索ランキングの独立した要素ではありません。ある時点でそれが重要になると考えるのは当然ですが、

ページの読み込み速度が検索エンジンのランキングの要素であることを念頭に置くと、モバイルインターネットに参加したい場合、実際には選択肢はほとんどありません。検索エンジンのランキングが重要である場合、AMP 方式を採用するかどうかについての考えはすべて消えるかもしれません。

ただし、プロジェクトに参加するには、Google が要求する形式を厳守する必要があり、それが誰にとっても難しいことかもしれません。 Web サイトに掲載できる内容が制限され、すべてのブログがやや画一的で個性が欠けているように見える可能性があります。一部のアニメーションは許可されておらず、フォームはサポートされていません。そして、ランディングページに関して言えば、AMP はまったく良いアイデアではないかもしれません。さらに、スピードよりも美しさやブランディングを重視するウェブサイトが存在する可能性があり、その場合、AMP が邪魔になる可能性があります。

ただし、ユーザーにとって高速で魅力的なエクスペリエンスを作成し、ユーザーに長く滞在してもらいたい場合は、WordPress（または運営する他のタイプのウェブサイト）用の AMP を真剣に検討する必要があります。 Google 検索ページの AMP カルーセルで追い込みたいスポットがある場合は、AMP の流行に乗りましょう。

モバイル ページの高速化: WordPress モバイル最適化用 AMP