以前以下の記事で PageSpeed Insights を使ったサイト表示速度の改善について紹介しました。
上記の内容は現在も有効です。
しかし2018年11月に PageSpeed Insights の評価エンジンが変わり、評価項目が増えました。
評価項目の増加に伴い多くのサイトは相対的にスコアが下がっていると考えられます。
というのも先日WordPressを5にアップデートした後、さてさてパフォーマンスはどうなったかな〜と PageSpeed Insights で測ったところ、評価項目が増えたせいか以前は90点台だったのに40点台まで激減しました😭
PageSpeed Insights はモバイルとパソコンでの速度評価を出してくれます。PCでは以下の通り90点台で問題無かったのですが、Googleは今やモバイルファーストインデックスなのでPC版の点数はSEOに影響しません。
従来からあった評価項目は以下のように大体クリアしており、減点のほとんどは追加された項目でした。
40点台という絶望的な数字に涙目になりながら対応しました。
指摘された項目ごとの対応方法を紹介します。
目次
オフスクリーン画像の遅延読み込み
「画面に映っていない画像は読み込まず、画像が映る位置までスクロールされたら読み込め」という指摘です。今回一番減点を食らっていた項目です。
どういう意味？と思われる方もいると思うので、図にすると以下のような感じです。
画像のある位置までスクロールした時点で、非同期で画像を読み込むよう対応します。
この項目はモバイルファーストの理由が大きいです。モバイルでのアクセスはPCのブロードバンドに比べれば遅く、月間の転送量も限らています（最近で言うところの「ギガ」ですね）。 モバイルユーザーに無駄な転送量を食わせず、快適に利用してもらうための意図が強い評価項目です。
Lazy Loadで対応する
画像を非同期読み込みする手法として「Lazy Load」が一般的に利用されています。
JavaScriptで実装するライブラリが多数ありますが、WordPressならプラグインのインストールのみですぐに対応できます。今回は以下の「a3 Lazy Load」を利用しました。利用者数、評価、更新頻度の3点が良いためです。
インストールしたら特に設定は必要なく、<img>タグで読み込まれる画像すべてに Lazy Load が適用されます。
Lazy Load の適用で60点台まで取り戻せました。しかしまだまだ…！
レンダリングを妨げるリソースの除外
レンダリングブロックの概要と対策については以下のページで詳しく紹介しています。
以前から対応していましたが、しばらく運用しているうちに追加したプラグインなどによるCSS/JSファイルが増えていたためかまた指摘が増えていました。
※PageSpeed Insightsのキャッシュ問題？
PageSpeed Insights はキャッシュを見て評価することがあるのか、レンダリングブロック対策をしたファイルをいつまでも指摘することがありました。実際のサイト側でちゃんと対策ができていれば、こうした指摘は無視してよいと考えます。
使用していない CSS の遅延読み込み
そのページで使っていないCSSの記述を除去して少しでも軽くしろ、という指摘です。
この項目は対応非推奨です。
デザイナーとフロントエンドエンジニアが協力してサイト設計レベルから本腰入れてリファクタリングする必要がある割に、追求したうえで0.1秒速くなるかどうかと、費用対効果が悪すぎるためです。サイト構築の時点でムダのないCSS設計をすることが望ましいです。
次世代フォーマットでの画像の配信
JPEG 2000、JPEG XR、WebPなど、従来のJPEGやPNGより圧縮効率の高い画像フォーマットを使え、という指摘です。
この項目も現時点では対応非推奨です。
画像が多いサイトはこの指摘による減点も大きいと思われますが、次世代画像フォーマットに対応していないブラウザが多いため、これに従うと画像が表示されなくなります。
なにしろ指摘しているGoogleのChromeですら JPEG 2000 に対応していません。 対応してないくせに使えって…
WebPは対応ブラウザが多く有望ですが、Googleが作った画像フォーマットのためかAppleのSafari（Mac、iOSのデフォルトブラウザ）だけが対応する様子がありません。そんなIT大手各社の政治的思惑もあり、全てのブラウザでいつサポートされるかも不明確なので、従来どおりJPEG、GIF、PNGの三大フォーマットから変えない方が良いです。
対応しない代わり、画像のサイズは徹底的に抑えましょう。以下のTinyPNGはオススメです。
それでも次世代画像フォーマットに対応したい場合、ユーザのブラウザを判別して対応する次世代画像フォーマットに置き換えるような実装を、サーバーサイドかフロントエンドで対応する形が検討されます。
まとめ：今の PageSpeed Insights はどうしても減点される
フロントレベルで対応できるものを実践したところ、70点台まで回復しました。
残りの項目はサーバサイドの調整が中心なため対応したところ…あまり変わらず80点台でストップしました。
サーバを最適化できたはずなのにサーバ性能に直結する項目が全く改善されていないことに疑問が湧き、PageSpeed Insights 自体について調べたところ…
https://webtan.impress.co.jp/e/2018/12/21/31382
ただし残念ながら現状のPageSpeed Insightsによるモバイルのパフォーマンス測定は、日本のサイトに関しては信頼できる数値になっていない。計測が米国から行われているからだ。https://boundworks.net/pagespeed-insights/
2018年11月に入ってからスコアの判定方法が変更になり、3G回線時の通信速度をベースとした、より厳格な基準となっています。
Oh…😨
「米国から3G回線通信」で日本の4G基準のサイトを見られたら、そりゃ重いってもんです。
体感・実測ともに表示が速い、他社の国内大手サイトもいくつか診断したところ40点前後のサイトが多く、今の PageSpeed Insights の点数は高速化対応の目安に過ぎないと思えます。日本国内にあるサイトで90点台を目指すのはかなり難しく、コスパも悪いでしょう。
これだけ工夫しても90点未満の「平均」と評価されるのはシャクですが、80点に届いていれば今は十分と考えましょう！
