画像を軽くするだけじゃない！PageSpeed最適化5選 | GUARDIAN Creative BLOG | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー | 株式会社ガーディアン｜141億のデータで中小企業を勝たせるWEB戦略データ・カンパニー

画像を軽くすることも大切ですが、それと同じくらい重視すべきなのがCSSやJavaScriptの読み込み方法です。

Google PageSpeed Insightsのスコアが低いページでは、「レンダリングを妨げるリソースがある」という警告がよく表示されます。

これは、ページ表示に必要な情報が遅れて読み込まれることで、表示速度が落ちる原因になります。

解決策：deferやasyncの活用

JavaScriptはページの読み込みをブロックする性質があるため、読み込みタイミングをコントロールすることが効果的です。

具体的には、スクリプトタグに defer や async を指定して、描画の妨げにならないようにするのがポイントです。

defer：HTMLのパース完了後にスクリプトを実行（順番を維持）

async：ダウンロードが完了したら即時実行（順不同）

たとえば以下のように書くことで、読み込みを遅延させつつページ表示を速くできます。

html

<script src="example.js" defer></script>

不要なコードの削除と整理も重要

ページに不要なJavaScriptやCSSが含まれていると、読み込み時間が無駄に長くなってしまいます。

特にサードパーティー製ツール（Googleタグマネージャー、チャットウィジェット、SNS連携など）は注意が必要です。

すぐに使っていないコードや重複するライブラリは、思い切って削除・統合しましょう。

WordPressなどのCMSを使っている場合は、「Asset CleanUp」や「Perfmatters」などのプラグインを活用すると、ページごとに不要なリソースを制御することができます。

キャッシュを活用することは、PageSpeed最適化の基本かつ強力な手段です。

ユーザーがあなたのWebサイトを訪れるたびに、毎回すべてのリソース（HTML、CSS、JavaScript、画像など）をサーバーから取得していては、表示速度が遅くなってしまいます。

そこで役立つのが「ブラウザキャッシュ」や「サーバーキャッシュ」といった仕組みです。

これらを適切に設定することで、ユーザーの端末に一度読み込んだデータを保存し、次回以降のアクセスを高速化できます。

ブラウザキャッシュの設定例（Apache）

たとえばApacheサーバーを使用している場合、.htaccessファイルに以下のような記述を追加することで、ブラウザキャッシュの有効期限を指定できます。

apache

<IfModule mod_expires.c>

 ExpiresActive On

 ExpiresByType image/webp "access plus 1 year"

 ExpiresByType text/css "access plus 1 month"

 ExpiresByType application/javascript "access plus 1 month"

</IfModule>

これにより、WebP画像やCSS、JavaScriptなどを再読み込みせずに表示できるようになります。

WordPressならプラグインで簡単設定

WordPressを使っている場合、「WP Super Cache」「W3 Total Cache」「LiteSpeed Cache」などのプラグインを活用するのが手軽です。

これらのプラグインはブラウザキャッシュのほか、HTMLの圧縮、画像の遅延読み込みなども一括で対応できるものが多いため、PageSpeed改善に非常に有効です。

Webページの表示速度において、ユーザーが最初に目にするファーストビュー（画面最上部の領域）を素早く表示することは非常に重要です。
実際の読み込みが完了していなくても、画面上にすぐコンテンツが現れれば、体感速度は大きく向上します。

「重要な情報」を先に読み込ませる
PageSpeed Insightsでは「初期表示コンテンツの優先読み込み」や「Largest Contentful Paint（LCP）」の改善が評価指標になります。
これに対応する方法のひとつが、Critical CSS（クリティカルCSS）の導入です。

Critical CSSとは、ファーストビューに必要なスタイルだけを先にインラインで読み込み、それ以外のCSSは後から読み込む技術です。
これにより、ブラウザがページの描画に必要な情報をすぐ取得できるため、表示の初速が大きく改善します。

UX向上の工夫も大切
技術的な対策だけでなく、「ローディング中にスケルトン表示を使う」「読み込み中アイコンを表示する」といったUIの工夫も効果的です。
ユーザーに「すぐ動いている」という印象を与えることで、ストレスなくページを閲覧してもらうことができます。

いくらフロントエンドを最適化しても、サーバー自体が遅ければPageSpeedの限界はすぐに訪れます。
特に共用サーバーを利用している場合、他のユーザーの影響でレスポンスが不安定になり、表示速度にばらつきが出ることも少なくありません。

サーバー選びで速度が変わる
PageSpeed改善を本気で目指すなら、高速化対応済みのホスティングサービスを選ぶことも重要です。
たとえば「LiteSpeed」エンジンを採用しているレンタルサーバーは、WordPressとの相性も良く、キャッシュ処理や画像配信において高いパフォーマンスを発揮します。

また、世界中に分散したデータセンターからコンテンツを配信できるCDN（コンテンツ・デリバリー・ネットワーク）の導入も効果的です。
CloudflareやFastlyなどを使うことで、アクセス元に近いサーバーからコンテンツを届けられるため、表示速度の向上とサーバー負荷の軽減が同時に実現できます。

PageSpeedの改善は、単にスコアを上げるための作業ではなく、ユーザーに快適な体験を届けるための施策です。
画像最適化やWebPの導入に加え、読み込みリソースの整理やサーバー環境の見直しなど、全体を通して考えることが重要です。
小さな改善の積み重ねが、SEOやCV率の向上、そしてユーザー満足度アップにつながります。
ぜひ今回紹介した5つの対策を実践し、あなたのWebサイトの表示速度を根本から見直してみてください。