こちらの記事で2021年におけるfront-end のパフォーマスに関するチェックリストを紹介している www.smashingmagazine.com
かなり詳しく、大量のチェックリストになっているため、一読の価値ありと思われる
そんな中で、個人的に覚えておきたいと思ったものをメモしておく
計画と指標（チェックリスト01~09あたり）
- パフォーマンス文化をつくる
- 文化を作るにはビジネス側を巻き込むのが大事で「KPIやメトリクスからそれが彼らの利益に関わること」を示す必要がある
- 例えば、Core Web Vital がKPIにどのように役立つかについての実証してみる
- パフォーマンスの目標は、きめ細かく、追跡可能で、具体的にする
- パフォーマンスの目標が決まったらビルドプロセスに組み込む
- Core Web Vital
- LCPは2.5秒以内におさめる、理論上、最大画像サイズが約144KBにすぎないようにする
- FIDは50〜100ミリ秒内におさめる
- パフォーマンス測定結果に偏りがないように、テスト用のブラウザ拡張機能のないクリーンな環境を用意する
- Response Time < 100ms、60fps、FID <100ms、LCP <2.5s、3GでTTI <5s、Critical File Size Budget < 170KB（gzip圧縮）
まとめとやりたいこと
- 自社開発ではビジネスと開発に隔たりはないので、パフォーマンスに関しては重々承知してもらっているが、受託開発の案件ではクライアントに意識してもらう必要がありそう
クライアントにWebパフォーマンスに集中するよう説得する方法は以下の記事で紹介されている
https://medium.com/@armelpingault/how-to-convince-your-client-to-focus-on-web-performance-a-case-study-35f12385689 - パフォーマンスバジェットはたてて監視していきたい
- Light House CIが良さそう
- ビルドプロセスに組み込む
- Core Web Vital のスコアがよくないので、まずはそこの改善を目指す、その他の指標は Core Web Vital のスコアを改善してからにしたい
