20230622 <웹 프론트엔드 성능 최적화 방법 및 적용 사례>
- 왜 웹성능 최적화를 해야하는가?
-> increase conversion rate / average order value
-> affects business impact
- 어떤 지표로 나눠져있는가?
-> CWV (Core Web Vitals)
1. LCP (largest contentful paint) - 첫 화면의 가장 큰 영역 컨텐츠 (보통 img)가 얼마나 빨리 렌더링되는가?
2. FID (first input deplay) - 사용자의 첫번째 인풋에 사이트가 얼마나 빨리 반응하는가?
3. CLS (cumulative layout shift) - 얼마나 비주얼이 안정적인가? (ex. 광고가 컨텐츠 레이아웃을 밀어버리는 경우 등)
4. INP (FID 대체) - 모든 사용자 인풋에 대해 인터랙션 지연 측정 + 평균 낸 속도.
-> 웹사이트 전체적으로 사용자 네비게이트 시, 첫 인풋만 중요한 것이 아니라 전반적인 영역에서의 측정이 필요함
실제적으로 유저들이 느끼는 것 -> RUM (Real User Monitoring) 데이터
webpage test tool (catchpoint)
page speed insights
web-vitals JS (RUM)
- 어떻게 개선할 것인가?
- 실제로 ifland에 적용한 사례와 경험 공유