WebPageTest를 사용한 성능 분석

게시 됨: 2021-05-19

빠른 웹사이트는 이제 절대 필수입니다. 모바일 시대와 입원환자 소비자의 경우 느린 웹사이트가 비즈니스의 성패를 가르는 차이가 될 수 있습니다. 그렇다면 웹 사이트의 속도를 정확히 어떻게 테스트하고 속도를 늦출 수 있는 문제를 어떻게 식별할 수 있습니까?

이 기사에서는 WebPageTest라는 인기 있는 도구를 살펴보겠습니다. 이 측정 도구는 성능 관점에서 개선할 수 있는 사이트 영역을 정확히 찾아내는 데 사용할 수 있는 일련의 상세한 통계 및 데이터를 제공합니다. 그러나 제공된 정보의 양은 다소 압도적일 수 있습니다. 걱정하지 마세요... WebPageTest를 사용하는 방법을 단계별로 분석하여 이 무료 도구를 최대한 활용하는 방법을 명확히 할 것입니다.

WebPageTest 시작하기

가장 먼저 시작하려면 웹페이지 테스트(webpagetest.org)로 이동하십시오. 레이아웃이 매우 명확하고 웹사이트 URL을 입력할 수 있는 상자가 즉시 표시됩니다.

처음부터 선택할 수 있습니다... 기본 '고급 테스트' 탭을 사용하시겠습니까, 아니면 '단순 테스트' 탭으로 이동하시겠습니까? 단순 테스트 기능은 사이트에 대한 간략한 개요에 적합하지만 이 기사에서는 고급 테스트 탭을 살펴보겠습니다.

고급 테스트 설정

페이지를 아래로 스크롤하면 테스트 위치 드롭다운 메뉴가 표시됩니다. 이것은 꽤 자명합니다. 선택하려는 위치는 타겟 고객이 위치한 곳에서 가장 가까운 위치입니다. 그들이 호주에 기반을 두고 있다면 영국 런던에서 테스트하는 것은 의미가 없습니다. 이 연습의 목적은 웹사이트가 사용자를 위해 어떻게 작동하는지 알아내는 것입니다.

많은 위치가 있지만 일부 위치는 테스트에 사용되는 브라우저의 형태로 다른 위치보다 더 많은 테스트 옵션을 제공합니다. 다시 말하지만, 대상 고객이 사용할 가능성이 있는 것을 선택하려고 합니다. 웹사이트를 방문한 브라우저에서 일부 통계를 보려면 Google Analytics와 같은 도구를 사용할 수 있습니다.

선택할 수 있는 다른 정말 멋진 설정은 연결과 같은 것입니다. 따라서 최종 사용자의 장치가 인터넷에 연결되는 방식입니다. '연결' 옆에 있는 드롭다운 메뉴를 클릭하면 3G 연결(느림 또는 빠름)을 포함하는 옵션이 표시됩니다. 청중이 사이트를 경험하는 방식에 대한 실제 느낌을 제공하므로 정말 깔끔합니다.

꽤 유용한 또 다른 설정은 '보기 반복' 옵션입니다. 이 옵션을 활성화하면 사이트에서 활성화한 캐싱의 영향을 표시하는 데 도움이 되는 첫 번째 로드 후 사이트가 다시 테스트됩니다.

탐색할 수 있는 추가 고급 옵션이 많이 있습니다. 대부분의 경우 사이트 테스트에 대해 자세히 알아보지 않는 한 위에 설명된 설정으로 충분합니다. 사용 가능한 실제 핵심 설정에 대해 자세히 알아보려면 WebPageTest 문서를 확인하세요.

변경한 설정을 기록해 두십시오. 테스트 및 최적화 단계 중에 동일한 설정을 사용하여 계속 다시 테스트하는 것이 중요합니다. 그렇지 않으면 결과가 왜곡될 수 있습니다. 준비가 되면 '테스트 시작' 버튼을 누르고 앉아서 결과를 기다리십시오(보통 1분 정도 소요).

첫 화면

이 예에서는 Apple의 웹사이트(apple.com)를 사용하고 영국 런던에서 빠른 3G 연결을 통해 테스트했습니다. 초기 결과는 다음과 같습니다.

오른쪽 상단을 보면 페이지 실적에 대한 초기 '헤드업' 개요를 제공하는 7개의 색상 상자가 표시됩니다. 각각 무엇인지 살펴보겠습니다.

상자 1 – 보안 점수

이것은 실제로 Snyk와 통합되고 웹사이트의 보안에 대한 통찰력을 제공하는 WebPageTest에서 제공하는 최근 기능입니다. 색상 상자를 클릭하면 보안 관점에서 해당 웹 사이트에 대한 자세한 분석이 포함된 synk.io 웹 사이트로 이동합니다. 특히 통신의 보안 세부 사항을 정의하기 위해 클라이언트와 서버 간에 교환되는 HTTP 보안 헤더가 중요합니다. 가장 중요한 것은 Strict-Transport-Security, Content-Security-Policy, X-Frame-Options입니다.

사이트에서 중요한 보안 헤더가 누락된 경우 Synk 웹사이트에서 이에 대한 정보를 받게 됩니다.

상자 2 – 첫 번째 바이트 시간

두 번째 상자는 첫 번째 바이트 시간(첫 번째 바이트까지의 시간 또는 TTFB라고도 함)을 제공합니다. 이것은 서버가 클라이언트 요청에 대한 데이터의 첫 번째 바이트로 다시 응답할 때까지 걸리는 시간입니다. 이상적으로는 300ms 미만의 수치를 목표로 합니다. 이 값은 서버와 더 관련이 있으며 웹 사이트 파일이 렌더링되는 데 소요되는 시간과 관련이 없습니다. 예를 들어 느린 DNS 서버나 불충분한 캐싱의 영향을 받을 수 있습니다.

이 시점에서 캐시가 활성화된 경우 캐시된 콘텐츠가 측정될 수 있도록 웹페이지 테스트를 다시 실행해야 합니다. 실제로 결과가 사이트의 캐시된 콘텐츠를 완전히 반영하는지 확인하려면 테스트를 최소 3번 실행하는 것이 좋습니다.

첫 번째 바이트 시간은 HTTP 요청을 보내는 데 필요한 시간, 서버가 처리하는 시간, 서버가 첫 번째 바이트를 클라이언트에 다시 보내는 데 필요한 시간의 세 값의 합입니다. 상자를 클릭하면 이에 대한 자세한 내용을 볼 수 있습니다.

우리가 볼 수 있듯이, Apple 웹사이트는 테스트의 이 특정 부분에서 그다지 잘하지 못했습니다.

이 연결이 설정되면 리소스 전달을 시작할 수 있습니다. 느린 TTFB의 가장 일반적인 이유는 네트워킹 문제, 웹 서버 구성, 가능한 서버 디스크 I/O 및 RAM 문제입니다.

상자 3 – 살아남기

'Keep-alive Enabled' 상자는 keep-alive HTTP 헤더의 상태를 보여줍니다. 이 헤더가 활성화되면 데이터는 동일한 연결을 사용하여 전송됩니다. 그렇지 않으면 전송해야 하는 모든 파일에 대해 새 연결을 생성해야 합니다. 연결 유지는 대부분의 경우 기본적으로 활성화되어 있으며 일반적으로 서버 측 설정입니다. 직접 활성화해야 하는 경우 .htaccess 파일을 편집하고 아래 코드를 삽입할 수 있습니다.

 <ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

상자 4 – 압축 전송

압축 전송 값은 Gzip 압축 상태를 나타냅니다. 이것은 실시간으로 정적 파일을 압축하고 나중에 압축 해제하는 데 사용되는 기술입니다. 이렇게 하면 파일 크기가 줄어들기 때문에 전송 시간이 줄어듭니다. 서버 공급자가 기본적으로 이 기술을 적용하지 않는 경우 다음과 같이 각 파일 유형에 해당하는 규칙을 지정하여 직접 수행할 수 있습니다.

 AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html

다시 말하지만 관련 색상 상자를 클릭하면 자세한 개요 섹션으로 이동하여 웹사이트에서 정확히 무슨 일이 일어나고 있는지 확인할 수 있습니다.

상자 5 – 이미지 압축

이미지 압축 상자는 꽤 자명합니다. 클릭하면 더 잘 압축될 수 있는 이미지가 표시됩니다.

이 경우 WebPageTest는 전송할 필요가 없는 데이터에서 54kb를 추가로 절약하면서 성공적으로 압축할 수 있다고 생각하는 3개의 이미지를 식별했습니다. 별 것 아닌 것 같지만 모바일에서는 저장할 수 있는 모든 kb가 차이를 만듭니다.

이미지는 정적 콘텐츠에서 가장 공간을 많이 차지하는 부분입니다. 압축은 절대적으로 필요합니다. WebPageTest 분석을 사용하면 사이트 속도를 저하시켜 주의가 필요한 이미지를 쉽게 식별할 수 있습니다.

상자 6 – 정적 콘텐츠 캐시

'정적 콘텐츠 캐시' 상자를 누르면 '정적 자산의 브라우저 캐싱 활용'이라는 세부 섹션으로 이동합니다.

브라우저 캐싱은 웹 브라우저에 리소스를 캐시할 때와 캐시하지 않을 때와 올바른 HTTP 헤더를 사용하는 기간을 지시하여 개발자나 관리자가 활용할 수 있습니다. 브라우저 캐싱에 대한 자세한 정보는 '브라우저 캐시는 어떻게 작동합니까?' 문서에서 찾을 수 있습니다. 또한 여기에서 Pressidium이 브라우저 캐싱을 구현하는 방법을 확인할 수 있습니다.

상자 7 – CDN의 효과적인 사용

CDN(또는 콘텐츠 전송 네트워크)은 지리적으로 분산된 사용자 기반이 있는 경우 사용할 가치가 있습니다. 예를 들어 모든 고객이 런던에 있고 호스트 서버도 런던에 있는 경우 CDN을 사용하는 데 큰 의미가 없을 것입니다. 그러나 사용자가 지리적으로 더 다양하다면 CDN은 사용자에게 더 가까운 서버에 웹사이트 사본을 배치하여 해당 사용자의 사이트 성능에 큰 차이를 줄 수 있습니다.

CDN을 사용하는 경우 WebPageTest는 이것이 얼마나 효과적으로 작동하는지 확인할 것입니다.

성과 결과

요약 탭의 상단에 표시되는 성능 결과로 시작하는 데이터를 더 자세히 살펴보겠습니다.

성능 결과에서 First Byte Time, 페이지의 보이는 부분이 표시되는 평균 시간인 Speed Index, 시각적 안정성을 측정하기 위한 CLS(Cumulative Layout Shift), 소요 시간과 같은 항목에 대한 가장 중요한 개요를 볼 수 있습니다. 문서가 완전히 로드될 때까지

폭포 전망

성능 결과 바로 아래에서 각 실행에 대한 폭포 보기를 볼 수 있습니다. 그들 중 하나를 클릭하면 폭포 형식의 실행에 대한 전체 세부 정보가 포함된 페이지로 이동합니다.

웹사이트의 각 개별 자산에 대한 모든 성능 통계가 제공됩니다. 서로 다른 색으로 되어 있어 구별하기 쉽습니다. 이러한 팝업 중 하나를 클릭하면 더 자세한 정보를 제공하는 팝업이 열립니다.

폭포 보기는 페이지와 도달 범위 구성 요소가 로드되는 방식을 시각적으로 표현한 것입니다. 이를 통해 속도를 늦출 수 있는 구성 요소를 쉽게 식별할 수 있습니다. 병목 현상이 있는 위치를 확인할 수 있고 추측할 필요 없이 정확한 문제를 해결할 수 있다는 것은 큰 도움이 됩니다.

연결 보기

Connection View 보드는 브라우저와 서버 간의 연결에 대한 조치를 시각적으로 요약하여 웹 성능 문제를 매우 쉽게 식별할 수 있도록 하는 매우 유용한 기능입니다.

DNS, 초기 연결, SSL 협상에서 비디오 리소스 등의 연결 상태를 바로 확인할 수 있습니다. 이 아래에는 웹 사이트를 로드하는 장치의 CPU 사용량을 나타내는 그래프도 있습니다. 데이터 렌더링 중에 사용된 수준을 보여주는 대역폭 표시기도 있습니다.

요청 세부 정보

마지막으로 연결 보기 아래에는 요청 세부 정보 및 요청 헤더라는 두 개의 추가 분석 보드가 제공됩니다.

요청 세부 정보 보드는 매우 유용하며 콘텐츠 유형, 요청 시작 시간, 다운로드한 바이트 수 등과 같은 해당 요청과 관련된 데이터와 함께 요청된 모든 리소스를 나열합니다. 이 테이블은 실제로 정렬 가능합니다... 해당 특정 열을 기준으로 정렬하려면 열 머리글을 클릭하기만 하면 됩니다.

요청 헤더 보드는 헤더 정보와 함께 요청 리소스 목록을 제공합니다. 자세한 내용을 보려면 각각을 클릭하십시오.

결론

웹 사이트 활동에 대한 심층 분석이 필요한 경우 WebPageTest는 사용할 수 있는 환상적인 도구입니다. 사이트에서 제공하는 정보를 자세히 살펴보지 않더라도 사이트가 잘 작동하는지 여부와 사이트의 성능을 더 자세히 살펴볼 필요가 있는지 여부를 빠르게 알 수 있습니다. 그리고 무엇보다도 무료입니다!