minstudio

자산 최적화: 반응형 이미지와 폰트 Preload

웹사이트 용량의 대부분을 차지하는 것은 이미지와 폰트(Asset)입니다. 화려한 디자인을 추구하느라 이 자산들을 무겁게 방치하면, 구글이 평가하는 LCP(로딩 속도)와 CLS(레이아웃 밀림) 점수가 나락으로 떨어집니다. 프론트엔드 레벨에서의 강력한 에셋 통제는 SEO의 필수 요건입니다.

🖼️ 자산 최적화: 이미지 다이어트와 폰트 새치기

❌ 구형 방식 (성능 저하) 10MB 원본 hero-banner.png 무거운 용량 탓에 화면 렌더링(LCP) 지연 기본 폰트로 표시되다가... 번쩍! 폰트 다운로드 완료 (FOUT) 글꼴이 바뀌며 화면이 밀림 (CLS 감점) VS ✅ 최신 최적화 (SEO 상승) 차세대 포맷 (.webp / .avif) srcset="mob.webp 400w, pc.webp 1200w" 기기 화면 크기에 딱 맞는 용량만 다운로드 <link rel="preload" as="font"> 화면을 그리기 전에 폰트부터 우선 확보 화면 밀림 방지 및 즉시 렌더링 성공
  • 1. 차세대 이미지 포맷 (WebP, AVIF) & 반응형 srcset

    PNG나 JPEG 대비 용량을 절반 이상 줄여주는 .webp 또는 .avif를 사용하세요. 또한 모바일 환경에서는 작은 이미지를, PC 환경에서는 큰 이미지를 받아오도록 HTML <img srcset="..."> 속성을 부여해 불필요한 네트워크 낭비를 막아야 합니다. 구글 이미지 검색 노출도 상승에도 크게 기여합니다.

  • 2. 웹 폰트 Preload (새치기)

    폰트 파일이 늦게 다운로드되면, 기본 글씨체로 보이다가 갑자기 멋진 폰트로 번쩍(FOUT) 바뀌면서 화면 전체의 레이아웃이 덜컹거리게 됩니다(CLS 감점). <link rel="preload" as="font" ...>를 사용하여 브라우저에게 "이 폰트는 제일 중요하니까 무조건 1순위로 다운받아 줘!"라고 명령하세요.

<!-- 1. 반응형 이미지 (화면 너비에 따라 최적의 이미지를 다운로드) -->
<!-- 뷰포트가 768px 이하면 400px 이미지를, 그 이상이면 1200px 이미지를 받습니다. -->
<img 
  src="banner-1200w.webp" 
  srcset="banner-400w.webp 400w, banner-1200w.webp 1200w" 
  sizes="(max-width: 768px) 100vw, 1200px" 
  alt="메인 프로모션 배너" 
  fetchpriority="high">


<!-- 2. 폰트 Preload (FOUT 현상 방지) -->
<!-- 화면 렌더링 전, 가장 먼저 폰트 다운로드를 강제 지시합니다. -->
<link 
  rel="preload" 
  href="/fonts/Pretendard-Bold.woff2" 
  as="font" 
  type="font/woff2" 
  crossorigin="anonymous">

<style>
  /* font-display: optional 속성을 주면, 폰트 다운로드가 너무 느릴 경우 과감히 포기하고 렌더링을 진행합니다 (UX 보호) */
  @font-face {
    font-family: 'Pretendard';
    src: url('/fonts/Pretendard-Bold.woff2') format('woff2');
    font-display: optional;
  }
</style>
자산 최적화: 반응형 이미지와 폰트 Preload | Minstudio