ページパフォーマンスを最適化するためにフロント側でできること紹介します！
最適化後の効果は様々な要因によって上下しますので、1つの案として考えていただければ幸いです。
【こんな方にオススメ！】
・ページのパフォーマンスを上げたいけど、どうすればいいのか困っている方
・何をどう調査していいのかわからない方
何か1つでもヒントになることがあれば大変嬉しいと思っています！
最適化すべきところを探る
どうすればサイトのパフォーマンスを下げているペインを見つられるのか。
私の実施した方法を紹介します。
Chromeの開発者ツール
開発者ツールにはサイトパフォーマンスを知るためのさまざまなツールが用意されています。
たくさんありすぎて何をどう使えばいいのか迷ってしまうと思うので今回は3つのツールについて紹介します。
それぞれの特徴とどんな値を計測しているのかを理解して根拠のある施策立案に結びつけていただければ幸いです。
Lighthouse
サイトのパフォーマンスを計測するのに一番ポピュラーなツールです。
測定期間（Timespans）やスナップショットについては下記の記事で触れているのでよろしければご覧ください。
これまで使ってきている方も多いと思うので改めて説明はしません。
ただ、注意したいのはLighthouseの計測結果はPCのスペックに左右されることです。
同一のPCで計測するのには問題ではありませんが、チームで数値を観測するときは語弊が生まれないように「Page Speed Insights」で計測することをオススメします。
performance
レコーディングを開始して、一度リロードすると画像のような表示が出ます。
画像は10秒間記録した時のパフォーマンスです。
ここで確認すべきは「ネットワーク」と「メイン」のところだと考えています。
ネットワーク
わかりやすいように先ほどの画像から拡大しています。
いつどのファイルがどれくらいの時間で呼び出されているのかを視覚的にわかるようなっています。
さらに1つの項目に着目します。
グレーの線、薄い背景色と濃い背景色で構成されています。
おさえておきたいのは、「左の線、薄い四角、濃い四角、右の線が何を示しているか」です。
| 場所 | 何が原因で悪くなるか |
|---|---|
| 左側の直線 | サーバーとの接続、他に優先度の高い処理をする |
| 薄い色の四角形 | サーバーの処理時間やクライアントとサーバー間のネットワーク経路の状態など物理的な距離 |
| 濃い色の四角形 | データのサイズが大きい |
| 右側の直線 | メインスレッドが他の処理をする |
参考にした記事
Performance insights
Chromeのみで、Chromiumでは利用できません。
Chrome102から追加されたプレビュー機能です。
パフォーマンスパネルでは情報が多すぎることやよりパフォーマンス向上へのヒントをわかりやすいようにしたのが「Performance insights」です。
パネルを開いて「Measure page load」をクリックすると計測が開始されます。
表示される情報はパフォーマンスパネルと似ていますが、大きな違いは右側にある「Insights」と「Details」の項目です。
Insights
Insightsはどのタイミングで何が発生しているかを時系列で上から順番に表示してくれます。
Insightsの項目（画像のフォーカスが当たっているところ）をクリックするとDetailsのタブが開きます。
クリックしたタスクが表示されてFixのヒントを表示してくれます。
また、右上の歯車のアイコンを押すと「Performance insights」の表示を増減させられます。
状況に合わせて調整してください。
まとめ
いろんな制約がある中で、ペインを見つけて改善するのは難しいことも多いと考えます。
細かい原因を改善しながら大きな改善を時折実施していくのがいいと考えています。
何か1つのものがパフォーマンスに影響していることもありますが、小さな問題の積み重ねによりパフォーマンスが下がっていることもあると考えているからです。
それよりもパフォーマンスが悪くなってどこを改善していいのかわからなくなる前に改善に着手できることが望ましいと考えています。
今の状況を打開することが最優先ですが、それと同じぐらい改善を継続的に続けていける仕組みを作ることも重要だと考えています。
引き続きサイトのパフォーマンス改善と継続的に改善活動ができる仕組みづくりも考えたいと思います。