๐ย Reference
๐ย Chapter
โฃ
CLS (Cumulative Layout Shift)
devtool
FCP (First Contentful Paint)
Front-end ์ฑ๋ฅ & ๋น๋ ์ต์ ํ
INP (Interaction to Nextย Paint)
โฃ
next/image
Profiler
โฃ
โฃ
TBT (Total Blocking Time)
โฃ
LCP
- LCP
- Largest Contentful Paint
- ์ฝํ
์ธ ๊ฐ ํฌํจ๋ ์ต๋ ํ์ธํธ
- LCP๋ ์ฌ์ฉ์๊ฐ ์ฒ์ ํ์ด์ง๋ก ์ด๋ํ์ ๋๋ฅผ ๊ธฐ์ค์ผ๋ก ํ์ ์์ญ์ ํ์๋๋ ๊ฐ์ฅ ํฐย ์ด๋ฏธ์ง, ํ
์คํธ ๋ธ๋ก, ๋์์์ ๋ ๋๋ง ์๊ฐ์ ๋ณด๊ณ ํ๋ค.
- ํ์คํ๋ ์น ์ฑ๋ฅ ์งํ์ด๋ค.
- ์น ์ฑ๋ฅ ์งํ ์ค ํ๋๋ก, ํ๋ฉด์์ ๊ฐ์ฅ ํฐ ์ฝํ
์ธ (์: ์ด๋ฏธ์ง๋ ํ
์คํธ)๊ฐ ์์ ํ ํ์๋๋ ์์ ์ด๋ค.
- ์ฌ์ฉ์๊ฐ โํ๋ฉด์ด ๋ด๋ค!โ๊ณ ๋๋ผ๋ ์๋์ด๋ค.
- ํ์ด์ง๊ฐ ๋ก๋ฉ๋ ๋ ์ ์ผ ํฐ ์์๊ฐ ๋ณด์ด๊ธฐ๊น์ง ๊ฑธ๋ฆฐ ์๊ฐ์ด๋ค.
LCP๊ฐ ์ข์ ๊ธฐ์ค
- 2.5์ด ์ด๋ด: ์ข์
- 2.5~4์ด: ๊ฐ์ ํ์
- 4์ด ์ด์: ๋๋ฆผ