방문 페이지가 얼마나 빨리 로드되는지 확인하는 10가지 페이지 속도 도구

대부분의 사이트는 페이지가 로드되는 동안 방문자의 절반을 잃습니다. 믿기 ​​힘든 충격적인 현실이지만 오늘날 평균 웹 페이지 이탈률이 58.18%라는 점을 고려하면 아닐 수도 있습니다. 더 나쁜 것은 평균 클릭 후 방문 페이지 이탈률이 60~90%라는 점입니다.

모바일 페이지도 느린 페이지 속도의 영향을 받습니다. 2016년 Google 및 SOASTA 연구에 따르면 반송된 세션의 평균 모바일 웹사이트 로드 시간은 반송되지 않은 세션의 평균 모바일 웹사이트 로드 시간보다 약 2.5초 느립니다.

로드 속도가 빠른 웹사이트는 일반적으로 더 낮은 이탈률을 생성할 뿐만 아니라 더 높은 SEO 순위, 더 긴 사이트 방문, 더 많은 참여 및 더 높은 전환율을 생성합니다. 로드 시간과 이탈률 간의 강력한 상관 관계로 인해 마케터는 최대 결과를 위해 페이지 속도 도구를 활용해야 합니다.

페이지 속도 테스트를 위해 가장 신뢰할 수 있는 도구를 분석하기 전에 가장 일반적인 요소와 이에 영향을 미치는 페이지 요소를 살펴보겠습니다.

페이지 속도는 어떤 영향을 받나요?

페이지 요청이 이루어지면 프런트 엔드 측 구성 요소와 서버 측 구성 요소는 모두 개별 작업을 완료해야 합니다. 따라서 프론트 엔드를 최적화한 후에도 서버 측(서버에서 페이지가 생성되는 방식)을 최적화하여 로드 시간을 더욱 단축할 수 있습니다.

양쪽이 순차적이므로 누적 시간이 총 페이지 로드 시간으로 간주됩니다.

위 이미지의 어딘가에서 페이지 속도를 늦추는 가장 일반적인 요소는 다음과 같습니다.

• 큰 이미지 및 텍스트 그래픽
• 동영상
• 페이지 길이
• 스크립트, 글꼴 및 플러그인(HTML, JavaScript, CSS)
• 불필요한 리디렉션
• 지리(국가, 도시, 조직, ISP, 네트워크 속도)
• 대역폭

다음 도구는 이러한 다양한 문제를 테스트하는 데 도움이 되므로 웹사이트 속도를 더 잘 이해할 수 있습니다.

가장 신뢰할 수 있는 10가지 페이지 속도 도구

참고: 이러한 각 도구는 고유한 기능, 보고 및 결과를 분석하는 방법을 제공하므로 다른 페이지 로드 시간 결과를 받을 수 있습니다. 테스트 위치와 웹 사이트가 호스팅되는 서버 사이의 지리적 거리도 역할을 합니다. 또한 도구를 처음 실행하면 속도가 느려질 수 있으므로 테스트를 여러 번 실행하고 결과의 평균을 구하는 것이 가장 좋습니다.

1. 지티메트릭스

GTmetrix는 27개의 페이지 속도 권장 사항(Google 속도 테스트)과 19개의 YSlow 권장 사항(Yahoo 속도 테스트)의 조합을 사용하여 사이트를 분석합니다. 보고서 상단에는 성능 점수가 A부터 F까지 제공되며 로드 시간, 페이지 크기 및 요청 횟수를 포함한 페이지 세부 정보가 제공됩니다.

로드 시간은 기본적으로 "완전히 로드된 시간"으로 제공됩니다(방문자가 처음 페이지를 탐색한 시간부터 네트워크 활동이 없는 후 2초까지의 시간). "온로드 시간"은 선택 사항입니다(웹 페이지가 처리를 완료하고 이미지, 텍스트 및 스크립트를 포함한 페이지의 모든 리소스 다운로드가 완료된 경우). 보고서의 나머지 부분은 PageSpeed, YSlow, 폭포수, 타이밍, 비디오 및 기록의 6가지 섹션으로 나뉩니다.

GTmetrix를 사용하면 다양한 연결 유형에 대해 웹사이트 성능을 테스트하고 비교하여 페이지 로드 속도에 미치는 영향을 확인할 수 있습니다. 케이블, DSL, 3G 모바일, 2G 모바일 및 56K 전화 접속과 같이 사이트 방문자가 사용할 수 있는 인터넷 연결 유형을 시뮬레이션하는 연결 조절 기능을 제공합니다. 가능한 브라우저로 Chrome 또는 Firefox를 선택할 수도 있습니다.

이 도구에는 7개의 테스트 위치가 있지만 총 28개의 전용 테스트 서버를 제공합니다. 5 미국 댈러스; 7 영국 런던; 2 브라질 상파울루; 1호주 시드니; 1 인도 뭄바이; 중국 홍콩 1위.

GTmetrix는 HTTP/1.1의 많은 단점과 한계를 해결하려고 시도하여 HTTP/1.1보다 빠르게 웹 페이지를 로드하는 HTTP/2를 지원합니다. HTTP/2의 이점은 다음과 같습니다.

• 다중화 및 동시성(동일한 TCP 연결에서 여러 요청을 빠르게 연속해서 보낼 수 있음)
• 스트림 종속성
• 헤더 압축
• 서버 푸시

또한 GTmetrix는 모바일 성능 테스트도 제공하는 몇 안 되는 페이지 속도 도구 중 하나입니다. 두 대의 Samsung Galaxy Nexus 전화를 사용하므로 사용자는 이러한 장치의 실제 페이지 로드를 기반으로 성능 보고서를 생성할 수 있습니다.

2. 핑돔

Pingdom을 사용하면 3가지 주요 위치에서 웹사이트의 속도를 테스트할 수 있습니다.

• 텍사스주 댈러스
• 호주 멜버른
• 캘리포니아주 산호세

무료 버전에 대한 Google의 PageSpeed ​​권장 사항 및 유료 버전에 대한 YSlow 권장 사항을 기반으로 성능 등급을 제공합니다. Pingdom은 또한 로드 시간, 페이지 크기, 요청 수 및 사이트가 다른 사이트에 대해 테스트하는 방법을 표시합니다. 추가 통찰력에는 콘텐츠 유형별 페이지 크기, 도메인별 페이지 크기, 콘텐츠 유형별 및 도메인별 요청이 포함됩니다.

Pingdom 속도 테스트의 주요 이점 중 하나는 사용자에게 개선할 수 있는 부분을 설명하는 성능 통찰력이 제공된다는 것입니다. 그러나 GTmetrix와 달리 Pingdom은 로드 시간(완전히 로드된 시간이 아님)만 제공하고 연결 제한을 제공하지 않으며 HTTP/2를 지원하지 않습니다.

3. Google PageSpeed ​​인사이트

PageSpeed ​​Insights는 개선을 위한 권장 사항을 제공하고 다음 두 가지 매개변수를 기반으로 페이지에 0~100점의 점수를 매기는 Google 속도 테스트입니다.

1. 스크롤 없이 볼 수 있는 부분까지 로드 되는 시간(사용자가 새 페이지를 요청한 후 페이지가 스크롤 없이 볼 수 있는 부분에 콘텐츠를 표시하는 데 걸리는 총 시간)
2. 전체 페이지 로드 시간(사용자가 요청한 후 브라우저에서 페이지를 완전히 렌더링하는 데 걸리는 시간)

점수가 높을수록 사이트가 더 최적화되어 있으며 85점 이상이면 페이지 실적이 양호함을 나타냅니다.

PageSpeed ​​Insights는 페이지의 데스크톱 및 모바일 버전 모두에 대한 보고서를 제공합니다. URL을 두 번 검색합니다. 한 번은 모바일 사용자 에이전트로, 한 번은 데스크톱 사용자 에이전트로 검색합니다. 모바일 보고서에는 표시 영역 구성, 탭 대상(버튼 및 링크)의 크기 및 글꼴 크기를 포함하는 "사용자 경험"이라는 추가 범주가 포함됩니다.

PageSpeed ​​Insights 팀은 또한 최근 목록에 있는 "Think with Google"에 대한 새로운 페이지 속도 도구를 출시했습니다.

4. Think with Google: 내 사이트 테스트

이것과의 차이점은 모바일 페이지 속도만 테스트한다는 것입니다.

결과 페이지 상단에는 로드 시간과 예상 방문자 손실(로드 시간으로 인해 페이지에서 손실된 방문자의 비율을 나타냄)이 표시됩니다.

"로드 시간"은 속도 지수(완전히 로드된 시간이 아님)로, 3G 네트워크 내에서 Moto G4 기기에서 Chrome을 사용하여 페이지 콘텐츠가 표시되는 데 걸리는 시간을 측정합니다. (참고: 2020년까지 전 세계적으로 셀룰러 네트워크 연결의 70%가 3G 또는 그보다 느린 속도로 발생할 것이기 때문에 3G 네트워크가 테스트에 사용됩니다.)

결과의 중간 섹션은 5백만 개 이상의 웹페이지에 대한 내부 Google 연구에서 계산된 업계 비교입니다.

마지막으로 내 사이트 테스트 도구는 PageSpeed ​​Insights에서 권장하는 수정 사항에 대한 자세한 보고서와 함께 페이지에 몇 가지 수정 사항을 적용하여 얼마나 많은 시간을 절약할 수 있는지 보여줍니다.

5. 구글 스피드 스코어카드

Speed ​​Scorecard는 데이터베이스에 12개 국가의 수천 개의 사이트를 포함하며 최대 10개 도메인을 비교하여 모바일 사이트가 어떻게 구성되어 있는지 확인할 수 있습니다. 3G 및 4G 연결 모두에서 페이지 로드 속도를 비교할 수도 있습니다.

느린 페이지 로드 속도가 이탈률과 전환율에 미치는 영향에 대해 논의한 이후 수익은 어떻습니까? 아이디어를 제공하기 위해 Google은 느린 로딩 페이지로 인해 브랜드가 잃을 수 있는 잠재적 수익 금액을 추정하기 위해 Impact Calculator도 포함했습니다.

예상 손실을 보려면 계산기의 도메인, 현재 속도, 평균 월간 방문자, 평균 주문 가치 및 전환율(이 중 대부분은 Google Analytics 대시보드에서 찾을 수 있음) 필드를 완성하십시오.

6. 키 CDN

KeyCDN은 모바일 장치에서 잘 작동하는 또 다른 페이지 속도 도구입니다. KeyCDN은 테스트 결과를 비공개로 만들거나 다른 사람들과 공개적으로 공유할 수 있는 옵션과 함께 전 세계에서 선택할 수 있는 16개의 테스트 위치를 제공합니다.

결과에는 하단에 웹사이트 미리보기가 있는 폭포수 분석이 포함됩니다. 결과 내에서 작성된 HTTP 요청 수, 요청된 페이지의 전체 크기 및 로드 시간을 볼 수 있습니다.

7. 웹페이지 테스트

WebPagetest에는 40개 이상의 다양한 테스트 위치와 14개의 모바일 장치를 포함하여 25개 이상의 브라우저가 포함되어 있습니다. 최소 시스템 요구 사항을 충족하는 한 누구나 WebPagetest의 테스트 위치를 호스팅할 수 있으므로 많은 테스트 위치를 사용할 수 있습니다.

테스트는 케이블, DSL, 3G 느림, 3G, 3G 고속, 4G, LTE, 모바일 에지, 2G, 56K 전화 접속, FIOS, 기본 연결 사이트 방문자가 사용할 수 있는 잠재적 인터넷 연결을 시뮬레이션하기 위해 연결 조절 기능으로 실행할 수 있습니다. , 맞춤 속도.

"첫 번째 보기" 및 "반복 보기"를 실행하는 고유한 테스트 접근 방식을 제공합니다. 또한 비디오 캡처, 다단계 트랜잭션, 콘텐츠 차단, JavaScript 비활성화, SSL 인증서 무시, 사용자 에이전트 문자열 스푸핑과 같은 고급 기능을 제공합니다.

WebPagetest는 결과를 제공할 때 기본적으로 완전히 로드된 시간을 기준으로 A에서 F까지의 문자 등급을 지정하며, 온로드 시간은 선택 사항입니다. 기타 점수 매개변수에는 FTTB, 압축, 캐싱, CDN의 효과적인 사용 등이 있습니다. 보고서는 요약, 세부 정보, 성능 검토, 콘텐츠 분석 및 스크린샷의 6개 섹션으로 나누어져 있으며 폭포수 차트, Page Speed ​​최적화 확인 및 개선 제안과 함께 풍부한 진단 정보를 제공합니다.

마지막 참고 사항은 HTTP/2가 WebPagetest에서 지원된다는 것입니다.

8. 닷컴 모니터

Dotcom-Monitor는 모바일 및 클라우드 기반을 포함하여 전 세계적으로 20개의 서로 다른 테스트 위치와 7개의 브라우저를 제공합니다. 이 도구의 독특한 점은 모든 지리적 테스트를 동시에 실행한 다음 각 보고서를 클릭하여 자세히 알아볼 수 있다는 것입니다.

보고서는 요약, 성능, 폭포수 분석, 호스트 및 오류의 5개 섹션으로 나누어져 있으며 그 아래에서 다음을 찾을 수 있습니다.

• 위치별 요약
• 모든 페이지 요소의 브라우저 기반 로드 시간 테스트
• 느린/누락 요소 감지
• 가장 빠른 요소의 10%
• 가장 느린 요소의 10%
• 포괄적인 폭포 차트
• 호스트 요소별 분석(DNS, 연결, SSL, 요청, 첫 번째 패킷 및 다운로드 포함)
• 오류 확인 및 진단

9. 페이지로시티

Pagelocity 도구는 데스크톱과 모바일 장치 모두에서 사용할 수 있으며 반응이 좋습니다. 콘텐츠 상태, 페이지 구조 및 코딩과 같은 구성 요소를 기반으로 사용자에게 100점 만점의 총점을 할당합니다. 보고서에는 다음이 포함됩니다.

• 콘텐츠 요약: 페이지의 텍스트 콘텐츠(키워드, 제목 링크, 이미지의 대체 텍스트 등)에 대한 귀중한 통찰력
• 리소스 분석: 페이지 구조에 관한 정보 — 얼마나 많은 이미지, 스크립트 또는 스타일 파일이 있는지, 렌더링 차단 콘텐츠와 이러한 요소가 페이지 로드 시간에 미치는 영향
• 코드 팁 및 통찰력: 마크업에 대한 유용한 데이터(클래스/Id, 태그, Google PageSpeed, 첫 번째 바이트까지의 시간 등)를 사용하여 코드를 더 유지 관리하고 확장할 수 있도록 업데이트하는 방법에 대한 제안

Pagelocity의 고유한 기능은 제공하는 나란히 메트릭을 사용하여 경쟁 분석을 수행하여 경쟁업체에 비해 귀하의 장점과 그들이 가질 수 있는 약점을 보여줍니다.

10. 와이슬로우

YSlow는 고성능 웹사이트를 위한 Yahoo!의 34가지 규칙 중 23가지를 기반으로 웹 페이지를 분석하는 오픈 소스 프로젝트입니다. 성능 테스트 결과를 생성하는 세 단계를 따릅니다.

• DOM을 크롤링하여 모든 구성 요소(이미지, 스크립트 등)를 찾습니다.
• 각 구성 요소 크기(gzip, 헤더 만료 등)에 대한 정보를 검색합니다.
• 데이터를 사용하여 각 규칙에 대한 등급을 생성하여 전체 등급을 제공합니다.

YSlow는 통계, 개선 제안 및 성능 분석을 위한 도구(Smush.it 및 JSLint 포함)가 포함된 페이지 요약도 제공합니다.

YSlow 페이지 속도 도구를 실행하려면 YSlow 크롬 확장을 사용하거나 GTMetrix에서 YSlow 결과를 얻을 수 있습니다.

이러한 각 도구가 제공하는 점수, 통찰력 및 피드백은 권장 사항이지, 반드시 충족해야 하는 규칙이나 요구 사항이 아닙니다. 또한 보고서에서 제안한 대로 이미 수행 중일 수 있으며 도구가 이를 포착하지 못했을 수도 있습니다.

웹 페이지를 더 빠르게 로드하고 더 나은 사용자 경험을 제공하기 위해 변경해야 하는 경우 몇 가지 일반적인 방법이 있습니다.

브랜드는 어떻게 웹 페이지 속도를 높일 수 있습니까?

위의 도구는 쉽게 수정할 수 있는 주요 페이지 문제를 확인하는 데 매우 유용합니다. 여기에서 이러한 수정 사항 중 몇 가지를 해결하기 위해 잠시 시간을 내어 보겠습니다.

이미지 최적화

이미지가 필요한 것보다 크지 않은지, 올바른 파일 형식인지, 웹용으로 압축되었는지 확인하세요. 페이지의 25%는 이미지와 텍스트를 압축하여 250KB 이상을 절약할 수 있고 10%는 1MB 이상을 절약할 수 있습니다. 비디오에 관해서는 그대로 두거나 서버가 아닌 다른 플랫폼(YouTube 또는 Vimeo와 같은)에서 파일을 호스팅하십시오.

비동기식으로 로드

비동기식 로드를 선택하면 요소를 순차적으로 로드하지 않고 동시에 로드하여 페이지 로드 속도의 지연을 방지할 수 있습니다.

CSS, JavaScript 및 HTML 축소

공백, 쉼표 및 기타 불필요한 문자를 제거하고 코드 주석을 제거하고 서식을 최소화하여 코드를 최적화하십시오.

리디렉션 줄이기

리디렉션을 줄이면 페이지가 다른 페이지로 리디렉션될 때마다 방문자가 HTTP 요청-응답 주기가 완료될 때까지 더 오래 기다려야 하기 때문에 큰 차이를 만듭니다.

페이지 캐시

브라우저 캐싱은 누군가가 귀하의 사이트를 다시 방문할 때 브라우저가 전체 페이지를 다시 로드할 필요가 없음을 의미합니다. 스타일시트, 이미지 및 JavaScript 파일과 같은 정보를 캐싱하여 서버에 대한 요청 수를 줄이고 페이지 로드 시간을 크게 단축합니다.

서버 응답 시간 개선

서버 응답 시간은 트래픽 양, 각 페이지에서 사용하는 리소스, 서버에서 사용하는 소프트웨어, 호스팅 솔루션 등 다양한 요인의 영향을 받습니다. 서버 응답 시간을 개선하려면 느린 데이터베이스 쿼리 및 라우팅, 적절한 메모리 부족과 같은 성능 병목 현상을 찾으십시오.

필요에 맞는 페이지 속도 도구 선택

사용할 도구를 결정하는 것은 궁극적으로 사이트에 대해 추적하고 측정하려는 측정항목에 따라 결정됩니다. 기능의 차이에도 불구하고 각각은 사이트가 느려질 수 있는 영역을 식별하고 속도를 높이기 위한 통찰력과 권장 사항을 제공하는 데 큰 가치를 제공합니다.

빠르게 로드되는 클릭 후 방문 페이지를 디자인할 때 AMP와 비교할 수 있는 것은 없습니다. 고유한 프레임워크와 최소한의 HTML을 사용하여 AMP 클릭 후 방문 페이지를 즉시 로드할 수 있어 뛰어난 사용자 경험을 제공합니다. 지금 데모를 요청하여 디지털 마케팅 담당자가 Instapage AMP 빌더를 사용하여 빠르고 쉽게 빠른 로드를 만들고 게시할 수 있는 방법을 알아보세요.