AMP (Accelerated Mobile Pages)に対応しました

この記事を読み、当サイトもAMP(Accelerated Mobile Pages)に対応させることにしました。
とは言っても、利用しているWordPressテーマ(Simplicity)の当該機能を有効にしただけですが。

AMP (Accelerated Mobile Pages)とは

Googleなど著名IT企業9社で策定した、モバイル端末でWebページを高速に表示させるための規格です。特徴を纏めるとすると、こんなところでしょうか。

どのようにして高速化するのか

主に以下のようです。

  • JavaScriptによるレンダリングブロックを回避
    AMPページ内ではAMPで定義したJavaScriptのみ使用を許可する、等の制約をかけて、JavaScriptがレンダリングブロックしないようにする。
  • スタイルシートはインラインのみ許可
    CSS(スタイルシート)は通常、別ファイルとしてダウンロードされますが、インライン化によって高速化を図る。サイズは50KB以下に抑制される。
  • AMP CDNにキャッシュされる

詳しくは以下公式サイトに記載されています。

AMP対応ページでは、記事の読み込みが平均1秒以下に高速化されるほか、データ量もAMP非対応のページと比較して10分の1に低減されている。

(※上記Internet Watchサイトより)

Web1.0時代にホームページを運営していた立場からすると隔世の感があるというか、リッチコンテンツにすることによってこれ程までにリソースを浪費しているのかと驚愕ですね。

メリット

  • 高速化によって閲覧者のストレス経験
  • 検索結果でカルーセル表示がされるかも
  • 将来的にはGoogle検索順位で優遇されるかも

デメリット

  • 体裁が崩れるかもしれない
  • 非対応の広告は表示されない
  • 非対応のアクセス統計では集計されない

以下サイトを参考にしました。

D2Cがお届けするモバイルマーケティングの総合オピニオンサイト

本文(コンテンツ)を読んでもらう、という本来の趣旨からは関係ないですね。
当サイトでは問題ないです。

確認

ChromeプラグインのAMP Validatorで動作を確認、概ね問題なさそうなので公開することにしました。
翌日、早速Google検索に反映されていました。早いですね。

google-amp

確かに表示速度もかなり高速で満足です。
AMP Validatorでの表示と実機表示が少し異なるので、そのあたりは今後修正していきます。

Simplicityテーマの対応に感謝しつつ、今後も積極的に推進していきたいと思います。

コメント

  1. Tomotaka Kizawa より:

    AMPページにCSSを追加したことが原因と思いますが、現在当サイトの検索結果にAMP表示はされていません。
    詳細な原因調査中です。

  2. Tomotaka Kizawa より:

    CSSは特に修正せず、直ってました。
    テーマのアップデートで修正されたようです。