Webページの表示高速化（静的HTML）

期間

2024年1月〜2024年1月

お仕事概要

静的HTMLページの表示高速化を行いました。

お仕事詳細

表示速度約4秒の改善

ページの表示速度が遅かったため、それを改善するための対策を行いました。
対策の効果は、PageSpeed Insightsで確認します。

対策前と対策後の計測結果はこちらです。（PageSpeed Insightsの計測結果）

計測結果では、約４秒ほど速くなり、改善ができました。

「画像のサイズ圧縮」

一部webp化されていましたが、ある程度サイズの大きい画像もwebp化して、サイズ圧縮による表示高速化を図りました。

「画像の遅延読み込み」

loading=”lazy”で画像の遅延読み込みを行いました。CLS（要素の配置ずれ）対策としては、横幅、縦幅の指定を行います。
体感ですが、この対策で大幅に表示が速くなったが気がしました。
「画像のサイズ圧縮」「画像の遅延読み込み」の対策だけでスコアが30程度向上しました。

「動画の遅延読み込み」

JavaScriptを使用して、「画像の遅延読み込み」と同じように、表示されたら読み込まれるようにしました。

「使用していないファイルの削除」「重要でないCSS、JavaScriptの読み込みを遅くする」

Chromeの開発者ツールで使用されていないファイルを確認し、不要なものを削除、重要でないものは読み込みを遅くしました。