웹 성능 최적화

개념 설명

웹 페이지의 로딩 속도와 런타임 성능을 향상시키는 다양한 기법과 전략.

핵심 포인트

Core Web Vitals: LCP(로딩 속도), FID(상호작용), CLS(레이아웃 안정성)
리소스 최적화: 이미지 압축, CSS/JS 미니화, 번들 분할
로딩 전략: Lazy Loading, Preload, Prefetch, Critical CSS
캐싱: HTTP 캐시, Service Worker, CDN 활용
렌더링 최적화: SSR, SSG, ISR 등 렌더링 전략

예시 코드

<!-- 리소스 힙트 및 Preload -->
<head>
  <!-- Critical CSS 인라인 -->
  <style>
    .above-fold { display: block; font-size: 16px; }
  </style>
  
  <!-- 폰트 Preload -->
  <link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
  
  <!-- 비중요 CSS 비동기 로딩 -->
  <link rel="preload" href="/css/non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</head>

더 많은 내용을 확인하세요! 📚

“웹 성능 최적화”의 전체 내용을 보시려면 프리미엄 플랜이 필요합니다.

✨ 모든 기술 문서 무제한 액세스

📝 실습 예제와 상세한 코드 설명

🎯 면접 예상 질문과 답변 가이드

플랜 비교하기