GoogleAMPを使用してWordPressサイトのモバイルページの読み込みを高速化

ページ速度が重要な理由

最近モバイルデバイスでWebコンテンツを消費した数十億人のように、エクスペリエンスが向上する可能性があることに気づきました。 ニュース記事を読むのはしばしば痛々しいほど遅く、ページの読み込みに長い時間がかかります。 テキストがページに読み込まれた後でも、広告、トラッキングJavaScript、画像がダウンロードされるため、ページは何秒も読み込まれ続けます。
モバイルアプリは、コンテンツの高速読み込み、オフライン表示、高速インターフェースに慣れてきました。 しかし、モバイルサイトは文字通り遅れることがよくあります。 これは、広告、分析、共有、コメントに多くのウィジェットを利用するニュースやブログサイトに特に当てはまります。 iOSデバイスにコンテンツブロッカーをインストールし、速度の向上に気付くことで、これを簡単にテストできます。
もちろん、レスポンシブテーマを使用して問題の一部を軽減することはできますが、レスポンシブデザインはページの読み込みパフォーマンスを処理しません。 ほとんどの場合、応答性が問題の根本にあります。さまざまな解像度のディスプレイに適合するWebサイトを設計しており、最小のディスプレイ、CPUパフォーマンスの低下、接続速度の低下に最適化されたエクスペリエンスを作成できません。 レスポンシブデザインでは、ページがモバイルでレンダリングされたときにすべてのデスクトップアセットと機能が引き続き読み込まれるため、パフォーマンスが低下することがよくあります。 Facebookによると、モバイルでのニュース記事の平均読み込み時間は8秒です。
幸運にもスマートフォンで3Gまたは4Gネットワ​​ークに接続できる人もいますが、ネットワーク速度を劇的に下げるには、都会の中心部から出る必要があります。 そしてもちろん、高速ネットワーク接続がまだ利用できない発展途上国から接続している「次の10億人」の人々とデバイスがあります。
幸いなことに、物事は正しい方向に進んでおり、すべての大手企業がモバイルデバイスでのコンテンツの読み込みを高速化する方法に取り組んでいます。 Facebookは、壁に囲まれた庭に限定されていたものの、Webコンテンツを高速にロードするためのソリューションであるInstantArticlesを立ち上げました。 Appleは独自のニュースアプリを立ち上げました。 GoogleはAMP（Accelerated Mobile Pages）を立ち上げました。これは、Facebookと同様の目的を持つが、オープンスタンダードのアプローチであるイニシアチブです。
WordPressは最近、GoogleのAccelerated Mobile Pages（AMP）のサポートを無料のプラグインの形でWordPress.comとWordPress.orgサイトに追加したことを発表しました。
では、WordPress.orgのブログやニュースサイトにAMPを追加し、最新のテクノロジーを活用してモバイルデバイスでWebサイトを高速化する方法を見てみましょう。

Google AMPとは何ですか？

GoogleのAMPの約束は、ページをモバイルデバイスに即座に読み込むことです。 これは、モバイルインターネットに関する最後の残りの問題の1つを修正します。 誰もがそれを使用しているにもかかわらず、モバイルインターネットは驚くほど遅いです。 AMPは、ページ上の機能の数を制限し、デザイン機能を削除して速度を上げることで、これを回避します。 Googleは、AMPの読み込み速度が通常のWebページより85％速いと主張しています。
AMPは、Webサイト用の特別なモバイルビューを作成します。 この新しいモバイルサイトは、Googleモバイル検索やChromeなどのサポートされているクライアント向けにコンテンツを強化します。 この新しいビューは、すでにお持ちの通常のモバイルWebサイトに追加されます。 このビューでは、ページは通常のWebページのように見えますが、コンテンツ以外はすべて削除されています。 このため、WordPressサイトでの準備ができていることを確認する必要があります

AMPはどのように機能しますか？

AMP HTMLは、基本的にHTMLのサブセットであり、特定のJavaScript要素のみが許可されています。 焦点は、ニュースサイトやブログなどのコンテンツの多いサイトの読み込みを高速化することです。 Javascriptを大幅に制限しますが、ページに特定の分析要素と広告要素を許可するため、ニュース発行者にとっては優れたオプションになります。
新しいモバイルビューを作成するために、AMPは次の3つの主要な要素を使用します。

• AMP HTML –このHTMLのサブセットは、AMPクライアントがパフォーマンスを気にせずにコンテンツを希望どおりにレンダリングできるようにする、多くの制限付きのカスタムタグとプロパティを追加します。 プラグインはこれらの新しいタグをページに自動的に追加しますが、必要に応じて独自のAMP固有のテンプレートで使用できます。
• AMP JS –このJavaScriptフレームワークは、AMPプロセスを機能させるリソース処理と非同期読み込みを管理するモバイルページ用に作成されました。 AMPページでサードパーティのJavaScriptを使用することはできないことに注意してください。
• AMP CDN – AMPは、AMPページをさらにキャッシュして最適化できるオプションのコンテンツ配信ネットワークを提供します。

AMPのインストール

WordPressサイトでAMPを使用する前に、プラグインをインストールする必要があります。 WordPress.comを使用している場合、これはすでに利用可能です。

公式プラグイン

公式のAMPプラグインはWordPressプラグインストアで見つけることができますが、最新バージョンはプロジェクトのGithubサイトでのみ見つけることができます。 したがって、あなたは作る選択があります。
WordPressを介してプラグインをインストールするのが最も速いです。 プラグインのWordPress管理パネルの「新規追加」セクションでamp-wpを検索する必要があります。 次に、[インストール]をクリックしてアクティブ化するだけで、WebサイトでAMPの使用を開始できます。
何らかの理由で最新バージョンが必要な場合は、プラグインを手動でインストールする必要があります。 Githubパッケージをダウンロードした後、[新規追加]プラグインパネルで[プラグインのアップロード]をクリックするだけです。 パッケージを含むzipファイルを見つけて、そこからWordPressに処理を任せます。 アップロードが完了したら、プラグインをアクティブにして使用を開始できます。

PageFrogおよびその他のAMPプラグイン

公式プラグインはGoogleのAMPプロジェクトチームから直接提供されており、AMPの最新バージョンになっています。 それはあなたが持っているすべてのページと投稿の/ amp /バージョンを作成します。 自分で表示するには、URの最後に/ amp /を追加するだけです。
ただし、これらのAMPページを編集することはできません。 基本プラグインが提供する以上のものが必要な場合は、PageFrogなどの他のAMPプラグインの1つが必要になります。
PageFrogは、変更の一部を編集できるようにすることで、コアAMPプラグインに基づいて構築されています。 また、Facebookのインスタント記事などの他のプロトコルだけでなく、いくつかのスタイルやテーマ機能を追加することもできます。 PageFrogと他のいくつかのAMPプラグインはWordPressプラグインストアで見つけることができます。

AMP用にWordPressサイトを構成する

プラグインをアクティブ化すると、完了です。 ほとんどのインストールでは、通常どおりにコンテンツを作成するだけで、残りはプラグインが処理します。 ただし、Google Analyticsコードなどは、そのままではAMPページで機能しないことに注意してください。 アナリティクスとSEOの機能を新しいAMPページに追加する方法を確認してください。 。

AMPページへのGoogleAnalyticsの追加

モバイルページでもこれらの機能が必要な場合は、プラグインのsingle.phpページテンプレートに手動で追加する必要があります。
これを行うには、プラグインリストでAMPプラグインの名前の横にある編集オプションをクリックする必要があります。 そこから、single.phpリンクをクリックするだけで編集を開始できます。 プラグインを更新するたびに、これをやり直す必要がある場合があることに注意してください。

SEOプラグインとAMP

AMPページにはSEO機能が含まれていないため、新しいAMP互換のSEOプラグインが必要になります。
幸い、ほとんどのSEOプラグイン開発者は、使用できるAMP拡張機能を持っているか持っているでしょう。 それらを個別にインストールする必要がありますが、すべてのページがサイトのSEOの改善に向けて機能するようにするために必要です。
この記事の時点で、AMP拡張機能またはアップデートをリリースしているSEOWordPressプラグインは3つだけです。

• Glue for Yoast SEO – Yoast SEOWordPressプラグインにAMPサポートを追加します
• スキーマアプリの構造化データ–schema.orgのAMPを使用したSEOスキーマプラグイン
• WP SEO構造化データスキーマ–カンザスシティSEOのAMPを使用したSEOスキーマプラグイン

エラーの修正

ウェブサイトへの追加と同様に、AMPページのエラーや不整合をテストし、修正する必要があります。
AMPはまだ進化しており、多くの機能にはまだバグがある可能性があります。 AMPページを公開する前に、テンプレートファイルのこれらのエラーを手動で修正する必要があります。 何かが変更された場合に備えて、プラグインを更新するたびに編集をやり直す必要がある場合があることを覚えておいてください。

AMPページでの広告

AMP HTMLではJavaScriptが許可されていないため、広告を直接埋め込むことはできません。代わりに、広告はサンドボックス化されたiframeに存在し、主要な記事のコンテンツにアクセスできません。
Googleは、一部のタイプの広告を通過できるようにAMPを設計しました。 必要なのは、AMP互換バージョンの広告プラグインだけです。 これらの互換性のあるプラグインの完全なリストは、 AMPGithubページにあります。
現在サポートされている広告プロバイダーは次のとおりです。

• A9
• AdReactor
• AdSense
• AdTech
• ダブルクリック

AMPまたはモバイルアプリ？

AMPは、特定の条件下でサイトの記事ページを高速化するのに役立ちますが、すべての状況およびすべてのデバイスで機能するとは限りません。 それだけでなく、ページで実行できる分析（jsなし！）と広告の種類にも大きな制限があります。
AMPは検索からのトラフィックに効果的なソリューションですが、最も忠実な読者はどうでしょうか。
それらの人にとって、あなたの聴衆のタイプとサイズに応じて、アプリはまだ多くの意味があると思います。 アプリは、AMPやInstant Articlesが提供できない多くの利点を提供できます。プッシュ通知によるコンテンツ配信と再アクティブ化、コンテンツキャッシュとオフライン使用、アプリストアでのプレゼンス、さらに重要なことに、ユーザーのホーム画面です。
したがって、コンテンツの制御と広告と分析のためのモバイル固有のオプションを維持しながら、時間の経過とともに成長を促進するのに役立つプラットフォームを探している場合は、独自のアプリを公開することを検討してください。 ニュースやブログサイトでWordPressを使用している場合は、 MobiLoudで適切なソリューションを利用できる可能性があります。