PageSpeed Insightsを活用してWebサイトの表示速度を改善してみる

はじめに：表示速度はWebサイトの基本

Googleが提供するPageSpeed Insightsは、 「ユーザーがいかにストレスなくコンテンツにたどり着けるか」 という指標をスコア化してくれます。

なぜ高速化が必要なのか？

直帰率の抑制：モバイルユーザーの多くは、読み込みに3秒以上かかるとページを離れてしまうと言われています。どんなに良い記事を書いても、読まれなければ存在しないのと同じです。
Core Web Vitals の改善：Googleは「表示の速さ」「応答の良さ」「視覚的な安定性」を検索評価の要素（コアウェブバイタル）として採用しています。これを整えることはSEO対策につながります。
デバイス格差の解消：高速な光回線と最新PCなら一瞬で開くページも、移動中の不安定な4G回線や古いスマホでは数秒かかります。外出中に検索していて、最上位ヒットしたページの表示が遅すぎて別のサイトを見に行くみたいなことありますよね。

今回は、私のサイトを例に、実際に効果のあった具体的な改善ステップを解説します。

何から手を付けるか

PageSpeed InsightsのURL入力をすると、そのWebサイトのスコアを計測してすぐに表示してくれます。スコアと合わせて、改善するべき点を記載してくれるので基本はその項目をつぶしていきましょう。

下記は私の実際の改善例です。

1. レンダリングを妨げる「CSSとフォント」の最適化

ブラウザはHTMLを読み込む際、途中にCSSやフォントのリクエストがあると、そのダウンロードが終わるまで画面の描画を一時停止してしまいます。これが「レンダリングをブロックしている状態」です。

小さなCSSをHTMLに埋め込む（インライン化）

数KiB程度の小さなCSSファイルを別ファイルとして読み込むのは、通信の往復（リクエスト）が発生するため非効率です。

【手順】Astroでの設定変更 astro.config.mjs を開き、ビルド設定に inlineStylesheets を追加します。

import { defineConfig } from 'astro/config';

export default defineConfig({
  build: {
    // 一定サイズ以下のCSSを自動的にHTML内へ書き込む
    inlineStylesheets: 'always', 
  },
});

これにより、ブラウザはHTMLを受け取った瞬間にスタイルを適用できるため、画面が白く表示される時間を物理的に削れます。

Google Fontsへの接続を加速させる

私のサイトではgooglフォントを使用しています。そのため表示するのに外部サーバー（fonts.googleapis.com）にフォントを取りに行く必要があるんですね。しかし、毎回フォントサーバーとやり取りするのは遅いので、自分のサーバーにフォントを置いてそれを読めばフォントサーバーへ都度アクセスしなくて良くなります。

※使用しているフォントによっては、サーバーへの配置が認められないものもあるので規約はよく確認しましょう

【手順】preconnectの追加 HTMLの <head> タグ内に以下の2行を追記します。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

これは「後でこのサーバーに繋ぐから、今のうちに握手（接続確立）だけ済ませておいて」とブラウザに指示を出す仕組みです。

2. 画像の最適化：適切なサイズと端末ごとの形式

PageSpeed Insightsで最も大きな「削減可能サイズ」として指摘されやすいのが画像です。カメラで撮ったままの大きな画像やスクリーンショットなど、PNG形式をそのまま使ってしまっていました。

Astroの `<Image />` コンポーネントを使い倒す

このサイトで使用しているAstroには、自動でリサイズとフォーマット変換を行う便利な機能が備わっています。

【手順】imgタグの置き換え 単なる <img> タグではなく、astro:assets の Image コンポーネントを使用します。

---
import { Image } from 'astro:assets';
---
<Image 
  src="画像のパス" 
  alt="説明文" 
  width={650}  /* 表示領域の約2倍の数値を指定（Retinaディスプレイ対応） */
  height={340} 
  format="webp" /* 軽量なWebP形式へ自動変換 */
  loading="lazy" /* 基本は遅延読み込み、ただし後述の例外あり */
/>

【注意】外部ドメインの画像を使う場合 StrapiなどのCMSから画像を取得している場合は、astro.config.mjs でドメインを許可する必要があります。

export default defineConfig({
  image: {
    domains: ["your-cms-domain.com"],
  },
});

3. ブラウザキャッシュを正しくコントロールする

「効率的なキャッシュ保存期間」という指摘は、サーバー側の設定で解決します。一度読み込んだ素材をユーザーのデバイスに保存させることで、2回目以降のアクセスを速くします。

「3か月」という現実的な選択肢

Googleは1年間の保存を推奨することもありますが、私は公開後に画像を差し替えたくなったりすると思ったので「3か月（約90日）」にしておきました。私はさくらのインターネットサーバーを使用しているので、下記方法で設定しました。

【手順】.htaccess（さくらインターネット等の場合） サーバーの公開ディレクトリにある .htaccess ファイルに、キャッシュの有効期限（Expires）を追記します。

<IfModule mod_expires.c>
  ExpiresActive On

  # 画像・フォントは3か月間（約7776000秒）保持
  ExpiresByType image/png "access plus 3 months"
  ExpiresByType image/webp "access plus 3 months"
  ExpiresByType font/woff2 "access plus 3 months"

  # Astroが生成するハッシュ付きJS/CSSは、中身が変われば名前が変わるので
  # 強気に1年（max-age=31536000）設定しても安全です
  <FilesMatch "\.([0-9a-f]+)\.(js|css)$">
    Header set Cache-Control "max-age=31536000, public, immutable"
  </FilesMatch>
</IfModule>

4. 盲点になりがちな「LCP」の優先順位

ページを表示したときにすべての画像は読み込まず、見えるものから順位読み込む遅延読み込み（lazy）という方法があります。とはいえ画像はすべて「遅延読み込み（lazy）」にすればいいわけではありません。 「ページを開いた瞬間に最初に見える画像」 まで遅延させてしまうと、逆に表示速度の評価（LCP）が悪化します。

【改善のコツ】