2026-07-13 · 웹 성능 · 개발 일지
AstroIron을 만들며 초기 모바일 Lighthouse 성능 점수는 60점대에 머물렀습니다. 무거운 스크립트와 최적화되지 않은 이미지가 원인이었습니다. 몇 가지 원칙을 순서대로 적용해 90점 이상으로 끌어올린 과정을 기록합니다.
가장 먼저 손댄 것은 이미지였습니다. 배경과 아이콘을 WebP·SVG로 교체하고, 모든 이미지에 명시적 크기를 지정해 레이아웃 이동을 없앴습니다. 이 작업만으로 LCP가 크게 빨라지고 CLS가 0.1 이하로 떨어졌습니다. 동적으로 나타나는 카드 영역에는 스켈레톤을 넣어 공간을 미리 예약했습니다.
웹폰트는 첫 화면에 쓰는 서브셋만 preload하고, 나머지는 지연시켰습니다. font-display를 조정해 폰트 교체로 인한 깜빡임과 이동을 줄였습니다. 인라인 CSS를 최소화하고 초기 렌더에 필요 없는 스타일은 뒤로 미뤄, 첫 페인트 시점을 앞당겼습니다.
가장 큰 개선은 스크립트 정리에서 나왔습니다. 당장 필요 없는 코드를 동적 import로 분할하고, 외부 위젯을 상호작용 이후로 미뤘습니다. 사용하지 않는 라이브러리를 제거하니 번들이 가벼워지며 TBT가 눈에 띄게 줄었습니다. 폴링 주기도 화면이 보일 때만 동작하도록 손봤습니다.
이미지 → 폰트 → 자바스크립트 순으로 병목을 하나씩 제거하자 점수는 자연스럽게 90점을 넘었습니다. 핵심 교훈은 단순합니다. 측정하고, 가장 큰 병목부터 고치고, 다시 측정하라. 화려한 기법보다 이 반복이 성능을 만듭니다.