어떤 상황이었냐면요
메인 랜딩의 LCP가 3.8초로 찍혔어요. 좀 느리죠?
LCP는 화면에서 제일 큰 요소가 다 그려지기까지 걸린 시간이에요. 사용자가 "아 이제 볼 수 있네" 하고 느끼는 시점이라, 체감 속도랑 거의 직결돼요. 그래서 largest-contentful-paint 지표를 기준으로 병목을 하나씩 따라가 봤어요.
어떻게 고쳤냐면요
먼저 히어로 이미지에 priority를 붙였어요. 이걸 붙이면 브라우저가 "이건 먼저 받아야 하는 애구나"라고 알아채요.
그다음 폰트 preload를 정리했어요. 필요 없는 것까지 미리 받고 있었거든요. critical-rendering-path 관점에서 보면, 화면을 그리는 걸 막고 서 있는 리소스를 줄이는 작업이었어요.
import Image from "next/image";
export function Hero() {
return <Image src="https://picsum.photos/seed/hero/1200/630" alt="Hero" width={1200} height={630} priority />;
}
결과는요
LCP가 2.1초까지 내려갔어요. 3.8초에서 1.7초를 줄인 셈이에요.
배운 점
리소스에 우선순위를 매기는 것만으로도 체감 속도가 확 달라져요. 파일을 더 작게 만든 게 아니라, 받는 순서만 바꿨는데도요.
브라우저는 우리가 뭘 먼저 보여주고 싶은지 몰라요. 알려주면 그대로 해줘요.