무료 성능 도구

웹사이트 속도 측정

중급형 휴대폰과 느린 4G 연결로 페이지를 불러와 주요 콘텐츠가 얼마나 빨리 나타나는지, 페이지가 얼마나 흔들리는지 측정하고, 페이지를 무겁게 만드는 원인을 보여 드립니다. Google에 사이트의 실제 사용자 데이터가 있으면 그 데이터도 함께 볼 수 있습니다.

무료입니다. 보통 1분 안에 끝납니다.

이 도구가 점검하는 항목

  • 느린 4G 환경의 휴대폰

    Moto G Power급 휴대폰(412 × 823)으로 Chromium에서 페이지를 불러옵니다. 지연 시간은 150 ms, 다운로드는 약 1.6 Mbps, 업로드는 750 Kbps이며 CPU는 4배 느리게 설정합니다. Lighthouse가 모바일 테스트에 쓰는 프로필입니다.

  • 최대 콘텐츠 페인트(LCP)

    첫 화면에서 가장 큰 이미지나 텍스트 블록의 렌더링이 끝난 시점과 그 요소가 무엇인지 보여 드립니다.

  • 누적 레이아웃 이동(CLS)

    페이지가 로드되는 동안 보이는 콘텐츠가 예기치 않게 얼마나 움직였는지 측정합니다.

  • 총 차단 시간(TBT)

    스크립트 때문에 브라우저가 탭에 반응하지 못할 만큼 바빴던 시간입니다. 각 긴 작업에서 50 ms를 넘는 부분을 모두 더한 값입니다. 실험실 테스트에서 다음 페인트에 대한 상호작용(INP)을 대신하는 지표입니다.

  • 페이지가 다운로드하는 것

    전체 바이트와 요청 수를 이미지, 스크립트, CSS, 글꼴로 나누어 보여 드리고, 그중 서드 파티에서 오는 비율도 보여 드립니다.

  • 무거운 이미지와 렌더링 차단 파일

    150 KB를 넘거나 표시되는 공간보다 훨씬 넓은 이미지, 그리고 첫 렌더링을 지연시키는 CSS와 스크립트 파일입니다.

  • Chrome의 실제 사용자 데이터

    Google에 사이트의 트래픽이 충분히 있을 때, 휴대폰 기준으로 오리진의 Chrome UX Report 75번째 백분위수 LCP, INP, CLS를 보여 드립니다.

점검할 수 없는 항목

  • 매번 같은 수치를 내지는 않습니다. 실험실 결과는 네트워크, 서버 부하, 서드 파티 스크립트에 따라 달라지므로, 한 번의 결과보다 추세를 비교하십시오.
  • PageSpeed Insights와 정확히 일치하지 않습니다. 둘 다 비슷한 휴대폰 프로필을 쓰지만, 서로 다른 기기와 네트워크에서 실행됩니다.
  • 실험실에서는 INP를 측정할 수 없습니다. INP에는 실제 상호작용이 필요하므로, 실험실 테스트는 TBT를 보여 드리고, 필드 데이터가 있으면 INP를 보여 드립니다.
  • 모든 사이트의 필드 데이터를 보여 드릴 수는 없습니다. Chrome UX Report는 최근 28일 동안의 데이터를 다루며, Chrome 트래픽이 충분한 오리진만 포함합니다.
  • 입력한 한 페이지 외에는 테스트할 수 없습니다. 유료 성능 수정 리포트는 주요 페이지 3개를 테스트하고, 원인의 우선순위를 정해 수정 방법과 함께 제시합니다.

중요한 이유

사무실 Wi-Fi와 빠른 노트북에서는 즉시 열리는 듯한 페이지도, 신호가 약한 중급형 휴대폰에서는 몇 초가 걸릴 수 있습니다. 이 테스트가 재현하는 것이 바로 그런 상황입니다. 무거운 이미지와 스크립트가 가장 큰 피해를 주는 곳이기 때문입니다.

Core Web Vitals는 그런 경험을 재는 Google의 지표로, 로딩(LCP), 반응성(INP), 시각적 안정성(CLS)을 다룹니다. Google은 이 지표를 순위에 사용하지만, 좋은 페이지 경험이 관련성 있는 콘텐츠보다 우선하지는 않는다고 말합니다. 더 큰 영향은 사람에게 미칩니다. 느리거나 흔들리는 페이지는 방문자가 무언가를 읽기도 전에 방문자를 잃습니다.

원인은 대개 구체적입니다. 압축하지 않은 수 메가바이트짜리 히어로 이미지, 콘텐츠보다 먼저 로드되는 채팅 위젯, 텍스트를 숨기는 웹 글꼴, 페이지가 나타난 뒤 위쪽에 끼어드는 배너 같은 것입니다. 이 테스트는 LCP 요소와 가장 무거운 파일을 짚어 주므로, 이 중 무엇이 해당하는지 알 수 있습니다.

결과 해석 방법

최대 콘텐츠 페인트(LCP)
2.5 s 미만이면 좋음, 4 s를 넘으면 나쁨입니다. LCP 요소가 이미지라면 그 크기와 로딩 우선순위가 가장 중요하고, 텍스트라면 웹 글꼴과 렌더링 차단 CSS를 살펴보십시오.
누적 레이아웃 이동(CLS)
0.1 미만이면 좋음, 0.25를 넘으면 나쁨입니다. 화면의 얼마만큼이 얼마나 멀리 움직였는지를 결합한, 단위가 없는 점수입니다.
총 차단 시간(TBT)
200 ms 미만이면 좋음, 600 ms를 넘으면 나쁨입니다. TBT가 높으면 실제 사용자가 탭했을 때 반응이 느릴 것으로 예상할 수 있습니다.
바이트와 요청 수
공식 한도는 없으니 어떤 유형이 대부분을 차지하는지 보십시오. 대개 이미지가 가장 큰 비중을 차지하며, 서드 파티 비중이 높다면 앱, 태그, 위젯이 원인입니다.
무거운 이미지
150 KB를 넘거나 표시되는 크기보다 훨씬 넓게 다운로드되는 이미지를 파일 크기, 치수와 함께 보여 드립니다.
렌더링 차단 파일
브라우저가 무언가를 표시하기 전에 반드시 다운로드해야 하는 CSS와 동기 스크립트입니다.
필드 데이터(75번째 백분위수)
최근 28일 동안 휴대폰을 사용한 실제 Chrome 사용자의 데이터입니다. 75번째 백분위수는 페이지 로드 4번 중 3번이 적어도 이만큼 빨랐다는 뜻입니다. INP는 200 ms 미만이면 좋음, 500 ms를 넘으면 나쁨입니다.
필드 데이터 없음
Google에 오리진의 Chrome 트래픽이 충분하지 않습니다. 사이트의 속도에 대해서는 아무것도 말해 주지 않으니, 실험실 결과를 참고하십시오.

흔한 문제를 해결하는 방법

  • 느린 LCP 이미지

    히어로 이미지는 srcset을 사용해 표시되는 크기로, WebP 또는 AVIF 형식으로 제공하십시오. 지연 로딩하지 말고 fetchpriority="high"를 추가하며, 스크립트나 CSS 배경으로 불러오지 말고 HTML에 img 요소로 넣으십시오.

  • 로딩 중에 흔들리는 콘텐츠

    이미지, 동영상, 임베드에 width와 height 속성이나 CSS aspect-ratio를 지정하십시오. 배너, 쿠키 알림, 광고를 위한 공간을 미리 확보하거나, 콘텐츠를 밀어내지 않는 오버레이로 표시하십시오. 웹 글꼴에는 font-display: optional을 쓰거나 크기를 맞춘 대체 글꼴을 사용하십시오.

  • 높은 총 차단 시간

    먼저 더 이상 쓰지 않는 앱, 태그, 플러그인을 제거하십시오. 사용을 멈춘 뒤에도 스크립트가 남아 있는 경우가 많습니다. 채팅, 리뷰, 분석 스크립트는 defer로 불러오거나 페이지가 상호작용 가능해진 뒤에 불러오십시오. Shopify에서는 온라인 스토어 › 테마 › 사용자 지정 › 앱 임베드(Online Store › Themes › Customize › App embeds)를 확인하십시오.

  • 렌더링을 차단하는 CSS와 스크립트

    첫 페인트 전에 실행될 필요가 없는 스크립트에 defer를 추가하고, 첫 화면에 필요한 소량의 CSS는 인라인으로 넣고, 페이지에서 쓰지 않는 기능의 스타일시트는 빼십시오.

  • 너무 무거운 이미지

    업로드하기 전에 이미지 크기를 줄이고(전체 너비 배너라도 가로 약 2000 px면 충분합니다) 압축하십시오. Shopify와 WordPress는 테마가 요청하면 더 작은 버전을 자동으로 제공할 수 있으므로, 테마가 반응형 이미지 크기를 사용하는지 확인하십시오.

이 도구에 관한 질문

결과가 PageSpeed Insights와 다른 이유는 무엇인가요?

실험실 테스트는 기기, 네트워크, 측정 시점에 따라 달라집니다. PageSpeed Insights는 Google 서버에서 Lighthouse를 실행해 느린 연결을 시뮬레이션하는 반면, 이 도구는 실제 브라우저에 스로틀링을 적용합니다. 수치가 똑같지는 않고 비슷한 범위로 나온다고 보시면 됩니다.

좋은 LCP는 몇 초인가요?

web.dev에 따르면 페이지 로드의 75% 이상에서 2.5초 이하입니다. 4초를 넘으면 나쁨입니다.

내 사이트에 실제 사용자 데이터가 없는 이유는 무엇인가요?

Chrome UX Report에는 공개적으로 발견할 수 있고, 사용 통계를 공유하는 Chrome 사용자의 방문이 충분한 오리진만 포함됩니다. 많은 소규모 사이트는 그 수준에 이르지 못하지만, 실험실 테스트로도 무엇을 고쳐야 하는지 알 수 있습니다.

데스크톱 대신 느린 휴대폰으로 테스트하는 이유는 무엇인가요?

문제가 가장 먼저 드러나는 곳이기 때문입니다. 빠른 노트북에서는 중급형 휴대폰에서 몇 초씩 잡아먹는 무거운 이미지와 스크립트가 가려지며, Lighthouse도 모바일 테스트에 같은 휴대폰 프로필을 사용합니다.

최초 입력 지연(FID)은 어떻게 되었나요?

2024년 3월, 다음 페인트에 대한 상호작용(INP)이 최초 입력 지연(First Input Delay)을 대체해 Core Web Vitals 지표가 되었습니다. INP는 첫 번째 상호작용만이 아니라 방문하는 내내 일어나는 상호작용의 지연을 살펴봅니다.

출처

관련 도구

성능 수정 리포트($55, 1회 결제)는 전체 무료 스캔을 바탕으로 더 많은 페이지, 모든 발견 사항에 대한 변경 사항, PDF, 수정 결과를 검증하는 재테스트를 제공합니다.

성능 수정 리포트 소개