프론트엔드 성능 최적화

Core Web Vitals부터 캐싱까지 성능 개선 방법을 정리합니다

1. 01

   Core Web Vitals

   LCP, INP, CLS 세 지표를 시각화합니다
2. 02

   번들 크기 줄이기

   코드 스플리팅, 트리 쉐이킹, 압축을 시각화합니다
3. 03

   리소스 로딩 우선순위

   preload, prefetch, lazy loading을 시각화합니다
4. 04

   렌더링 성능과 60fps

   reflow, repaint, 합성 단계별 최적화를 시각화합니다
5. 05

   메인 스레드 병목 줄이기

   Long Task, time slicing, Web Worker를 시각화합니다
6. 06

   이미지와 폰트 최적화

   WebP, AVIF, font-display, 서브세팅을 시각화합니다
7. 07

   재방문을 빠르게 하는 캐싱

   Cache-Control, Service Worker, CDN 전략을 시각화합니다