STAGE 6 · Lv.32

코어 웹 바이탈 & 속도 튜닝

LCP, FID/INP, CLS 최적화, PageSpeed Insights 활용, 렌더 차단 리소스 제거, Critical CSS, 캐싱, PHP 튜닝까지 WordPress 속도 최적화의 모든 것을 마스터합니다.

코어 웹 바이탈(Core Web Vitals)이란?

Google의 사용자 경험 측정 지표

코어 웹 바이탈(Core Web Vitals, CWV)은 Google이 정의한 웹 페이지 사용자 경험의 핵심 측정 지표입니다. 2021년부터 Google 검색 랭킹 팩터로 공식 적용되었으며, 2024년에 FID가 INP로 대체되었습니다. 이 지표들은 실제 사용자의 경험을 측정하는 "필드 데이터"를 기반으로 평가됩니다.

코어 웹 바이탈은 세 가지 핵심 지표로 구성됩니다:
1. LCP (Largest Contentful Paint): 로딩 성능
2. INP (Interaction to Next Paint): 상호작용 응답성
3. CLS (Cumulative Layout Shift): 시각적 안정성

📸

LCP

가장 큰 콘텐츠가
표시되는 시간
2.5초 이내

✋

INP

상호작용에 대한
응답 시간
200ms 이내

📈

CLS

레이아웃
이동 정도
0.1 이하

🎯

목표

75번째 백분위수
기준 충족
Good 등급

1. LCP (Largest Contentful Paint) 최적화

LCP란?

LCP는 페이지에서 가장 큰 콘텐츠 요소(보통 히어로 이미지나 큰 텍스트 블록)가 화면에 표시되는 시점을 측정합니다. 사용자가 "페이지가 로드되었다"고 인식하는 시점과 가장 밀접한 지표입니다.

LCP 기준:
- Good: 2.5초 이내
- Needs Improvement: 2.5-4.0초
- Poor: 4.0초 초과

LCP에 영향을 미치는 요소:
- 서버 응답 시간 (TTFB)
- 렌더 차단 CSS/JavaScript
- LCP 이미지의 크기와 로딩 방식
- 클라이언트 사이드 렌더링

서버 응답 시간(TTFB) 개선: 좋은 호스팅 사용, 서버 캐싱 활성화, PHP OPcache 활성화, 데이터베이스 최적화. TTFB가 800ms 이상이면 호스팅 변경을 고려하세요.
LCP 이미지 최적화: LCP 요소가 이미지인 경우, 해당 이미지에 fetchpriority="high" 속성을 추가하고 lazy loading을 해제합니다. preload 힌트를 사용하여 조기에 로딩을 시작합니다.
렌더 차단 리소스 제거: Critical CSS를 인라인으로 삽입하고, 비필수 CSS/JS는 비동기로 로드합니다.
CDN 활용: 이미지와 정적 자산을 CDN에서 제공하여 네트워크 지연을 줄입니다.
페이지 캐싱: 서버 사이드 캐싱으로 PHP/DB 처리 시간을 제거합니다.

        <!-- LCP 이미지 최적화 -->

        <!-- head에 프리로드 추가 -->

        <link

          rel="preload"

          as="image"

          href="hero-image.webp"

          fetchpriority="high"

        >

        <!-- LCP 이미지에 fetchpriority 추가 -->

        <img

          src="hero-image.webp"

          alt="메인 배너"

          fetchpriority="high"

          loading="eager"

          decoding="async"

          width="1200" height="600"

        >

        // WordPress에서 LCP 이��지 프리로드 추가

        add_action('wp_head', function() {

          if (is_front_page()) {

            echo '<link rel="preload" as="image" href="'

              . get_template_directory_uri()

              . '/images/hero.webp" fetchpriority="high">';

          }

        }, 1);

🔒

여기까지는 미리보기입니다

코어 웹 바이탈 & 속도 튜닝
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

Google로 3초 만에 시작 →🧵 Threads로 시작 무료 공개 강의 둘러보기 (Lv.1~3)