当サイトで速度改善のためPagespeed Insightsを使用し表示速度を計測しておりました。

そこで少しだけハマった点があったので備忘録も兼ねて書き起こしておきます。

実施した速度改善

速度改善のために以下のような施策を実施しました。

  1. 画像のWebP化:
    ツールを使用して画像を手元でWebPに変換したうえでWordPressにアップ
  2. キャッシュプラグインの導入:
    WP Fastest Cache を導入
  3. CSS統合:
    サイト内外の複数読み込んでいたCSSを1つのファイルに統合
  4. Googleフォントをサーバーで配信
    フォントをダウンロードして /assets 配下に格納

画像のWebP化は以下のツールを使用してjpgやpngをWebPに変換しています。
複数の画像を圧縮したzipファイルをそのまま放り込んでも大丈夫なツールです。

速度改善の成果

なんとここまでやって58点

サイト側で重い処理を実行しているならともかく、WordPress投稿ページ + キャッシュ でこのスコアはどういうことなのか。
1時間ほどコードとにらめっこしてました。

PageSpeed Insightsでスマートフォンのパフォーマンスが58点のキャプチャ
PageSpeed Insights:スマートフォンのパフォーマンス

高速化一番のネックはGoogleのタグだった

いろいろ試した後にGoogleTagManagerのみ触れていなかったので、これを一時的に削除して速度を計測してみました。

ビンゴでした。GTMタグを削除するだけで96点まで跳ね上がりました。

GoogleTagManagerにはGoogleAnalyticsとGoogleAdSenceの2タグのみ登録していました。
まさかGoogle提供のPageSpeed Insightsで最も評価を下げていたのはGoogleのタグであり壮大なマッチポンプでした。
特にAdSenceくん、重すぎ。

Googleタグマネージャーを削除したあとのPageSpeed Insightsスコアが96点
PageSpeed Insights:GTMタグを削除したスコア

Pagespeed Insightsに縛られすぎるべきではない

特にPagespeed Insights のスマートフォン パフォーマンスは非常に低いスコアが出る傾向にあります。
これは 低スペックスマホ + 弱回線 という日本では一般的ではない環境を想定した計測であるためです。

以下のGoogle公式ドキュメントにあるように、検索結果に与える影響はPagespeed Insightsよりも実際に優れたページエクスペリエンスを提供できているか。というのがカギのようです。

Google のコア ランキング システムは、優れたページ エクスペリエンスを提供するコンテンツを高く評価するように設計されています。サイト所有者が Google のシステムで高い評価を得るには、ページ エクスペリエンスの限られた要素のみにとらわれないようにすることが必要です。多くの要素について検討し、全般的に優れたページ エクスペリエンスを提供できているかどうかを確認してください。

引用:ページ エクスペリエンスが Google 検索の検索結果に与える影響について

具体的にはPagespeed Insights上部の「実際のユーザーの環境で評価する」Google Search Consoleの「ウェブに関する主な指標」を重視するのがよさそうです。

まとめ

Pagespeed Insightsのスコアが低くなる要素が見当たらない場合はGoogleタグを一時的に削除して計測しなおしてみてください。

また、Pagespeed Insightsのスコアが低いこと自体はそこまで神経質になる必要はなく、あくまでもGoogle Search Consoleの「ウェブに関する主な指標」などで評価が低かった場合の改善ポイントを見つけるために使用するものと考えたほうがよさそうです。

Googleのタグを使用してGoogleに指摘されるという手の上で踊らされている状態ですが、僕たちがウェブで生きていくには頭を垂れるしかないという虚しさがありました。