Webサイトの表示速度は、利用者の体験に直結します。
表示が遅いと、離脱が増え、検索結果での評価にも影響するとされています。
デザインや制作の段階で意識しておくと、効果が出やすいポイントがあります。
この記事では、画像、フォント、読み込み順の3つを中心に、基本的な改善方法を解説します。
まず現状を測る
改善の前に、現状の数値を把握します。
ブラウザの開発者ツール（Lighthouse）や、PageSpeed Insightsでは、読み込み速度や改善点を確認できます。
Googleが重視するコアウェブバイタルには、次の3つの指標があります。
| 指標 | 意味 | 良好の目安 |
|---|---|---|
| LCP（Largest Contentful Paint） | 最も大きな要素が表示されるまでの時間 | 2.5秒以内 |
| INP（Interaction to Next Paint） | 操作に対する応答の速さ | 200ミリ秒以内 |
| CLS（Cumulative Layout Shift） | 表示中のレイアウトのずれ | 0.1以下 |
1. 画像を最適化する
多くのサイトで、ページの重さの大半を占めるのは画像です。
- 表示サイズに合わせてリサイズする：横幅800pxで表示する画像に、4000pxの写真をそのまま使わない。
- 圧縮する：見た目が変わらない範囲で、JPEGやWebPの品質を下げて、ファイルサイズを減らす。
- 新しい形式を使う：WebPやAVIFは、JPEGやPNGより小さくできることが多い。
対応していないブラウザ向けに、<picture>要素で代替の形式を指定できる。 - 遅延読み込み：画面外の画像には
loading="lazy"を指定する。
ただし、最初に見える大きな画像（LCPの対象）には付けない。 - width／height を指定する：画像の読み込み前に表示領域を確保し、レイアウトのずれ（CLS）を防ぐ。
2. Webフォントを軽くする
日本語のWebフォントは、ファイルサイズが大きくなりがちです。
- 使うウェイトを絞る：Noto Sans JPなら、400と700など、必要な太さだけを読み込む。
- font-display: swap：フォントの読み込み中も、代替フォントで文字を表示する。
- preconnectを指定する：フォントの配信元への接続を、早めに開始する。
- システムフォントも検討する：デザイン上の要件が許せば、追加の読み込みが不要になる。
3. 読み込み順を整える
- JavaScriptは
deferまたはasync：HTMLの解析と表示を、スクリプトの読み込みが妨げないようにする。 - CSSは必要なものだけにする：使っていないCSSを減らし、ページごとに必要なものだけを読み込む。
- サードパーティのスクリプトを見直す：解析ツール、広告、チャットなどの外部スクリプトは、表示速度に大きく影響する。
本当に必要なものに絞る。
4. 配信を最適化する
- 圧縮転送：gzipやBrotliで、HTML・CSS・JSを圧縮して配信する。
- キャッシュ：画像やCSS・JSには、適切な
Cache-Controlを設定し、再訪問時の読み込みを省く。 - CDNの利用：利用者に近い場所から配信し、遅延を減らす。
デザインの段階でできること
- ファーストビューに、大きな画像や動画を多用しない。
- 装飾のための画像は、CSSやSVGで代替できないか検討する。
- フォントの種類やウェイトを、必要最小限にする。
- 後から挿入される要素（バナーなど）の表示領域を、あらかじめ確保する。
まとめ
表示速度の改善は、まず測り、効果の大きいもの（多くは画像）から手を付けるのが基本です。
制作の段階から、画像のサイズ、フォント、読み込み順を意識しておけば、後からの修正を減らせます。
画像の圧縮やリサイズは、ツールを使えば手軽に行えます。
