はじめに

Webサイトの表示速度は、ユーザー体験やSEOに直結する重要な要素です。特にスマホでは、読み込みが3秒以上かかると約半数のユーザーが離脱するとも言われています。高速化はデザインや機能以上に成果を左右する大切なテーマです。本記事では PC・スマホ両方で意識すべき表示速度改善のチェックポイント を整理し、さらに PageSpeed Insightsでの改善実例 を紹介します。今日から取り組める実践的な内容なので、自分のサイトの診断と改善に役立ててください。

画像の最適化

画像はサイトの転送量の大部分を占めるため、最初に見直すべきポイントです。WebPやAVIFといった次世代フォーマットを利用することで、従来のJPEGやPNGよりも30〜70％の軽量化が可能です。また、実際に表示されるサイズより大きな画像を読み込んでいないかも確認しましょう。さらに loading="lazy" を利用して遅延読み込みを設定すれば、ファーストビュー以外の画像は必要になるまで読み込まれず、体感速度が大きく改善します。アイコンはSVGやCSSで代替できる場合もあるため、余計な画像を使わない工夫も有効です。

CSS・JavaScriptの整理

不要なライブラリやプラグインを読み込んでいると、それだけで大きな速度低下につながります。利用していないコードは積極的に削除しましょう。残したコードは minify（圧縮）して軽量化します。またJavaScriptは defer や async を利用し、DOM構築後に読み込むことでレンダリングを妨げません。CSSはクリティカルCSSをインライン化し、表示に必要な部分だけ先に読み込むと初期描画が早くなります。モダンフレームワークを使っている場合でも、ビルド設定を見直すだけで大きく改善できることがあります。

サーバー・キャッシュ対策

サイトの基盤となるサーバーやキャッシュ設定も表示速度に大きな影響を与えます。まずはPHPやMySQLを最新バージョンにして処理速度を高めましょう。WordPressであれば WP Rocket や LiteSpeed Cache などのキャッシュプラグインを導入することで、動的ページを静的HTMLとして返せるため高速化が期待できます。また、CDN（Cloudflare など）を利用してコンテンツを世界中の拠点から配信すれば、ユーザーがどこからアクセスしても安定した速度を保てます。さらにGzipやBrotliといった圧縮を有効化すれば、転送データ量そのものを削減できます。

フォント改善

Webフォントは便利ですが、適切に設定しないと大きな速度低下要因になります。Google Fontsを使う場合は、preconnect や preload を設定し、早い段階でブラウザに読み込ませましょう。また、使用するフォントウェイトを必要最低限に絞ることが重要です。太字や斜体など複数のウェイトを無駄に読み込むと転送量が膨らみます。さらに font-display: swap; を指定しておけば、フォントが読み込まれる前に代替フォントで表示されるため、ユーザーに白抜け状態（FOIT）を見せずに済みます。

レンダリング最適化

サイトが「表示された」と感じるまでの速度（LCP）は、レンダリングの最適化で大きく変わります。特にファーストビュー（Above the fold）の要素は優先的に読み込む必要があります。不要なJavaScriptや重いアニメーションは後回しにするのが基本です。また、DOMのサイズが大きすぎるとレンダリングに余計な時間がかかるため、入れ子構造を減らし、HTMLをできるだけシンプルに保つことも大切です。ユーザーがスクロールするまで表示されない部分に関しては、後で読み込む戦略を徹底しましょう。

スマホ特有の対策

スマホは通信速度や端末性能に左右されやすいため、PCよりもさらに最適化が必要です。まず、srcset や sizes を利用して画面幅に合った画像を配信しましょう。大きな画像をそのまま読み込ませるのは無駄な転送になります。また、かつて問題だったタップ遅延（300ms遅延）はモダンブラウザでは解消されていますが、古い環境を想定するならFastClickなどの対策も検討できます。さらに、広告タグや外部スクリプトはスマホ表示で極端に重くなりやすいため、遅延読み込みや数の見直しが必要です。

外部リソースの見直し

広告や解析ツール、外部サービスのウィジェットは便利ですが、サイト速度を大きく低下させる要因でもあります。まずは不要なタグを削除し、本当に必要なものだけを残しましょう。Google Fontsを使う場合も、自サーバーにホスティングして外部リクエストを減らす方法があります。さらにTwitterやInstagramなどSNSの埋め込みは特に重いので、遅延読み込み（Lazy Load）にするかリンク表示に切り替えるのも手です。外部リソースはユーザーに見えない部分で大きな負担をかけていることを意識して改善しましょう。

計測と改善サイクル

改善の効果を測るにはツールを使った計測が欠かせません。代表的なのは Google の PageSpeed Insights や Chrome の Lighthouse です。これらのツールではCore Web Vitals（LCP・CLS・FID）を確認でき、具体的な改善提案も表示されます。ただしスコアはあくまで指標であり、実際のユーザー体感とは必ずしも一致しません。そのため、実機でのチェックも並行して行うことが重要です。「測定 → 改善 → 再測定」を繰り返し、継続的に速度を最適化していきましょう。

PageSpeed Insights 改善実例

Before

PCスコア：54点
スマホスコア：32点
主な問題点
- 画像が未圧縮（JPEG/PNG）
- JavaScriptを同期読み込み
- Google Fontsを外部からそのまま読み込み

After

PCスコア：94点
スマホスコア：83点
実施した改善
1. 画像をWebPに変換し60％容量削減
2. JSを defer で遅延読み込み
3. Google Fontsを事前読み込み＋font-display: swap
4. LiteSpeed Cacheでキャッシュと圧縮を実施

改善の結果、LCP（最大コンテンツ描画時間）が 3.6秒 → 1.9秒 に短縮し、Core Web Vitalsの指標も「良好」判定に変化しました。特にスマホでの体感速度が向上し、離脱率の低下にもつながりました。

まとめ

表示速度改善は「画像 → JS/CSS → キャッシュ」の順で進めると効果が出やすいです。特にスマホでは画像の軽量化と広告タグの最適化だけでスコアが大きく変わります。PageSpeed Insightsのスコアをチェックしながら改善を繰り返すことで、SEOとユーザー体験を両立した快適なサイト運営が実現できます。