フロント開発(Next.js & App Router)を始めて約3ヶ月がたち、画面自体を作るのはかなり慣れてきた。
toC向けのSEOが大事になるサービスを開発しているので、ページロードなどのパフォーマンスを意識するようになり、最近は特に「画像の最適化」というトピックについて色々調べている。

画像表示ではNext.jsのImage Componentを使っているので、こいつの使い方とパフォーマンスの上げ方を知りたい！

UXの良さを表す三人衆

• LCP
• INP
• CLS

UXの良さを表す代表的な3指標で、これらがなんなのかを理解していると、Next.jsの「画像の最適化」に関するドキュメントを読む時にすごく助かった！ので、ここでちょっとまとめてみる。

Core Web Vitals

これらはCore Web Vitalsと呼ばれていて、それぞれは以下の略語。

① LCP (Largest Contentful Paint)
② INP (Interaction to Next Paint)
③ CLS (Cumulative Layout Shift)

噛み砕くと

① メインコンテンツの表示速度
② クリックへのリアクション速度
③ 非同期コンテンツの表示速度

つまり、それぞれの項目でどれくらい速いか、を表す。

① 画面上でメインとなるHero Imageの表示が遅いと、Bad LCP

② クリックしてから何も反応が無いように見えると、Bad INP

③ 非同期ポップアップの表示速度が遅くて誤操作を招くと、Bad CLS