๐ Reference
๐ Chapter
CLS (Cumulative Layout Shift)
LCP (Largest Contentful Paint)
TBT (Total Blocking Time)
FCP (First Contentful Paint)
FID (First Input Delay)
โฃ
โฃ
INP
- INP
- Interaction to Next Paint
- ๋ค์ ํ์ธํธ์ ์ํธ ์์ฉ
- ์ํธ ์์ฉ๊น์ง์ ์๊ฐ(Interaction to Next Paint)
- ๋ค์ ํ์ธํธ์ ๋ํ ์ํธ์์ฉ(INP)์ Event Timing API์ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐ์์ฑ์ ํ๊ฐํ๋ย ์์ ์ ์ธย ์ฝ์ด ์น ๋ฐ์ดํ ์ธก์ ํญ๋ชฉ์ด๋ค.
- INP๋ ์ฌ์ฉ์๊ฐ ํ์ด์ง์ ํจ๊ป ํ ๋ชจ๋ ์ํธ์์ฉ์ ์ง์ฐ ์๊ฐ์ ๊ด์ฐฐํ๊ณ ๋ชจ๋ ์ํธ์์ฉ ๋๋ ๊ฑฐ์ ๋ชจ๋ ์ํธ์์ฉ์ด ์๋์ ์๋ ๋จ์ผ ๊ฐ์ ๋ณด๊ณ ํ๋ค.
- INP๊ฐ ๋ฎ์ผ๋ฉด ํ์ด์ง๊ฐ ๋ชจ๋ ์ฌ์ฉ์ ์ํธ์์ฉ ๋๋ ๋๋ถ๋ถ์ ์ฌ์ฉ์ ์ํธ์์ฉ์ ์ผ๊ด๋๊ฒ ๋น ๋ฅด๊ฒ ์๋ตํ ์ ์์์์ ์๋ฏธํ๋ค.
INP ์ ์๋ณ ํ๊ฐ ๊ธฐ์ค
| INP ๊ฐ |
๋ฑ๊ธ (์ํ) |
์ฌ์ฉ์ ๊ฒฝํ ์ฒด๊ฐ |
| 200ms ์ดํ |
๐ข ์ข์ (Good) |
์ฌ์ฉ์ ์กฐ์์ ํ๋ฉด์ด ์ฆ์ ๋ฐ์ํ๋ค๊ณ ๋๋๋ค. |
| 200ms ์ด๊ณผ ~ 500ms ์ดํ |
๐ก ๊ฐ์ ํ์ (Needs Improvement) |
๋ฏธ์ธํ ๋ฒ๋ฒ
์์ด๋ ๋ฐ์์ด ๋ํ๋ค๋ ๋๋์ ๋ฐ๊ธฐ ์์ํ๋ค. |
| 500ms ์ด๊ณผ |
๐ด ๋์จ (Poor) |
๋๋ค์์ ์ฌ์ฉ์๊ฐ ๋ต๋ตํจ์ ๋๋ผ๊ฑฐ๋ ํ์ด์ง๊ฐ ๋ฉ์ท๋ค๊ณ ์๊ฐํ๋ค. |
INP๋ฅผ โ์ข์โ์ผ๋ก ์ ์งํ๊ธฐ ์ํ 3๊ฐ์ง ๊ตฌ์ฑ ์์
- INP ์ง์ฐ ์๊ฐ์ ํฌ๊ฒ ์ธ ๊ฐ์ง ๊ตฌ๊ฐ์ผ๋ก ๋๋๋ค.