サイトをAMP化! 通常ページとAMPページの表示スピード比較

AMPは、Googleが推進するモバイル端末(スマホ)用にウェッブページを瞬時に表示させるプロジェクトです。2016年の後半から、モバイル端末でのGoogle検索結果にAMPページが加えられて表示されるようになりました。

本サイトが使用するWordPress テーマ Simplicityは、AMP機能を備えていることも特徴の一つです。

Simplicity2.3.1からAMPに対応しました。以下では、簡単にSimplicityでのAMP機能の使い方を説明します。とは言っても、そこまで難しいことをする必要はないかと思います。AMP機能を有効にするまずSimplicityで、

せっかくテーマで対応しているので本サイトをAMP対応にしたいと思っていました。しかし、サイトの整備や記事の更新など他の作業との関係もあったため、AMP化は後回しになっていました。サイトの整備もある程度、落ち着いてきたため、先週の木曜日26日に本サイトのAMP化を行いました。

至り尽くせリのSimplicity AMP対応
先週から運営するWordPress サイトをAMP化しました。本サイトをAMP化した後、続けて他のサイトの対応を行いました。本サイトはSimplicityを使用しているため、テーマ側でAMP対応してい...
SimplicityのAMP機能はベータ版として、オプションで用意されています。

スポンサーリンク

通常ページとAMPページGTmetrixでの表示スピード比較

AMPの最大の特徴はページを高速で表示することです。サイトの装飾や機能を簡略化し、メインコンテンツを瞬時に表示させるコンセプトで設計されています。同じページの通常版とAMP版の表示パフォーマンスを、サイト表示スピードを測定するGTmetrixを使用して比較してみました。

通常ページとAMPページのGTmetrixパフォーマンス比較

上の画面左が通常のページ、右がAMPページの表示スピードパフォーマンスの測定結果です。PageSpeed Gradeは、通常ページがE(57%)に対して、AMPページはA(95%)と大幅に上昇しました。

特筆すべきは、両者のページロード・タイム(ページのコードを読み込むまでの時間)です。通常ページは、読み込むまでに12.9秒かかったのに対して、AMPでは1.6秒でした!

ウェッブ画面表示はページを読み込みながら表示されますが、全てのページ情報を表示する端末にロードするまでには時間がかかります。上の比較は、パソコンで表示されるページとの比較になります。

ページスピードの向上は収益アップに繋がる!

モバイル端末でページの読み込みに3秒以上かかると40%の人がサイトの閲覧を諦めて離脱すると言う市場調査が公表されています。この調査結果は、GoogleもAMPの説明や特徴の紹介記事 などで引用しているものです。表示されるスピードは早ければ早いに越したことはありませんが、モバイルの場合2秒以内に表示されることが望ましいという見方が一般的です。

モバイルWebページの高速表示は収益アップに繋がる!?
AdSense公式ブログ(英語)に、The ultimate mobile page speed infographic と言う記事が2017年末に投稿されました。ウェッブページの表示スピードは、20...

百聞は一見にしかず: AMPの表示スピード

ベンチマークテスト(パフォーマンス評価テスト)と言うのは、計測方法と評価対象の相性などによってスコアが大きく変わる場合があります。例えば、GTmetrixでは高スコアでも、Google PageSpeed Insightsではそれほどでもないページもあります。

AMPの場合は、実際にページにアクセスしても、文字通り瞬時に表示されます。百聞は一見にしかずなので、是非、以下のページを表示してみて下さい。スマホでもパソコンでも、AMPページが表示されます。

AdSense ページ単位の広告の特徴と設置の仕方
ページ単位の広告は、Googleが次世代のAdSense広告と位置付けているスマホ用の広告です。広告コードの設置・配置場所、広告の表示位置や表示の頻度など、従来のAdSense広告とは異なります。本記...

上のページは、画像も多く、文字数も4000字を超えている比較的データ量の多いページです。(文字データは非常に小さいので、文字数(だけ)が多くてもそれ程データは大きくなりません)表示するのにある程度時間がかかっても仕方がないと思っていました。

しかし、AMPページは、瞬時に表示されます。広告の表示が少し遅れて表示される感じです。実際に表示して見た時、「これは早い!!」と思いました。

AMPページでは、一部のアクセサリーなどの表示機能は省かれています。メニューも表示されません。多少、寂しい感じもしますが、瞬時にページが表示され、メインコンテンツにすぐアクセスすることができることは、大きな利点だと思います。

ここで紹介しているのはサイトのAMPページのパフォーマンスです。AMPページは、Googleのキャッシュ上に置かれます。現時点でのほとんどのAMPページへのアクセスは、検索を経由するためGoogleのキャッシュ上のページになります。検索からアクセスするAMPページは、Googleのキャッシュメモリーからロード表示されるため、さらに早く(比較にならないほど早いです。本当に瞬時に)表示されます。

AMPページをGoogle PageSpeed Insightsで測定

上のGTmetrixで測定した同じページを、Google Page Speed Insightsでも測定してみました。スコアは83でした。ページは、コピペ一発Simplicity高速化のGoogle PageSpeed Insightsでの測定結果で計測したページと同じです。

コピペ一発Simplicity高速化のGoogle PageSpeed Insightsでの測定結果
Simplicityのサイト上に「コピペ一発でSimplicityを結構高速化する方法」の記事を見つけました。 この高速化は、.htaccessに、ブラウザキャッシュとリソース圧縮の設定...

高速設定以前のモバイルでのスコアが42, 設定後、スコアは63に上昇しましたが、AMPではさらに20ポイント高い83となりました。

AMPページのPageSpeed Insights スコア

サイトのAMP対応について

WordPressでは、プラグインを使うと比較的簡単にAMP対応できますが、テーマによっては関連記事やソーシャルボタンが省かれてしまうことなどもあるようです。また、AdSense等の広告を対応させるためにも変更が必要になります。

テーマでAMP対応していると、本当に楽です。ただし、テーマでサポートされていても、一部表示機能が省かれるなど機能面では制約があります。

しかし、これだけ表示速度に差があると、やはり対応するだけの価値があるのではと思いました。今回、本サイトをAMP化後、運営する非対応のテーマを使ったWordPressサイトもAMP化させました。

Googleによると、検索結果のランキングには一切影響しないとのことですが、ページ表示速度が大幅に向上することで、ユーザーの離脱率が下がり、訪問したページを含めサイトに滞在する時間が伸びれば、検索順位アップにも間接的に繋がってくると思います。

AMP対応の効果についての評価、考察などを将来行う予定です。


スポンサーリンク

サイトをAMP化! 通常ページとAMPページの表示スピード比較
この記事をお届けした
Blogging Lifeの最新ニュース情報を、
いいねしてチェックしよう!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする