Pingdom 속도 테스트 도구 – Pingdom 점수를 향상시키는 방법

빠르게 로드되는 웹사이트는 느린 웹사이트에 비해 항상 더 많은 트래픽을 확보하여 순위와 성능에 영향을 미칩니다. 이 기사에서는 사이트의 성능 문제를 이해하는 데 도움이 되는 Pingdom 속도 테스트 도구에 대해 설명합니다. 목표는 사이트 속도 와 사이트 속도를 높이는 방법 에 대한 요점을 파악 하는 것입니다.

너무 자주 사용자는 Pingdom 속도 테스트 도구 데이터를 잘못 해석하여 웹 사이트 속도를 악화시킵니다. 모든 도구는 100% 정확하지 않으므로 항상 지침에 따라 사용하십시오.

Pingdom 속도 테스트 도구는 무엇이며 무엇을 제공합니까?

Pingdom은 웹사이트, 애플리케이션 및 서버를 위한 모니터링 솔루션인 인기 있는 무료 웹 속도 테스트 도구입니다. 가동 시간뿐만 아니라 로드 성능을 모니터링하여 방문자가 사이트를 어떻게 경험하는지 확인할 수 있습니다. Pingdom은 가동 시간 모니터링, 페이지 속도 모니터링, 트랜잭션 모니터링, 서버 모니터링 및 방문자 인사이트(RUM)와 같은 서비스를 제공합니다.

왜 그렇게 인기가 있습니까? 글쎄, 그것은 아마도 웹 사이트 속도와 페이지 성능을 모니터링하는 가장 쉬운 도구일 것입니다. 모든 사용자가 성능 전문가가 될 수 있는 것은 아니므로 일반 WordPress 사용자에게 좋은 선택입니다.

Pingdom에서 테스트를 수행하는 방법을 살펴보겠습니다. Pingdom 속도 테스트 도구를 사용하는 것은 큰 문제가 아닙니다. Pingdom 사이트로 이동하여 URL을 입력하고 방문자의 위치 에 따라 위치를 선택하기만 하면 됩니다. 그런 다음 '테스트 시작' 버튼을 클릭합니다.

Pingdom 속도 테스트 도구를 사용하면 전 세계 7개 테스트 위치(5개 대륙) 에서 웹사이트를 테스트할 수 있습니다.

• 아시아 – 일본 – 도쿄
• 유럽 ​​– 독일 – 프랑크푸르트
• 유럽 ​​– 영국 – 런던
• 북미 – 미국 – 워싱턴 DC
• 북미 – 미국 – 샌프란시스코
• 태평양 – 호주 – 시드니
• 남아메리카 – 브라질 – 상파울루

그렇다면 어떤 Pingdom 웹사이트 속도 테스트 위치가 테스트에 가장 적합할까요? 사이트 방문자에 따라 다릅니다. 방문자와 가까운 위치를 선택해야 합니다. 사이트 잠재고객이 유럽을 기반으로 하는 경우 (유럽 – 독일 – 프랑크푸르트) 또는 (유럽 – 영국 – 런던) 2가지 옵션 중에서 선택할 수 있습니다. 사이트에 전 세계 방문자가 있는 경우 여러 위치에서 사이트를 테스트하고 개선을 위해 적절한 조치를 취하십시오.

Pingdom 속도 테스트 도구로 폭포 분석 이해하기

웹 페이지는 일반적으로 HTML, CSS, JavaScript 및 미디어 파일 의 조합이며 이들 각각은 서버에서 렌더링 요청을 생성합니다. 더 많은 요청이 사이트 속도가 느린 이유일 수 있습니다. Pingdom 속도 테스트 도구에는 점수와 개선 제안을 나타내는 여러 섹션이 있습니다. Pingdom 속도 테스트 도구 섹션은 다음과 같습니다.

• 핑덤 요약
• 페이지 성능 향상
• 응답 코드
• 콘텐츠 크기 및 콘텐츠 유형별 요청
• 콘텐츠 크기 및 도메인별 요청
• 폭포 차트

이 섹션에서는 폭포수 분석을 수행하는 방법을 설명하고 각 Pingdom 섹션을 분해하여 더 자세히 설명하겠습니다.

핑덤 요약

Pingdom을 통해 WordPress 웹 사이트를 실행하면 성능 등급, 페이지 크기, 로드 시간 및 요청에 따라 결과를 생성 합니다.

사이트를 여러 번 테스트하면 모든 테스트에서 사이트 로드 시간이 변경되는 반면 다른 결과(성능 등급, 페이지 크기 및 요청)는 동일하게 유지되는 것을 알 수 있습니다. 이러한 로드 시간 차이의 원인은 DNS 캐시, CDN 캐시, WordPress 캐시 및 외부 API 때문입니다.

향상된 Pingdom 점수는 웹 응용 프로그램과 서버 구성에 따라 다릅니다. 특히 전자 상거래 웹 사이트를 운영하는 경우 항상 100% 점수를 얻을 수는 없지만 항상 개선의 여지가 있습니다.

페이지 성능 향상

페이지 성능 향상 섹션에는 페이지 성능 향상에 대한 제안과 함께 집계 성능 등급이 포함되어 있습니다. 이러한 제안이 모든 웹사이트에 적용되는 것은 아니지만 개선 가능성이 높아집니다.

이러한 제안을 살펴보겠습니다.

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

워드프레스 웹사이트에서 가장 중요한 것은 CDN(Content Delivery Network)입니다. CDN은 인터넷 콘텐츠의 빠른 전달을 제공하는 지리적으로 분산된 서버 그룹을 나타냅니다. 이들은 전 세계에 위치한 서버 네트워크입니다. CDN을 사용하면 웹 콘텐츠를 사용자가 있는 위치에 더 가깝게 가져와 빠르게 전송할 수 있습니다.

Cloudways 사용자라면 CloudwaysCDN을 활용할 수 있습니다. 모든 Cloudways 호스팅 계획에는 몇 번의 클릭으로 활성화할 수 있는 CloudwaysCDN이 내장되어 있습니다. 자세히 알아보려면 Cloudways의 WordPress CDN 블로그를 확인하세요.

일부 타사 CDN 제공업체를 살펴보겠습니다.

1. 키 CDN
2. 클라우드플레어 CDN
3. 아마존 클라우드프론트
4. CDN77

여기에서 널리 사용되는 세 가지 인기 있는 CDN 제공업체의 WordPress CDN 벤치마킹을 볼 수 있습니다.

2) HTTP 404(찾을 수 없음) 오류 방지

요청을 성공적으로 완료할 수 없을 때 Pingdom 속도 테스트 도구 제안에 회피 HTTP(404) 오류가 표시됩니다. 페이지 내에서 삭제된 이미지에 대한 링크를 수동으로 첨부하는 경우와 같이 링크가 끊어지면 404 오류가 발생합니다.

더 이상 존재하지 않는 자산에 대한 요청이 생성되지 않도록 항상 확인하십시오.

3) 리디렉션 최소화

Pingdom 속도 테스트 도구의 가장 일반적인 제안은 '리디렉션 최소화'입니다. 리디렉션은 사이트의 한 페이지로 인해 다른 페이지가 로드될 때 발생합니다. HTTP 를 HTTPS로 , www 를 non-www 로 리디렉션하고 업데이트된 게시물의 URL이 변경된 경우 이러한 문제가 발생할 수 있습니다.

다음은 사이트가 너무 많은 리디렉션을 받지 않도록 하기 위해 수행할 수 있는 몇 가지 사항입니다.

1. 이미 리디렉션이 있는 페이지에 링크하지 마십시오. 여러 리디렉션이 발생할 수 있습니다.
2. 불필요한 리디렉션을 유발할 수 있는 비활성화/사용하지 않는 플러그인을 삭제해야 합니다.
3. 사이트에 링크를 생성하는 동안 적절한 접두사 HTTP 또는 HTTPS를 사용하고 www인지 아니면 www가 없는지 확인하세요.

리디렉션에 대해 더 알고 싶다면 WP 301 리디렉션에 대한 Cloudways 기사를 확인하십시오.

4) 만료 헤더 추가

모든 WordPress 웹 사이트 파일은 처음 방문자를 위해 하나씩 로드됩니다. 웹 브라우저와 서버 간에 생성된 요청은 웹 사이트 로드 시간을 증가시킵니다. 브라우저 캐시는 방문자의 컴퓨터에 웹사이트 파일을 저장하므로 방문자가 다시 웹사이트를 방문할 때 웹사이트가 서버 대신 브라우저 캐시에서 로드되어 웹사이트 속도가 빨라집니다.

그러나 브라우저는 어떤 파일을 저장할지, 어떤 파일을 서버에서 불러올지, 얼마나 오래 보관할지 어떻게 알 수 있을까요? 이것이 Expires Header가 들어오는 곳입니다. 이것은 방문자의 브라우저 캐시에서 웹 페이지 리소스를 로드할지 아니면 귀하의 서버에서 웹 페이지 리소스를 로드할지 웹 브라우저에 알려주는 규칙입니다.

이제 실제 사용법 부분으로 들어가 보겠습니다. 두 가지 다른 방법을 사용하여 Expires 헤더를 추가하는 방법을 보여 드리겠습니다.

플러그인을 사용하여 Expires 헤더 추가

W3 Total Cache 플러그인을 설치합니다. 설치 및 활성화되면 WordPress 대시보드 > 성능 > 브라우저 캐시 로 이동한 다음 '만료 헤더 설정' 옵션을 활성화하고 변경 사항을 저장합니다.

W3 Total Cache 플러그인에 대해 자세히 알고 싶다면 더 빠른 웹사이트를 위해 WordPress W3 Total Cache 플러그인을 사용하는 방법에 대한 Cloudways 기사를 참조하십시오.

코드를 사용하여 Expires 헤더 추가

코드를 사용하여 Expires 헤더를 추가할 수도 있습니다. 이를 위해 웹 사이트에서 Apache 또는 Nginx 서버를 사용 중인지 확인하십시오. 이렇게 하려면 브라우저에서 웹사이트를 실행하고 Ctrl + Shift + I 을 눌러 사이트의 네트워크 로 이동한 다음(사이트를 한 번 새로 고쳐야 할 수도 있음) 상단의 도메인 이름을 클릭하고 헤더로 이동합니다. 부분. 거기에서 서버 이름을 찾을 수 있습니다.

Apache 서버에 Expires 헤더를 추가하려면 FTP 서버(Filezilla)와 .htaccess 파일 상단에 있는 주어진 코드를 사용하여 .htaccess 파일에 액세스합니다.

 ## 헤더 캐싱 만료 ##
<IfModule mod_expires.c>
만료일 활성
ExpiresByType 이미지/jpg "액세스 1년"
ExpiresByType 이미지/jpeg "액세스 1년"
ExpiresByType image/gif "액세스 1년"
ExpiresByType image/png "액세스 1년"
ExpiresByType image/svg "액세스 1년"
ExpiresByType 텍스트/css "액세스 1개월"
ExpiresByType application/pdf "액세스 1개월"
ExpiresByType 애플리케이션/자바스크립트 "액세스 1개월"
ExpiresByType application/x-javascript "액세스 1개월"
ExpiresByType 응용 프로그램/x-shockwave-flash "액세스 1개월"
ExpiresByType 이미지/x-icon "액세스 1년"
Expires기본값 "3일 액세스"
</IfModule>
## 헤더 캐싱 만료 ##

Cloudways에서는 Nginx 수준에서 변경할 수 없지만 Apache 규칙을 사용하고 애플리케이션의 .htaccess 파일에 Expires 헤더를 추가할 수 있습니다. 자세한 내용은 Cloudways 기사 WordPress의 브라우저 캐싱을 활용하여 페이지 로드 시간 최적화를 확인하십시오.

5) 더 적은 HTTP 요청 만들기

웹 사이트를 로드할 때마다 HTTP 요청을 포함하여 사용자 화면에 콘텐츠를 전달하기 위해 많은 기술적인 작업이 발생합니다. 그렇다면 HTTP 요청은 무엇입니까? 사용자 경험에 어떤 영향을 미칩니까? 그리고 웹사이트의 HTTP 요청을 줄이기 위해 무엇을 할 수 있습니까?

누군가가 웹사이트의 페이지를 방문하면 그 사람의 웹 브라우저가 웹 서버에 요청을 보냅니다 . 귀하의 서버는 귀하의 사이트에서 보려는 웹 페이지를 호스팅합니다. 모든 단일 파일에 대해 웹 브라우저는 별도의 HTTP 요청 을 수행해야 하므로 웹사이트에 파일이 많을수록 브라우저에서 더 많은 HTTP 요청 이 생성됩니다. 더 많은 HTTP 요청이 웹사이트의 사용자 경험에 영향을 미칠 수 있습니다.

다음은 HTTP 요청을 줄이기 위한 몇 가지 광범위한 전략입니다.

• 플러그인은 일반적으로 자체 CSS 및 JavaScript를 로드하므로 사이트에 가치를 추가하지 않는 불필요한 플러그인을 제거하여 HTTP 요청을 제거하십시오.
• 여러 CSS 파일을 단일 CSS 파일로 병합하여 HTTP 요청을 결합합니다. 브라우저가 더 적은 요청을 해야 하기 때문에 웹사이트가 더 빨리 로드됩니다.
• 더 나은 전략 중 하나는 중량 플러그인을 더 가벼운 플러그인으로 교체하는 것입니다.
• 이미지가 사이트를 더 매력적으로 만들고 사이트에 가치를 더하지만 불필요한 이미지를 제거하고 항상 최적화된 이미지를 사용합니다(ShortPixel 및 WP Compress를 사용하여 이미지를 최적화할 수 있음).
• 이미지 및 비디오에 지연 로딩을 사용합니다.

이 포인트를 사용하여 더 나은 성능을 위해 WordPress 사이트의 속도를 높이십시오.

6) GZIP으로 구성 요소 압축

GZIP 압축은 데이터 파일을 압축하여 파일 다운로드 시간을 줄이는 기술입니다. 모든 최신 브라우저는 브라우저에서 압축 데이터를 수신하면 자동으로 압축 파일의 압축을 풉니다. 모든 최신 브라우저, 서버 소프트웨어 및 모든 최고의 WordPress 호스팅은 GZIP 압축을 지원합니다. GZIP 압축은 파일 크기를 최대 70%까지 줄일 수 있습니다.

Cloudways는 설치된 Breeze 플러그인과 함께 제공되므로 Breeze WordPress 캐시 플러그인을 설치하고 활성화하기만 하면 GZIP 압축을 얻을 수 있습니다.

다음은 GZIP 압축을 위한 권장 플러그인입니다.

• WP 로켓이 있는 GZIP
• WP 슈퍼 캐시가 있는 GZIP
• W3 총 캐시가 있는 GZIP

W3 Total Cache는 무료 버전의 캐싱 플러그인입니다. 플러그인을 설치하고 활성화하기만 하면 웹사이트에서 GZIP 압축이 자동으로 활성화됩니다. 성능 > 일반 설정으로 이동하여 '브라우저 캐시'를 활성화합니다. 변경 한 후 '모든 변경 사항 저장' 버튼을 클릭합니다.

7) 빈 Src 또는 Href를 피하십시오

값이 설정되지 않은(따옴표 사이에 정보가 없는) HTML 속성을 '빈' 속성이라고 합니다. 소스(src) 와 링크(href) 의 빈 속성은 URI(Uniform Resource Identifier) ​​값이 없어도 브라우저에서 연결하도록 강조합니다.

다음은 HTML 및 JavaScript 에서 소스(src) 및 링크(href) 빈 태그의 몇 가지 예입니다.

HTML:

 <img src="">
<a href="">

자바스크립트:

 var img = 새로운 이미지();
img.src = "";

웹사이트에 빈 HTML 및 JavaScript 태그가 없는지 확인하십시오. 있다면 삭제하고 모든 링크를 적절하게 유지하십시오. 둘째, 빈 태그 문제는 이미지와 관련이 있으므로 업로드 및 사용 시 이미지 링크를 항상 확인하십시오.

8) 자바스크립트를 맨 아래에 두기

즉, JavaScript보다 먼저 다른 페이지 콘텐츠를 로드하므로 인터넷 연결이 느린 사용자는 JavaScript가 로드될 때까지 기다릴 필요가 없습니다. JavaScript가 맨 위에 배치되면 먼저 로드를 시작하고 나머지 페이지 콘텐츠를 느리게 하여 사용자 경험에 영향을 줍니다.

JavaScript 파일을 .js 확장자(my-amazing-script.js)로 저장하고 해당 JS 파일을 테마 디렉토리에 저장합니다(자바스크립트용 디렉토리를 생성할 수 있습니다. 예: public_html/wp-content/themes/your-theme/assets /js). JavaScript 파일을 배치한 후 테마의 functions.php 파일을 편집하고 다음 코드를 추가하세요.

 함수 wpb_adding_scripts() {
wp_register_script('my-amazing-script', get_template_directory_uri() . '/js/my-amazing-script.js','','1.1', true);
wp_enqueue_script('나의 놀라운 스크립트');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

사용된 함수 wp_register_script() 및 여기에는 다음이 포함됩니다.

 <?php
wp_register_script( $handle, $src, $deps, $ver, $in_footer );
?>

$in_footer 매개변수를 true로 설정하여 WordPress 페이지의 바닥글 또는 하단에 스크립트를 추가합니다.

응답 코드

Pingdom 속도 테스트 도구의 다음 섹션은 HTTP 상태 코드라고도 하는 응답 코드입니다. 이 섹션에서는 페이지에서 로드하는 모든 리소스에 어떤 일이 일어나고 있는지 알려줍니다. 몇 가지 일반적인 사항은 다음과 같습니다.

• 200 - 모든 것이 OK
  301 – 요청한 리소스가 영구적으로 이동되었습니다.
  404 – 요청한 리소스를 찾을 수 없습니다.

Responses Code 200~300 사이는 보통 괜찮지만 400~500 사이는 보통 고쳐야 할 에러라고 합니다.

콘텐츠 유형별 콘텐츠 크기 및 요청

이렇게 하면 웹 페이지의 리소스를 볼 수 있습니다. 테이블은 콘텐츠 배포 및 요청에 대한 정보입니다.

콘텐츠 유형별 콘텐츠 크기는 콘텐츠 유형별로 그룹화된 모든 웹사이트 자산 목록을 제공합니다. 이 정보는 오류를 제거하는 데 도움이 될 수 있습니다. 콘텐츠 종류별 콘텐츠 크기가 생각보다 크다는 것을 깨달을 때마다 콘텐츠의 해당 부분을 작업하여 성능을 향상시킬 수 있습니다.

도메인별 콘텐츠 크기 및 요청

콘텐츠 크기 및 도메인별 요청 섹션을 통해 중간 크기와 함께 내부 및 외부 서비스를 볼 수 있습니다. 이 섹션에는 도메인에서 생성된 요청이 표시됩니다. 외부 서비스마다 고유한 대기 시간이 발생하므로 외부 요청을 줄이는 것이 좋습니다.

일반적으로 요청 수를 최소화하고 자산을 웹 서버나 CDN으로 이동하는 것과 같이 한 곳에서 호스팅하는 것이 가장 좋습니다. FontAwesome이나 BootStrap을 예로 들 수 있습니다. FontAwesome 또는 BootStrap의 스크립트를 외부에 연결하는 경우 다운로드하여 직접 제공하십시오.

폭포 차트

마지막으로 폭포 차트를 생성하는 Pingdom 속도 테스트 도구 요청 섹션이 있습니다. 각 요청을 분석하여 성능 문제를 확인할 수 있습니다. 이 섹션에는 자세한 색상으로 구분된 폭포 차트가 있습니다.

Pingdom의 폭포수 분석은 사이트의 모든 단일 HTTP 요청을 보여주며 개발자가 사이트 로딩을 시각적으로 이해하고 병목 현상을 식별하는 데 사용합니다. 연결 크기에 집중 - 긴 연결과 긴 막대는 빠른 사이트 로딩을 차단합니다.

요약

웹 사이트 속도 테스트 도구와 관련하여 시장에는 많은 도구가 있습니다. 보시다시피, Pingdom 속도 테스트 도구는 심도 있는 설명과 제안으로 웹사이트 성능을 탐색하는 데 더 잘 작동합니다.

상품에 대한 자세한 안내를 드렸습니다. 이제 이 도구를 사용하여 웹사이트의 성능을 개선할 차례입니다.