はじめに 「サイト表示が 0.1 秒遅くなると、売り上げが 1%減少し、1 秒高速化すると 10%の売上が向上する。」こんな鉄板フレーズがある通り、サイトの表示速度はユーザー体験や売り上げに直結するもので、早ければ早いだけ嬉しいです。 パフォーマンスの問題は小さな問題が絡み合って大きな問題になっていたりして、特定が難しいですが、Performance Insightsを使うと、問題になりそうな部分を簡単に分析することができます。 今回はこの機能を使ってページ読み込みパフォーマンスの問題を計測、改善する方法について書いていきたいと思います。 Performance Insights とは ページ読み込みの分析に特化しているパフォーマンスパネルです。 分析したいページのFCPタイミングやLCPのタイミング、CLSがどこで起きたかなど、Lighthouseの指標に近い目線でページの読み込みを細か
![【Chrome DevTools】Performance Insightsでフロントエンドパフォーマンス改善](https://cdn-ak-scissors.b.st-hatena.com/image/square/90ec596d981e852a02bbd539d94ae602dad8b6ab/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--YZ6WcDwo--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E3%252580%252590Chrome%252520DevTools%2525E3%252580%252591Performance%252520Insights%2525E3%252581%2525A7%2525E3%252583%252595%2525E3%252583%2525AD%2525E3%252583%2525B3%2525E3%252583%252588%2525E3%252582%2525A8%2525E3%252583%2525B3%2525E3%252583%252589%2525E3%252583%252591%2525E3%252583%252595%2525E3%252582%2525A9%2525E3%252583%2525BC%2525E3%252583%25259E%2525E3%252583%2525B3%2525E3%252582%2525B9%2525E6%252594%2525B9%2525E5%252596%252584%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E3%252581%2525B4%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2NhNGNlNmFlZWEuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)