🎉高速化の極意：PageSpeed Insightsで100点満点を達成した最適化技術

こんにちは、技術系ブログQiitaで記事を執筆している yukkes です。

Webサイトの表示速度は、ユーザー体験とSEOに直接影響する重要な指標です。表示が遅いサイトは、ユーザーの離脱率を高め、優れたコンテンツも十分に評価されない可能性があります。

この度、私が作成した「AWS試験対策」のWebサイトにおいて、Google社のPageSpeed Insightsで 満点となる100点 を達成することができました。

ページの速度評価は以下から確認できます。

「具体的にどのような施策を実施したのか」というご質問を多数いただいておりますので、本稿では実装した最適化技術と得られた知見を詳細に共有いたします。

1. 次世代フレームワークの採用：「Astro」によるパフォーマンス最適化

本プロジェクトではフロントエンド技術の選定において Astro を採用しました。

Astroは比較的新しいフレームワークですが、パーシャルハイドレーション（必要な時にだけJavaScriptを読み込む仕組み）を実装した高パフォーマンスなフレームワークです。

従来のReactやVue.jsなどのSPA（シングルページアプリケーション）は、初期ロード時に大量のJavaScriptバンドルを読み込む必要があるため、First Contentful Paintに時間を要する傾向があります。一方Astroは、静的コンテンツをHTMLとして先行配信し、インタラクティブ要素のみを選択的にハイドレーションする「アイランドアーキテクチャ」を採用しています。これにより初期表示の大幅な高速化を実現しています。

PageSpeed Insightsの評価においても、このJavaScriptの最適化が高評価につながったと分析しています。

2. グローバル配信基盤の整備：Cloudflare CDNの導入

ユーザーの地理的分布を考慮し、Cloudflare CDNを導入実装しました。

CDNはWebサイトの静的リソースを世界中のエッジサーバーに分散配置する技術です。これにより地理的に最も近接したサーバーからコンテンツが配信されるため、ネットワークレイテンシが大幅に削減されます。

特筆すべき点として、PageSpeed Insightsの計測サーバー（主に北米地域）からのアクセス速度が顕著に改善しました。これは地理的に離れた日本からのオリジンサーバー配信と比較して、グローバルでの体感速度を大幅に向上させる結果となりました。

3. リソース最適化：画像の遅延ローディング実装

初期表示速度を向上させるため、ビューポート外の画像リソースに対して 遅延ローディング（Lazy Loading） を実装しました。

この実装はHTML5の標準仕様に準拠しており、img要素に loading="lazy" 属性を付与するだけで実現できます。

<img src="lazy-image.jpg" alt="遅延読み込みされる画像" loading="lazy" width="600" height="400">

この最適化により、初期ページロード時のリソース読み込み量が削減され、First Contentful PaintおよびLargest Contentful Paintの指標が大幅に改善されました。また、帯域幅の効率的な利用により、モバイルデバイスやネットワーク環境が不安定なユーザーに対しても堅牢な表示を提供できるようになりました。

4. レイアウト安定性の確保：サイズ属性の明示的指定

ユーザー体験を損なう要因の一つとして、ページ読み込み過程でのレイアウトシフトがあります。PageSpeed Insightsでは、この問題を Cumulative Layout Shift（CLS） として数値化し、厳格に評価しています。

この課題に対処するため、以下の対策を講じました：

1. すべての <img> 要素に対して、明示的な width および height 属性を指定

<img src="fixed-size-image.jpg" alt="サイズが固定された画像" width="800" height="600">

1. 動的コンテンツが挿入される要素に対する空間予約の実装

.dynamic-content-wrapper {
  min-width: 100px; /* レスポンシブ環境下での最小幅指定 */
}

これらの施策により、リソース読み込み中のページ上の要素移動が最小化され、視覚的安定性が向上しました。特にモバイルデバイスにおいてはビューポート幅の変動に対しても堅牢なレイアウトを維持することが可能になりました。

5. 次世代フォーマット活用：WebPとPNGのファイル形式戦略

画像リソースの最適化は高速化において重要な要素です。当サイトでは WebP と従来の PNG/JPEG フォーマットを組み合わせた戦略を採用しました。

WebPはGoogleが開発した次世代画像フォーマットであり、従来のJPEGやPNGと比較して同等の視覚品質を維持しながら、25-35%のファイルサイズ削減を実現します。ただし、ブラウザの互換性を考慮する必要があります。

そこで、HTML5の <picture> 要素を活用した次のようなフォールバック構造を実装しました：

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.png" alt="WebP非対応ブラウザ向けのPNG">
</picture>

この実装により、WebP対応ブラウザに対しては最適化されたWebPを、非対応ブラウザに対しては従来形式の画像を提供することが可能になりました。結果として、画質を犠牲にすることなく転送データ量を大幅に削減することに成功しています。

6. Webフォント最適化：先行読み込みとサブセット化

Webフォントの適用は視覚的一貫性を提供する一方で、パフォーマンスに大きな影響を与える要素です。当サイトでは以下の最適化手法を実装しました：

1. リソース優先度の最適化：クリティカルなWebフォントに対して、リソース優先度を明示的に設定しました。

   <link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/myfont.woff2">
   

2. フォントレンダリング制御：フォント読み込み中のユーザー体験を向上させるため、CSS仕様の font-display プロパティを活用しました。

   @font-face {
     font-family: 'MyWebFont';
     src: url('/fonts/myfont.woff2') format('woff2');
     font-display: swap; /* フォント読み込み中もテキストを可視化 */
   }
   

3. サブセットフォントの活用：特定のコンテンツ領域においては、必要な文字セットのみを含む最適化されたフォントファイルを使用しました。特に日本語フォントは数千のグリフを含むため、サブセット化によりファイルサイズを最大90%削減することができました。

結論：総合的アプローチによる成果

上記で解説した6つの最適化施策を包括的に実装することで、Google PageSpeed Insightsにおいて満点となる100点を達成することに成功しました。これらは相互に補完し合い、総合的なパフォーマンス向上に寄与しています。

しかし注意すべき点として、これらの最適化手法は当社のコンテンツ構成と技術スタックに最適化されたものであり、すべてのプロジェクトに一律に適用できるわけではありません。各サイトの要件や制約に応じて、適切な技術選定と最適化戦略を検討する必要があります。

本稿で紹介した手法がみなさまのプロジェクトにおけるパフォーマンス改善の一助となれば幸いです。また、実装にあたってのご質問や追加情報のご要望がございましたら、コメント欄にてご連絡ください。

最後までお読みいただき、ありがとうございました。