この記事は every Tech Blog Advent Calendar 2024の17日目の記事です。
はじめに
エブリーでデリッシュキッチンの開発をしている本丸です。
恥ずかしながら今までWebのパフォーマンスの調査をしたことがなかったのですが、直近で触れる機会があったため、どのように調査したのか簡単にではありますが説明させて頂こうかと思います。
背景
デリッシュキッチンでSEO対策を行う中で、別のエンジニアの方からPageSpeed Insightsを使ってパフォーマンスの改善を行なってはどうかという話が上がりました。
PageSpeed Insightsについてあまりよくわかっていなかったため調査するところから開始しました。(パフォーマンスでページのランキングが上がるという記述は公式のドキュメントからは見つけられておりませんので、確実にページのランキングに効くという内容ではないことはご認識いただければと思います。)
PageSpeed Insights
Google DeveloperのPageSpeed Insights API についてによれば、PageSpeed Insightsとは下記のことができるツールとされています。執筆時点(2024/12/16)では日本語のページと英語のページに差分があるので英語ページを参照していただく方が良いかもしれません。
PageSpeed Insights では、モバイル端末やパソコン向けのページの実際のパフォーマンスに関するレポートと、そうしたページの改善方法を確認できます。
PageSpeed Insightsでは、実際のユーザーの情報の統計からのスコアとLighthouseを使用したシミュレーション環境のスコアを出力してくれます。
Lighthouse
chrome for developersのLighthouse の概要によると、Lighthouseは下記のことができるツールとされています。
Lighthouse は、ウェブページの品質を改善するためのオープンソースの自動化ツールです。公開されているウェブページでも、認証が必要なウェブページでも実行できます。パフォーマンス、ユーザー補助、プログレッシブ ウェブアプリ、SEO などの監査が行われます。
LighthouseではCPUやネットワーク環境を指定することができ、指定したシミュレーション環境でのパフォーマンスを確認することができます。また、パフォーマンスのスコアが低いものに関してどのような改善方法があるのかを教えてくれます。
話の本筋と外れますが、Chromeの開発者ツールなどからPageSpeed Insightsの一機能としてではなくLighthouse単体として使用することもできます。 公開されているものであればPageSpeed Insightsを使用しても良いのですが、ローカルや開発環境など外部に公開していない環境でパフォーマンスを確認したいときにはLighthouseをChromeの開発者ツールから使うのが便利そうです。
デリッシュキッチンをPageSpeed Insightsで確認
デリッシュキッチンをPageSpeed Insightsで確認すると実際のユーザー情報の統計からのスコアは次のようになっていました。
こちらのスコアでは各指標でユーザーごとに良好・改善が必要・不良の3つのどれかで判定され、その75パーセンタイルが最終的な結果として出力されます。 各指標が何を表しているのかを下記にまとめます。
- Largest Contentful Paint (LCP)
- ユーザーがページにアクセスしてから、表示領域内で最も大きなコンテンツが表示されるまでの時間
- Interaction to Next Paint (INP)
- ユーザーがページ内で行うクリックなどの操作の応答性の指標
- Cumulative Layout Shift (CLS)
- ユーザーが予期しないレイアウトの変更がどの程度発生したかの指標
- First Contentful Paint (FCP)
- ユーザーがページにアクセスしてから最初のコンテンツが描画されるまでの時間
- Time to First Byte (TTFB)
- リソースをリクエストしてから最初のデータが返ってくるまでの時間
デリッシュキッチンのスマホ表示では全ての指標で良好を示しているので、実際にデリッシュキッチンを使用しているほとんどのユーザーの環境ではパフォーマンスが問題ないと言えるかと思います。
シミュレーション環境に関しては次のようになっていました。
パフォーマンス、ユーザー補助、おすすめの方法、SEOの4つの項目があるのですが、今回はパフォーマンスに注目していこうかと思います。 パフォーマンスでは次の5つの指標を確認することができます。
- First Contentful Paint (FCP)
- 最初にコンテンツが描画されるまでにかかった時間
- Largest Contentful Paint (LCP)
- 表示領域内で最大のコンテンツが表示されるまでにかかった時間
- Total Blocking Time (TBT)
- コンテンツの最初の描画から、50ms以上かかったタスクの処理時間の合計
- Cumulative Layout Shift (CLS)
- ブラウザの表示領域内で意図しないレイアウトの変更がどの程度あったかの指標
- Speed Index (SI)
- ページのロード中にコンテンツがどれだけ早く視覚的に表示されるか
残念ながらデリッシュキッチンは、CLSの指標以外のスコアが全体的に低いようです。
PageSpeed Insights(Lighthouseでも同様)ではシミュレーション環境で見つかった問題をどのように修正すれば良いかの方針も示してくれます。
例えば、TBTのスコアに悪影響を及ぼしているメインスレッドの処理に関する問題がある場合は図のように方針を示してくれます。
Webのパフォーマンス改善に向けて
ここからは少し話が変わりますが、PageSpeed InsightsでTBTの指標が悪いことがわかったのでもう少しだけ詳細に見ていこうかと思います。
Chromeの開発者ツールの中にパフォーマンスの項目があります。
このパフォーマンスを確認してみると次のような結果になりました。(ボトルネックがわかりやすいようにCPUとNetworkの品質を落としています。)
画像のうち、赤枠で囲った箇所がメインスレッドのパフォーマンスを表している箇所で、その中で赤で表示されているものが50ミリ秒以上かかっていてTBTのスコアに悪影響を与えているものになります。 この次に、何の処理がパフォーマンスに悪影響を与えているかの確認などをしていくことになるかと思うのですが、本記事では概要をつかむところまでということでここまでにしておこうかと思います。
まとめ
PageSpeed Insightsを使って、実際にデリッシュキッチンのパフォーマンスを見てみましたが、改善の余地がたくさんあることがわかりました。
現段階では、パフォーマンスに関する調査を行い、改善の方針を立てるというところまでしかできておりません。来年から実際にパフォーマンスの改善に向けて動く予定ですので、実際に改善を進める中で何かお伝えできる点があればまた共有させていただければと思います。
