GTmetrix 속도 테스트 도구를 사용하는 방법 + WordPress에서 GTmetrix PageSpeed ​​점수 향상

GTmetrix 속도 테스트 도구를 사용하는 방법 + WordPress에서 GTmetrix PageSpeed ​​점수 향상

GTmetrix 속도 테스트 도구를 사용하는 방법 + WordPress에서 GTmetrix PageSpeed ​​점수 향상
СОДЕРЖАНИЕ
02 июня 2020

WordPress 사이트의 성능을 향상 시키려면 현재 위치를 알아야합니다. 이것이 바로 GTmetrix 속도 테스트 툴로.


GTmetrix를 사용하면 사이트의 URL을 연결하면 GTmetrix는 점수, 권장 사항 및 분석 도구와 함께 현재 성능 지표를 분석하여 사이트 성능을 최적화 할 수 있습니다.

하지만이 보고서에는 많은 정보가 포함되어 있으므로 사이트 속도를 높이기 위해 최대한 활용하는 방법?

이것이 바로 GTmetrix 속도 테스트 자습서에서 다룰 내용입니다. 이 게시물에서는 다음을 수행합니다.

  • me GTmetrix 성능 도구가 제공하는 모든 것을 안내합니다
  • me GTmetrix 점수를 향상시키는 방법과 그 점수를 얼마나 강조해야하는지 알려주십시오.
  • the 폭포 분석과 같은 고급 분석 도구를 보여줍니다.

GTmetrix 속도 테스트 도구를 사용하는 방법

기본 정보 및 GTmetrix FAQ

핵심적인 내용을 다루기 전에 GTmetrix가 제공하는 기능과 작동 방식에 대한 기본 정보와 질문을 살펴 보겠습니다..

GTmetrix 속도 테스트는 무엇을 제공합니까?

GTmetrix 속도 테스트는 여러 가지 방법으로 웹 사이트의 성능을 평가하는 데 도움이됩니다..

높은 수준에서 사이트를로드하는 데 걸리는 시간을 확인할 수 있습니다.

그런 다음 사이트로드 방식과 개선 방법을 분석하는 데 도움이됩니다. 이를 위해 :

  • 두 가지 다른 측정 항목으로 사이트의 등급을 매 깁니다 – Google PageSpeed ​​및 YSlow.
  • 폭포 형 차트 및 타이밍 분석 제공 각 개별 요청이로드되는 방식과 잠재적 병목 현상이 발생하는 위치를 확인할 수 있습니다..
  • 비디오 녹화를합니다 사이트가 방문자에게 어떻게로드되는지 확인할 수 있도록.
  • 과거의 테스트 결과를 기록합니다 지난 30 일 동안 시간이 지남에 따라 사이트의 실적이 어떻게 변하는 지 분석 할 수 있습니다..

GTmetrix 점수는 어디에서 오는가?

GTmetrix에는 자체 스코어링 메커니즘이 없습니다. 대신 두 가지 타사 방법을 사용하여 점수를 생성합니다.

  • Google PageSpeed – 26 가지 규칙이 있습니다. 각 규칙은 자체 점수를 받고 가중치가 다릅니다. 종합 점수는 전체 PageSpeed ​​점수의 출처입니다..
  • YSlow – YSlow는 19 가지 규칙에 따라 웹 사이트의 등급을 매기는 Yahoo의 오픈 소스 프로젝트입니다 (Yahoo? 기억). PageSpeed와 마찬가지로 전체 점수는 모든 개별 규칙의 가중치 결과에서 비롯됩니다.

GTmetrix 점수가 중요합니까?

예, 아니오.

여기에 "예" 부품:

점수가 낮 으면 중요한 프런트 엔드 성능 모범 사례를 구현하지 않았 음을 의미하므로 GTmetrix 점수에주의해야합니다..

하지만 여기에 "아니" 부품:

방문자는 GTmetrix 점수에 신경 쓰지 않습니다. 웹 사이트를로드하고 대화식으로 만드는 데 걸리는 시간에 신경을 씁니다..

2 초 이내에로드되고 70 년대에 GTmetrix 점수를받는 WordPress 웹 사이트를 갖는 것은로드하는 데 4 초가 걸리지 만 100 점 만점 인 WordPress 웹 사이트를 갖는 것보다 훨씬 낫습니다..

기본적으로 점수는 사이트 최적화 정도를 빠르게 예측할 수 있기 때문에 점수에주의를 기울여야하지만, 하루가 끝날 때 중요한 것은 웹 사이트가 얼마나 빨리로드되는지에 대한 평가에 신경 쓰지 마십시오..

GTmetrix 점수가 낮은 웹 사이트가 여전히 빠르게로드 될 수 있습니까?

네 그럼요.

그 이유는 다음과 같습니다.

GTmetrix 점수 (PageSpeed ​​및 YSlow)는 주로 이미지 최적화 및 코드 모양과 같은 프런트 엔드 성능 최적화와 관련이 있습니다..

그러나 백엔드 성능 최적화는 그다지 중요하지 않다. 여기에는 호스팅 제공 업체의 우수성과 서버 아키텍처 (예 : Nginx와 Apache 사용)가 포함됩니다..

백엔드 성능이 끔찍한 경우 완벽한 GTmetrix 점수가 있어도 사이트가 여전히 느리게로드 될 수 있습니다. 마찬가지로 우수한 WordPress 호스팅을 선택하면 GTmetrix 점수가 낮더라도 사이트를 여전히 빠르게로드 할 수 있습니다.

최상의 결과를 얻으려면 프런트 엔드 및 백 엔드 성능을 모두 최적화해야합니다..

GTmetrix 모바일 속도 테스트를 실행할 수 있습니까?

예! 요즘 대부분의 사람들이 휴대 기기에서 웹을 탐색하므로 데스크톱 및 모바일 성능을 모두 테스트하는 것이 좋습니다..

기본적으로 데스크톱 방문자에게 사이트가로드되는 방식을 이해하는 것은 절반에 불과합니다. 또한 모바일 장치의 상태를 테스트하고 싶습니다..

휴대 기기의 패턴이 다를 수 있습니다. 예를 들어, 저전력 휴대 전화는 저렴한 데스크탑조차 걸리지 않는 것보다 JavaScript를 렌더링하는 데 더 많은 시간이 걸립니다. 따라서 사이트가 자바 스크립트가 많은 경우 데스크톱로드 시간보다 모바일 페이지로드 시간에 더 큰 영향을 줄 수 있습니다..

모바일 성능을 구체적으로 테스트하지 않으면 알 수 없습니다.

GTmetrix 모바일 속도 테스트를 실행하려면 무료 계정을 등록해야합니다.이 계정에 대한 자세한 내용은 잠시 후.

GTmetrix 속도 테스트를 실행하는 방법

GTmetrix에서 테스트를 실행하는 가장 간단한 방법은 GTmetrix 홈페이지로 이동, 사이트의 URL을 연결하고 클릭 사이트 테스트:

GTmetrix 익명 테스트

그러나, 대신에 등록하는 것이 좋습니다. 비어 있는 테스트를 실행하기 전에 GTmetrix 계정.

공개 버전의 테스트에서는 속도 테스트가 항상 다음 구성을 사용합니다.

  • 캐나다 밴쿠버에서 테스트
  • 데스크톱의 Chrome 브라우저
  • 연결되지 않은 연결

하지만 등록하면 비어 있는 계정, 당신은 당신의 요구에 맞게 모든 조건을 변경할 수 있습니다.

예를 들어 대부분의 방문자가 미국 남서부 출신 인 경우 테스트 대상 위치를 텍사스 달라스로 변경하여 대상 고객의 실적을 더 잘 파악할 수 있습니다..

테스트 위치 변경 외에도 모바일 테스트 장치를 사용하거나 연결 속도를 변경할 수있는 옵션이 있습니다 (예 : 느린 3G 연결과 빠른 유선 연결 시뮬레이션)..

무료 계정에 등록하면 계정을 확장 할 수 있습니다 분석 옵션 테스트 기능에 대한 추가 구성 :

고급 테스트 구성 옵션

GTmetrix가 조건에 따라 테스트를 실행하면 다음과 같은 결과 페이지가 다시 나타납니다.

  • 실적 점수 및 기본 페이지 세부 정보가 포함 된 상단 요약
  • 6 개의 탭으로 구분 된 상세 결과

요약 결과

6 개의 탭을 살펴 보겠습니다.

1. PageSpeed ​​탭

그만큼 PageSpeed GTmetrix 테스트를 실행할 때 탭이 기본 활성 탭입니다. Google의 PageSpeed ​​규칙에 따라 웹 사이트의 등급을 매 깁니다..

26 개의 규칙 각각에 대해 웹 사이트의 점수는 0-100입니다. 그런 다음 GTmetrix는 이러한 점수를 합산하여 전체 PageSpeed ​​점수를 생성합니다..

26 개의 규칙은 균등하게 가중치가 적용되지 않으므로 일부 규칙은 전체 점수에 다른 규칙보다 더 큰 영향을 미칩니다..

화살표 중 하나를 클릭하여 규칙 중 하나를 펼치면 문제를 일으키는 사이트의 특정 요소에 대한 자세한 내용이 표시됩니다.

GTmetrix 속도 테스트 PageSpeed ​​탭

다음은 가장 일반적인 PageSpeed ​​문제와 점수를 높이기 위해 해결하는 방법입니다.

이미지 최적화

이미지를 압축하면 압축 알고리즘에 따라 품질의 손실을 최소화하거나 최소화하면서 파일 크기를 줄일 수 있습니다.

WordPress 사이트의 모든 이미지를 자동으로 최적화하고 압축하려면 Optimole 플러그인:


Optimole의 이미지 최적화 및 지연로드 이미지 최적화 & Optimole의 지연로드

저자 : 최적

현재 버전 : 2.3.1

최종 업데이트 : 2020 년 4 월 21 일

optimole-wp.zip


96 % 등급


50,000 회 이상 설치


WP 4.7+ 필요

브라우저 캐싱 활용

브라우저 캐싱은 방문자의 로컬 브라우저에 특정 정적 자산을 저장하여로드 시간을 단축시킵니다. 즉, 후속 방문에서 방문자의 브라우저는 방문 할 때마다 다운로드하지 않고 방문자의 로컬 컴퓨터에서 해당 자산을 제공 할 수 있습니다..

WP Super Cache, WP Rocket 및 WP Fastest Cache를 포함한 많은 WordPress 캐싱 플러그인은 이미 브라우저 캐싱을 제공합니다..

스케일 된 이미지 제공

크기 조정 이미지는 사용중인 크기에 맞게 크기가 조정 된 이미지입니다. ThemeIsle에 대한 스케일 이미지의 개념에 대한 전체 게시물.

WordPress에서 확장 된 이미지를 제공하는 쉬운 방법 중 하나는 Optimole 플러그인 – 방문자가 어떤 장치를 사용하든 이미지의 크기가 항상 완벽하게 조정되도록 자동으로 작업을 수행 할 수 있습니다..

이미지 치수 지정

여기에는 HTML이 포함됩니다. 이미지를 포함 할 때 이미지의 실제 너비와 높이를 지정하려고합니다.

예를 들어…

최적이 아님:

최적 :

편집기에서 이미지를 삽입 할 때 WordPress에서 기본적으로이 작업을 수행하지만 다른 위치에서 사용하는 이미지 (예 : 플러그인)를 지정해야합니다.

HTML, CSS 및 JavaScript 축소

이것들은 기술적으로 세 가지 규칙이지만 기본 개념이 동일하기 때문에 함께 묶습니다..

축소에는 기능을 변경하지 않고 사이트 코드에서 불필요한 문자를 제거하는 것이 포함됩니다. 예를 들어 공백과 줄 바꿈 제거.

다음과 같은 일부 WordPress 성능 플러그인 WP 로켓, 축소를 포함하십시오. 또는 무료 자동 최적화 플러그인 사이트 코드를 축소하기 위해.


자동 최적화 자동 최적화

저자 : 프랭크 고우 센 (Futtta)

현재 버전 : 2.7.2

최종 업데이트 : 2020 년 5 월 21 일

autoptimize.2.7.2.zip


94 % 등급


1,000,000+ 설치


WP 4.9 이상 필요

방문 페이지 리디렉션 방지

URL 리디렉션은 트래픽을 전달하는 데 유용합니다. 그러나 웹 사이트 속도가 느려질 수 있으므로 가능하면 사용하지 않는 것이 좋습니다.

이 문제를 해결하려면 모든 내부 링크가 현재 URL로 직접 이동해야합니다. 경로를 수정하여 문제를 해결하지 마십시오. 예를 들어 SSL 사용을 강제하기 위해 http://yoursite.com을 https://yoursite.com으로 자동 리디렉션하는 경우 불필요한 리디렉션을 피하기 위해 항상 사이트의 HTTPS 버전에 연결해야합니다.

자바 스크립트 파싱 연기

페이지로드 시간에 대해 이야기 할 때 전체 사이트를로드하는 데 걸리는 시간보다 웹 사이트가 얼마나 빨리 표시되는지가 중요합니다..

JavaScript는 방문자의 브라우저가 페이지 렌더링을 일시 중지하여 JavaScript를 다운로드하고 구문 분석하도록하여 속도를 늦출 수 있습니다. 이것이 종종 렌더 차단 JavaScript라고하는 이유입니다..

이 문제를 해결하려면 웹 사이트의 보이는 부분이 이미로드 된 후에 만 ​​사이트에서 해당 JavaScript를로드 / 파싱하기 시작하도록 구문 분석 JavaScript를 연기해야합니다..

WP Rocket에는이를 지원하는 내장 도구가 포함되어 있습니다. 또는 무료 비동기 자바 스크립트 플러그인, Autoptimize 플러그인의 동일한 개발자가 제공합니다..


비동기 자바 스크립트

저자 : 프랭크 고우 센 (Futtta)

현재 버전 : 2.20.03.01

최종 업데이트 : 2020 년 3 월 1 일

async-javascript.2.20.03.01.zip


92 % 등급


100,000 회 이상 설치


WP 4.6 이상 필요

CSS 스프라이트를 사용하여 이미지 결합

이것은 CSS를 사용하여 여러 이미지 파일을 단일 파일로 결합 할 수있는 고급 기술입니다. 이렇게하면 페이지를로드하는 데 필요한 HTTP 요청 수를 줄일 수 있습니다.

더 이상 이미지 대체 텍스트를 추가 할 수 없으므로 SEO 및 액세스 가능성에 부정적인 영향을주기 때문에 모든 이미지에 CSS 스프라이트를 사용해서는 안됩니다. 대신 고객 로고나 소셜 공유 아이콘과 같은 장식 이미지에만 CSS 스프라이트를 사용해야합니다..

불행히도 CSS 스프라이트를 자동으로 설정하는 플러그인은 없습니다 – 수동으로해야합니다. 방법은 다음과 같습니다.

압축 활성화

우리는 이미 이미지 압축에 대해 이야기했지만 "압축" Gzip 압축이라는 것을 사용하여 서버 수준에서 모든 웹 사이트 파일을 압축하는 것을 말합니다..

평균적으로 Gzip 압축은 사이트 파일 크기를 약 70 % 줄입니다..

WP Rocket, WP Super Cache 및 WP Fastest Cache를 포함하여 많은 WordPress 성능 플러그인을 사용하여 Gzip 압축을 활성화 할 수 있습니다. 또는 간단하고 무료로 사용할 수 있습니다 Gzip 압축 플러그인 사용 전용 솔루션.


Gzip 압축 사용

저자 : 모키 모키 이오스

현재 버전 : 1.0.3

최종 업데이트 : 2020 년 5 월 8 일

enable-gzip-compression.1.0.3.zip


86 % 등급


20,000 회 이상 설치


3.0.1 필요

2. YSlow 탭

YSlow 점수는 PageSpeed ​​점수와 비슷한 접근 방식을 따르며 다른 규칙 집합을 사용하여 테스트합니다. GTmetrix의 YSlow 탭에는 19 개의 규칙 만 포함되어 있습니다..

PageSpeed ​​점수와 마찬가지로 각 규칙은 자체 점수를 받고 전체 점수는 해당 점수의 가중 평균을 기반으로합니다..

GTmetrix 속도 테스트 YSlow 탭

가장 일반적인 권장 사항은 다음과 같습니다.

CDN (콘텐츠 전송 네트워크) 사용

CDN은 전 세계 서버 네트워크에서 사이트의 정적 콘텐츠를 제공하여 사이트의 페이지로드 시간을 단축시킵니다.. 이 게시물에서 자세히 알아보기.

CDN을 통해 이미지를 제공하려면 무료 Optimole 플러그인. 모든 사이트의 정적 파일에 CDN을 사용하려면, 구름 플레어 또한 좋은 옵션입니다.

최고의 CDN 서비스 비교 ��

JavaScript 및 CSS 축소

이미 PageSpeed ​​섹션에서 설명했습니다. Autoptimize와 같은 전용 플러그인을 사용하여 CSS와 JavaScript를 축소 할 수 있습니다. 또는 많은 WordPress 성능 플러그인에는 자체 축소 기능도 포함되어 있습니다..

구성 요소 압축

이것은 "압축 활성화" PageSpeed ​​탭에서 권장합니다. Gzip 압축을 활성화하여 문제를 해결할 수 있습니다.

많은 WordPress 캐싱 플러그인에는 Gzip 압축 기능이 포함되어 있습니다. 또는 전용을 사용할 수 있습니다 Gzip 압축 플러그인 사용.

URL 리디렉션 방지

이것은 "방문 페이지 리디렉션 방지" PageSpeed에서.

사람들을 올바른 목적지로 이동시키기 위해 리디렉션에 의존하지 말고 항상 페이지의 현재 URL에 연결하십시오.

DNS 조회 감소

방문자의 브라우저는 사이트의 콘텐츠가있는 각 도메인에 대해 DNS 조회를 수행해야합니다..

자신의 사이트에 대해 항상 하나 이상의 DNS 조회가 이루어집니다. 그러나 사이트에서 외부 서비스 (예 : Google Fonts 또는 Google Analytics 추적 스크립트)를 사용하면 추가 DNS 조회가 발생합니다.

두 가지 해결책은 다음과 같습니다.

  • 불필요한 경우 외부 서비스를 제거하십시오.
  • Google Fonts CDN에 의존하지 않고 자신의 서버에서 Google Fonts를 호스팅하는 것과 같이 가능하면 콘텐츠를 자체 호스팅 해보십시오.. 이 플러그인은 도움이 될 수 있습니다.

더 적은 HTTP 요청

HTTP 요청에 대한 자세한 내용은 폭포 탭 섹션 (다음).

3. 폭포 탭

그만큼 폭포 탭은 약간 고급이지만 사이트의 여러 부분이로드되는 방식과 전체 사이트를 느리게하는 작은 병목 현상이있는 위치를 이해하는 데 매우 유용한 도구입니다..

당신이 열 때 폭포 탭에서이 페이지에 대한 모든 단일 HTTP 요청 목록이 표시됩니다 ( "요청" GTmetrix 결과 요약에서).

페이지의 모든 객체는 별도의 HTTP 요청입니다. 예를 들면 다음과 같습니다.

  • CSS 스프라이트를 사용하지 않는 한 각 이미지는 하나의 HTTP 요청입니다.
  • 각 CSS 또는 JavaScript 파일은 하나의 HTTP 요청입니다.
  • 로드하는 외부 스크립트 (예 : Google 웹 로그 분석)도 하나 이상의 HTTP 요청이됩니다.
  • 기타.

모든 것이 동일하고 HTTP 요청이 적을수록 일반적으로 빠른 로딩 웹 사이트를 의미합니다.

또한 목록을 볼 때 볼 수 있듯이 각 HTTP 요청은 다른 순서로로드 및로드하는 데 다른 시간이 걸립니다 (일부는 다른 요청도 차단 함). 따라서 느린 로딩을 찾아서 제거 할 수있는 경우 HTTP 요청은 사이트의 페이지로드 시간을 크게 변화시킬 수 있습니다.

마우스를 가져 가면 각 HTTP 요청에 대한 세부 사항을 볼 수 있습니다. 예를 들어,이 모로코 병아리 콩 이미지는로드하는 데 102.4ms가 걸렸습니다.

GTmetrix 속도 테스트 폭포 분석

상단의 필터 및 검색 옵션을 사용하여 특정 HTTP 요청을 찾을 수도 있습니다. 예를 들어 wp-content / plugins를 검색하면 WordPress 사이트 플러그인에서 추가 한 HTTP 요청을 찾을 수 있습니다..

특정 플러그인의 요청을 찾기 위해 추가 정보를 얻을 수도 있습니다. 예를 들어, wp-content / plugins / elementor를 검색하면 모든 요청이 Elementor 페이지 빌더 플러그인:

폭포 분석 검색

플러그인이 느리게로드되는 HTTP 요청을 많이 추가하고 많은 이점을 얻지 못한다면 플러그인을 제거하고 더 나은 대안을 찾는 것이 좋습니다..

4. 타이밍, 비디오 및 기록 탭

GTmetrix 속도 테스트의 마지막 3 개 탭을 함께 그룹화 할 것입니다. 자주 사용하지 않을 것이므로 심층 분석이 필요하지 않다고 생각합니다..

타이밍

그만큼 타이밍 탭은 다양한로드 시간 메트릭에 도달하는 데 걸리는 시간에 대한 자세한 정보를 제공합니다. 폭포 형 차트에서이 정보를 찾을 수도 있습니다. 타이밍 탭을 사용하면 시각화하기가 조금 더 쉽습니다..

메트릭 중 하나에 마우스를 올리면 GTmetrix는 아래에 해당 의미를 나타내는 설명을 표시합니다.

타이밍 탭

비디오

테스트를 시작할 때 페이지로드 비디오를 활성화 한 경우 페이지에서 해당 비디오를 볼 수 있습니다 비디오 탭.

또한 세부 사항을보기 위해 원래 속도의 1/4 속도로 속도를 늦출 수 있습니다.

동영상은 사이트가로드 될 때뿐만 아니라 사이트가 어떻게로드되는지 확인할 수 있기 때문에 유용합니다. 예를 들어 사이트의 어느 부분이 먼저 표시됩니까? 로딩하는 동안 이상한 결함이 있습니까? "스타일이 지정되지 않은 콘텐츠의 플래시"? 사이트 실적을 최적화 할 때 알아야 할 유용한 사항.

역사

마지막으로 페이지를 여러 번 테스트하면 역사 탭을 사용하면 이전 테스트의 결과를 볼 수 있으므로 시간이 지남에 따라 변경 사항을 분석 할 수 있습니다.

지난 30 일 동안이 페이지에 대한 모든 테스트를 저장합니다. 그 후에 기록 테스트 결과가 삭제됩니다..

예를 들어 GTmetrix 속도 테스트 점수를 개선하기 위해 약간의 조정을 수행하면 이러한 변경 사항이 실제 페이지로드 시간 향상으로 어떻게 변환되는지 확인할 수 있습니다.

GTmetrix 속도 테스트 기록 결과

GTmetrix 속도 테스트에서 더 많은 것을 얻으십시오

GTmetrix 속도 테스트 툴을 최대한 활용하려면 요약 상자를 넘어 아래 세부 사항을 자세히 살펴보십시오..

GTmetrix 실적 점수에 너무 익숙하지 않으려는 경우 점수에 대한 제안은 사이트의 프런트 엔드 성능 최적화가 부족한 영역에 대한 유용한 지침을 제공합니다..

또한 폭포 탭은 사이트의 페이지로드 시간에 큰 영향을 미치는 이미지, 스크립트 또는 플러그인 찾기와 같이 사이트 성능의 특정 측면을 파헤칠 수있는 훌륭한 도구입니다..

WordPress 성능에 대해 자세히 알아 보려면 WordPress 속도를 높이는 11 가지 방법 모음을 확인하십시오..

GTmetrix를 사용하여 웹 사이트를 테스트하는 방법에 대한 질문이 있습니까? 의견을 남겨 주시면 도와 드리겠습니다..

WordPress 사이트 속도를 높이기위한 충돌 과정에 참여하는 것을 잊지 마십시오. 몇 가지 간단한 수정으로로드 시간을 50-80 % 줄일 수 있습니다.

Karol K의 레이아웃 및 프리젠 테이션.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    
    워드 프레스 사이트가 기능을 수행하는 방식을 바꾸는 10 가지 방법 כיצד להקים עסק מסחר אלקטרוני
    0 комментариев
    
    모바일 우선 성능 지향 워드 프레스 테마를 구성하는 방법 [1 부] כיצד להקים עסק מסחר אלקטרוני
    0 комментариев
    
    2020 년에 웹 사이트를 안전하게 유지하기위한 25 가지 간단한 워드 프레스 보안 요령 כיצד להקים עסק מסחר אלקטרוני
    0 комментариев
    Adblock
    detector