제레미 μ™€κ·Έλ„ˆ

notion image

INP(Interaction to Next Paint)λ₯Ό μ΄ν•΄ν•˜κ³  μ΅œμ ν™” ν•˜κΈ°

Β 
μš°λ¦¬κ°€ λŒ€λΆ€λΆ„μ˜ μ›ΉνŽ˜μ΄μ§€μ—μ„œ λ³΄λ‚΄λŠ” μ‹œκ°„μ˜ 90%κ°€ νŽ˜μ΄μ§€ λ‘œλ“œ μ΄ν›„λΌλŠ” 것을 μ•Œκ³  μžˆμ—ˆλ‚˜μš”? 이 μ‹œκ°„ λ™μ•ˆ μ‚¬μš©μžλŠ” 클릭, νƒ­, ν‚€λ³΄λ“œ μž…λ ₯κ³Ό 같은 일련의 μ•‘μ…˜μ„ 톡해 μ›Ή μ‚¬μ΄νŠΈμ™€ μƒν˜Έ μž‘μš©ν•©λ‹ˆλ‹€. μ›Ή μ‚¬μ΄νŠΈκ°€ μ΄λŸ¬ν•œ μƒν˜Έ μž‘μš©μ— 느리게 λ°˜μ‘ν• μˆ˜λ‘ μ‚¬μš©μžκ°€ μ›Ή μ‚¬μ΄νŠΈμ— λŒ€ν•΄ 뢀정적인 μ‚¬μš©μž κ²½ν—˜μ„ ν•  κ°€λŠ₯성이 λ†’μ•„μ§‘λ‹ˆλ‹€.
Google은 νŽ˜μ΄μ§€ 응닡성(responsiveness)을 ν‰κ°€ν•˜κΈ° μœ„ν•œ μƒˆλ‘œμš΄ λ©”νŠΈλ¦­λ₯Ό λ§Œλ“œλŠ” 데 μƒλ‹Ήν•œ μ‹œκ°„μ„ νˆ¬μžν–ˆμŠ΅λ‹ˆλ‹€. μ΄λŸ¬ν•œ λ©”νŠΈλ¦­ 쀑 ν•˜λ‚˜λŠ” FID(First Input Delay)μž…λ‹ˆλ‹€. FIDλŠ” 첫 번째 μœ μ € μΈν„°λž™μ…˜μ˜ μž…λ ₯ 지연을 μž‘μ•„λ‚΄λŠ” load responsiveness metric(λΆ€ν•˜ 응닡 λ©”νŠΈλ¦­)을 λœ»ν•©λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ μš°λ¦¬λŠ” μœ μ €μ˜ 첫번째 μ•‘μ…˜μ΄λ‚˜ μž…λ ₯ μ§€μ—°λΏλ§Œ μ•„λ‹ˆλΌ κ·Έ 이상을 μƒ˜ν”Œλ§ν•˜λŠ” μƒˆλ‘œμš΄ 응닡성 μ§€ν‘œκ°€ ν•„μš”ν•˜λ‹€λŠ” 것을 μ•Œκ²Œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€.
전체 νŽ˜μ΄μ§€ 응닡성을 μ’…ν•©μ μœΌλ‘œ ν‰κ°€ν•˜κΈ° μœ„ν•΄ μƒˆλ‘œμš΄ INP(Interaction to Next Paint) λ©”νŠΈλ¦­μ„ λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€. INPλŠ” λͺ¨λ“  νŽ˜μ΄μ§€ μƒν˜Έ μž‘μš©μ„ μƒ˜ν”Œλ§ν•˜λ©° μž…λ ₯ μ§€μ—°λ§Œ μΈ‘μ •ν•˜λŠ” 것을 λ„˜μ–΄μ„­λ‹ˆλ‹€. 이 λ°œν‘œμ—μ„œλŠ” INP에 λŒ€ν•œ λͺ¨λ“  λ‚΄μš©, μž‘λ™ 방식, μ€‘μš”ν•œ 이유, μΈ‘μ • 방법 및 κ°œμ„  방법에 λŒ€ν•΄ μ•Œμ•„λ΄…λ‹ˆλ‹€.
Β 
제레미 μ™€κ·Έλ„ˆλŠ” μ›Ή 개발자이자 μž‘κ°€μž…λ‹ˆλ‹€. κ·ΈλŠ” Responsible Javascript for A Book Apart (μ±…μž„κ°μžˆλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ ν”„λ‘œκ·Έλž˜λ°)을 포함해 μ—¬λŸ¬ 책을 μ§‘ν•„ν–ˆμŠ΅λ‹ˆλ‹€. μ œλ ˆλ―ΈλŠ” μ–Έμ  κ°€ λͺ¨λž˜κ°€ 아직 μƒκ°ν•˜λŠ” 법을 λ°°μš°μ§€ μ•Šμ€ μ™Έλ”΄ ν™©μ•Όλ‘œ 이사할 μƒκ°μ΄λžλ‹ˆλ‹€.
Β