2020.1.15
2020.1.16

AMP対応ページの最適化(PageSpeed Insightsでモバイル評価が低かったため)

WEBページの読み込み時間を短くするために「PageSpeed Insights」で速度を評価しているのですが、PC(パソコン)版は90点を超えるのに、モバイル版での評価が低かったので、こちらの記事(Optimize your hosted AMP pages - amp.dev)を参考に、AMP対応ページの最適化を行ってみました。

目次

  • 最適化の方法
  • 最適化の対応
  • 結論

最適化の方法

最適化の方法として示されているのはhead内タグの記述する順番や、最低限必要なものを事前に読み込ませておくような処理で、詳しい内容はリンク先の記事を参照してもらうとして、簡単に述べると、以下のような内容となっています。

  • charsetのmetaタグをhead内の一番上に配置し、それ以外のmetaタグを後に記述する。
  • AMP runtimeである「v0.js」は読み込み時の優先順位を高くする。
  • ページに遅延関連の拡張処理(amp-experiment、amp-dynamic-css-classes、amp-storyなど)が含まれている場合は、それぞれのコンポーネントファイルをプリロードしておく。(遅延関連以外のコンポーネントについてはプリロードは不要)
  • 他サイトにアクセスしている場合は、事前に名前解決(preconnect dns-prefetch)しておく。
  • AMP runtimeである「v0.js」、遅延拡張処理(amp-experiment、amp-dynamic-css-classes、amp-storyなど)、それ以外のAMPコンポーネント(amp-bindなど)の順で<script>タグを配置。
  • 次に<style amp-custom>タグを配置して、head内に記述するその他のタグ(AMP boilerplate、titleなど)を以降に記述する。

上記の最適化の方法に従って修正後、実際にどれくらいの違いがあるのか確認してみました。

最適化の対応

最適化する前の評価は以下の通り。

PC(パソコン)版の評価については「95点」前後です。

ここから、最適化の方法に従って、headタグ内の要素を並び替え、AMP runtime「v0.js」の読み込み時の優先順位を高くしてみました。

これだけでは、誤差程度の変化しかありません。(僅かに評価が低くなっているのはページ上部のヘッダー画像をプリロードで読み込むようにしたため)

さらに調査すると、どうやら遅い原因はAdsenseを使用しているせいのようだったので

Adsenseで参照するサイトを事前に名前解決(preconnect dns-prefetch)するとスピードアップに繋がるという情報を見て実際に試してみると...

こちらも変わらずで、Adsenseで利用しているURLをこれでもかと片っ端から追加してみたら、良くなるどころか、むしろ逆に評価が低くなりました。

本当にAdsenseが原因かどうか確認するため、Adsense(amp-ad)を除外したページで確認してみると、結果は良好。

やはり遅い原因はAdsenseのようです。

また、何度かテストしてみると分かるのですが、Adsense(amp-ad)コードが埋め込まれていても、時々、評価が高くなったりすることがあり、調子がいい時はモバイル版でも90点台をたたき出すことがありました。(評価時の時間が関係しているかも?)

とりあえず今回の対応としては、ページ上部に固定サイズタイプの広告を2つ並べていたものを1つにすることにしました。(初期表示エリアの枠外に配置していたが、ちょっと下くらいでは広告を読み込んでしまっている)

この対応だけでPagespeed Insightsの評価はかなり上昇しました。

結論

最適化の対応でページの読み込み速度が向上する可能性はゼロではありませんが、評価が低い原因がAdsenseを使用しているせいの場合、head内のタグの順番を変えただけではあまり効果は望めないようです。

ページの読み込み速度とAdsenseはトレードオフ。どちらを優先するかは記事の内容次第といったところでしょうか。

また、ページの読み込み速度がGoogle検索時のランキングに影響するかどうかは、もちろん速い方がいいのは当たり前ですが、これまでの経験上、最終的にはユーザーにとって価値のあるコンテンツかどうか、という点が大きいように思います。

ページの読み込み速度についてある程度のところまでやったら、あとは記事の内容や構成を見直した方がいいかもしれません。

AMP】関連記事