1️⃣ 웹 성능 최적화
웹 페이지 로딩 시간, 상호작용 반응성, 콘텐츠와의 상호작용을 개선하여 사용자 경험을 향상시키는 작업
렌더링 차단
- 웹 페이지를 로드하는 과정에서 사용자 인터페이스의 렌더링을 차단하는 모든 부분
- 일반적으로 CSS, JS 파일을 해석하는 동안 웹 페이지 렌더링이 차단될 수 있음
최적화 목표
- 최소한의 데이터로 빠르게 화면을 표시하여 리플로우를 줄이고,
원활한 사용자 경험을 제공하는 것 - 리플로우: 웹 페이지에서 레이아웃이 다시 계산되는 과정, 페이지 내 요소의 위치나 크기, 레이아웃이 변경될 때마다 발생
최적화 필요성
비즈니스 목표 달성
- 빠르게 로드되는 페이지는 사용자 만족도를 높이고, 이탈률을 줄임
- 서비스 이용자 이탈률
검색 엔진 최적화 (SEO, Search Engine Optimization)
- 웹 성능 지표는 구글 검색 순위에 반영될 수 있음
사용자 경험(UX) 강화
- 웹 페이지 로딩 속도는 사용자의 스트레스와 피로도를 낮출 수 있음
2️⃣ 웹 성능 지표
LCP (Largest Contentful Paint)
- 주요 콘텐츠가 화면에 나타나는 데 걸리는 시간
- 2.5초 이내에 LCP가 발생하도록 하는 것이 이상적
INP (Interaction to Next Paint)
- 사용자 상호작용에 대한 응답 시간
- INP가 200ms 미만이 되도록 하는 것이 이상적
CLS (Cumulative Layout Shift)
- 페이지 시각적 레이아웃 안정성
- CLS 점수가 0.1 미만이 되도록 하는 것이 이상적
3️⃣ 최적화 방법
렌더링 최적화
- CSS/JS 파일 최적화: 렌더링 차단 리소스 최소화
- 애니메이션 최적화: 불필요한 레이아웃 변경과 리플로우 줄이기
로딩 최적화
- 이미지 최적화: WebP 사용, 이미지 압축 및 Lazy Loading 적용
- HTTP 요청 최적화: 파일 최소화(Minification), 번들링, 압축(gzip)
- 브라우저 캐싱: Cache-Control로 재방문 시 로딩 시간 단축
- CDN 활용: 전 세계 서버에 콘텐츠를 분산하여 로딩 속도 개선
비동기 로딩 및 코드 스플리팅
- 비동기 로딩: 불필요한 JavaScript는 비동기 처리하여 로드 순서 최적화
- 코드 스플리팅: 필요한 시점에만 코드 로드로 초기 로드 부담 감소
4️⃣ 성능 측정 도구
Lighthouse
PageSpeed Insights
참고
https://developer.mozilla.org/en-US/docs/Glossary/Render_blocking
https://developer.mozilla.org/en-US/docs/Glossary/Reflow
https://web.dev/articles/vitals?hl=ko#core-web-vitals
https://developers.google.com/search/docs/appearance/core-web-vitals