［PSI実績］獲得点数98点｜LCP 13秒からの脱出。旅行メディアのスピード改善全記録

今回の事例と取り上げるのは弊社メディアの日本の旅侍（旅行メディア）です。画像が多いサイトでページスピードインサイト（PageSpeed Insights）のスコアが低かったのが悩みでした。今回、トップページのみスコア改善をしました。

対応前の点数57点

まずは対応前の点数です。ご覧のように57点でした。

LCPが13.1秒、TBTが350ミリ秒、Speed Indexが17.4秒とひどい状況です。こちらのメディアは1度リニューアルをしていますが、ページスピードインサイト対応は放置しておりました。きれいな城写真が特長なので正しい施策をしないと前述のようにスコアが57点と低い状況となってしまいます。まずは一通りの改善を施しました。その結果がこちら。

スコア80点です。LCP2.7秒、TBTが410ミリ秒、Speed Indexが6.9秒です。ここからさらに改善していきます。

「最大コンテンツの描画」要素の画像対策

ページスピードインサイト対策自体は他の事例と同じです。CSS軽量化（ネストの活用・インライン化）、JavaScriptの最適化（不要なJavaScriptの削除・非同期化）、画像対策（WebP画像の使用・サイズ適正化・遅延読み込み）です。その他、ページスピードインサイトで100点を目指すための施策については、以下の記事でも詳しく解説しています。

加えて本メディアの対象ページ（トップページ）はコンテンツ量が多い構成でした。今回、コンテンツの見直しも計りました。ユーザーに訴求できていないというコンテンツは思い切って廃止しました。

これらの改善で95点まできました。この点数でも充分と言えなくもないのですが、もう少し上のスコアを狙うべくさらに改善を施しました。

最後まで指摘があったのは「最大コンテンツの描画」要素です。この要素をIMGタグとすると「読み込み遅延」が悪くなり、この要素を背景画像とすると「レンダリング遅延」が悪くなったり、「最大コンテンツの描画」要素をどのように扱うかでLCPの数字が変わりました。

最終結果98点

最終的にはLCP要素を背景画像ではなく、IMGタグとして優先度を高めることでスコアが98点獲得できました。LCP2.3秒です。

「最大コンテンツの描画」要素は読み込み遅延を1,400ミリ秒にまで留めることができました。

2点の減点要因とは？

指摘箇所は「使用していない JavaScript の削減 」です。

アクセス解析で使用しているGoogle Analyticsの解析タグが指摘されています。2点の要因はLCPなので、LCPがさらに早くなれば良いのです。他の改善施策でも構わないのです。現時点でも十分な表示速度を達成しており、ユーザー体験・SEO両面で高いパフォーマンスが期待できます。今後も必要に応じて継続的な改善を行っていきます。