Kapital Letter Tech Blog

[태그:] LCP

  • Core Web Vitals 대응

    Core Web Vitals?

    구글이 사용자 경험을 수치화하기 위해 제시하는 핵심 성능 지표.

    2021년부터는 검색 순위에도 직접 반영되고 있어서 단순한 성능 최적화를 넘어 비즈니스 성과와도 직결된다.

    이 지표들은 단순히 빠르고 느리고에서 결정되는 것이 아닌, 실제 사용자 경험에서 반영, 비롯된다.

    Core Web Vitals의 세 가지 주요 지표

    LCP(Largest Contentful Paint)

    사용자가 페이지에서 가장 큰 콘텐츠 요소(이미지, 동영상, 큰 텍스트 블록 등)를 보는데 소요되는 시간.

    페이지를 인식하는 순간을 의미한다.

    (권장 ≤ 2.5초)

    로딩이 늦으면 사용자는 사이트가 느리다고 느끼고,
    첫인상이 중요한 페이지(e.g. 랜딩 페이지)에서 LCP 지연은 이탈율에 직결된다.

    INP(Interaction to Next Paint)

    사용자가 페이지에서 클릭/탭/키 입력을 했을 때, 화면이 반응하는 속도.

    (권장 ≤ 200ms)

    단순히 클릭에 의한 반응 속도가 아닌, 사용자의 모든 입력을
    브라우저가 화면에 그 변화를 반영하는 데 걸린 전체 시간을 측정하는 지표.

    → 사용자가 200ms 이상 기다리면 버벅거린다고 느끼게 된다.

    CLS(Cumulative Layout Shift)

    페이지 로딩 중 예상치 못한 레이아웃 이동 정도.

    (권장 ≤ 0.1)

    페이지 로딩 중 갑자기 버튼이 아래로 밀리거나, 텍스트가 튀면서 광고가 도중에 삽입되는 현상,

    이러한 예기치 못한 움직임으로 인해 사용자 경험이 저해되는지를 측정하는 지표.

    LCP 최적화

    문제 원인

    • 첫 화면에 있는 큰 이미지나 Hero 배너 로딩이 느린 경우
    • 렌더링 차단 리소스(CSS/JS)가 많아 페인트가 지연되는 경우

    *Hero 배너

    웹 사이트 첫 화면의 가장 눈에 띄는 대형 영역(이미지, 비디오 등).

    해결 방법

    1. 이미지 최적화


      • Next.js 의 next/image 컴포넌트 활용. → 자동 압축/리사이징/WebP 변환

      • Hero 영역 이미지는 반드시 priority 속성 추가.
        • next/image는 기본적으로 이미지를 lazy loading 처리. but 첫화면 렌더 이미지는 즉시 불러와야 하는데,priority를 추가하면 네트워크 요청 우선 순위를 올려 해당 이미지를 먼저 다운로드하게 됨.

    *WebP

    구글이 개발한 차세대 이미지 포맷, JPG/PNG 대비 평균 30% ~ 40% 용량 절감.같은 화질을 더 작은 용량으로 표현 가능 → 네트워크 전송 시간을 단축함으로 LCP를 개선할 수 있다.

    대부분의 브라우저에서 지원 중.

    1. 폰트 최적화

      • next/font 를 활용하여 Google Fonts를 직접 번들에 포함시킴
      • font-display: swap으로 폰트 로딩 시 FOUT(깜빡임) 최소화

    2. Critical CSS 최소화


    페이지가 처음 그려지는데 꼭 필요한 최소한의 CSS를 Critical CSS라 한다.

    즉 필수 스타일만 먼저 로드하고, 나머지는 lazy loading 처리하는 것이 효율적.

    • 사용하지 않는 CSS 제거(Tree Shaking)
    • CSS-in-JS 라이브러리 사용 시, 서버사이드에서 Critical CSS를 추출.
    1. 서버 응답 속도 개선

    API 요청 지연을 줄이고, CDN 캐싱 적극 활용.

    INP 최적화

    문제 원인

    • 메인 스레드를 오래 점유하는 무거운 JavaScript 실행.
    • 이벤트 핸들러 내부에서 비효율적인 연산 발생.
    • 애니메이션을 GPU가 아닌 CPU로 처리, 동작.

    해결 방법

    1. JavaScript 최소화

      • dynamic import 로 페이지 진입 시 불필요한 JS 로딩 지연
      • 이벤트 핸들러에서 무거운 연산은 requestIdleCallback 또는 Web Worker로 분리.

    2. Re-render 줄이기

      • React 상태 관리 시 Context 남용 금지 → useMemo, useCallback으로 불필요한 렌더링 방지
      • Zustand, Jotai 같은 fine-grained 상태 관리 도구 고려

    3. 애니메이션 최적화

      • transform/opacity 기반 애니메이션 사용 → GPU 가속 활용
      • requestAnimationFrame으로 프레임 제어

    CLS 최적화

    문제 원인

    • 이미지/광고 영역에 고정 크기 지정 x
    • 웹 폰트 로딩 지연으로 텍스트가 갑자기 재배치.
    • 동적으로 삽입되는 배너, 알림 영역

    해결 방법

    1. 고정 크기 지정

      • 가능하면 이미지/비디오/컴포넌트에 width, height 명시

        but, 반응형 광고가 필요할 수도 있음. 최소/최대 크기 범위를 지정하는 대처가 필요.

    2. 폰트 로딩 전략

      • next/font 를 사용해 FOUT 최소화
      • 또는 fallback 폰트와 유사한 폭을 가진 폰트 선택.

    3. UI 요소 안정화

      • 레이지 로딩(Lazy loading) 요소는 placeholder/skeleton 미리 확보
      • 상단 배너 삽입 시, 최초 레이아웃에서 공간 확보.

    측정과 모니터링

    개발 단계

    Chrome DevTools → Performance 패널 / Lighthouse → 성능 시뮬레이션

    실서비스 단계

    • Google Search Console → Core Web Vitals 리포트
    • Web Vitals JS 라이브러리 → 실제 사용자 데이터(RUM, Real User Monitoring) 수집