PageSpeed와 Core Web Vitals 개선 방법

사이트 성능을 개선하는 기법입니다.

Arjen Karel Core Web Vitals Consultant
Arjen Karel
linkedin

기업의 Core Web Vitals 문제를 해결하고, 안정적인 Core Web Vitals RUM 추적을 구축하며, PageSpeed 인식을 높이고 Core Web Vitals 모범 사례 적용을 관리합니다.

가끔 시간이 날 때(요즘은 그리 자주 나지 않지만) Core Web Vitals에 관한 글을 씁니다.

문의하기

초기 네트워크를 가로채는 Coralogix RUM 막기

초기 네트워크를 가로채는 Coralogix RUM 막기

Coralogix RUM은 로드 중에 비콘을 전송하여 LCP의 네트워크를 가로챕니다. 이벤트를 버퍼링하고 page hide 시점에 플러시하십시오.

HubSpot 채팅 위젯 레이아웃 이동 해결하기

HubSpot 채팅 위젯 레이아웃 이동 해결하기

두 가지 브라우저 레이아웃 이동 예외 규칙을 활용하여 0.91의 CLS를 0.02로 낮추는 해결 방법

스크롤 트리거 애니메이션이 CLS를 유발하는 방법

스크롤 트리거 애니메이션이 CLS를 유발하는 방법

스크롤 시 숨김 헤더가 조용히 CLS를 실패하게 만들 수 있습니다. 그 이유와 해결 방법을 소개합니다.

웹 성능을 위한 비례적 추론

웹 성능을 위한 비례적 추론

병목 현상은 전체 시간 중 가장 큰 비중을 차지하는 단계입니다. 절대적 기준을 초과하는 단계가 아닙니다.

AI 에이전트로 INP 해결하기: 실험실 도구로는 측정할 수 없는 지표

AI 에이전트로 INP 해결하기: 실험실 도구로는 측정할 수 없는 지표

INP는 시뮬레이션할 수 없습니다. 이것은 AI 에이전트를 사용하여 Interaction to Next Paint를 진단하고 해결하기 위한 필드 데이터 연동 워크플로우입니다.

AI 에이전트로 LCP 수정하기: 필드 데이터에서 코드 수정까지

AI 에이전트로 LCP 수정하기: 필드 데이터에서 코드 수정까지

CWV Superpowers를 사용하는 완벽한 LCP 진단 워크플로: 필드 데이터에서 병목 단계를 식별하는 것부터 특정 코드 변경까지.

CWV Superpowers: 자동화된 Core Web Vitals 진단

CWV Superpowers: 자동화된 Core Web Vitals 진단

CoreDash field data 및 Chrome과 연동하여 LCP, INP, CLS 문제를 진단하고 코드 수정안을 생성하는 무료 Claude Code 스킬

Core Web Vitals 모니터링을 위한 AI 에이전트: MCP를 통한 field data

Core Web Vitals 모니터링을 위한 AI 에이전트: MCP를 통한 field data

AI 에이전트를 Core Web Vitals 데이터에 연결하는 MCP 서버는 세 가지입니다. 이 중 Google이 검색 순위에 실제로 사용하는 데이터를 제공하는 서버는 단 하나뿐입니다.

JPEG XL과 Core Web Vitals: Chrome 지원에 따라 알아야 할 사항

JPEG XL과 Core Web Vitals: Chrome 지원에 따라 알아야 할 사항

JPEG XL이 AVIF, WebP, JPEG와 어떻게 비교되는지, Core Web Vitals에 어떤 의미가 있는지, 오늘부터 어떻게 제공할 수 있는지 알아봅니다.

Prerender Until Script: Prefetch와 Prerender 사이의 중간 지점

Prerender Until Script: Prefetch와 Prerender 사이의 중간 지점

스크립트를 실행하거나 분석 데이터를 오염시키지 않고 하위 리소스를 로드하고 DOM 구축

모바일에서 화면 밖 이미지 지연: 네이티브 지연 로딩 가이드

모바일에서 화면 밖 이미지 지연: 네이티브 지연 로딩 가이드

네이티브 지연 로딩, content-visibility, 그리고 JavaScript 이미지 지연이 무의미한 이유

Core Web Vitals 리소스 우선순위 지정 가이드

Core Web Vitals 리소스 우선순위 지정 가이드

먼저 로드할 리소스와 대기할 리소스 제어

dataLayer 이벤트 스케줄링으로 INP 최적화하기

dataLayer 이벤트 스케줄링으로 INP 최적화하기

GTM 이벤트를 브라우저가 페인트한 뒤로 미뤄 INP 점수를 개선하는 방법

저사양 기기를 위한 Core Web Vitals 최적화

저사양 기기를 위한 Core Web Vitals 최적화

저가형 하드웨어에서 빠른 사이트를 구축하기 위해 대부분의 팀이 인정하는 것보다 더 날카로운 트레이드오프가 필요한 이유

Core Web Vitals 통과를 위한 최적의 Cloudflare 설정

Core Web Vitals 통과를 위한 최적의 Cloudflare 설정

최대 페이지 속도를 위해 Cloudflare를 구성하고 직접 다룰 수 있는 설정을 파악하세요.

Cloudflare Workers 및 Transform Rules로 트래킹 파라미터 제거하기

Cloudflare Workers 및 Transform Rules로 트래킹 파라미터 제거하기

fbclid 및 gclid와 같은 트래킹 파라미터는 CDN 캐시를 우회하는 고유한 URL을 생성합니다. 이를 해결하는 3가지 방법.

2분 만에 Elementor 히어로 이미지 속도 높이기!

2분 만에 Elementor 히어로 이미지 속도 높이기!

2분 만에 Elementor 히어로 이미지의 느린 배경 이미지를 빠른 일반 이미지로 전환하는 방법을 알아보세요.

CSS View Transitions가 웹 성능에 미치는 영향

CSS View Transitions가 웹 성능에 미치는 영향

view transitions가 웹 성능에 영향을 미칠 수 있는 이유와 시기를 이해합니다.

5가지 JavaScript 우선순위 수준 및 사용 방법

5가지 JavaScript 우선순위 수준 및 사용 방법

모든 스크립트가 동일하지는 않습니다. 올바른 순서로 로드하세요.

반응형 웹 폰트 로딩: 디바이스 인식 전략

반응형 웹 폰트 로딩: 디바이스 인식 전략

더 빠른 LCP와 제로 레이아웃 이동을 위한 반응형 폰트 로딩 전략

Core Web Vitals를 위한 Chrome DevTools Network 패널 설정

Core Web Vitals를 위한 Chrome DevTools Network 패널 설정

Core Web Vitals 성능 점검 시 매번 적용하는 Network 패널 설정

Core Web Vitals 28일 지연이 속설인 이유

Core Web Vitals 28일 지연이 속설인 이유

CrUX 데이터는 28일이 아니라 2일 전 데이터입니다. 28일 롤링 윈도우의 실제 의미는 다음과 같습니다.

JavaScript 스크롤링을 제거하여 Interaction to Next Paint 개선하기

JavaScript 스크롤링을 제거하여 Interaction to Next Paint 개선하기

Core Web Vitals에 영향을 주지 않는 아름답고 부드러운 스크롤링 경험 만들기

최후의 수단으로 쓰는 무료 페이지 속도 최적화 스크립트

최후의 수단으로 쓰는 무료 페이지 속도 최적화 스크립트

이 최후의 수단으로 고칠 수 없는 페이지의 속도를 높이세요. 가장 느린 페이지도 개선할 수 있습니다.

Calendly 연동 속도 개선하기

Calendly 연동 속도 개선하기

Core Web Vitals 저하 없이 Calendly 연동하기

무료 웹사이트 캐시 워머

무료 웹사이트 캐시 워머

웹사이트의 캐시를 미리 덥혀 Core Web Vitals를 무료로 개선하세요

Speculation Rules로 페이지 즉시 로드하기

Speculation Rules로 페이지 즉시 로드하기

Speculation Rules API를 통해 페이지를 즉시 로드하여 Core Web Vitals를 개선하는 방법을 알아보세요.

INP 개선을 위해 메인 스레드에 yield 하는 방법

INP 개선을 위해 메인 스레드에 yield 하는 방법

scheduler.yield()를 사용하여 긴 작업을 나누고 페이지를 반응형으로 유지하세요

전자상거래를 위한 Core Web Vitals: 구매 의도가 높은 방문자가 최악의 성능을 경험하는 이유

전자상거래를 위한 Core Web Vitals: 구매 의도가 높은 방문자가 최악의 성능을 경험하는 이유

캐싱 플러그인은 장바구니 사용자에게 캐싱을 비활성화합니다. TTFB 절벽을 해결하는 방법은 다음과 같습니다.

Core Web Vitals 완벽 체크리스트 (2026)

Core Web Vitals 완벽 체크리스트 (2026)

LCP, INP, CLS 성능을 개선할 때 점검해야 할 모든 최적화 항목

CSS 트랜지션이 레이아웃 이동을 일으키는 이유

CSS 트랜지션이 레이아웃 이동을 일으키는 이유

레이아웃 이동을 일으키는 CSS 트랜지션을 찾아 제거하는 방법을 알아봅니다.

적은 예산으로 페이지 속도 개선하기: 가장 중요한 최적화

적은 예산으로 페이지 속도 개선하기: 가장 중요한 최적화

적은 예산으로 Core Web Vitals를 개선하는 전략을 알아보세요

스타일시트 preloading이 의미 있는(없는) 경우

스타일시트 preloading이 의미 있는(없는) 경우

CSS preloading이 대개 도움이 되지 않는 이유와 도움이 되는 유일한 경우

WordPress에서 jQuery defer 처리하기

WordPress에서 jQuery defer 처리하기

추가적인 페이지 속도 향상을 위해 WordPress에서 jQuery를 defer 처리하는 방법을 알아보세요

분석 및 추적 스크립트를 제한해야 하는 이유

분석 및 추적 스크립트를 제한해야 하는 이유

분석 및 추적 스크립트가 Core Web Vitals에 미치는 영향과 해결 방법

백그라운드 이미지는 사악합니다

백그라운드 이미지는 사악합니다

백그라운드 이미지가 Core Web Vitals에 악영향을 미치는 이유와 교체 방법

브라우저 리플로우: 발생 원인 및 Core Web Vitals에 미치는 영향

브라우저 리플로우: 발생 원인 및 Core Web Vitals에 미치는 영향

리플로우는 요소의 위치를 재계산하고 메인 스레드를 차단합니다. 발생 원인, 감지 방법 및 예방 방법을 확인하십시오.

Core Web Vitals 개선을 위한 Google Fonts 자체 호스팅

Core Web Vitals 개선을 위한 Google Fonts 자체 호스팅

Google Fonts를 자체 호스팅하고 최적화하여 Core Web Vitals를 개선하는 방법을 알아봅니다.

Head 대 Footer의 JavaScript: Core Web Vitals에 미치는 영향

Head 대 Footer의 JavaScript: Core Web Vitals에 미치는 영향

head에 defer를 사용하는 것이 최신 모범 사례인 이유와 footer 배치가 여전히 의미 있는 경우

Defer와 Async JavaScript의 차이점 및 Core Web Vitals에 미치는 영향

Defer와 Async JavaScript의 차이점 및 Core Web Vitals에 미치는 영향

최적의 Core Web Vitals 결과를 위해 언제 JavaScript를 async하고 언제 defer해야 하는지 알아보세요

필요할 때까지 스크립트 지연하기

필요할 때까지 스크립트 지연하기

IntersectionObserver 및 사용자 상호작용 트리거를 사용하여 필요에 따라 JavaScript 로드

Lighthouse에서 '사용하지 않는 자바스크립트 줄이기' 해결하기

Lighthouse에서 '사용하지 않는 자바스크립트 줄이기' 해결하기

사용하지 않는 JavaScript를 찾고 제거하여 Core Web Vitals를 개선하세요

Core Web Vitals 점수란 없습니다 (그리고 이것이 중요한 이유)

Core Web Vitals 점수란 없습니다 (그리고 이것이 중요한 이유)

Lighthouse 점수가 Core Web Vitals 점수가 아닌 이유와 실제 통과 여부를 결정하는 요소

완벽한 Core Web Vitals를 갖춘 채팅 위젯

완벽한 Core Web Vitals를 갖춘 채팅 위젯

PageSpeed 저하 없이 채팅 위젯 로드하기

광고 네트워크에 preconnect를 해야 할까요? LCP에 달려 있습니다

광고 네트워크에 preconnect를 해야 할까요? LCP에 달려 있습니다

광고 네트워크에 preconnect를 하는 것은 해가 될 수도, 도움이 될 수도 있습니다. 모든 것은 LCP 이미지가 이미 최적화되어 있는지 여부에 달려 있습니다.

Core Web Vitals를 위한 이미지 최적화

Core Web Vitals를 위한 이미지 최적화

"이미지가 Core Web Vitals에 미치는 영향과 최적화 방법을 알아보세요

자동 크기 조정 이미지로 인해 발생하는 레이아웃 이동(Layout Shift) 해결

자동 크기 조정 이미지로 인해 발생하는 레이아웃 이동(Layout Shift) 해결

auto width 및 auto height가 설정된 이미지는 레이아웃 이동을 유발합니다. 이 문제를 해결하는 방법을 알아보세요.

Core Web Vitals Visualizer: CWV 디버깅을 위한 무료 Chrome 확장 프로그램

Core Web Vitals Visualizer: CWV 디버깅을 위한 무료 Chrome 확장 프로그램

DevTools를 열지 않고 성능을 디버깅하는 개발자를 위해 제작된, Core Web Vitals의 실시간 오버레이를 생성하는 무료 Chrome 확장 프로그램입니다.

실수로 인한 느림 vs 설계로 인한 느림: 웹 성능 프레임워크

실수로 인한 느림 vs 설계로 인한 느림: 웹 성능 프레임워크

성능 문제 분류가 올바른 문제를 먼저 해결하는 데 어떻게 도움이 되는가

더 빠른 Core Web Vitals를 위한 배경 이미지 지연

더 빠른 Core Web Vitals를 위한 배경 이미지 지연

더 빠른 Largest Contentful Paint를 위한 배경 이미지 지연 또는 지연 로드

JavaScript를 지연시키거나 예약하는 16가지 방법

JavaScript를 지연시키거나 예약하는 16가지 방법

JavaScript를 지연시키고 예약하는 방법 알아보기

Lighthouse에서 Largest Contentful Paint image was lazily loaded 경고 해결하기

Lighthouse에서 Largest Contentful Paint image was lazily loaded 경고 해결하기

Lighthouse 경고인 'Largest Contentful Paint image was lazily loaded'를 해결하는 방법을 알아보세요

Interaction to Next Paint (INP): 개념, 측정 및 개선 방법

Interaction to Next Paint (INP): 개념, 측정 및 개선 방법

INP가 무엇을 측정하고 FID와 어떻게 다른지, 3단계 중 무엇부터 해결해야 하는지 다룹니다.

더 나은 Core Web Vitals를 위해 Next.js에서 서드파티 스크립트 수정하기

더 나은 Core Web Vitals를 위해 Next.js에서 서드파티 스크립트 수정하기

Next.js에서 서드파티 스크립트로 인해 발생하는 Core Web Vitals 문제 해결하기

Next.js에서 Core Web Vitals 측정하기: RUM 설정 가이드

Next.js에서 Core Web Vitals 측정하기: RUM 설정 가이드

Next.js에서 Core Web Vitals를 위한 Real User Monitoring 설정하기 (App Router 및 Pages Router)

더 나은 Core Web Vitals를 위한 Next.js의 렌더링 차단 CSS 제거

더 나은 Core Web Vitals를 위한 Next.js의 렌더링 차단 CSS 제거

더 빠른 Core Web Vitals를 위해 Next.js에서 렌더링 차단 CSS 제거

Cloudflare가 이메일 난독화 스크립트를 수정했습니다 (제가 계기였을 수도 있습니다)

Cloudflare가 이메일 난독화 스크립트를 수정했습니다 (제가 계기였을 수도 있습니다)

Cloudflare 이메일 난독화 스크립트는 원래 렌더링을 차단했습니다. Cloudflare 프로덕트 매니저가 이 글을 읽고 수정을 배포했습니다. SEO와 보안 문제는 여전히 피해야 합니다.

느린 히어로 이미지 수정 및 Core Web Vitals 개선

느린 히어로 이미지 수정 및 Core Web Vitals 개선

느린 히어로 이미지 속도를 높여 Largest Contentful Paint 개선하기

Cumulative Layout Shift (CLS)란 무엇이며 어떻게 해결하는가

Cumulative Layout Shift (CLS)란 무엇이며 어떻게 해결하는가

CLS가 측정하는 대상, 점수 계산 방법, 가장 먼저 확인해야 할 원인.

103 Early Hints: 서버 생각 시간 동안 주요 리소스 사전 로드

103 Early Hints: 서버 생각 시간 동안 주요 리소스 사전 로드

서버 생각 시간을 활용하여 페이지가 준비되기 전에 LCP 이미지 및 주요 CSS 사전 로드

내가 LCP를 70% 낮춘 방법

내가 LCP를 70% 낮춘 방법

Core Web Vitals를 개선하기 위한 고급 방법 알아보기

Largest Contentful Paint 이미지 사전 로드(Preload)

Largest Contentful Paint 이미지 사전 로드(Preload)

LCP 이미지를 사전 로드하여 Core Web Vitals를 개선하는 방법 알아보기

HubSpot 폼 지연: 페이지 수정 없이 렌더링 차단 수정

HubSpot 폼 지연: 페이지 수정 없이 렌더링 차단 수정

렌더링을 차단하는 HubSpot 폼 스크립트를 위한 드롭인 수정

'화면 밖 이미지 지연하기' 해결: Core Web Vitals를 위한 지연 로딩 가이드

'화면 밖 이미지 지연하기' 해결: Core Web Vitals를 위한 지연 로딩 가이드

화면 밖 이미지를 지연시키고 Core Web Vitals를 개선하세요

YouTube 동영상으로 완벽한 Core Web Vitals 달성하기

YouTube 동영상으로 완벽한 Core Web Vitals 달성하기

PageSpeed 점수를 떨어뜨리지 않고 YouTube 동영상을 임베드하는 방법

First Contentful Paint (FCP): 개념, 측정 방법 및 해결 방법

First Contentful Paint (FCP): 개념, 측정 방법 및 해결 방법

First Contentful Paint가 무엇을 측정하는지, 왜 Core Web Vitals가 아닌지, 그리고 페이지 렌더링 속도를 높이는 입증된 15가지 기술을 알아보세요.

고급 Critical CSS 생성기

고급 Critical CSS 생성기

클릭 한 번으로 Critical Path CSS를 생성하여 웹사이트 속도를 높이십시오

Shopify Critical CSS: 렌더링 차단 CSS 단계별 제거

Shopify Critical CSS: 렌더링 차단 CSS 단계별 제거

Shopify에는 내장된 Critical CSS 기능이 없습니다. 수동으로 추가하는 방법은 다음과 같습니다.

Lighthouse에서 'Avoid Chaining Critical Requests' 해결하기

Lighthouse에서 'Avoid Chaining Critical Requests' 해결하기

크리티컬 요청 체인을 줄여 First Contentful Paint 및 Largest Contentful Paint 개선하기

Lighthouse에서 'Remove Unused CSS' 해결하기

Lighthouse에서 'Remove Unused CSS' 해결하기

Lighthouse의 'Remove Unused CSS' 경고를 해결하고 페이지 속도를 높이는 방법을 알아보세요.

'avoid excessive-DOM size' Lighthouse 경고 해결하기

'avoid excessive-DOM size' Lighthouse 경고 해결하기

excessive-DOM size를 피하여 Core Web Vitals 개선하기

Google Maps 100% 페이지 속도 가이드

Google Maps 100% 페이지 속도 가이드

페이지 속도 저하 없이 Google Maps를 삽입하세요.

PageSpeed 배우기 Core Web Vitals PageSpeed 배우기