본문으로 건너뛰기

"성능 최적화" 태그로 연결된 5개 게시물개의 게시물이 있습니다.

모든 태그 보기

Font Subsetting 최적화

· 약 5분
jangsungyu
Frontend Developer
Claude Code
AI Assistant

작업 날짜: 2026-01-02 브랜치: feature/1.28.0-font-subsetting > PR: TBD

📋 목차


🎯 작업 개요

목적

Gmarket Sans 폰트 파일에 대해 Font Subsetting을 적용하여 번들 크기를 최적화하고 초기 로딩 성능을 개선합니다.

배경

  • 현재 프로젝트에서 사용하는 Gmarket Sans 폰트는 전체 글리프(glyph)를 포함하고 있음
  • 실제로 사용하는 문자는 한글 기본 글자, 영문, 숫자, 기본 기호로 제한적임
  • Font Subsetting을 통해 필요한 문자만 추출하여 파일 크기 감소

적용 범위

안전한 권장 범위 적용:

  • 한글 기본 글자: U+AC00-U+D7A3 (2,350자)
  • 숫자: U+0030-U+0039 (0-9)
  • 영문 대문자: U+0041-U+005A (A-Z)
  • 영문 소문자: U+0061-U+007A (a-z)
  • 기본 기호: U+0020-U+002F, U+003A-U+0040 (공백, 특수문자 등)

이미지 최적화 - Responsive Images and srcset 구현

· 약 8분
jangsungyu
Frontend Developer
Claude Code
AI Assistant

작업 날짜: 2026-01-02 브랜치: feature/1.28.0-image-optimization > PR: TBD

📋 목차


🎯 작업 개요

목적

PageSpeed Insights의 "Properly size images" 경고를 해결하고, DPR(Device Pixel Ratio)에 최적화된 이미지를 제공하여 초기 로딩 성능을 개선합니다.

배경

현재 문제점:

  1. 모든 디바이스에 단일 해상도 이미지 제공
  2. DPR=1 환경: 과다 다운로드 (160px 표시, 240px 다운로드)
  3. DPR=2/3 환경: 선명도 부족
  4. srcset 미사용으로 브라우저 최적화 불가능
  5. fetchPriority="high" 과다 사용으로 초기 로딩 경쟁

PageSpeed Insights 경고:

  • "표시된 크기 대비 다운로드된 이미지가 큼"
  • 데스크톱: 160x160 표시, 240x240 다운로드
  • 모바일: 140x140 표시, 180x180 다운로드

최적화 전략

  1. srcset 구현: DPR 1x/2x 대응 이미지 자동 선택
  2. 이미지 품질 최적화: quality=85 기본값 적용
  3. fetchPriority 최적화: 데스크톱 15개, 모바일 6개만 high 우선순위
  4. rem 기반 정확한 크기 계산: 데스크톱 1rem=16px, 모바일 1rem=12px

Lighthouse 성능 측정 결과 보고서

· 약 7분
jangsungyu
Frontend Developer
Claude Code
AI Assistant

측정 일자: 2026-01-02 브랜치: feature/1.28.0 > 측정 환경: 실제 상용 배포 환경 (Production) 측정 페이지: 9개 주요 페이지


📊 전체 요약

평균 점수 비교

카테고리개선 전개선 후변화량
Performance75점76점+1점
Accessibility97점97점0점
Best Practices97점99점+2점
SEO100점100점0점

Core Web Vitals 평균 개선율

지표개선 전개선 후개선율
FCP (First Contentful Paint)1,908ms1,795ms-5.9% (113ms 단축)
LCP (Largest Contentful Paint)6,923ms6,239ms-9.9% (684ms 단축)
TBT (Total Blocking Time)52ms45ms-13.5% (7ms 단축)
CLS (Cumulative Layout Shift)000 (유지)
SI (Speed Index)2,920ms2,748ms-5.9% (172ms 단축)