지티메트릭스

지티메트릭스(GTmetrix)

지티메트릭스(GTmetrix)

지티메트릭스(GTmetrix)란 홈페이지나 인터넷 서비스의 퍼포먼스를 체크해 어느 부분을 해결해야하는지 개선책을 알려주는 솔루션이다.

개요

지티메트릭스는 캐나다에 본사를 둔 회사인 지티닷넷(GT.net)이 호스팅 고객이 사이트의 성능을 쉽게 판단할 수 있는 도구로 개발했다. 웹 사이트의 로딩 속도를 분석한 다음 현재 속도 문제와 웹 사이트의 속도를 높이는 방법에 대한 무료 보고서를 생성하는 최고의 웹 사이트 속도 테스트 도구이다. 다른 개발 도구에 비해 지티메트릭스는 사용이 상당히 간편하고 초보자도 금방 익힐 수 있어 점점 사용량이 증가하고 있다. 구글의 페이지스피드와 야후의 와이슬로우의 각각 다른 방법론을 가진 두 가지 도구를 사용하여 각각 다른 기준의 점수 평가와 해당 평가에 따른 방법을 추천해 준다. 지티메트릭스의 기본 버전은 무료로 배포되고 있으며 단순 가입만으로도 서비스를 이용할 수 있다. 사이트 로딩에 대한 관점을 제공하고 이를 최적화하는 방법에 대한 실행 가능한 권장 사항을 제공한다. 미국의 댈러스, 홍콩, 영국의 런던, 인도의 뭄바이, 호주의 시드니, 브라질의 상파울루, 캐나다의 밴쿠버 등 7개의 글로벌 테스트 지역, 20개 이상의 모바일 장치 및 변형 모델, 다중 연결 시 속도와 분석 옵션 등을 통해 사이트를 테스트하고 어떤 시나리오에서도 사이트를 최적화할 수 있다. 모니터링과 알람을 통해 정의한 기준에 따라 성능 트렌드를 파악하고 사이트 성능이 저하될 때마다 알림을 받을 수 있다.

특징

• 분석 지표 : 현재 지티메트릭스는 구글(Google)의 페이지스피드(PageSpeed) 및 Yahoo의 와이슬로우(YSlow) 라이브러리의 수정된 버전을 사용하여 웹 사이트가 웹 성능에 대한 모범 사례를 준수하는지 여부를 평가한다. 또한 완전히 로드가 완료되는 데 걸리는 시간, 브라우저에서 첫 번째 콘텐츠가 렌더링 되는 데 걸리는 시간, 첫 번째 바이트까지 걸리는 시간 등의 필수 시간을 제공한다. 총 페이지 크기와 요청의 개수도 포함하며 페이지스피드와 와이슬로우에 대해 점수를 평가해 90부터 100까지는 A, 80부터 90까지는 B, 70부터 80까지는 C, 60부터 70까지는 D, 60 밑으로는 F로 등급을 각 항목에 등급을 매겨 평균 등급을 제시해준다.
• 분석 환경 : 지티메트릭스는 미국의 댈러스, 홍콩, 영국의 런던, 인도의 뭄바이, 호주의 시드니, 브라질의 상파울루, 캐나다의 밴쿠버 등 7개의 글로벌 테스트 지역을 가지고 있고, 가상이 아닌 실제 안드로이드(Android) 하드웨어 장치 및 고속 광대역부터 56K까지의 8가지의 다른 연결 속도에서 테스트를 제공한다. 앞서 언급한 것들은 일반적인 무료 계정으로도 가능한 사항들이며 유료 계정 사용자들은 추가로 모바일 기기, 화면 해상도 및 더 많은 모니터링 항목을 제시받을 수 있다. 여러 시나리오를 테스트하는 것은 모든 웹 사이트 운영자에게 웹 사이트가 얼마나 빨리 작동하는지 보기 위해 특히 모바일 성능을 확인할 때 권장하는 핵심 사항 중 하나이다.
• 분석 도구 : 지티메트릭스를 구성하는 분석 도구인 페이지스피드와 와이슬로우의 가장 큰 차이점은 그들이 최적화된 웹사이트를 만드는 방법에 대한 관점이 다르다는 것이다. 따라서 각자 다른 관점을 가지고 웹 사이트의 성능과 권장 사항의 다른 가중치를 매기며 최종 점수가 다르게 산정된다. 페이지스피드는 27개의 항목, 와이슬로우는 23가지의 항목을 평가 항목으로 제시한다. 지티메트릭스는 대응 설계와 HTTP/2 고려사항을 포함한 최신 웹 표준으로 두 규칙을 수정하고 업데이트했다.

페이지스피드(PageSpeed)

• 페이지스피드(PageSpeed) : 구글에서 제공하고 있는 페이지 스피드는 한 페이지에 대한 실험 데이터와 현장 데이터를 모두 제공한다. 실험 데이터는 제어된 환경에서 수집되므로 성능 문제를 디버깅하는 데 유용하지만 실제 병목현상을 포착하지 못할 수 도 있다. 현장 데이터는 실제 사용자 환경을 캡처하는 데 유용하지만 분석 세트가 제한적이다. 페이지스피드가 제공하는 보고서 상단에는 페이지 성능을 요약한 점수가 표기된다. 이 점수는 라이트하우스(lighthouse)를 실행하여 실험 데이터를 수집하고 분석함으로써 결정된다. 90점 이상은 좋음, 50점에서 90점 사이의 점수는 개선이 필요함, 50점 미만은 불량으로 평가된다. 페이지 스피드에 URL 데이터가 입력되면 크롬 사용자 경험 보고서(CrUX, Chrome User Experience Report) 에서 검색을 수행한다. 만약 URL 탐색이 가능한 경우에 페이지스피드는 어떤 내용이 화면에 표시될 때까지의 시간을 나타내는 FCP(First Contentful Paint), 링크나 버튼을 클릭했을 때 이벤트가 시작 되는데 걸리는 시간을 나타내는 FID(First Input Delay), 웹 페이지에서 가장 큰 콘텐츠가 출력되는 시간을 나타내는 LCP(Lagest Contentful Paint), 광고나 콘텐츠가 동적으로 바뀌는 정도를 나타내는 CLS(Cumultive Layout Shift) 등의 메트릭 데이터를 보고한다. 페이지 스피드는 또한 현장 데이터를 3개의 버킷으로 분류하여, 좋다고 생각되거나, 개선이 필요하거나, 부족하다고 생각되는 사용자 경험을 보고한다. 페이지 스피드는 크롬 사용자 경험 보고서 데이터 집합의 분석에 기초하여 양호/요구 와 개선/부실에 대한 임계값을 다음 표와 같이 지정하고 있다.위의 기준들을 바탕으로 페이지 스피드는 주어진 URL을 분석하며 각 메트릭에 점수가 매겨지며 아이콘으로 레이블이 지정된다. 좋음은 녹색 체크표시, 개선 필요는 주확색 원 표시, 불량은 빨간색 삼각형으로 나타낸다. 라이트하우스는 품질 검사를 세부분으로 구분한다. 'Opportunity' 항목에서 페이지의 성능지표를 개선하는 방법이 제공되고 각 제안은 개선이 구현될 경우 얼마나 더 빨리 로딩될 것인지에 대한 추정을 제공한다. 'Diagnotics'항목은 페이지가 웹 개발을 위한 최적화가 한페이지에 어떻게 적용되는지에 대한 정보를 제공한다. 'Passed Audits' 항목은 위에 페이지에서 품질 검사 과정을 통과한 항목들을 나열한다.

이름	좋음	개선 필요	불량
FCP	[0, 1000ms]	(1000ms, 3000ms]	3000ms 이상
FID	[0, 100ms]	(100ms, 300ms]	300ms 이상
LCP	[0, 2500ms]	(2500ms, 4000ms]	4000ms 이상
CLS	[0, 0.1]	(0.1, 0.25]	0.25 이상

와이슬로우(Yslow)

• 와이슬로우(YSlow) : 야후에서 제공하고 있는 와이슬로우는 세 가지의 미리 정해진 규칙을 제공하며 추가로 사용자 정의 규칙에 따라 웹페이지 등급을 매기는 것이 가능하다. 페이지스피드와 마찬가지로 페이지 성능을 향상시키기 위한 제안사항을 제공하며 페이지의 구성요소를 요약해서 보여주며 페이지에 대한 종합적인 통계를 표시해준다. 와이슬로우는 페이지 구성요소에 접근하여 페이지 성능 요약을 생성한다. 브라우저 페이지 구성요소에 대한 다른 수준의 접근을 허용하고 있으며, 이것은 각 구현에서 와이슬로우가 지원하는 규칙을 제한한다. 페이지 구성 요소에 접근하는데 사용되는 컴포넌트에는 파이어 폭스, 크롬, 모바일/ 북마크, 오페라 및 사파리, 커맨드 라인등이 있으며 파이어폭스는 원래 와이슬로우의 도구 중 하나이며 페이지 구성 요소 정보에 대한 완전한 접근이 가능하게 한다. 파이어폭스는 추가 기능이기 때문에 페이지 도메인이 아닌 다른 도메인에 호스트된 iframes 및 CSS 파일에 대한 교차 도메인 접근을 허용한다. 크롬 확장 API는 현재 데이터에 대한 접근을 허용하지 않기 때문에 분석 대상 페이지에서 발견된 각 구성요소에 대해 XmlHttpRequest가 이뤄진다. 크롬 확장 샌드박스 환경 내에서 교차 도메인 XmlHttpRequest가 가능하다. 모바일/북마크, 오페라 그리고 사파리는 요청을 하는 브라우저를 가장하기 위해 사용자-에이전트 문자열이 전달되는 모든 요청에 대해 페이지 구성요소의 HTTP 헤더를 가져오기 위해 YQL을 프록시로 사용한다. 커맨드라인은 와이슬로우가 페이지 성능을 분석하는 데 필요한 모든 HTTP 헤더 정보를 포함하고 있지만, 실제 브라우저가 없기 때문에 일부 규칙이 적용되지 않을 수 있다. 규칙에는 HTTP 요청 최소화, 콘텐츠 전송 네트워크 사용, Gzip 구성요소, 맨 위에 스타일시트 놓기, 맨 아래에 스크립트 놓기, 자바스크립트 및 CSS 외부에 배치, DNS 검색 감소, 자바스크립트 및 CSS 축소, 리디렉션 방지, 중복 스크립트 제거, 404 에러 금지, 쿠기 크기 감소, 필터 방지 등이 있다.

기능

• 기본 분석(Basic Analysis) : 기본 분석에서 테스트 형식을 지정할 수 있는데 테스트 형식은 테스트 영역, 브라우저 옵션, 연결 속도 등으로 나뉜다. 테스트 영역은 사이트를 테스트하려는 서버의 위치이며 7개의 국가를 분석 환경으로 설정할 수 있다. 해당 사이트의 대부분의 사용자가 방문하는 지역을 선택하는 것이 유리하다. 서버와 방문자 사이의 지리적 거리는 네트워크 대기 시간에 큰 영향을 미치므로 서로 멀리 떨어져 있을수록 또 더 먼 거리의 데이터 이동이 있는지는 콘텐츠 전송 네트워크(CDN, Contents Delivery Network)의 성능에 많은 영향을 미친다. 브라우저(Browser) 옵션에서는 사이트를 로드하는 데 사용할 브라우저를 선택한다. 크롬(Chrome), 파이어폭스(Firefox), 크롬 안드로이드(Chrome Android)의 세 가지 브라우저 중에서 선택할 수 있다. 에뮬레이트 된 브라우저가 아닌 실제 브라우저로 페이지를 분석한다. 실제 데스크톱 브라우저 응용 프로그램을 사용하므로 URL을 방문하는 실제 인간과 가장 비슷한 방법이다. 크롬과 파이어폭스는 서로 다른 엔진을 사용하여 페이지를 렌더링하므로 페이지 로드 성능이 다를 수 있다. 지티메트릭스의 크롬 안드로이드 브라우저는 실제 안드로이드 장치에서 실행되기 때문에 실제 환경과 경험을 제공한다. 해당 사이트를 방문하는 사람들이 가장 많이 사용하는 브라우저를 사용하는 것이 측정에 유리하다. 마지막으로 연결 속도는 연결 유형을 설정한다. 3G, LTE 및 다양한 광대역 속도를 포함하여 총 8가지 속도 중에서 선택할 수 있다. 지티메트릭스 기본 연결 속도는 언쓰로틀드로 되어 있다. 일반적인 방문자와 다르게 매우 빠른 속도를 나타낸다. 그렇기 때문에 기본 옵션보다는 가장 많은 방문자가 접속하는 연결 유형을 선택하여 측정하는 것이 유리하다. 모든 사람이 인터넷에 매우 빠르게 연결되어 있다고 가정하지 않고 여러 방문자의 각자 다른 환경에서의 성능에 대해 평가할 수 있다. 추가적으로 개발자 도구 키트를 사용하면 연결 속도를 사용자 임의로 지정하여 측정에 사용할 수 있다.
• 시뮬레이션(Simulation) : 다양한 장치에 대한 시뮬레이션을 제공한다. 서버가 시뮬레이션 요청을 받으면 지티메트릭스를 지정된 장치로 취급하고 장치의 여러 스펙, 레이아웃 등을 가상으로 제공한다. 화면 해상도, 사용자 에이전트, 장치 픽셀 비율 등을 브라우저에 제공한다. 화면 해상도는 웹 사이트가 렌더링 되는 크기로 데스크톱 모니터는 모바일 장치보다 해상도가 크며 반응형 웹 설계로 인해 다양한 해상도로 다양한 레이아웃과 스타일이 트리거 된다. 모든 크기의 장치에서 웹 사이트를 방문할 수 있으므로 방문자가 가장 많이 사용하는 화면 크기에 맞추는 것이 측정에 유리하다. 물론 유용한 기능이지만 시뮬레이션 장치에서는 하드웨어 성능을 시뮬레이션하지 않으므로 실제 장치에서 페이지를 테스트하는 것이 장려된다.
• DNS 재정의(DNS Overriding) : 사용자가 임의로 DNS 를 지정해 사용할 수 있다. 사용자 지정 DNS가 필요한 경우는 개발/준비 사이트 프로덕션 사이트의 실제 호스트 이름으로 리디렉션 하기 위함과 지역 차단되어 있는 자원에 액세스하기 위함 그리고 전체 성능에 영향을 테스트하기 위해 리소스를 블랙홀링(Blackholing) 할 경우이다. DNS 재정의 기능을 사용하여 호스트 이름 및 IP 주소를 지정하여 사이트가 필요한 방법을 분석할 수 있도록 할 수 있다. 원래 DNS는 인터넷 서비스 공급자가 운영하지만, 도메인 이름을 다르게 재정의하여 사용할 수 있다. 참고로 'https://' 즉 SSL 보안을 사용하는 경우 새로 지정된 서버가 SSL 인증서를 올바로 가져가도록 설정하는 것을 요구하거나 지티메트릭스 분석을 적용할 수 없다. 해당 도메인 재정의 기능은 원하는 도메인을 자신의 서버로 재정의한 후 재정의한 설정을 저장하여 지속해서 사용할 수 있다.
• 프리셋 설정(Presets) : 여러 시나리오에서 페이지를 테스트하는 것을 지원하며 또 성능 검사에서 중요한 부분이기 때문에 자주 사용하는 분석 설정을 사전 설정해 미리 선택된 다양한 옵션으로 페이지를 쉽게 테스트를 할 수 있다. 예를 들어, 에드블록을 사용한 테스트, 특정한 지역에서 테스트, 3G 환경에서의 테스트 등의 항목들을 다양한 조합을 통해 프리셋 설정할 수 있다.
• 북마크(Bookmarklet) : 파이어폭스, 사파리, 크롬, 마이크로소프트 엣지(Microsoft Edge), 인터넷 익스플로러(Internet Explorer) 등 다양한 웹 브라우저에서 북마크 혹은 즐겨찾기 지정으로 해당 분석 기능에 접근성을 키울 수 있다.

비교

• 페이지스피드 와 지티메트릭스 비교 : 구글의 페이지스피드와 지티메트릭스는 웹 페이지와 관련된 속도 문제를 식별하고 해결하는데 도움을 주는 도구이지만 지티메트릭스가 더 나은 정보를 제공하고 가상이 아닌 실제 데이터를 제공한다. 지티메트릭스는 페이지스피드와 와이슬로우에서 각각 1에서 100점사이에 점수를 제공하지만 이것은 실제 세계의 숫자를 반영한 정보가 아니다. 지메트릭스는 가장 중요한 정보인 완전히 로드된 시간(Fully Loaded Time), 총 페이지 크기(Total Page Size), 요청 수에 대한 정보를 추가로 제공한다. 완전히 로드된 시간은 웹 사이트의 이미지를 포함안 모든 리소스를 완전히 로드하는 데 걸리는 시간이다. 이 숫자는 결국 속도에 대한 가장 유의미한 정보를 제공한다고 볼 수 있다. 총 페이지 크기는 웹 페이지가 완전히 로드된 후의 총 페이지의 용량을 의미한다. 이미지, 스타일시트, 스크립트 및 구글의 애너리틱스 추적 스크립트와 같은 외부 리소스 등 모든 요소를 고려한다. 요청 수는 웹 사이트를 로드하는 데 필요한 총 요청의 수를 말한다. 하나의 요청은 하나의 이미지 또는 하나의 스크립트가 될 수 있으며 만약 요청 수가 20이면 웹 사이트를 완전히 로드하려면 브라우저가 20개 항목을 다운로드해야 한다. 또한 이 20개 항목의 크기는 총 페이지크기를 의미한다. 실제 데이터를 제공하는 장점 뿐아니라 평균 이상인지, 평균 미만인지 또는 평균의 +/- 5% 이내인지를 보여준다는 점이다. 이것들은 녹색 화살표, 빨간색 화살표, 주황색 다이아몬드로 표시 된다.

최적화

마젠토

마젠토(magento)

• 정적 이미지 백업(static image backups): 이미지 변경을 진행하기 전에 자바스크립트, 스킨 및 미디어 디렉토리 그리고 기타 지정된 디렉토리 등을 백업해 놓아야 한다.
• 지티스피드 다운로드(GTspeed Download) : 마젠토 설치, 로그인을 진행하고 마젠토 연결 관리자로 이동해 마젠토 연결을 통한 모듈 검색을 클릭한다. 그 후 관리자 작업 증명을 사용하여 다시 로그인하도록 요청한다. 로그인한 후 지티스피드를 검색해 확장 페이지를 클릭 후 마젠토 연결 버전을 선택하고 지금 설치를 클릭하고 확장키를 받는다. 해당 키를 복사한 후 마그네토 커넥트 관리자로 돌아가 키 입력 필드에 복사된 키값을 입력한 후 설치하면 된다. 플러그인을 설치한 후 404 에러가 뜰 수 있는데 이건 흔히 생기는 오류로 로그인, 로그아웃을 반복하다 보면 해결된다.
• 플러그인 실행(Running the plugin) : 본격적으로 최적화를 진행하는 과정이다. 지티스피드 상태 페이지에서 CSS 및 자바스크립트의 축소 및 결합을 설정해야 한다. 결합을 설정하기 위해선 축소에 대한 설정이 먼저 선행되어야한다. 처음 설치하면 최적화된 이미지가 없다고 뜨는데 이미지가 있다는 것을 지티스피드에 알려야한다. 이미지 라이브러리 업데이트를 클릭한 후 디렉토리를 지정해주고 이미지 최적화를 클릭하면 지티스피드는 이미지 최적화를 진행한다. 단, 이미지에 쓰기 권한이 활성화되어 있어야 가능하다.
• 플러그인 구성(Configuring the plugin): 지티스피드의 기본 설정은 마젠토 설치만으로 충분하지만, 구체적인 요구 사항이 있는 사이트가 있기 때문에 설정을 조정할 수 있다. 지티스피드는 이미지 최적화 기능과 함께 최적화 유틸리티를 제공한다. 'magento-1.6.0.0/lib/gtspeed/win32/', 'www/lib/gtspeed/elf32/', 'public_html/lib/gtspeed/win32/' 이렇게 총 3가지 유틸리티가 있으며 사용하기 위해서는 <magento base directory>에 원하는 유틸리티에 디렉토리를 입력하면 된다.
• 최적화 예약(Schedule Optimization) : 최적화 예약은 추가적인 옵션으로 최적화 기능을 원하는 날짜와 시간에 사용할 수 있게 해주는 기능이다.
• 지원 (support): 현재 더 이상 지티스피드의 확장을 지원하거나 유지 관리하지 않고 있기 때문에 마젠토 최적화 서비스를 위해서는 운영진과 직접적인 접촉이 필요하다.

이미지

• 지티메트릭스 분석(Analyze with GTmetrix) : 지티매트릭스를 이용해 사이트 분석을 적용하면 페이지스피드 항목 중에 '확장된 이미지 제공'(Serve scaled images)'라는 항목이 있다. 해당 항목을 클릭하면 이미지 배율이 조정되는 부분을 찾아 불필요하게 메모리를 차지하는 부분에 대해 파악을 할 수 있고 해당 이미지에 적절한 배율을 지정하여 이미지 용량 감소를 통한 속도 개선이 가능하다.
• 이미지의 최대 디스플레이 크기 파악(Find out maximum display size of the image) : 반응형 웹에서 브라우저 크기를 조절하여 이미지의 크기 조정이 중단되는 중단점을 찾고 다양하게 사이즈가 조절된 이미지 중에서 가장 큰 이미지 픽셀을 찾아내어 해당 중단점을 기록하고 저장한다.
• 이미지 크기 조정(Resize the image) : 앞선 단계에서 이미 최대 디스플레이 크기에 대한 데이터를 얻었기 때문에 문제가 있는 이미지의 크기를 최대 디스플레이 크기로 조정한다. 또한 그래픽 유형에 따라 다른 확장자를 쓰는 것이 유리하다. 예를 들어 사진이나 다채롭고 디테일이 높은 이미지는 jpg 확장자를 사용하고 색상이나 투명도가 높은 로고와 기본 그래픽 같은 경우는 png을 사용하는 것이 유리하다. 하지만 디스플레이 품질을 보장하기 위해선 최대 디스플레이 크기 치수의 2배 값을 입력하는 것이 품질 보증에 도움이 된다.
• 이미지 압축(Compress the image) : Kraken.io 와 같은 무료 이미지 최적화 프로그램을 사용하여 압축되지 않다고 보고된 이미지를 업로드해 이미지를 최적화한 후 다운로드한다. 해당 과정으로 파일 크기가 많이 감소하는 것을 알 수 있다. 참고로 지티메트릭스도 이미지 최적화 프로그램을 자체적으로 가지고 있지만, Kraken.io 가 더 발전된 압축 알고리즘을 가지고 있기 때문에 파일 압축률이 더 뛰어나다.
• 이미지 교체(Replace the image) : 지티메트릭스 보고서에 보고되었던 최적화되지 않았던 이미지 파일을 모두 앞선 과정을 모두 거친 후 얻은 최적화된 이미지 파일로 교체하면 웹 사이트 속도 향상을 체감할 수 있다.

워드프레스

워드프레스(WordPress)

• 업드래프트플러스 설치(Install UpdraftPlus) : 최적화 하기 전에 워드프레스 설치를 백업하는 것이 중요하다. 업드래프트플러스는 데이터베이스, 플러그인, 테마, 업로드 등을 포함하여 워드프레스의 백업을 간단하게 만들어주는 툴이다. 업드래프트플러스를 설치하면 워드프레스 설정에 있는 업드래프트플러스 백업이라는 메뉴 옵션을 선택하면 손쉽게 백업이 가능하다.
• 이미지의 배율 조정(Scale the images) : 앞서 사용했던 이미지 최적화 방식을 통해 지티메트릭스 보고서에 출력된 이미지 배율에 문제가 있는 이미지들을 툴을 이용해 비율을 조정하고 또 압축하여 용량을 최적화한다.
• WP 스무쉬 설치(Install WP Smush) : 워드프레스 메뉴 옵션 중 자동으로 스무쉬 이미지 업로드 기능이 있다 플로그인을 설치해 활성화하면 이제 사이트에 업로드 시 이미지가 자동으로 최적화된다.
• WP 캐시 활성화(Activate WP Fastest Cache) : 워드프레스 메뉴 옵션 중 "WP Fastest Cache"라는 옵션이 있는데 이 시스템은 캐싱을 활성화하여 페이지를 더 빠르게 전달할 수 있게 해준다. 캐싱을 할 페이지를 지정하고 분당 페이지 수를 지정하는 것이 사전 설정 방법이다. HTML과 CSS를 압축하고 CSS나 자바스크립트가 연결되지 않은 부분을 결합하여 HTTP의 요청 수를 줄인다. 또한 파일 압축을 지원해 페이지 로드 속도를 높이는 것이 가능하다.
• 사이트 분석 (Analyze the site) : 지티메트릭스보고서에서 최종 결과를 확인할 수 있는데 완전 로드 시간, 총 페이지 크기, 요청 수를 전과 비교할 수 있으며, 페이지스피드와 와이슬로우의 세부 항목을 통해 이미지 최적화, 브라우저 캐싱 활용, CSS/HTML 압축, gzip 압축 활성화, HTTP 요청 수 감소 등의 효과를 확인할 수 있다.

활용사례

지티메트릭스 비교 기능

• 랭크페이(RankPay) : 랭크페이는 검색 엔진 최적화(SEO, Search Engine Optimization) 회사로서, 2015년 웹사이트를 개편하면서 지티메트릭스 프로 멤버십을 사용하여 사이트가 느린 이유에 대해 확고한 이해를 얻으며 페이지 로드 시간을 절반 이상 줄였다. 지티메트릭스를 통한 랭크페이의분석을 통해 너무 많은 별도의 자바스크립트 및 CSS 리소스, 첫 번째 바이트까지 걸리는 시간이 오래 걸림, 불완전한 캐싱, 최적화되지 않은 이미지가 존재, 중복 분석 리소스, 사용하지 않은 플러그인이 브라우저에 호출되는 문제점을 발견할 수 있었다. 발견된 문제점에 연결되지 않고 별도로 존재하는 자바스크립트 및 CSS의 연결을 최대한 맞추고, 캐싱 비틀기 및 서버 측에서 첫 번째 바이트까지 걸리는 시간의 개선 효과를 확인하기 위해 지티메트릭스에서 제시되는 방법들을 활용했다. 결과적으로 페이지스피드와 와이슬로우 점수가 각각 20%까지 개선됨을 확인할 수 있었다. 사이트를 현재도 지티메트릭스를 활용해 모니터링하고 있으며 최종적으로 페이지 로드 시간을 최대 5초에서 최대 1.8초 까지 줄일 수 있었고 이용자 이탈률 20% 감소했고 사용자의 체감 사이트 이용 속도가 확실히 증가하였다.
• 카테나 미디어(Catena Media) : 카테나 미디어는 리얼 머니 게임, 스포츠 베팅 및 금융과 같은 많은 산업에서 웹사이트를 운영하고 있는 회사로서, 오랫동안 지티메트릭스 프로 멤버십의 가입자였다. 랜딩 페이지 성능을 측정하고 성능 문제를 디버깅하는 데 매우 유용하기 때문에 지티메트릭스를 선정했으며 경고가 있는 여러 방문 페이지에 시간별 모니터링을 설정하여 잠재적인 성능 문제를 지속적으로 관찰하며 지티메트릭스를 활용해 매일 문제가 발생할 때마다 문제를 경고하기 때문에 개발자가 신속하게 반응할 수 있다는 장점에 사용한다고 밝혔다. 대표적으로 지티메트릭스는 이미지 최적화에 대한 보고서와 최초 바이트 접근 시간과 같은 특정 이벤트에 대한 경고와 보고서를 통해 페이지 로딩 속도 부분에서 유의미한 결과를 이끌어냈다. 최종적으로 웹 페이지 속도가 15% 증가하는 성과와 구글 광고 페이지 접근에서 품질 향상, 성능이 저조한 페이지에 대한 예방조치, 폭포수 차트를 이용해 조금 더 직관적으로 문제에 대한 빠른 평가가 가능해졌다.
• 메이즈(Maze) : 디지털 마케팅 에이전시(Digital Marketing Agency)로서 검색 엔진 최적화 서비스의 한 부분으로 지티메트릭스를 사용한다. 지티메트릭스가 제공하는 페이지의 로드 속도 및 사용자 요청과 같은 웹사이트의 성능과 관련된 유용한 정보들을 활용한다. 분석을 직관적으로 할 수 있도록 그래프와 차트 형태의 사용하기 쉬운 데이터를 제공한다. 7개의 테스트 지역에서 각각 웹사이트 성능을 분석해 볼 수 있는 것 또한 강점으로 뽑았다. 구글의 페이지스피드와 야후의 와이슬로우 서로 다른 방법론을 가지고 있는 2가지의 툴을 이용해 점수를 산출하여 공통되거나 특정 부분에서 낮은 점수를 보이는 영역에 대해 보다 다양한 관점에서 보완할 수 있었다. 특히 서버 환경이 웹사이트에 영향을 미치는 주요 요인으로 생각하고 있었기에 서버의 위치나 거리에 따라 데이터가 민감하게 반응할 수 있으므로 7개의 글로벌 서버 환경에서 하나 이상의 서버를 선택하는 것 뿐만 아니라 4G, lte, 3G, 광대역등 데이터 통신 속도 환경 조절도 가능하여 보다 정확하게 고객 입장의 데이터 결과를 낼 수 있었다. 또한 폭포수 차트는 중요한 데이터를 제공하여 웹 사이트가 느리게 로드되는 이유를 보다 직관적으로 알 수 있게 도와준다. 지티메트릭스를 통한 웹사이트 최적화로 인한 속도 개선으로 검색 엔진의 개선의 첫 번째 요구조건을 충족할 수 있었다.

참고자료

• 지티메트릭스 공식홈페이지 - https://gtmetrix.com/
• Gail Lobel Rand, 〈GTmetrix – Assuring Optimal Website Performance for All Your Users〉, 《웹사이트 플레닛》, 2020-05-11
• Jo, 〈How to test and optimize your website speed using GTmetrix〉, 《메이즈》, 2019-04-20

같이 보기

• 성능관리 솔루션

이 지티메트릭스 문서는 소프트웨어에 관한 글로서 검토가 필요합니다. 위키 문서는 누구든지 자유롭게 편집할 수 있습니다. [편집]을 눌러 문서 내용을 검토·수정해 주세요.

개발 : 프로그래밍, 소프트웨어 □■⊕, 데이터, 솔루션, 보안, 하드웨어, 컴퓨터, 사무자동화, 인터넷, 모바일, 사물인터넷, 게임, 메타버스, 디자인 운영체제(OS) 데비안 • 도스(DOS) • 레드햇 리눅스(RHEL) • 리눅스 • 맥OS • 붉은별 • 비에스디(BSD) • 센트오에스(CentOS) • 솔라리스 • 아이오에스(iOS) • 안드로이드 • 에이아이엑스(AIX) • 엑스윈도우 • 엠에스도스(MS-DOS) • 오에스투(OS/2) • 우분투 • 운영체제(OS) • 윈도우 • 유닉스 • 유오에스(UOS) • 지엔유(GNU) • 타이젠 • 티맥스오에스 • 페도라 • 프리비에스디(FreeBSD) 웹서버 구글 웹서버 • 아이아이에스(IIS) • 아이플래닛 • 아파치 웹서버 • 엔진엑스 • 웹투비 • 웹티어 와스(WAS) 글래스피시 • 레진 • 와스서버 • 와일드플라이(제이보스) • 웹로직 • 웹스피어 • 제우스 • 톰캣 소프트웨어 개발 도구 JDK • SDK • 나모 웹에디터 • 넷빈즈 • 델파이 • 드림위버 • 메이븐 • 비주얼 스튜디오 • 안드로이드 스튜디오 • 알스튜디오 • 앱타나 스튜디오 • 엑스코드 • 이알윈(ERWin) • 이클립스 • 인텔리제이 아이디어 • 코드블럭스 • 통합개발환경(IDE) • 파워빌더 • 파이참 버전관리 도구 깃 • 깃허브 • 버전 • 버전관리 • 분산버전관리 • 서브버전(SVN) • 서브클립스 • 젠킨스 • 토터스SVN • 형상관리(구성관리) 성능관리 솔루션 로드러너 • 밸리데이터 • 스트로버스 • 시스마스터 • 엔그라인더 • 제니퍼 • 제이미터 • 지티메트릭스 • 쿨체크 소프트웨어 BaaS • CaaS • DaaS • FaaS • IaaS • NaaS • OaaS • PaaS • QaaS • RaaS • SaaS • SECaaS • UaaS • XaaS • 가상머신 • 개발 툴 • 내그웨어 • 다운그레이드 • 도네이션웨어 • 도커 • 레거시 시스템 • 레지스트리 • 로컬호스트 • 리팩토링 • 미들웨어 • 상용 소프트웨어 • 서버 • 셰어웨어 • 셸 • 소프트웨어 • 소프트웨어 개발 • 소프트웨어 툴 • 시스템 • 시스템 소프트웨어 • 실서버 • 업그레이드 • 업데이트 • 에뮬레이션 • 에뮬레이터 • 오픈소스 • 응용 소프트웨어 • 자바 가상머신 • 자유 소프트웨어 • 커널 • 컴퓨터과학 • 크로스 플랫폼 • 크리플웨어 • 테스트 툴 • 툴 • 툴킷 • 트라이얼웨어 • 패치 • 패키지 소프트웨어 • 프로세스 • 플랫폼 • 플러그인 • 프리웨어 위키 : 자동차, 교통, 지역, 지도, 산업, 기업, 단체, 업무, 생활, 쇼핑, 블록체인, 암호화폐, 인공지능, 개발, 인물, 행사, 일반