Accelerated Mobile Pages:WordPressモバイル最適化のためのAMP

WordPress用の高速モバイルページ

インターネット上でのサーフィンとブラウジングは、速くて簡単でなければなりません。ウェブマスターは常に、ウェブサイトのパフォーマンスを最適化し、サイトの速度を向上させることでこれを可能にしようとしています。これを実現する優れた方法は、AMP for WordPressを使用することです。.


ウェブサイトは主に大画面向けに設計されました。しかし、より小さな画面の数が増えており、ラップトップやパーソナルコンピューターに追いついています。今や携帯電話は デジタルメディア時間の65%. ハンドヘルドデバイスでは、より高速ではないにしても、より大きな画面でロードするのと同じ速さでページを読み込む必要があります。.

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

AMPとは?

WordPress用AMP:AMPプロジェクト

AMPプロジェクト によって発表されました 2015年10月のGoogle, これはオープンソースイニシアチブであり、サイト運営者にモバイル向けに最適化されたコンテンツを一度作成して、モバイルWebのあらゆる場所に瞬時にロードさせる手段を提供します。.

2016年2月24日、GoogleはAMP準拠のコンテンツをモバイル検索結果ページのカルーセルに展開し始めました。ユーザーはカルーセルをスワイプして、読みたいアイテムをタップできます。 Pinterestはページを 通常のモバイル向けに最適化されたページの8倍少ないデータを使用して、4倍の速さ. これは、ページのフォーマット方法と配信方法が原因で可能になります.

2016年8月の時点で、Google検索のインデックスには1億5,000万を超えるAMPドキュメントがあり、毎週400万のペースで成長しています。 8月の初めに、Googleも 増幅されたコンテンツのGoogle検索のプレビュー. 今年後半にはより広く実装される予定です.

WordPress用AMP:AMP検索プレビュー

検索プレビューのAMP

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

AMPを使用する必要があるウェブサイト?

2月、このプロジェクトは出版社向けに開始されました。しかし、AMPの採用は出版業界だけでなく、エンターテイメント、旅行、eコマースなどにも広がっています。.

早期導入者から好意的な報告を受けています。 AMPドキュメントの読み込み時間を88%改善, ワシントンポスト紙 携帯電話からのリピーター数が23%増加. eBay はAMPに切り替える主要なeコマース企業の1つであり、1500万近くのAMPベースの製品閲覧ページがあります。しばらくすると、これらのページは検索で発見されるように増加することが予想されます.

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

AMPの違い?

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

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

さらに多くの違いがありますが、ここで言及されている2つは、迅速かつ幅広い理解を与えるはずです。.

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

モバイルでの読み込みが遅いページを読むことがユーザーの期待を裏切るエクスペリエンスである限り、サイト運営者はモバイルでの広告からの収益を見逃しています。 AMPは、訪問者をWebサイトに長期間誘導し、維持するのに役立ち、収益をもたらすクリックの可能性があります。.

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

さらに、サイト運営者はGoogleアナリティクスにアクセスして、ページのパフォーマンスを監視することができます。最高のコンテンツを選び出し、それを使用してWebサイトのパフォーマンスとユーザーエクスペリエンスを最適化できます。.

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

AMPに必要な最適化

AMPは実際には ウェブサイトに対する多くの最適化 Googleの要求に応じて統一された方法で行われます。 WebページをAMPに準拠させるために実行する必要があるさまざまな最適化は、,

  • 非同期JavaScriptのみを許可 –ページのレンダリングが遅れないようにするため。つまり、作成したJavaScriptは使用できず、ページのインタラクティブコンテンツを処理するためにAMP要素に依存する必要があります。 iframe内のJSは許可されますが、レンダリングを妨げない場合のみ.
  • すべてのリソースを静的にサイズ設定する – AMPは、画像やiframeなどのリソースがダウンロードされるのを待たずにページをロードします。これらのリソースのサイズはHTTPで指定する必要があるため、ダウンロードを開始する前に、これらのリソースのサイズと位置がわかります。.
  • 拡張メカニズムがレンダリングをブロックしないようにする –ページに拡張機能を含める場合、カスタムスクリプトはシステムにそれを通知する必要があります。したがって、AMPが何を含めるかを認識する前であっても、拡張用のスペースが作成されます。追加のHTTPリクエストが必要な場合でも、ライトボックス、Instagram埋め込み、ツイートの拡張機能は、ページのレンダリングをブロックしないため問題ありません.
  • すべてのサードパーティの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 Webサイトは、プラグインをインストールすることでWordPressのAMPを有効にできます.

AutomatticによるAMP WordPressプラグイン

AutomatticによるAMP WordPressプラグイン

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

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

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

AMP for WP –高速化されたモバイルページ

AMP for WP Free WordPressプラグイン

別の素晴らしい無料オプションは WP用AMP. この無料のWordPressプラグインは、すばやく簡単にセットアップできます。インストールして設定を有効にし、ウェブサイト用のAMPの自動生成を開始するだけです。ボーナス–このプラグインもマルチサイト互換です.

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

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

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

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

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

  • WP AMP –コーディングなしでカスタムAMPデザインを作成し、SEOを向上させます。あなたはそれについてここでもっと読むことができます.
  • WordPress用のAccelerated Mobile Pages(AMP)–ウェブサイトのAMPテーマを作成します.
  • カスタムAMP – AMPコンテンツのカスタマイズを支援する.
  • Facebookインスタント記事とGoogle AMPページ –コンテンツをWordPressからGoogle AMPページに直接公開および管理し、広告と分析をサポートする.
  • Yoast SEOとAMPの接着剤 –デフォルトのWordPress AMPプラグインが適切なYoast SEOメタデータを使用し、AMPページデザインを変更できるようにする.

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

Googleがウェブページを発見するためにAMPは必須ではありませんが、Googleが最終的にはより広範なベースの方法でAMPプロジェクトを実装することを目指していることは明らかです。現在、AMPに準拠していることは、 グーグルによる検索ランキング. ある時点でそれが重要になると想定することは合理的ですが,

ページの読み込み速度が検索エンジンのランキングの要素であることを心に留めておくと、モバイルインターネットの一部になりたい場合、選択肢はほとんどありません。検索エンジンのランキングがあなたにとって重要である場合、AMPへの移行についての考え直しはすべて消える可能性があります.

しかし、プロジェクトの一部であるためには、Googleが要求するフォーマットを厳密に遵守する必要があり、それはすべての人のお茶ではないかもしれません。それはあなたがあなたのウェブサイトに置くことができるものを制限し、すべてのブログがいくぶん均一で個性に欠けているように見せることができます。一部のアニメーションは許可されておらず、フォームはサポートされていません。ランディングページに関する限り、AMPはまったく良い考えではないかもしれません。さらに、AMPがダンパーであると証明する可能性のある、速度よりも美学やブランディングを重視するウェブサイトがある場合があります。.

ただし、ユーザーに高速で魅力的なエクスペリエンスを提供し、ユーザーを長く存続させるには、AMP for WordPress(または実行する可能性のある他のタイプのWebサイト)を真剣に検討する必要があります。コーナーにしたいGoogle検索ページのAMPカルーセルのスポットの場合は、AMPバンドワゴンに移動します.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map