웹사이트 속도 테스트를 위한 최고의 도구(사이트 속도 향상 방법)

게시 됨: 2022-10-26

웹사이트가 느리게 로드되는 이유가 궁금하십니까?

웹사이트 속도가 SEO에 영향을 줄 수 있다는 사실이 걱정되십니까?

현재 SERP 순위를 높이고 싶으십니까?

여기 있다면 웹 사이트 속도를 높이는 방법을 배우기를 희망하는 좋은 기회입니다.

좋은 소식이 있습니다. 웹사이트 로드를 더 빠르게 하면 사용자에게 혜택을 줄 뿐만 아니라 Google에서 더 많은 유기적 트래픽을 얻을 수 있습니다.

다음과 같은 방법으로 검색 시 웹사이트의 가시성을 높일 수 있습니다.

웹사이트 속도를 실시간으로 모니터링하는 웹사이트 속도 테스트 도구를 사용합니다.
영향력이 큰 변화를 일으키십시오.

따라서 웹사이트 성능이 Google에 깊은 인상을 줄 만큼 좋은지 확인하는 방법과 속도를 높이기 위해 할 수 있는 일을 살펴보겠습니다.

SEO에 사이트 속도가 중요한 이유는 무엇입니까?

2021년 Google은 페이지 경험 업데이트를 출시하여 SEO 정보의 핵심인 웹사이트 속도가 순위 요소임을 확인했습니다.

즉, Google의 검색 엔진은 방문자를 위해 빠르고 원활하게 로드되는 웹사이트를 선호합니다.

Google이 검색 엔진 결과 페이지(SERP)에서 느린 웹사이트보다 빠른 웹사이트를 먼저 표시할 가능성이 더 큽니다.

Google은 웹사이트 속도를 위해 어떤 요소를 고려합니까?

웹사이트 속도에 영향을 미치는 많은 요소가 있지만 Google을 통해 쉽게 찾을 수 있습니다.

페이지 경험 알고리즘 업데이트 이전에 Google은 핵심 Web Vitals라고 하는 세 가지 측정항목 집합을 만들었으며 이러한 측정항목을 사용하여 웹사이트의 속도와 유용성을 결정합니다.

이 세 가지 주요 지표는 웹사이트의 어떤 페이지와 부분이 사이트 속도와 사용자 경험에 영향을 미치는지 탐색하는 데 도움이 될 수 있습니다. 이를 통해 웹사이트 순위를 낮추는 원인을 쉽게 찾아낼 수 있습니다.

2022년 10월 DebugBear의 Core Web Vitals 데이터를 보여주는 스크린샷

Google의 핵심 Web Vitals

웹사이트의 순위를 높이려면 다음 사항에 주의를 기울여야 합니다.

가장 큰 콘텐츠가 포함된 페인트(LCP) : 콘텐츠가 얼마나 빨리 렌더링됩니까?
FID(First Input Delay) : 페이지가 사용자 상호 작용에 얼마나 빨리 응답합니까?
CLS(누적 레이아웃 이동) : 페이지 레이아웃이 안정적입니까 아니면 로드 후 콘텐츠가 이동합니까?

웹사이트를 Google Search Console 또는 Core Web Vitals 모니터링 도구에 입력하면 녹색, 노란색 또는 빨간색 표기법과 함께 점수와 영향을 받는 페이지가 표시됩니다.

웹사이트에 빨간색 또는 노란색 마커가 있는 경우 웹사이트 속도 테스트 도구를 사용하여 사이트에서 수정해야 할 사항을 찾아야 합니다.

사이트 속도를 테스트하는 데 사용할 수 있는 도구는 무엇입니까?

전용 사이트 속도 테스트 도구는 사이트 속도를 개선하는 방법에 대한 많은 고품질 데이터와 권장 사항을 제공할 수 있습니다.

이러한 유형의 도구는 속도 테스트를 위해 특별히 제작되었으며 사이트의 로드 시간을 늘리는 데 필요한 모든 정보를 제공할 수 있습니다.

다음 전용 웹사이트 속도 테스트 도구를 사용해 보세요.

DebugBear 웹사이트 속도 테스트.
웹페이지 테스트.
지티메트릭스.

이 기사에서는 무료 DebugBear 테스트 도구를 사용할 것이지만 WebPageTest 또는 GTmetrix와 같은 대안을 사용할 수도 있습니다.

위의 도구 외에도 로컬 사이트 속도 및 랩 테스트 사이트 속도를 이해하는 데 도움이 되는 통찰력 도구도 있습니다.

컴퓨터에서 로컬로 사이트 속도 테스트하기

Chrome DevTools는 웹사이트가 로드되는 방식에 대한 많은 심층 데이터를 제공할 수 있습니다.

그러나 자신의 컴퓨터에서 테스트하면 테스트 결과가 로컬 환경에 크게 좌우됩니다. 또한 처음 사용자의 경험에 맞게 모든 관련 캐시를 수동으로 지우는 것도 어려울 수 있습니다.

Google의 사이트 속도 도구

PageSpeed Insights는 사이트 속도에 대한 빠른 개요를 얻는 데 유용합니다.

실제 사용자 데이터와 랩 테스트를 기반으로 웹사이트 속도를 높이는 방법에 대한 제안을 모두 얻을 수 있습니다. 그러나 시뮬레이션된 조절을 사용하기 때문에 실험실 데이터가 항상 정확하지는 않습니다.

지금 DebugBear로 사이트를 무료로 테스트하세요 →

DebugBear로 웹사이트를 테스트하는 방법

DebugBear로 사이트 속도를 테스트하는 데 몇 초밖에 걸리지 않습니다.

웹 성능 테스트를 실행하려면:

방문 : debugbear.com/test로 이동합니다.
테스트 : 웹사이트의 URL을 입력합니다.
검토 : 결과를 봅니다. 메트릭을 이해하고 변경하는 데 사용할 수 있는 메트릭 및 심층 디버그 데이터를 참조하십시오.

몇 가지 측정항목을 살펴보고 사이트 속도를 높이는 방법을 알아보겠습니다.

최대 SERP 순위를 얻으려면 75% 이상의 점수를 목표로 하세요.

DebugBear의 웹사이트 속도 테스트가 제공하는 한 가지 주요 지표는 "실제 사용자 점수"입니다.

이 비율은 실제 사용자와 함께 실제 세계에서 웹 사이트가 얼마나 잘 수행되고 있는지 이해하는 데 도움이 됩니다.

Google이 실제 Chrome 사용자로부터 수집한 데이터를 기반으로 하는 이 수치는 웹사이트에서 좋은 경험을 한 사용자의 비율을 보여줍니다. 이 데이터는 순위 신호로 사용됩니다.

최대 순위 부스트를 얻으려면 최소 75%의 점수를 목표로 하세요.

방문자의 75%는 Google에서 최대 순위 향상을 얻으려면 우수한 핵심 성능 평가 경험이 있어야 합니다.

방문자의 눈을 통해 사이트 로드 확인

방문자가 웹사이트를 방문할 때 실제로 무엇을 경험하는지 잘 파악하십시오.

느리게 로드되거나 제자리에 없는 것이 있습니까? 이를 통해 방문자가 경험하는 중요한 지연 및 전환 문제를 식별할 수 있습니다.

2022년 10월 DebugBear 웹 성능 테스트 결과를 보여주는 스크린샷

타임라인 필름 스트립은 시간 경과에 따른 웹사이트의 렌더링 진행률을 보여줍니다.

예를 들어 이 페이지는 0.7초 후에 렌더링을 시작하고 기본 이미지는 1.3초 후에 렌더링됩니다.

채팅 위젯이 3.7초 후에 표시되면 웹사이트가 완전히 렌더링된 것입니다(시각적으로 완료라고도 함).

2022년 10월 시간 경과에 따른 웹사이트의 렌더링 진행률을 보여주는 DebugBear 스크린샷

도구 내에서 렌더링 프로세스의 비디오 녹화를 볼 수도 있습니다.

이는 고객이나 팀의 다른 구성원에게 성능 문제의 영향을 보여주는 좋은 방법입니다.

2022년 10월 DebugBear에서 부분적으로 렌더링된 웹 사이트의 비디오 녹화를 보여주는 스크린샷

실제 로딩 통계를 확인하여 사이트 속도 변경 테스트

웹사이트를 최적화하고 있으며 이러한 변경이 영향을 미칠지 알고 싶어한다고 가정해 보겠습니다.

이 도구는 최적의 환경에서 "실험실 테스트"를 실행하여 사이트를 올바르게 최적화하고 있는지 확인합니다.

사이트를 테스트하면 Google Lighthouse 도구의 성능 점수에서 가져온 6가지 성능 측정항목을 요약한 공식 "실험실 점수"가 표시됩니다.

첫 번째 Contentful Paint(전체 점수의 10%).
속도 지수(10%).
가장 큰 내용이 포함된 페인트(25%).
대화형 시간(10%).
총 차단 시간(30%).
누적 레이아웃 이동(15%).

이 데이터를 사용하여 마지막 최적화 라운드가 얼마나 도움이 되었고 무엇을 변경해야 하는지 알 수 있습니다.

지금쯤이면 무엇을 변경해야 하는지 궁금할 것입니다. 지표 개요의 각 주요 지표를 사용하여 사이트를 최적화하는 방법을 알아보겠습니다.

웹사이트 속도를 최적화하는 방법

속도 테스트를 실행하는 것은 웹사이트 최적화 여정의 첫 번째 부분입니다.

메트릭이 있으면 이를 해석하는 방법과 이를 수정하기 위해 수행할 작업을 알아야 합니다.

웹사이트 속도 보고서의 메트릭 개요 영역에는 사이트 속도를 높이는 데 중점을 둘 주요 메트릭이 표시됩니다.

First Contentful Paint : 이것은 서버 통신 속도를 복구하여 가속화할 수 있습니다.
가장 큰 콘텐츠가 포함된 페인트 : 미디어 및 리소스를 최적화하여 속도를 높일 수 있습니다.

또한 요청 폭포수를 사용하여 요청에 걸리는 시간과 이러한 측정항목에 미치는 영향을 확인할 수 있습니다.

첫 번째 콘텐츠가 포함된 페인트(FCP) 속도를 높이는 방법

방문자에게 웹사이트가 더 빨리 표시되도록 하는 것부터 시작하겠습니다. 먼저 First Contentful Paint를 다룰 것입니다.

첫 번째 콘텐츠가 포함된 페인트란 무엇입니까?

First Contentful Paint는 방문자가 해당 페이지로 이동한 후 페이지의 콘텐츠가 처음 표시되기 시작하는 시간을 측정합니다.

방문자가 웹사이트를 떠나지 않도록 하려면 주요 콘텐츠를 빠르게 표시하는 것이 중요합니다. 사용자가 웹사이트를 떠나는 속도가 빠를수록 Google은 페이지 환경이 좋지 않을 수 있음을 더 빨리 알게 됩니다.

그러나 웹 사이트가 느리게 로드되는 원인을 정확히 어떻게 알 수 있습니까?

웹 사이트 속도를 저하시키는 서버 문제를 어떻게 발견합니까? 알아 보자.

내 첫 번째 만족스러운 페인트가 오래 걸리는 이유는 무엇입니까?

FCP는 서버 연결 속도, 서버 요청, 렌더링 차단 리소스 등에 의해 영향을 받을 수 있습니다.

많은 것처럼 들리지만 FCP의 속도를 늦추는 요소인 요청 폭포를 정확히 볼 수 있는 쉬운 방법이 있습니다.

이 유용한 도구는 귀하의 웹사이트에서 어떤 요청을 하고 언제 각 요청이 시작되고 완료되는지 보여줍니다.

예를 들어 이 스크린샷에서는 먼저 HTML 문서에 대한 요청을 확인한 다음 문서에서 참조되는 스타일시트를 로드하라는 두 가지 요청을 봅니다.

2022년 10월 DebugBear의 First Contentful Paint 지표에 대한 디버그 데이터를 보여주는 스크린샷

첫 번째 콘텐츠가 포함된 페인트가 0.6초 후에 발생하는 이유는 무엇입니까? 이를 이해하기 위해 페이지에서 무슨 일이 일어나고 있는지 분석할 수 있습니다.

첫 번째 만족스러운 페인트 전에 무슨 일이 일어나는지 이해하기

첫 번째 콘텐츠가 웹페이지에 로드되기 전에 사용자의 브라우저는 먼저 서버에 연결하고 콘텐츠를 검색해야 합니다.

이 프로세스에 시간이 오래 걸리면 사용자가 웹사이트를 보는 데 오랜 시간이 걸립니다.

목표는 웹사이트가 로드되기 전에 어떤 일이 일어나고 있는지 파악하여 문제를 정확히 찾아내고 경험을 가속화하는 것입니다.

페이지 로드 1부: 브라우저가 서버 연결을 생성합니다.

먼저 서버에서 웹사이트를 요청하기 전에 방문자의 브라우저는 해당 서버에 대한 네트워크 연결을 설정해야 합니다.

일반적으로 다음 세 단계를 수행합니다.

DNS 레코드를 확인하여 도메인 이름을 기반으로 서버의 IP 주소를 조회합니다.
안정적인 서버 연결 설정(TCP 연결이라고 함).
보안 서버 연결 설정(SSL 연결이라고 함).

이 세 단계는 브라우저에서 차례로 수행됩니다. 각 단계는 방문자의 브라우저에서 웹사이트의 서버까지 왕복해야 합니다.

이 경우 서버 연결을 설정하는 데 약 251밀리초가 걸립니다.

2022년 10월 서버 연결을 설정하는 데 사용되는 네트워크 왕복을 보여주는 DebugBear 스크린샷

페이지 로드 파트 2: 브라우저가 HTML 문서를 요청합니다(여기서 첫 번째 바이트가 발생하는 시간)

서버 연결이 설정되면 방문자의 브라우저에서 웹사이트 콘텐츠가 포함된 HTML 코드를 요청할 수 있습니다. 이것을 HTTP 요청이라고 합니다.

이 경우 HTTP 요청은 102밀리초가 걸립니다. 이 기간에는 네트워크 왕복에 소요된 시간과 서버가 응답을 생성할 때까지 대기한 시간이 모두 포함됩니다.

연결을 생성하는 데 251밀리초가 소요되고 HTTP 요청이 생성되는 데 102밀리초가 지나면 방문자의 브라우저가 마침내 HTML 응답 다운로드를 시작할 수 있습니다.

이 마일스톤을 TTFB(Time to First Byte)라고 합니다. 이 경우 총 353밀리초 후에 발생합니다.

서버 응답이 준비되면 방문자의 브라우저는 HTML 코드를 다운로드하는 데 추가 시간을 보냅니다. 이 경우 응답이 상당히 작고 다운로드에 추가로 10밀리초만 걸립니다.

HTTP 요청의 다양한 구성요소를 보여주는 DebugBear 스크린샷, 2022년 10월

페이지 로드 파트 3: 웹사이트에서 추가 렌더링 차단 리소스 로드

브라우저는 문서를 로드한 직후에 페이지를 렌더링하거나 표시하지 않습니다. 대신 일반적으로 추가 렌더링 차단 리소스가 있습니다.

대부분의 페이지는 시각적 스타일이 없으면 보기 좋지 않으므로 페이지 렌더링이 시작되기 전에 CSS 스타일시트가 로드됩니다.

이 웹 사이트 속도 테스트 예제에서 2개의 추가 스타일시트를 로드하는 데 137밀리초가 걸립니다.

이러한 요청에는 새 서버 연결이 필요하지 않습니다. CSS 파일은 이전과 동일한 도메인에서 로드되며 기존 연결을 재사용할 수 있습니다.

HTML 문서 이후 로드되는 추가 렌더링 차단 리소스를 보여주는 DebugBear 스크린샷, 2022년 10월

페이지 로드 4부: 브라우저가 페이지를 렌더링합니다.

마지막으로, 필요한 모든 리소스가 로드되면 방문자의 브라우저에서 페이지 렌더링을 시작할 수 있습니다. 그러나 이 작업을 수행하는 데도 어느 정도의 처리 시간이 필요합니다(이 경우 66밀리초). 이것은 폭포식 뷰에서 주황색 CPU 작업 마커로 표시됩니다.

2022년 10월 HTML 문서 로드부터 웹 페이지 렌더링까지의 단계를 보여주는 DebugBear 스크린샷

이제 FCP가 632밀리초 후에 발생하는 이유를 이해합니다.

HTML 문서 요청의 경우 364밀리초입니다.
스타일시트를 로드하는 데 137밀리초가 소요됩니다.
페이지를 렌더링하는 데 66밀리초.
다른 처리 작업의 경우 65밀리초.

다른 처리 작업에는 인라인 스크립트를 실행하거나 HTML 및 CSS 코드를 다운로드한 후 구문 분석하는 것과 같은 작은 작업이 포함됩니다. 이 활동을 렌더링 필름 스트립 바로 아래에 작은 회색 선으로 볼 수 있습니다.

첫 번째 콘텐츠가 포함된 페인트(FCP)를 최적화하는 방법

이제 웹 사이트가 렌더링되는 원인을 이해했으므로 웹 사이트를 최적화하는 방법에 대해 생각할 수 있습니다.

서버가 HTML 요청에 더 빨리 응답할 수 있습니까?
새 연결을 만드는 대신 동일한 연결을 통해 리소스를 로드할 수 있습니까?
더 이상 렌더링을 차단하지 않도록 제거하거나 변경할 수 있는 요청이 있습니까?

이제 웹사이트의 시작 부분이 더 빨리 로드되므로 전체 사이트 로드 속도를 높이는 데 집중해야 합니다.

DebugBear의 권장 사항으로 LCP(Large Contentful Paint) 속도를 높이는 방법

LCP 속도를 높이는 방법에는 여러 가지가 있습니다.

이를 쉽게 하기 위해 DebugBear는 권장 사항 섹션에서 다음 단계를 제공합니다.

권장 사항의 몇 가지 예를 살펴보고 이 웹 사이트의 LCP 속도를 높이는 방법을 알아보겠습니다.

권장 사항 1: HTML 문서에서 LCP 이미지 요청 시작

페이지에서 가장 큰 콘텐츠 요소가 이미지인 경우 가장 좋은 방법은 URL이 초기 HTML 문서에 직접 포함되도록 하는 것입니다. 이렇게 하면 가능한 빨리 로드를 시작하는 데 도움이 됩니다.

그러나 이 모범 사례가 항상 사용되는 것은 아니며 브라우저가 기본 이미지를 다운로드해야 한다는 것을 발견하는 데 시간이 오래 걸리는 경우가 있습니다.

아래 예시에서는 자바스크립트를 사용하여 가장 큰 콘텐츠인 이미지를 페이지에 추가합니다. 결과적으로 브라우저는 이미지를 검색하고 다운로드를 시작하기 전에 200킬로바이트 스크립트를 다운로드하고 실행해야 합니다.

2022년 10월 이미지 요청으로 이어지는 순차적 요청 체인을 보여주는 DebugBear 스크린샷

수정 방법: 웹사이트에 따라 두 가지 가능한 솔루션이 있습니다.

해결 방법 1: JavaScript를 사용하여 큰 이미지를 지연 로드하는 경우 이미지 크기를 최적화하고 지연 로드 스크립트를 제거하거나 JavaScript가 필요하지 않은 최신 loading=”lazy” 속성으로 대체합니다.

솔루션 2: 다른 경우에는 서버 측 렌더링이 페이지를 렌더링하기 전에 JavaScript 앱을 다운로드하지 않아도 됩니다. 그러나 때로는 구현하기가 복잡할 수 있습니다.

권장 사항 2: LCP 이미지가 높은 우선 순위로 로드되었는지 확인

페이지의 HTML 코드를 로드한 후 방문자의 브라우저는 기본 이미지 외에도 스타일시트와 같은 많은 추가 리소스를 로드해야 할 수 있음을 발견할 수 있습니다.

여기서 목표는 Google의 가장 큰 콘텐츠가 포함된 페인트 요구 사항을 충족하도록 더 큰 기본 사진을 로드하는 것입니다.

타사 분석 스크립트와 같은 기타 리소스는 기본 이미지만큼 중요하지 않습니다.

또한 페이지가 렌더링되면 사이트의 HTML에서 참조되는 대부분의 이미지가 스크롤 없이 볼 수 있는 부분에 표시됩니다. 일부는 중첩된 헤더 탐색에서 완전히 숨겨질 수 있습니다.

이 때문에 브라우저는 처음에 모든 이미지 요청의 우선 순위를 낮음으로 설정합니다. 페이지가 렌더링되면 브라우저는 중요한 이미지를 찾아 우선 순위를 변경합니다. 우선 순위 열에 별표로 표시된 것처럼 아래 스크린샷에서 그 예를 볼 수 있습니다.

낮은 초기 우선 순위로 로드되는 LCP 이미지를 보여주는 DebugBear 스크린샷, 2022년 10월

폭포수는 브라우저가 초기에 이미지를 알고 있었지만 회색 막대로 표시된 것처럼 다운로드를 시작하지 않았음을 보여줍니다.

해결 방법: 이 문제를 해결하기 위해 우선 순위 힌트라는 새로운 브라우저 기능을 사용할 수 있습니다. fetchpriority="high" 속성을 img 요소에 추가하면 브라우저는 처음부터 이미지를 로드하기 시작합니다.

권장 사항 3: CSS를 사용하여 페이지 콘텐츠를 숨기지 마십시오

때로는 요청 폭포를 볼 수 있으며 모든 렌더링 차단 리소스가 로드되었지만 여전히 페이지 콘텐츠가 표시되지 않습니다. 무슨 일이야?

A/B 테스트 도구는 테스트 변형이 페이지의 콘텐츠 요소에 적용될 때까지 페이지 콘텐츠를 숨기는 경우가 많습니다. 이러한 경우 브라우저는 페이지를 렌더링했지만 모든 콘텐츠는 투명합니다.

A/B 테스트 도구를 제거할 수 없으면 어떻게 해야 하나요?

수정 방법: A/B 테스트의 영향을 받는 콘텐츠만 숨기도록 도구를 구성할 수 있는지 확인합니다. 또는 A/B 테스트 도구를 더 빠르게 로드할 수 있는 방법이 있는지 확인할 수 있습니다.

2022년 10월 A/B 테스트 도구에 의해 콘텐츠가 숨겨진 렌더링 필름 스트립을 보여주는 DebugBear 스크린샷

DebugBear로 사이트 속도 모니터링

웹사이트를 지속적으로 테스트하고 싶으십니까? 14일 무료 평가판으로 유료 모니터링 도구를 사용해 보세요.

그렇게 하면 성능 최적화가 작동하는지 확인하고 사이트의 성능 저하에 대한 경고를 받을 수 있습니다.

2022년 10월 DebugBear에서 웹사이트의 사이트 속도 추세를 보여주는 스크린샷

무료 사이트 속도 테스트 실행

가입이 필요하지 않으며 웹사이트 URL만 입력하면 됩니다.

내 사이트 속도 테스트