Webサイトを一度速くするのは簡単です。難しいのは、機能を追加し続けながら速さを保つことです。新しいコンポーネント、フォント、ライブラリが増えるたびにページは少しずつ重くなり、サイトが遅いと感じるまで誰も気づきません。そこで私たちは、速度を一度きりの監査として扱うのをやめ、すべての変更が通過しなければならないテストにしました。
出発点
このサイトを初めて本格的に計測したとき、読み込み中にレイアウトがずれ（Cumulative Layout Shiftは約0.2）、帯域を制限したモバイル回線ではメインコンテンツの表示に4〜6秒かかっていました。メインのスタイルシートは圧縮後で41 KBあり、その主な原因は、管理画面向けのコンポーネントやバリデーションのコードが訪問者にも配信されていたことでした。
変えたこと
- 訪問者には訪問者向けのコードだけ。管理画面のUIライブラリとフォームのバリデーションライブラリは、公開サイトに含まれなくなりました。テストがサイトのインポートをたどり、どちらかが紛れ込むと失敗します。
- ページにあるものだけのCSS。メインのスタイルシートは296 KBから98 KBに、圧縮後は16 KBになりました。
- レイアウトをずらさないフォント。主要なフォントはプリロードし、使わないかもしれないコードを事前に取得することもなくなりました。
速さを保つテスト
プルリクエストごとに、CIがサイトをビルドし、本番と同じ方法（HTTP/2、TLS、圧縮）で配信して、4つの主要ページでLighthouseを3回実行し、その中央値を取ります。予算は、すべてのスコアが95以上、最大のコンテンツが2秒未満で表示、レイアウトシフトが0.1未満、メインスレッドのブロックが200 ms未満です。変更が予算を超えるとCIが赤になり、その変更はマージされません。同時にアクセシビリティチェックも実行しており、現在対象のページでWCAG AAの違反は見つかっていません。
結果
CIでは、Lighthouseの4つのカテゴリすべてで100点を取り、メインコンテンツは1秒未満で表示されます。本番サイトでは、トップページが100点でメインコンテンツの表示は約1.2秒、製品ページは98点です。
まだ完璧ではない点も正直にお伝えします。日本語などのCJK言語のページは、フォントがはるかに大きいため遅くなっています。これには専用のタスクがあります。
なぜあなたにとって重要なのか
遅いページは、訪問者が一文字も読まないうちに離脱を招き、検索エンジンもそれに気づきます。私たちとランディングページやオンラインストアを作る場合、この予算も標準で付いてきます。追加オプションではなく、私たちの仕事の進め方の一部です。