→ CDN 사용, 서버 사이드 캐싱, 응답 스트리밍

<!-- 스크립트에 defer 추가 -->
<script src="app.js" defer></script>

<!-- 중요하지 않은 CSS 비동기 로드 -->
<link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'">

<!-- preload로 미리 다운로드 시작 -->
<link rel="preload" as="image" href="hero.jpg" fetchpriority="high">

<!-- 또는 fetchpriority 속성 직접 사용 -->
<img src="hero.jpg" fetchpriority="high" alt="히어로">

→ WebP/AVIF 포맷 사용, srcset으로 적절한 해상도 제공
→ 이미지 CDN으로 자동 최적화 (Cloudinary, imgix, Next.js Image 컴포넌트 등)

<!-- 나쁜 예: 이미지 다운로드 전까지 크기를 모름 -->
<img src="photo.jpg" alt="사진">

<!-- 좋은 예: aspect-ratio 공간 예약 -->
<img src="photo.jpg" width="800" height="600" alt="사진">

/* 광고, 배너 등의 자리를 미리 예약 */
.ad-container {
  min-height: 250px;
}

/* FOUT 허용 — 레이아웃 이동 없이 폰트 교체 */
@font-face {
  font-family: 'MyFont';
  src: url('font.woff2');
  font-display: swap;
}

/* size-adjust로 폴백 폰트와 크기 맞추기 */
@font-face {
  font-family: 'MyFont-fallback';
  src: local('Arial');
  size-adjust: 105%;
  ascent-override: 90%;
}

/* 나쁜 예: top/margin 변경 → 레이아웃 이동으로 CLS 발생 */
.slide-in {
  animation: slide 0.5s;
}
@keyframes slide {
  from { margin-top: -100px; }
  to { margin-top: 0; }
}

/* 좋은 예: transform → 레이아웃에 영향 없음 */
@keyframes slide {
  from { transform: translateY(-100px); }
  to { transform: translateY(0); }
}

// 나쁜 예: 클릭 시 무거운 연산
button.addEventListener('click', () => {
  const result = heavyComputation(); // 메인 스레드 차단
  updateUI(result);
});

// 좋은 예: 연산을 Web Worker로 오프로드
button.addEventListener('click', () => {
  worker.postMessage({ type: 'compute' });
});
worker.onmessage = (e) => updateUI(e.data);

// 긴 작업을 작게 나누기
async function processLargeArray(items) {
  for (let i = 0; i < items.length; i++) {
    process(items[i]);

    // 100개마다 메인 스레드에 양보
    if (i % 100 === 0) {
      await new Promise(resolve => setTimeout(resolve, 0));
    }
  }
}

// 긴급하지 않은 상태 업데이트는 transition으로 처리
import { useTransition } from 'react';

function SearchInput() {
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState('');

  const handleChange = (e) => {
    setQuery(e.target.value); // 즉시 반영 (인풋값)

    startTransition(() => {
      setSearchResults(filterResults(e.target.value)); // 늦게 처리 가능
    });
  };
}

import { onLCP, onCLS, onINP } from 'web-vitals';

onLCP(({ value }) => console.log('LCP:', value));
onCLS(({ value }) => console.log('CLS:', value));
onINP(({ value }) => console.log('INP:', value));