SPEED 100 PageSpeed 100点攻略

INTRODUCTION

なぜPageSpeedにこだわるのか

Googleは2021年からCore Web Vitalsをランキング要因に組み込みました。つまり、サイトの表示速度がSEOに直結する時代です。PageSpeed Insightsのスコアは単なる自己満足ではなく、検索順位、ユーザー体験、そしてビジネス成果に直結する重要指標なのです。

「でも100点なんて無理でしょ？」と思いますよね。僕も最初はそう思っていました。しかし、正しいアプローチで一つずつ改善していけば、静的サイトなら100点は十分に現実的な目標です。このサイト（HAKUSO）で実際に取り組んだ7つのテクニックを、具体的に解説していきます。

TECHNIQUES

100点を獲る7つのテクニック

STEP 01

画像の徹底最適化

WebP形式への変換は基本中の基本。JPEGやPNGと比較して、同じ品質で30-50%ファイルサイズが小さくなります。Squooshを使えばブラウザ上で簡単に変換可能。さらにwidth/height属性を明示してCLS（Cumulative Layout Shift）を防ぎましょう。ブラウザが画像のスペースを事前に確保してくれるので、読み込み中のレイアウトのガタつきがなくなります。

遅延ロード（loading="lazy"）もお忘れなく。ファーストビューに表示されない画像にはすべてこの属性を付けるべきです。ただし、ヒーロー画像など最初に表示される画像には付けないこと。逆にLCPが遅くなります。

このサイトではSVGをインラインで使用し、画像リクエスト自体をゼロに近づけました。アイコンやデコレーションはすべてSVGかFont Awesomeで実現。外部画像ファイルへのHTTPリクエストを極限まで減らすことが、速度改善の第一歩です。

STEP 02

Critical CSSの抽出

ファーストビュー（Above the fold）に必要なCSSだけをHTMLの<style>タグにインライン化します。残りのCSSは非同期で読み込む。これだけでFCP（First Contentful Paint）が0.5秒以上改善することもあります。

具体的には、ヘッダー、ヒーローセクション、最初のテキストブロックに使われるスタイルだけを抽出します。Chromeのデベロッパーツールで「Coverage」タブを開くと、各CSSファイルのうち実際に使われている割合が一目でわかります。未使用率が50%を超えていたら、分割を検討しましょう。

STEP 03

JavaScriptの遅延読み込み

defer属性とasync属性を適切に使い分けることが重要です。自分で書いたmain.jsにはdeferを使い、HTMLのパース完了後に実行。サードパーティスクリプト（Google Analyticsなど）にはasyncを使い、ダウンロード完了次第実行。

このサイトではmain.jsにdeferを付け、body閉じタグの直前に配置しています。さらに、アニメーション系のスクリプトはIntersection Observerで必要なタイミングまで実行を遅延させています。「使う瞬間まで動かさない」がパフォーマンス最適化の鉄則です。

STEP 04

フォントの最適化

font-display: swapでフォント読み込み中のFOIT（Flash of Invisible Text）を防止します。フォントの読み込みが完了するまでシステムフォントで表示し、ダウンロード完了後に切り替える。ユーザーは一瞬のフォント変化を見ることになりますが、テキストが見えない状態よりはるかに良い体験です。

また、preconnectでGoogle Fontsへの接続を高速化しましょう。<link rel="preconnect" href="https://fonts.googleapis.com">と<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>の2行をhead要素の早い段階に配置するだけで、フォントの取得開始が早まります。

STEP 05

不要なCSSの削除

使っていないスタイルを洗い出してパージ。CSSフレームワーク（BootstrapやTailwind）を使っている場合、実際に使用しているクラスは全体の10-20%程度ということも珍しくありません。PurgeCSSを使えば未使用クラスを自動で除去できます。

ChromeデベロッパーツールのCoverageタブが便利。赤く表示された行が未使用のCSS。このサイトではフレームワークを使わず、すべて手書きCSSで実装しているため、不要なスタイルが最初から存在しません。手書きCSS最強説を唱えたい。

STEP 06

サーバーレスポンスの高速化

CDN（Content Delivery Network）の利用、Gzip/Brotli圧縮、キャッシュヘッダーの適切な設定。これらはフロントエンドの最適化と並行して行うべきサーバーサイドの対策です。

静的サイトならNetlify/Vercelのエッジ配信が最強。世界中のエッジサーバーからコンテンツを配信するため、TTFB（Time to First Byte）が劇的に改善します。Brotli圧縮はGzipの後継で、テキストファイルを20-30%さらに圧縮可能。最近のブラウザはほぼすべてBrotliに対応しています。

STEP 07

レンダリングブロックの排除

CSSはhead内に配置し、JSはbody末尾に配置する。これはWebパフォーマンスの基本中の基本ですが、意外と守られていないサイトが多い。render-blockingリソースをゼロに近づけることが目標です。

特にサードパーティのウィジェット（チャットツール、SNSの埋め込みなど）はレンダリングブロックの原因になりがち。これらは可能な限り非同期で読み込むか、ユーザーの操作（スクロールやクリック）をトリガーにして後から読み込む工夫が有効です。

SUMMARY

まとめ：100点は通過点

7つのテクニックを一つずつ実践すれば、スコア90以上は確実に到達できます。100点は静的サイトなら十分現実的な目標です。しかし大切なのは、スコアの数字そのものではなく「ユーザーが快適にサイトを使えているか」という体験です。

PageSpeedのスコアはあくまで目安。本当に重要なのは、実際のユーザーがストレスなくコンテンツにアクセスできること。数字に振り回されず、でも数字を軽視せず。そのバランスを保ちながら、最高のWeb体験を追求していきましょう。

HAKUSOでは制作するすべてのサイトでPageSpeed 90以上を目標にしています。表示速度の改善だけでもご相談可能ですので、お気軽にお問い合わせください。