품질·성능·보안 · 공식 문서
웹 페이지 속도 개선, 효과가 큰 순서의 우선순위
실제 사용자 데이터에서 느린 지표를 고른 뒤, 첫 화면 대표 이미지, 렌더링을 지연시키는 스크립트, 서버 응답, 이미지 크기 속성, 글꼴 순으로 고칩니다. 이미지 용량 압축은 그다음입니다. 구글 크롬 팀 문서는 대부분 사이트에서 이미지 내려받는 시간이 큰 병목이 아니라고 적었습니다.
속도 개선 목록은 길지만, 사이트마다 효과가 나는 자리는 몇 군데뿐입니다. 이미지를 압축했는데 점수가 그대로인 경우가 흔한 이유입니다.
구글 크롬 팀은 효과가 큰 순서를 문서로 공개했습니다. 그 순서를 서버·이미지·스크립트·글꼴로 다시 묶어 순위로 정리했습니다.
발견 01
속도 개선은 7단계 순서로 고치면 앞 단계의 효과가 뒤 단계에 가려지지 않습니다
| 순위 | 손댈 곳 | 고치는 일 | 좋아지는 지표 | 공식 문서 원문 |
|---|---|---|---|---|
| 1 | 측정 | 실제 사용자 데이터에서 「느림」인 지표와 URL 그룹을 먼저 고른다 | LCP·INP·CLS 전체 | If CrUX data is available for your website, always concentrate on the real user data first. Prioritize your issues: We recommend fixing everything labeled "Poor" first, then prioritize your work either by issues that affect the most URLs, or by issues that affect your most important URLs.웹사이트에 실제 사용자 데이터(CrUX)가 있으면 그 데이터부터 본다. 「느림」 문제를 먼저 고치고, 그다음은 영향받는 URL 이 많은 문제나 중요한 URL 의 문제 순으로 고친다. |
| 2 | 이미지(가장 큰 요소) | 첫 화면 대표 이미지를 HTML 에 img 로 두고, 지연 로딩을 빼고, 우선순위를 높인다 | LCP | If your LCP element is an image, the image's URL should be discoverable in the HTML response to reduce its resource load delay. Remove the loading="lazy" attribute from the <img> tag of your LCP image.LCP 요소가 이미지라면 그 이미지 URL 이 HTML 응답 안에서 바로 보여야 로드 지연이 줄어든다. LCP 이미지의 img 태그에서 loading="lazy" 속성을 뺀다. |
| 3 | 스크립트 | head 의 동기 스크립트를 defer·async 로 바꾸고, 안 쓰는 코드와 태그를 걷고, 긴 작업을 쪼갠다 | LCP·INP | It is almost never necessary to add synchronous scripts (scripts without the async or defer attributes) to the <head> of your pages, and doing so will almost always have a negative impact on performance. When a task exceeds 50 milliseconds in duration, it becomes a long task.head 에 async·defer 없는 동기 스크립트를 넣을 일은 거의 없고, 넣으면 거의 언제나 성능이 나빠진다. 50밀리초를 넘는 작업은 긴 작업이다. |
| 4 | 서버 | 리디렉션 단계를 줄이고, CDN 과 캐시로 첫 바이트를 앞당긴다 | LCP(모든 로딩 지표) | Nothing can happen on the frontend until the backend delivers that first byte of content, so anything you can do to speed up your TTFB will improve every other load metric as well. Always minimize the number of redirects a visitor must wait through.서버가 첫 바이트를 보내기 전에는 화면에서 아무 일도 일어나지 않는다. 그래서 첫 바이트를 앞당기면 다른 로딩 지표도 모두 좋아진다. 방문자가 거치는 리디렉션 수는 언제나 줄인다. |
| 5 | 이미지(크기 속성) | 모든 이미지·광고·삽입 영상에 width·height 나 비율을 정해 자리를 미리 잡는다 | CLS | The best way to fix layout shifts caused by unsized images is to explicitly set width and height attributes or their equivalent CSS properties.크기가 없는 이미지 때문에 생기는 레이아웃 이동은 width·height 속성이나 같은 역할의 CSS 속성을 명시해 고치는 것이 가장 좋다. |
| 6 | 글꼴 | font-display 를 정하고, 쓰는 글자만 담은 서브셋과 WOFF2 로 바꾼다 | LCP·CLS | If a web font has not loaded, browsers typically delay text rendering. If you set a font-display value of anything other than auto or block, then text will always be visible during load, and LCP won't be blocked on an additional network request.웹 글꼴이 아직 오지 않으면 브라우저는 보통 글자 표시를 늦춘다. font-display 를 auto·block 이 아닌 값으로 두면 로딩 중에도 글자가 보이고, LCP 가 글꼴 요청을 기다리지 않는다. |
| 7 | 이미지(용량·형식) | 크기에 맞게 줄이고 WebP·AVIF 로 압축한다. 앞 단계를 마친 뒤에 효과가 드러난다 | LCP | Our research shows that the load duration portion of LCP tends not to be a significant bottleneck for most sites.구글 조사로는 대부분 사이트에서 LCP 리소스를 내려받는 시간 자체는 큰 병목이 아니다. |
Taken together, these are the most realistic and impactful ways you can improve your Core Web Vitals metrics.
이 항목들을 합치면 Core Web Vitals 를 개선하는 가장 현실적이고 효과가 큰 방법이 된다.
첫 단계가 측정인 이유는 지표마다 고칠 자리가 달라서입니다. LCP 가 느린 페이지에 글꼴부터 손대면 시간을 쓰고도 숫자가 그대로일 수 있습니다.
지표 기준값과 측정 도구는 「페이지 속도 측정」 편에 자세히 적었습니다.
발견 02
측정 다음 순위는 첫 화면 대표 이미지를 브라우저가 HTML 에서 바로 찾게 하는 일입니다
| 자원 | 흔한 원인 | 원문 |
|---|---|---|
| 이미지 | 대표 이미지를 스크립트가 늦게 넣거나 지연 로딩을 건다 | If your LCP element is an image, the image's URL should be discoverable in the HTML response to reduce its resource load delay. Remove the loading="lazy" attribute from the <img> tag of your LCP image.LCP 요소가 이미지라면 그 이미지 URL 이 HTML 응답 안에서 바로 보여야 로드 지연이 줄어든다. LCP 이미지의 img 태그에서 loading="lazy" 속성을 뺀다. |
| 스크립트 | head 에 동기 스크립트를 둔다 | It is almost never necessary to add synchronous scripts (scripts without the async or defer attributes) to the <head> of your pages, and doing so will almost always have a negative impact on performance.head 에 async·defer 없는 동기 스크립트를 넣을 일은 거의 없고, 넣으면 거의 언제나 성능이 나빠진다. |
| 스크립트 | 태그 관리 도구에 옛 태그가 쌓인다 | Use the coverage tool in Chrome DevTools to find unused code in your scripts. If you're using a tag manager, periodically optimize your tags.크롬 개발자 도구의 커버리지 도구로 스크립트 안의 안 쓰는 코드를 찾는다. 태그 관리 도구를 쓴다면 태그를 주기적으로 정리한다. |
| 서버 | 광고·단축 URL 을 거치며 리디렉션이 여러 번 일어난다 | Always minimize the number of redirects a visitor must wait through. The best way to do both of these things is to use a CDN.방문자가 거치는 리디렉션 수는 언제나 줄인다. 사용자 가까이에서 캐시로 내보내는 두 가지를 함께 하는 가장 좋은 방법은 CDN 이다. |
| 글꼴 | 웹 글꼴이 오기 전까지 글자가 안 보인다 | If a web font has not loaded, browsers typically delay text rendering. In particular, be aware that optimizing fonts for CJK languages can be particularly challenging.웹 글꼴이 아직 오지 않으면 브라우저는 보통 글자 표시를 늦춘다. 특히 한중일 글꼴은 최적화가 어렵다는 점을 알아 둔다. |
스크립트가 3순위인 이유는 두 지표에 함께 걸리기 때문입니다. 렌더링을 지연시켜 LCP 를 늦추고, 긴 작업으로 클릭 반응(INP)까지 늦춥니다.
서버 응답은 손댈 수 있는 범위가 작아 뒤에 두었지만, 원문은 첫 바이트가 빨라지면 다른 로딩 지표가 모두 좋아진다고 적었습니다.
발견 03
이미지 용량 압축은 앞 단계를 마친 뒤에야 LCP 숫자로 드러납니다
Our research shows that the load duration portion of LCP tends not to be a significant bottleneck for most sites.
구글 조사로는 대부분 사이트에서 LCP 리소스를 내려받는 시간 자체는 큰 병목이 아니다.
이미지를 줄여도 그 이미지가 늦게 요청되거나 스크립트 뒤에 그려지면, 줄인 시간은 다른 구간으로 옮겨 갈 뿐입니다. 그래서 압축은 마지막 단계에 둡니다.
구간별 원인 찾기는 「LCP 개선 방법」 편에, 형식 고르기는 「WebP SEO 영향」 편에 자세히 적었습니다.
| 검색과의 관계 | 원문 |
|---|---|
| 구글의 권고 | We highly recommend site owners achieve good Core Web Vitals for success with Search and to ensure a great user experience generally.구글은 검색에서의 성과와 좋은 사용자 경험을 위해 사이트 소유자가 Core Web Vitals 를 좋게 유지할 것을 강하게 권한다. |
| 점수를 대하는 법 | These scores are meant to help you to improve your site for your users overall, and trying to get a perfect score just for SEO reasons may not be the best use of your time.이 점수는 사이트를 사용자 전반에 맞게 개선하도록 돕기 위한 것이며, SEO 때문에만 만점을 노리는 것은 시간을 가장 잘 쓰는 방법이 아닐 수 있다. |
| 관련성과의 관계 | Google Search always seeks to show the most relevant content, even if the page experience is sub-par.구글 검색은 페이지 경험이 기준에 못 미치더라도 늘 가장 관련성 높은 콘텐츠를 보여 주려 한다. |
발견 04
같은 순위표라도 B2B·B2C·B2G 는 먼저 걸리는 자리가 다릅니다
예시 ① 산업 장비 제조사의 문의형 기업 사이트(B2B)
첫 화면에 제품 슬라이드 이미지를 스크립트로 넣는 구성이 흔합니다. 이 경우 2순위 하나로 LCP 가 크게 줄어듭니다.
해외 바이어가 많다면 서버와 거리가 멉니다. 4순위인 CDN 설정이 이미지 손질만큼 효과를 냅니다.
예시 ② 행사 배너가 많은 자사 쇼핑몰(B2C)
광고·분석 태그가 시즌마다 쌓여 클릭 반응이 늦어지기 쉽습니다. 3순위의 태그 정리가 장바구니 버튼 반응까지 바꿉니다.
상품 목록 이미지에 크기 속성이 빠지면 스크롤 중 화면이 밀립니다. 이 문제는 5순위에서 고칩니다.
예시 ③ 공지·민원 안내가 중심인 공공기관 누리집(B2G)
본문이 글자 위주라 가장 큰 요소가 이미지가 아니라 글 덩어리인 경우가 많습니다. 이때는 6순위인 글꼴이 LCP 를 좌우합니다.
유지보수 사업마다 붙인 스크립트가 head 에 남아 있는지도 함께 봅니다. 과업 범위에 「동기 스크립트 정리」를 한 줄로 넣으면 검수할 수 있습니다.
그럼 우리 사이트는 어떤 순서로 고치나요?
- pagespeed.web.dev 에 대표 페이지 URL 을 넣고, 위쪽 실제 사용자 데이터에서 LCP·INP·CLS 가운데 느린 지표를 적습니다.
- 서치 콘솔 › Core Web Vitals 보고서에서 「느림」 URL 그룹을 보고, 영향받는 URL 이 많은 그룹부터 고릅니다.
- LCP 가 느리면 Lighthouse 진단의 가장 큰 요소가 무엇인지 확인하고, 이미지라면 HTML 의 img 태그와 지연 로딩 설정부터 봅니다.
- head 의 script 태그를 훑어 async·defer 가 없는 것을 고르고, 태그 관리 도구의 옛 태그를 정리합니다.
- 리디렉션 단계 수와 CDN·캐시 설정을 확인한 뒤, 이미지 크기 속성과 글꼴 설정을 고칩니다.
- 마지막으로 이미지 용량을 줄이고, 28일 뒤 실제 사용자 데이터로 결과를 확인합니다.
조사 방법
- web.dev (Google Chrome) 「The most effective ways to improve Core Web Vitals」 (문서 수정일 2024-10-31) · 최종 확인일 2026-10-25 · https://web.dev/articles/top-cwv
- web.dev (Google Chrome) 「Optimize Largest Contentful Paint」 (문서 수정일 2025-03-31) · 최종 확인일 2026-10-25 · https://web.dev/articles/optimize-lcp
- web.dev (Google Chrome) 「Best practices for fonts」 (문서 수정일 2022-10-04) · 최종 확인일 2026-10-25 · https://web.dev/articles/font-best-practices
- Google Search Central 「Understanding Core Web Vitals and Google search results」 (문서 수정일 2025-12-10) · 최종 확인일 2026-10-25 · https://developers.google.com/search/docs/appearance/core-web-vitals
- Search Console Help 「Core Web Vitals report」 · 최종 확인일 2026-10-18 · https://support.google.com/webmasters/answer/9205520
- Google Search Central 「Understanding page experience in Google Search results」 (문서 수정일 2026-09-22) · 최종 확인일 2026-10-18 · https://developers.google.com/search/docs/appearance/page-experience
- 순위 7단계는 위 문서들이 효과가 큰 순서로 적은 항목을 서버·이미지·스크립트·글꼴로 다시 묶은 것입니다. 묶는 방식은 편집 판단입니다.
- 예시 ①②③은 이해를 돕기 위해 만든 가상 상황이며, 실제 기업·기관의 사례가 아닙니다.
- 원문은 영어판(hl=en)이고, 도구·보고서 이름(Core Web Vitals 보고서·느림)은 같은 문서 한국어판(hl=ko) 표기를 따랐습니다.