πŸ’» Web Vitals(feat. next/Image 적용 κ²½ν—˜)

waterglassesΒ·2022λ…„ 10μ›” 25일
0

λ¦¬νŒ©ν† λ§

λͺ©λ‘ 보기
2/6
post-thumbnail

⚠️ μ •λ¦¬ν•œ λ‚΄μš©μ€ μ˜€νƒ€λ‚˜ 잘λͺ»λœ 정보가 μžˆμ„ 수 μžˆμŠ΅λ‹ˆλ‹€. λŒ“κΈ€λ‘œ μ•Œλ €μ£Όμ‹œλ©΄ κ°μ‚¬ν•˜κ² μŠ΅λ‹ˆλ‹€.

Web Vitals

Web VitalsλŠ” μ›Ήμ—μ„œ μš°μˆ˜ν•œ μ‚¬μš©μž κ²½ν—˜μ„ μ œκ³΅ν•˜λŠ” 데 ν•„μˆ˜μ μΈ ν’ˆμ§ˆ μ‹ ν˜Έμ— λŒ€ν•œ 톡합 지침을 μ œκ³΅ν•˜κΈ° μœ„ν•œ Google의 μ΄λ‹ˆμ…”ν‹°λΈŒμ΄λ‹€. μ΄λŠ” 전망을 λ‹¨μˆœν™”ν•˜κ³ , μ‚¬μ΄νŠΈμ—μ„œ κ°€μž₯ μ€‘μš”ν•œ λ©”νŠΈλ¦­(μ„±λŠ₯ 및 μ‚¬μš©μž κ²½ν—˜ μΈ‘μ •)인 Core Web Vitals에 μ΄ˆμ μ„ λ§žμΆ”λ„λ‘ μ§€μ›ν•œλ‹€.

Core Web Vitals

각각의 Core Web VitalsλŠ” μ‚¬μš©μž κ²½ν—˜μ˜ κ³ μœ ν•œ 츑면을 λ‚˜νƒ€λ‚΄κ³ , ν•„λ“œμ—μ„œ μΈ‘μ • κ°€λŠ₯ν•˜λ©°, ν•„μˆ˜μ μΈ μ‚¬μš©μž 쀑심 결과에 λŒ€ν•œ ν˜„μ‹€μ˜ κ²½ν—˜μ„ λ°˜μ˜ν•œλ‹€.

LCP(Lagest Contentful Paint)

λ‘œλ”© μ„±λŠ₯을 μΈ‘μ •ν•œλ‹€. μš°μˆ˜ν•œ μ‚¬μš©μž κ²½ν—˜μ„ μ œκ³΅ν•˜λ €λ©΄ νŽ˜μ΄μ§€κ°€ 처음으둜 λ‘œλ”©λœ ν›„ 2.5초 이내에 LCPκ°€ λ°œμƒν•΄μ•Όν•œλ‹€.


LCPλŠ” 처음으둜 λ‘œλ“œλ₯Ό μ‹œμž‘ν•œ μ‹œμ μ„ κΈ°μ€€μœΌλ‘œ 뷰포트 내에 μžˆλŠ” κ°€μž₯ 큰 이미지 λ˜λŠ” ν…μŠ€νŠΈ λΈ”λ‘μ˜ λ Œλ”λ§ μ‹œκ°„μ„ λ³΄κ³ ν•œλ‹€.

LCPλŠ” <img>μš”μ†Œ, <svg>μš”μ†Œ λ‚΄λΆ€μ˜ 이미지, <video>μš”μ†Œ, λ˜λŠ” url() ν•¨μˆ˜λ₯Ό ν†΅ν•œ 이미지 등을 κ³ λ €ν•΄μ„œ μΈ‘μ •λœλ‹€.

FID(First Input Delay)

μƒν˜Έμž‘μš©μ„ μΈ‘μ •ν•œλ‹€. μš°μˆ˜ν•œ μ‚¬μš©μž κ²½ν—˜μ„ μ œκ³΅ν•˜λ €λ©΄ νŽ­μ§€μ˜ FIDκ°€ 100ms μ΄ν•˜μ—¬μ•Ό ν•œλ‹€.


FIDλŠ” μ‚¬μš©μžκ°€ νŽ˜μ΄μ§€μ™€ 처음 μƒν˜Έ μž‘μš©ν•  λ•ŒλΆ€ν„° ν•΄λ‹Ή μƒν˜Έ μž‘μš©μ— λŒ€ν•œ μ‘λ‹΅μœΌλ‘œ λΈŒλΌμš°μ €κ°€ μ‹€μ œλ‘œ 이벀트 ν•Έλ“€λŸ¬ 처리λ₯Ό μ‹œμž‘ν•˜κΈ°κΉŒμ§€μ˜ μ‹œκ°„μ„ μΈ‘μ •ν•œλ‹€.

CLS(Cumulative Layout Shift)

μ‹œκ°μ  μ•ˆμ •μ„±μ„ μΈ‘μ •ν•œλ‹€. μš°μˆ˜ν•œ μ‚¬μš©μž κ²½ν—˜μ„ μ œκ³΅ν•˜λ €λ©΄ νŽ˜μ΄μ§€μ—μ„œ 0.1 μ΄ν•˜μ˜ CLSλ₯Ό μœ μ§€ν•΄μ•Ό ν•œλ‹€.


CLSλŠ” νŽ˜μ΄μ§€μ˜ 전체 수λͺ… λ™μ•ˆ λ°œμƒν•˜λŠ” λͺ¨λ“  예기치 μ•Šμ€ λ ˆμ΄μ•„μ›ƒ 이동에 λŒ€ν•΄ κ°€μž₯ 큰 λ ˆμ΄μ•„μ›ƒ 이동 점수 λ²„μŠ€νŠΈλ₯Ό λœ»ν•œλ‹€. λ ˆμ΄μ•„μ›ƒμ€ μ‹œκ°„μ  μš”μ†Œκ°€ λ Œλ”λ§λœ ν”„λ ˆμž„μ—μ„œ λ‹€μŒ ν”„λ ˆμž„μœΌλ‘œ μœ„μΉ˜λ₯Ό λ³€κ²½ν•  λ•Œλ§ˆλ‹€ λ°œμƒν•œλ‹€.

λ‘œλ”© κ²½ν—˜μ— μ€‘μš”ν•œ μš”μ†Œ(TTFB, FCP)

LCP와 ν•¨κ»˜ λ‘œλ”© κ²½ν—˜μ— μ€‘μš”ν•œ μš”μ†Œλ₯Ό μ°¨μ§€ν•˜λŠ” Web vitalsλŠ” TTFB, FCP도 μžˆλ‹€.

FCP(First Contentful Paint)

FCP λ©”νŠΈλ¦­μ€ νŽ˜μ΄μ§€κ°€ λ‘œλ“œλ˜κΈ° μ‹œμž‘ν•œ μ‹œμ λΆ€ν„° νŽ˜μ΄μ§€ μ½˜ν…μΈ μ˜ 일뢀가 화면에 λ Œλ”λ§ 될 λ•ŒκΉŒμ§€μ˜ μ‹œκ°„μ„ μΈ‘μ •ν•œλ‹€.

μš°μˆ˜ν•œ μ‚¬μš©μž κ²½ν—˜μ„ μ œκ³΅ν•˜λ €λ©΄ μ‚¬μ΄νŠΈμ˜ 졜초 μ½˜ν…νŠΈν’€ νŽ˜μΈνŠΈκ°€ 1.8초 μ΄ν•˜μ—¬μ•Ό ν•œλ‹€.

TTFB(Time to First Byte)

μ–΄λ–€ λ¦¬μ†ŒμŠ€λ₯Ό μš”μ²­ν•˜κ³  λ‚œ λ’€, ν•΄λ‹Ή μš”μ²­μ— λŒ€ν•œ 첫 번째 λ°”μ΄νŠΈκ°€ λ„μ°©ν•˜κΈ°κΉŒμ§€ κ±Έλ¦¬λŠ” μ‹œκ°„μ„ μ˜λ§ˆν•œλ‹€.

TTI(Time to interactive)

앱이 μ‚¬μš©μžμ™€ μƒν˜Έμž‘μš©ν•˜κΈ°μ— μ€€λΉ„κ°€ 된 μ‹œμ μ„ λ§ν•œλ‹€. 화면이 κ·Έλ €μ§€λŠ” κ²ƒκ³ΌλŠ” 거의 λ¬΄κ΄€ν•˜κ³  μžλ°”μŠ€ν¬λ¦½νŠΈ μ΄λ²€νŠΈκ°€ κ±Έλ¦° λ²„νŠΌμ„ λˆŒλ €μ„ λ•Œ ν•΄λ‹Ή λ²„νŠΌμ΄ μ œλŒ€λ‘œ 이벀트 λ¦¬μŠ€λ„ˆμ— μ—°κ²°λœ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜λŠ” 졜초의 μ‹œμ μ΄λ‹€.

λΉ„λ“œλ§ˆμΌ“ ν”„λ‘œμ νŠΈμ—μ„œμ˜ Web Vitals 퍼포먼슀 μΈ‘μ •

πŸ’» λΉ„λ“œλ§ˆμΌ“ λ¦¬νŒ©ν† λ§ next/Image μ μš©κΈ°μ—μ„œ next/imageλ₯Ό μ μš©ν•¨μœΌλ‘œμ„œ 이미지 λ‘œλ”© μ‹œκ°„κ³Ό μ΄λ―Έμ§€μ˜ 크기λ₯Ό 많이 쀄인 것을 ν™•μΈν•˜μ˜€λ‹€. 이 λΆ€λΆ„μ—μ„œ 크기와 이미지 λ‘œλ”© μ‹œκ°„ 뿐만 μ•„λ‹ˆλΌ LCP 속도λ₯Ό ν•œλ²ˆ 비ꡐ해보렀고 ν•œλ‹€.

μ•„λž˜ 사진은 next/image μ μš©ν•˜κΈ° μ „μ˜ Lighthouse 퍼포먼슀 μˆ˜μΉ˜μ΄λ‹€.
사진을 보면 μ•Œ 수 μžˆλ“―μ΄ LCP μ‹œκ°„μ€ 5초둜 맀우 μ•ˆμ’‹μ€ μ„±λŠ₯을 가지고 μžˆλŠ” 것을 λ³Ό 수 μžˆλ‹€.
μœ„μ—μ„œ λ§ν–ˆλ“―μ΄ 2.5초 이내에 LCPκ°€ λ°œμƒν•΄μ•Ό μš°μˆ˜ν•œ μ‚¬μš©μž μ„±λŠ₯이라고 λ³Ό 수 μžˆλŠ”λ° 2.5μ΄ˆλ‚˜ 더 걸리게 λ˜μ—ˆλ‹€.

ν•˜μ§€λ§Œ next/imageλ₯Ό μ μš©ν•˜κ³  LCPλŠ” 5μ΄ˆμ—μ„œ 1.2초둜 3.8μ΄ˆλ‚˜ λ‹¨μΆ•ν•œ 것을 확인할 수 μžˆλ‹€. λ˜ν•œ TTI 4.4μ΄ˆλ‚˜ λ‹¨μΆ•ν•˜μ˜€λ‹€.

πŸ”₯ λŠλ‚€μ 

κ·Έλ™μ•ˆ LCP와 같은 Web Vitalsλ₯Ό ν”„λ‘œμ νŠΈλ₯Ό ν•˜λ©° μ‹€μ œλ‘œ 눈으둜 확인할 수 있게 λ˜λ©΄μ„œ μ„±λŠ₯ μΈ‘μ •μ˜ 큰 μ§€ν‘œκ°€ 되고 μžˆλŠ” 것을 μ•Œκ²Œλ˜μ—ˆλ‹€.
λΉ„λ“œλ§ˆμΌ“ 이후에도 ν”„λ‘œμ νŠΈλ₯Ό ν•œλ‹€λ©΄ κΌ­ 퍼포먼슀 수치λ₯Ό ν™•μΈν•΄μ„œ μ–΄λ–€ 뢀뢄이 ν–₯μƒλ˜μ—ˆκ³  μ–΄λ–€ 뢀뢄이 λΆ€μ‘±ν•œμ§€ ν™•μΈν•˜λ©΄μ„œ 진행할 것 κ°™λ‹€.

Refer

profile
맀 μˆœκ°„ μ„±μž₯ν•˜λŠ” κ°œλ°œμžκ°€ 되렀고 λ…Έλ ₯ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

0개의 λŒ“κΈ€