自社HPのパフォーマンス改善した話
自社HPのパフォーマンス改善した話
きっかけ
こんにちは。システムデザインワークスの坂寄です。
弊社コーポレートサイト（HP）を PageSpeed Insights で計測したところ、パフォーマンスが73点で、LCP が 2.9秒もあり赤評価でした。
FCPは0.3秒で問題ありませんでしたが、LCPだけが足を引っ張っている状態でしたので、速度の改善に絞って対応しました。
改善前の数字
・パフォーマンス：73（オレンジ）
・FCP：0.3秒（良好）
・LCP：2.9秒（ここが赤）
・Speed Index：2.0秒
・CLS：0.16
・TBT：50ms（良好）
LCPは「最も大きいコンテンツが表示されるまでの時間」の指標で、ここが遅いと「なんとなく重い」と感じられやすくなります。
改善後の数字
・パフォーマンス：97（緑）
・FCP：0.3秒（維持）
・LCP：0.3秒（2.9秒から大幅に短縮）
・Speed Index：1.6秒
・CLS：0.053
・TBT：70ms
結果、パフォーマンスは73点→97点、LCPは2.9秒から0.3秒に大幅に改善しました。
何をしたか
いちばん効果が大きかったのはフォントです。
もともと Google Fonts で M+ Rounded 1c を CDN(インターネット) から読み込んでいたのをやめ、WOFF2 をローカルに配置して読み込むようにしました。CDN をやめたことでネットワークの往復が減り、LCP の改善に効きました。
あわせて、ファイル形式をTTF（1ファイルあたり 3MB 前後）から WOFF2（860KB〜970KB）に変換して軽量化しました。
そのほか、クリティカル CSS のインライン化を行いました。最初の描画に必要なスタイル（カラー変数や基本レイアウト）だけを critical.css に切り出し、layout の head 内でインラインで出力するようにしました。フォント関連はクリティカルから外し、描画のタイミングに影響しないようにしています。
やってみて分かったこと
LCP のボトルネックはフォントだった、ということがはっきりしました。
大きなテキストやロゴが LCP 要素になっていたため、フォントの読み込みが終わるまで LCP が伸びていました。ローカル + WOFF2 + preload にしたところ、一気に改善しました。デザインは変えていないため、見た目のまま速度だけが良くなった形です。
今回の計測と改善はデスクトップを対象としています。モバイルはまだ改善の余地があるため、引き続き取り組んでいく予定です。
■ ご相談お待ちしております。
今回のパフォーマンス改善はあくまで自社の改善ですが、そこで得た知見や設計の考え方は Webアプリ／業務システム開発にそのまま活かせます。
- 社内業務のWebアプリ化（Excel運用のシステム化）
- 既存システムの改修／リプレイス（速度・UI・保守性）
- 会員管理／予約／在庫／受発注の仕組み構築
- 要件整理／設計相談
などなど、ご気軽にご相談ください