프론트엔드 성능 최적화

측정하고, 진단하고, 해결하라, 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

   JavaScript 실행, 메인 스레드를 해방하라

   Long Task, time slicing, Web Worker, 메인 스레드 병목을 해소하는 방법을 시각화합니다

6. 06

   이미지와 폰트, 시각 리소스를 최적화하라

   WebP, AVIF, font-display, 서브세팅, 이미지와 폰트 최적화의 핵심 기법을 시각화합니다

7. 07

   캐싱 전략, 두 번째 방문을 빠르게

   Cache-Control, Service Worker, CDN, 캐싱으로 재방문 성능을 극대화하는 전략을 시각화합니다