Pagespeed Insights로 Google 속도 테스트를 통과하는 방법

페이지가 로드될 때까지 누가 기다리겠습니까? 특히 모바일에서. 좋은 Google 속도 테스트 점수는 귀하의 사이트에 매우 중요합니다.

페이지 속도와 핵심 성능 보고서는 오늘날 매우 중요하며 특히 WordPress 사이트에서 페이지 또는 웹사이트 로드 시간이 느려질 이유가 없습니다.

웹 사이트 속도 테스트를 사용하여 사이트의 평균 로드 시간이 3~5초 이상이면 트래픽이 손실되고 있는 것입니다. 독자가 기다리지 않고 흰색 화면을 보기 때문에 이탈률이 높아집니다.

웹사이트 성능은 중요한 SEO 요소이며 검색 엔진 순위와 전환율을 높이는 데 도움이 됩니다. 실제로 Google은 이제 핵심 성능 보고서에서 키워드 및 페이지의 순위를 매기는 모바일 우선 순위를 갖습니다.

블로그가 최신 상태인지 확인하는 방법

많은 요인이 속도 테스트의 테스트 결과에 영향을 미칩니다.

속도 테스트를 제공하는 인터넷 서비스는 국가마다 또는 도시마다 다릅니다.

인터넷 연결을 테스트했다면 다운로드 및 업로드 속도가 서비스 제공업체와 인터넷 및 Wi-Fi 연결 확인의 효율성에 따라 다르다는 것을 알 수 있습니다.

그러나 Pagespeed Insights를 사용하는 Google 속도 테스트를 통해 사이트 방문자를 위한 다운로드 속도 및 사이트 성능에 대한 일반적인 개요를 얻을 수 있습니다.

100점을 받는 것이 항상 주요 목표라고 생각할 필요는 없습니다. 웹 성능에서 완벽을 추구하는 데 많은 시간을 낭비할 수 있습니다. 그러나 녹색 점수를 얻는 것은 상대적으로 쉬우며 귀하의 사이트가 잘 수행되고 있음을 의미합니다.

Just Publishing Advice에는 많은 내장 기능, 위젯 및 이미지가 있지만 여전히 사이트 속도에 대해 매우 좋은 점수를 받고 있습니다. 다음은 사이트 성능에 대한 간략한 정보입니다.

차세대 형식의 이미지를 사용하지 않으면 Google에서 결과를 줄이기 때문에 모바일 점수는 일반적으로 약간 낮습니다.

현재 이 작업은 사이트의 모든 이미지를 JPEG 2000, JPEG XR 또는 WebP 이미지 파일로 교체해야 하므로 모든 블로그에서 매우 큰 작업이 될 것입니다. 대부분의 블로거는 이 경고를 무시하고 JPEG 및 PNG 이미지 파일을 계속 사용할 수 있습니다.

사이트 속도 성능을 테스트하는 방법

Google의 속도 테스트를 통해 사이트 속도를 대략적으로 알 수 있습니다.

Google 애널리틱스에서 평균 페이지 로딩 시간을 확인할 수도 있습니다. 그러나 사이트 성능을 자세히 분석하는 데 필요한 정보는 제공하지 않습니다.

작업을 수행하려면 더 나은 SEO 도구가 필요합니다.

실험실 데이터가 모두 녹색이면 괜찮습니다. 하지만 등급이 주황색이나 빨간색이면 조치를 취해야 합니다.

트래픽 양에 따라 Core Web Vitals 평가가 표시되거나 표시되지 않을 수 있습니다.

Chrome 브라우저에서 실제 사용자 속도 데이터를 측정합니다.

보고서를 생성하기에 충분한 트래픽이 있는 경우 통과 또는 실패 테스트입니다.

이 보고서는 사이트 성능을 개선할 수 있는 부분에 대한 지침을 제공합니다.

그러나 Google 페이지 속도 테스트 도구는 문제를 추적하고 수정하는 데 많은 도움을 주지 않습니다.

문제 해결 방법 찾기

사이트 속도를 확인하는 훨씬 더 좋은 방법은 GTMetrix를 사용하는 것입니다.

오픈 소스이며 Google Pagespeed 점수와 Yahoo의 YSlow를 사용하며 Google보다 훨씬 많은 정보를 제공합니다.

성능을 모니터링하고 속도를 측정할 때 확인해야 할 두 가지 타이밍이 있습니다.

대부분의 테스트 서비스는 완전히 로드된 시간을 사용하여 사이트 성능을 측정하지만 가장 중요한 통계는 아닙니다.

사이트 속도의 가장 정확한 실제 측정값은 문서 개체 모델(DOM) 로드 시간입니다.

사용자에 대해 웹 페이지가 활성화되는 사이트 로드 프로세스의 지점입니다.

나에게 이것은 웹 페이지의 실제 속도를 측정할 때 가장 중요한 통계입니다.

아래 이미지에서 Fully Loaded 시간은 1.9초인 반면 DOM Loaded 시간은 1.3초에 불과함을 확인할 수 있습니다.

아래는 또 다른 모습입니다. 화살표로 표시된 빨간색 선은 DOM 로드 지점입니다.

첫 번째 사용자 보기에서 필요하지 않은 요소가 나중에 로드되는 것을 볼 수 있습니다.

나중에 로드되는 요소는 일반적으로 지연 로드되는 이미지와 페이지 성능 향상을 위해 필요할 때까지 지연되는 자바스크립트 파일입니다.

사이트를 확인할 때마다 항상 DOM 로드 시간에 세심한 주의를 기울이십시오. DOM 로드 시간은 사이트가 사용자에게 얼마나 빠른지를 훨씬 더 정확하게 측정하기 때문입니다.

또한 인터넷 속도는 시시각각 다르기 때문에 테스트를 두세 번 실행하십시오.

예를 들어 한 시간 정도 또는 그 이상에 걸쳐 결과를 평균화하면 더 나은 아이디어를 얻을 수 있습니다.

모든 인터넷 속도 테스트에는 이러한 자연적인 편차가 있으므로 무작위로 나쁜 결과가 하나 나올까 걱정하지 마십시오.

다른 속도 테스트 사이트에서도 확인할 수 있습니다.

귀하의 사이트가 Google 및 GTMetrix로부터 녹색 등급을 받지 못한 경우 문제를 해결하고 사이트 방문자와 검색 엔진을 만족시킬 수 있는 간단하고 빠르고 쉬운 11가지 방법이 있습니다.

1. 먼저 사이드바를 깔끔하게 정리하세요.

가장 먼저 해야 할 일은 사이드바를 확인하는 것입니다. 모든 위젯과 광고가 필요합니까? 사실 사이드바가 정말 필요합니까?

페이지를 주요 부동산으로 생각해야 합니다.

실제 용도가 거의 없고 사이트 속도를 저하시키는 요소로 인해 사이트에서 얼마나 많은 귀중한 영역이 낭비됩니까?

어수선한 웹 페이지는 산만함이 너무 많기 때문에 읽기도 어렵습니다.

대부분의 사이드바 요소는 로딩 속도를 증가시키므로 제거할 수 있는 항목이 많을수록 좋습니다.

2. 외부 사이트에 의존하는 온페이지 콘텐츠 피하기

웹 페이지 속도를 늦추고 Google 속도 테스트에 실패한 최악의 범죄자 중 하나는 Facebook 좋아요 버튼입니다.

페이지가 로드되기 전에 페이지는 Facebook을 기다려야 합니다. 대부분의 소셜 미디어 위젯 및 공유 버튼에서 흔히 발생하는 문제입니다.

일부는 페이지 로드 시간에 최대 2초 이상을 추가할 수 있습니다.

소셜 미디어 공유가 필요한 경우 가벼운 플러그인을 찾으십시오.

사이트의 요소를 느리게 할 수 있는 다른 인터넷 서비스로는 Amazon 광고 및 위젯과 대형 배너 Google 광고가 있습니다.

구글 애드센스가 있다면 대형 배너 광고 대신 기사 내 광고를 사용해보고 광고 균형을 70-80% 정도로 설정하십시오.

Adsense에 대해 읽을 수 있는 것과는 달리 기사 내 광고를 사용하는 경우 사이트에 큰 부하가 없습니다.

다음은 GTmetrix에서 측정한 Google Ads가 있는 사이트의 페이지입니다.

로드 시간에 미치는 영향은 최소화됩니다.

두 개의 광고를 사용하면 완전히 로드된 시간은 2초가 조금 넘고 DOM은 1.6초 만에 로드됩니다.

또한 광고가 늦게 로드되므로 페이지가 렌더링되기 전에 페이지가 Google에서 대기하지 않습니다.

3. 느린 자바스크립트 파일 확인

사이트에 있는 모든 요소는 로드하는 데 시간이 걸립니다.

많은 플러그인, 위젯 및 애드온으로 사이트를 채우는 데는 막대한 속도 비용이 듭니다.

다음은 정말 긴급한 주의가 필요한 웹사이트에 대한 GTMetrix 평가입니다. 12.4초의 페이지 로딩은 오늘날 끔찍합니다.

GTMetrix를 사용하여 사이트 속도를 저하시키는 모든 요소를 ​​찾을 수 있습니다.

모든 GET 옆에 있는 + 기호를 클릭하여 사이트 속도를 저하시키는 원인과 수정, 제거 또는 최적화가 필요한 항목을 찾으십시오.

위와 같은 사이트는 세 가지 매우 쉬운 조치를 취함으로써 빠르게 개선될 수 있습니다.

다음 세 가지 사항은 캐시 추가, CSS 및 Javascript 축소 및 집계, 지연 로딩 이미지에 대해 설명합니다.

아래에서 권장하는 세 가지 플러그인은 모두 무료입니다.

4. W3 총 캐시 설치

WP Super Cache 및 WP Fastest Cache를 포함하여 WordPress에 매우 우수한 캐싱 플러그인이 많이 있습니다.

그러나 저는 모든 사이트에서 10년 넘게 W3 Total Cache를 사용해 왔습니다.

브라우저 캐싱을 활용하기 위해 이러한 모든 플러그인과 함께 사용할 수 있는 많은 설정이 있지만 설정하고 사용해야 하는 것은 두 가지뿐입니다.

다음은 Total Cache에 대한 설정입니다. 그러나 모든 캐싱 플러그인에 대해 유사합니다.

브라우저와 페이지 캐시를 활성화하기만 하면 됩니다.

이 두 가지 설정은 머리글, 바닥글, 사이드바 요소 및 메뉴와 같이 변경되지 않는 사이트 요소를 캐싱하여 사이트 속도를 높입니다.

5. 자동 최적화 설치

대부분의 캐싱 플러그인은 Javascript 및 CSS를 축소하고 집계할 수도 있습니다.

모두 잘 작동하지만 일부는 설정하기가 매우 복잡할 수 있습니다.

Autooptimize가 더 빠르고 설정하기 쉽고 훨씬 더 효율적이기 때문에 이 작업을 수행하는 데 Autooptimize를 사용합니다. 실제로 1분 이내에 설정할 수 있습니다.

그것이 하는 일은 모든 CSS 및 Javascript 파일의 크기를 줄인 다음 하나의 CSS 파일과 하나의 Javascript 파일로 집계하는 것입니다.

그런 다음 이 두 파일이 로드되어 일부 사이트에 대한 Google 속도 테스트에서 종종 문제가 되는 렌더링 차단이 되지 않습니다.

축소 및 집계는 사이트 속도에 큰 차이를 만듭니다.

내 모든 사이트에 사용하는 설정은 다음과 같습니다.

Autooptimize의 또 다른 추가 보너스는 지원이 환상적이라는 것입니다.

6. a3 지연 로드 설치

사용자가 웹사이트를 방문하면 페이지가 활성화되어 방문자가 사용할 수 있게 되기 전에 웹페이지에 있는 모든 이미지가 로드되어야 합니다.

지연 로딩을 사용하면 사용자 화면에 나타나지 않는 모든 이미지는 스크롤할 때만 로드됩니다.

이렇게 하면 DOM이 완전히 로드된 후에 이미지가 로드되기 때문에 사이트 속도가 크게 달라집니다.

a3 Lazy Load를 결정하기 전에 몇 가지 다른 플러그인을 시도했습니다. 성능과 사용 편의성에서 승리합니다.

일단 설치되면 기본 설정을 사용하거나 몇 가지 조정을 할 수 있습니다.

플러그인은 모든 이미지, 동영상 및 iFrame을 지연 로드합니다.

7. WP 로켓 설치

위의 세 가지 무료 옵션을 대체할 올인원 옵션을 원하는 경우 WP Rocket에서 모든 작업을 수행할 수 있습니다.

세 가지 플러그인을 사용하고 설정하는 대신 WP Rocket을 사용하여 페이지 및 브라우저 캐시를 설정하고 Javascript 및 CSS를 최소화하고 이미지를 지연 로드할 수 있습니다.

또한 데이터베이스를 최적화할 수 있으며 Cloudflare와의 통합을 제공합니다.

WP Rocket은 아주 적은 노력으로 몇 분 안에 사이트를 번개처럼 빠르게 만들 수 있는 경제적인 올인원 솔루션입니다.

8. 이미지 크기 조정

큰 이미지는 사이트 속도를 늦추지 않습니다. 그러나 웹 페이지에 맞지 않는 크기의 이미지는 사이트 속도를 크게 저하시킬 수 있습니다.

이미지를 업로드하기 전에 항상 필요한 크기로 정확히 크기를 조정해야 합니다.

전체 너비 이미지를 원하는 경우 블로그 페이지 너비에 맞게 크기를 조정해야 합니다.

이 사이트는 너비가 750px이고 사이드바가 300px입니다. 750px보다 넓은 이미지는 사이트 속도를 저하시킵니다.

그러나 미디어 세부 정보 상자에서 즉시 이미지 크기를 조정 하지 마십시오 . 페이지 크기는 줄어들지 않습니다.

보시다시피 이 이미지의 너비는 1218px입니다. 큰 크기를 선택하면 이미지가 맞춰집니다.

그러나 실제로 페이지는 1218px의 전체 크기 이미지를 로드하고 사이트 속도를 느리게 합니다.

WordPress의 이미지 세부 정보 상자를 사용하여 이미지 크기를 느리게 조정하지 마십시오.

업로드하기 전에 항상 이미지 크기를 조정하여 전체 크기가 페이지에 있는 이미지의 실제 크기가 되도록 하십시오.

9. 이미지 최적화

Smush는 손실 압축을 사용하여 이미지를 줄이는 데 널리 사용되는 플러그인입니다. 나는 무료 버전을 사용하고 완벽하게 작동합니다.

그러나 내 사이트에 이미지를 업로드하기 전에 한 가지 추가 조치를 취합니다. ImageOptim이라는 작은 데스크톱 앱을 사용합니다.

보시다시피 lossy는 이미지를 약 80%까지 줄입니다.

안타깝게도 Mac 사용자만 사용할 수 있습니다. Windows 사용자인 경우 온라인 이미지 최적화 프로그램을 사용하여 동일한 결과를 얻을 수 있습니다.

이미지를 줄이는 방법에 대한 이전 기사를 읽을 수도 있습니다.

10. Cloudflare CDN 사용

콘텐츠 전송 네트워크(CDN)를 사용해야 합니까?

때에 따라 다르지. CDN은 사이트가 조금 더 빨리 로드되도록 돕기 위해 전 세계 서버에 정적 파일을 저장합니다. 사이트 방문자가 멀리 떨어져 있으면 도움이 될 수 있습니다.

그러나 귀하의 사이트가 대부분 로컬 트래픽을 받고 있다면 많은 도움이 되지 않을 것입니다.

Just Publishing Advice는 유럽에서 호스팅되지만 많은 트래픽이 미국에서 발생합니다. 따라서 CDN을 사용하는 것이 합리적입니다.

예를 들어 사이트가 호주에서 호스팅되고 영국과 미국에서 많은 트래픽이 발생하는 경우 CDN 사용을 고려할 수 있습니다.

Cloudflare는 대중적이고 효율적이며 무료입니다. 그래서 좋은 선택입니다.

그러나 사이트에 배포하려면 약간의 기술적 능력이 필요합니다.

방법 안내 문서에서 WordPress로 Cloudflare를 설정하는 방법에 대해 자세히 알아볼 수 있습니다.

11. 일주일에 한 번 확인

위의 방법으로 사이트를 개선한 후에는 정기적인 점검을 해야 합니다.

블로그에서는 상황이 항상 바뀌므로 성능을 주시하는 것이 좋습니다.

대부분의 시간 동안 Pagespeed Insights와 GTMetrix를 사용하게 됩니다.

그러나 전 세계 25개 위치에서 사이트 성능을 확인하기 위해 수행할 수 있는 무료 웹 사이트 속도 테스트가 하나 더 있습니다.

Dot-Com 도구는 사이트 속도를 실시간으로 테스트하여 사이트 속도를 확인할 수 있습니다.

CDN이 자신에게 가치가 있는지 고려하고 있다면 매우 좋은 테스트 도구이자 가이드입니다.

테스트할 때 Google에서는 완전히 로드된 최대 페이지 속도를 3초로 권장한다는 점에 유의하세요.

WordPress를 사용하면 이 기사의 최적화 제안을 사용하면 매우 쉽게 달성할 수 있습니다.

요약

이 가이드에 나열된 모든 작업을 수행해야 합니까?

즉시 사용 가능한 WordPress는 일반적으로 속도에 관한 한 꽤 잘 수행됩니다.

그러나 느린 테마를 사용하고 플러그인을 많이 추가하고 큰 이미지를 사용하는 경우 사이트의 로딩 속도가 나쁘다면 작업을 고려해야 합니다.

또 다른 원인은 신뢰할 수 없거나 느린 호스트 서버일 수 있습니다. 공급자를 변경해야 하는 경우 빠른 호스트 비용은 한 달에 몇 달러에 불과합니다.

Google 속도 테스트에서 빨간색 점수를 받았다면 급히 작업을 수행해야 합니다.

한 가지 팁은 Twenty Seventeen과 같은 기본 WordPress 테마를 활성화하고 다시 테스트하는 것입니다. 이제 대부분의 테마가 반응하지만 일부 이전 테마로 인해 사이트 속도가 느려질 수 있습니다.

테마가 괜찮다면 위 이미지와 같은 사이트를 개선하기 위한 최우선 순위는 다음과 같습니다.

1. 캐싱 플러그인을 설치합니다.

2. 자동 최적화 설치

3. 지연 로더 설치

이 세 단계를 수행하면 사이트 성능이 즉시 향상됩니다.

이미지의 경우 Smush를 설치한 다음 대량 최적화를 수행하면 많은 도움이 됩니다.

WordPress 사이트가 느려서 Google 속도 테스트에 실패할 이유가 없습니다.

이 도움말에 나열된 10단계를 배포하면 사이트가 모바일 및 데스크톱용 Pagespeed Insight 테스트를 쉽게 통과할 것입니다.