改善の進め方
ここまでで計測する方法を説明してきました。ここからは実際にどのように改善を進めていくかを解説していきます。
ヤフーでは次のようなステップで計測／改善を行います。
1. 改善箇所をみつける
- PageSpeed Insightsを使って、改善を行うページを計測する
- PageSpeed Insightsの結果から改善の効果が高い箇所をみつける
2. 開発環境で改善する
- Lighthouseを使って開発環境のページを計測する
- 開発環境に改善施策を行う
- Lighthouseを使って改善施策の効果を前後比較する
3. 改善効果を測定する
- リリース後Lighthouse CI、PageSpeed Insights、Search Consoleを利用してフィールドデータが改善するかを確認する
改善箇所をみつける
まずはPageSpeed Insightsで改善効果が高い箇所を見つけます。
先程も登場しましたが、次の画像はヤフートップページでPageSpeed Insightsを実行した結果です。
まずはフィールドデータを確認します。ここで赤色や黄色となっている指標は改善の必要があるポイントです。各指標でユーザーが閾値のどのラインにいるかが％で示されています。
緑色の％が増えるほど多くの閾値内（快適に使える）でアクセスしているユーザーが多く、赤色の％が増えるほどパフォーマンスが低い状態でアクセスしているユーザーが多いと読み取れます。上記のスクリーンショットの結果を見ると全て緑となっているため、SEOに対する影響はないレベルまで到達していると読み取れます。
％が大いほどそのラインに含まれる人数が多い＝改善効果が多人数に効くため、赤の％が高い指標は改善するコストパフォーマンスが高い箇所です。
例えば上記の結果をみるとLCPの結果が緑ではありますが、黄に近い位置にいます。そのためLCPの改善から手をつけると、より効果的に多くの人へリーチしやすい改善となるでしょう。
また、ページの下部には同時に計測されたラボデータも表示されています。
フィールドデータから見つけた効果の高い改善ポイントを、ラボデータから得た具体的な改善ポイントに当てはめて、ひとつずつ解消していきましょう。
開発環境を改善する
改善箇所の見当をつけたら、まずは開発環境で改善の施策を行います。
開発環境でLighthouseを実行し、改善前のスコアや指摘項目の確認をします。改善前の現状を確認したら、それぞれの指摘項目の改善に着手します。
Lighthouseを実行するとそれぞれの改善ポイントに、影響を受けているファイルや要素に加え、参考となるリンクが記載されています。リンク先のドキュメントでは、何故そのポイントがパフォーマンスに影響しているのかという理由や、具体的な改善方法が解説されています。
例えばファイルの圧縮処理をしていない静的コンテンツが検出された場合には次のドキュメントが記載されます。
このドキュメントでは、なぜ圧縮をすべきなのか、具体的な修正の方法などが説明されています。
改善の内容は、上記のように簡単な修正で対応できるものや、サーバーのレスポンス速度を上げるといった単なる作業では難しいものもあります。
筆者がパフォーマンス改善を行ってきた肌感覚としては、サーバーのレスポンス速度をできる限り高速化すると、その他の速度に関わる指標も改善していきます。ブラウザが処理を開始するまでの時間の方がパフォーマンスに対して大きな影響を持っているためと考えています。
小手先でできることが少なく、API等を含めた総合的な改善が必要になるため、難易度は高いですがその分改善効果も大きく出ることが多いです。
改善を加えたら開発環境に反映し、再度Lighthouseで計測します。指摘項目の減少やスコアの向上が計測できたら、本番環境へ反映しましょう。
改善効果を測定する
最後に施策のリリース後、本番環境で実際に効果が出るかを測定します。
フィールドデータは影響が緩やかなため、Lighthouse CI等で実環境のスコアが数日安定的に高い状態が続くかを確認しつつ、PageSpeed InsightsやSearch Consoleで推移を追っていきましょう。
パフォーマンス改善は一度やって終わりではありません。一度行った改善も時間と共に効果が薄まってしまうことも多くあります。継続した計測と改善を続けることが重要です。
まとめ
Webのパフォーマンスについて、概要と改善方法についてまとめました。
Webのパフォーマンス向上は近年非常にホットな話題です。パフォーマンスが上がればユーザーに対してよいユーザー体験が提供できます。パフォーマンスはビジネスの指標にも影響するということは、昔から言われてきましたが、個別のノウハウや計測になりがちで、効果を具体的に計るという点でハードルがありした。
Core Web Vitalによってそれらのノウハウをまとめ、数値として共通の基準を示せるようになりました。
数値として比較できることで、エンジニアの自己満足と思われない改善ができるようになったことは大きな価値です。例えば「CLSを現象させたことで、セッション時間が伸びた」といった事柄を客観的に説明できるようになります。実際にヤフーの内部でもスコアの改善と共にビジネス指標が向上した例も多くあります。
「客観的な基準を示すことが可能になった」ことがCore Web Vitalsのもつ大きな価値だと筆者は考えています。
本記事がパフォーマンス向上にむけた一歩を踏み出す手助けとなれば幸いです。
