웹 성능 최적화: Core Web Vitals 개선으로 SEO 잡기

구글은 2021년부터 웹 사이트의 사용자 경험을 정량화한 지표인 **Core Web Vitals(웹 핵심 지표)**를 검색 랭킹 요소로 반영하고 있습니다. 즉, 사이트가 느리면 아무리 좋은 콘텐츠가 있어도 검색 결과 상단에 노출되기 어렵다는 뜻입니다. 단순히 "빠르다"는 느낌을 넘어, 정확한 지표를 측정하고 개선하는 방법을 1,500자 요약으로 정리합니다.

1. Core Web Vitals의 3대장 (LCP, INP, CLS)

1.1 LCP (Largest Contentful Paint)

"가장 큰 콘텐츠가 화면에 그려지는 시점"을 의미합니다. 사용자가 페이지에 진입했을 때, 메인 이미지나 텍스트 블록이 2.5초 이내에 떠야 합격입니다.

• 개선 팁: 히어로 이미지(Hero Image)는 Lazy Loading을 하지 말고 Priority 속성을 주어 먼저 로드하세요. CDN을 사용하여 이미지 전송 속도를 높이는 것도 필수입니다.

1.2 INP (Interaction to Next Paint)

2024년 3월부터 FID(First Input Delay)를 대체하게 된 새로운 지표입니다. 사용자가 클릭, 탭, 키보드 입력을 했을 때 브라우저가 다음 프레임을 그리기까지 걸리는 시간을 측정합니다. 즉, 사이트의 "반응성"을 봅니다.

• 개선 팁: 메인 스레드(Main Thread)를 차단하는 긴 자바스크립트 작업을 쪼개야 합니다(Code Splitting). 무거운 연산은 Web Worker로 넘기는 것도 방법입니다.

1.3 CLS (Cumulative Layout Shift)

"시각적 안정성"을 의미합니다. 기사를 읽고 있는데 갑자기 광고가 로드되면서 텍스트가 아래로 밀리는 경험, 다들 해보셨을 겁니다. 이런 레이아웃 이동이 얼마나 빈번한지를 점수화합니다. 0.1 이하여야 합니다.

• 개선 팁: 이미지나 광고 영역에는 반드시 width와 height 비율(aspect-ratio)을 미리 잡아두세요. 폰트 로딩 시 깜빡임(FOUT)을 방지하기 위해 font-display: swap을 적절히 사용하는 것도 중요합니다.

2. 성능 측정 도구

• Lighthouse: 크롬 개발자 도구에 내장된 가장 기본적인 측정 도구입니다. 실험실 데이터(Lab Data)를 보여줍니다.
• PageSpeed Insights: 실제 사용자 데이터(Field Data, CrUX)를 기반으로 점수를 보여주므로 SEO에 더 직결됩니다.

3. 리액트에서의 최적화

Next.js 같은 프레임워크를 쓴다면 이미지 최적화(next/image), 폰트 최적화(next/font)를 적극 활용하세요. 번들 사이즈를 줄이기 위해 거대한 라이브러리(ex. moment.js)는 day.js 같은 가벼운 것으로 교체하거나, 동적 임포트(Dynamic Import)를 통해 필요한 순간에만 코드를 로드하는 전략이 필요합니다.

성능 최적화는 1회성 이벤트가 아니라 지속적인 관리 과정입니다.