PageSpeed Insightsのスコア改善を目的とした表示速度改善の実装
- LOGZA WEB
- ホームページ制作の技術的な取り組み
- PageSpeed Insightsのスコア改善を目的とした表示速度改善の実装
ホームページの表示速度は、ユーザーの離脱率や検索順位にも影響する重要な要素のひとつです。特にスマートフォン環境では、表示が遅いだけで機会損失につながるケースも少なくありません。
ここでは、LOGZA WEB（ログザウェブ）が実際の制作現場で行っている改善方法をもとに、PageSpeed Insightsの評価を意識した表示速度改善の考え方や具体的な実装内容についてまとめています。
まずは、論より証拠
実際このページの測定結果として、PageSpeed InsightsでPC100点・スマートフォン97点を取得しています。
画像に関連する実装方法
ホームページの表示速度に最も大きく影響する要素のひとつが画像です。
ここでは、LOGZA WEB（ログザウェブ）が制作時に実施している画像最適化の方法についてご紹介します。
画像の遅延読み込み
画像の遅延読み込みとは、ページ表示時にすべての画像を一度に読み込むのではなく、表示領域に入ったタイミングで画像を読み込む仕組みです。
LOGZA WEB（ログザウェブ）では、安定性と対応ブラウザの広さを考慮し、軽量なLazy Loadライブラリ「lazysizes」を利用した遅延読み込みを実装しています。画像数が多いページでも表示速度を維持できるため、PageSpeed Insightsのスコア改善にも有効な施策のひとつです。
<!-- 画像部分 -->
<img class="lazyload" src="/images/common/placeholder.gif" data-src="/images/sample.jpg" width="700" height="300" alt="">
<!-- </body> の直前などに読み込み -->
<script src="/js/lazysizes.min.js"></script>
src には軽量なプレースホルダー画像（数KB程度）を指定し、実際に表示する画像は data-srcに設定します。これにより初期表示時の通信量を抑えながら、スクロール位置に応じて本来の画像を読み込むことができます。
また、JavaScriptファイルは</body>タグ直前に読み込むことで、HTMLの描画をブロックせず表示速度への影響を最小限に抑えています。
画像サイズ最適化
画像は表示サイズよりも大きい解像度のまま使用すると、通信量が増加し表示速度の低下につながります。
そのため、LOGZA WEB（ログザウェブ）では、実際の表示サイズを基準に適切なサイズへリサイズした状態で使用しています。
目安としては、表示サイズの約1〜1.5倍程度の解像度を基準とし、画質を保ちながら過剰な通信量にならないよう調整しています。
必要以上に大きな画像を読み込まない設計を行うことで、ページ全体の読み込み速度改善につなげています。
画像の圧縮
画像ファイルはそのまま使用すると容量が大きくなりやすいため、見た目の品質を維持しながらファイルサイズを軽量化する圧縮処理を行っています。
画像の圧縮は、PageSpeed Insightsのスコア改善にも大きく影響する重要なポイントのひとつです。
画像のwidth・height指定
画像タグにwidthとheightを指定することで、画像読み込み前に表示領域のサイズを確保することができます。これによりレイアウトのズレ（CLS）を防ぎ、表示の安定性を向上させることができます。
LOGZA WEB（ログザウェブ）では、画像の実際の表示サイズに合わせてwidth・height属性を指定し、表示速度評価の改善につなげています。
PageSpeed Insightsで改善される主な項目
遅延読み込み、画像サイズ最適化、画像の圧縮などを行うことでPageSpeed Insightsで改善項目として表示される下記の問題に対応することができます。
- 適切なサイズの画像
- 効率的な画像形式を使用する
- 画像配信を改善する
- オフスクリーン画像の遅延読み込み
- 画像要素に明示的な幅と高さを指定する
キャッシュの設定
ブラウザキャッシュを利用することで、一度読み込んだ画像やCSS・JavaScriptファイルを ユーザーの端末側に保存し、再訪問時の読み込み速度を向上させることができます。 不要な通信を減らすことで表示速度の改善にもつながります。
LOGZA WEB（ログザウェブ）では、画像や静的ファイルに対して適切なキャッシュ期間を設定し、 PageSpeed Insightsの評価改善につなげています。
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
</IfModule>
- 効率的なキャッシュ ポリシーを使用する
CSSの整理と軽量化
CSSファイルが増えすぎたり、使用していないスタイルが多く含まれていると、読み込み時間の増加につながり表示速度へ影響することがあります。
LOGZA WEB（ログザウェブ）では、Bootstrapなどのフレームワークを使用する場合でも、必要な機能に限定して利用し、未使用のCSSを削除することで軽量化を行っています。また、CSSファイルを整理・統合することで、読み込み回数の削減にもつなげています。
- 使用していないCSSの削減
- レンダリングを妨げるリソースの除外
まとめ
ホームページの表示速度は、ユーザー体験の向上だけでなく、検索順位やコンバージョンにも影響する重要な要素です。
今回ご紹介したように、画像の最適化、キャッシュ設定、CSSの整理・軽量化などの施策を組み合わせることで、PageSpeed Insightsの評価改善につなげることができます。
- 画像の遅延読み込み（Lazy Load）
- 画像サイズの最適化と圧縮
- width・height指定によるレイアウト安定化
- ブラウザキャッシュの設定
- CSSの整理・軽量化
LOGZA WEB（ログザウェブ）では、デザインや機能だけでなく、表示速度や技術的品質にも配慮したホームページ制作を行っています。
表示速度の改善や高速化をご検討の方は、お気軽にご相談ください。
