ちょっと時間が出来たので、久しぶりに「PageSpeed Insights」でサイトをチェック。少し前に作った趣味のサイトの「速度スコア」はモバイルが50点台、パソコンが90点台でした。モバイルはもう少し何とかしたいと思い試行錯誤してみた。
「改善できる項目」に表示されたものは次の通り。
- 次世代フォーマットでの画像の配信
- 使用していない CSS の遅延読み込み
- レンダリングを妨げるリソースの除外
- サーバー応答時間の短縮（TTFB）
次世代フォーマットでの画像の配信
サムネイル画像にPNG-8ファイルを使用しており、全投稿のサムネイル画像を表示していたことが原因でした。
最初に試したのが「jQueryプラグインLazy Load」を使ったサムネイル画像の遅延読み込み。改善できる項目に変化はなく、モバイルの「速度スコア」はほぼ同じ。ということで基本に立ち返って画像ファイルのフォーマットをJPEG形式に変更してみた。サイトを作った時点でPNG-8形式を採用した理由はJPEG形式のノイズを嫌ったためだ。次世代フォーマットはブラウザが限定されるため、とりあえずはJPEG形式の画質を「80」にして、ノイズが気にならないレベルでファイルサイズを2/3程度に削減。再分析では「改善できる項目」から「次世代フォーマットでの画像の配信」は無くなりました。
使用していない CSS の遅延読み込み
「bootstrap.min.css」「font-awesome.min.css」が対象。どちらもサイトの「肝」であり、すぐに手は出せない感じ。
レンダリングを妨げるリソースの除外
「bootstrap.min.css」「font-awesome.min.css」のほか、サイト固有のCSSファイルが対象。前2つはサイトの「肝」であり、サイト固有のCSSファイルをインライン化してみた。再分析ではサイト固有のCSSファイルは遅延読み込みのところから消えたのだが、「速度スコア」はほぼ同じ。ここはなかなか悩ましい。
サーバー応答時間の短縮（TTFB）
現在のサイトはVPSを利用しており、この項目は分析のタイミングで表示されたり、表示されなかったりする。VPSを切り替えなければならないほど遅くはなく、サーバー設定で改善できる可能性があるのかはっきりしないので、しばらく様子見とした。
モバイルの速度スコアアップはなかなか手強い
対象のサイトは「Bootstrap 4」と「Font Awesome」を使ったWordPressの独自テーマで構築している。「Font Awesome」を使っている部分はそれほど多くないので代替は可能かもしれないが、「Bootstrap 4」は根幹ということもあって替えは効かない。また「PageSpeed Insights」の「診断」には「過大な DOM サイズ」という項目があり、現時点のノード数1,400を超えている。全投稿ページにすばやくアクセスできるよう、多数のリンクや検索フォームを盛り込んでいることが要因。はてさて、どうしたものか。