Google PageSpeed ​​최적화 가이드PageSpeed ​​Insights에서 100점을 획득하고 블로그 성능을 높이는 방법

웹사이트 로드 속도는 블로그 사용자 경험의 큰 부분을 차지합니다. 그렇기 때문에 처음부터 블로그를 시작하려는 경우 빠른 웹사이트를 갖는 것이 성공에 필수적인 이유입니다. 입력: 내 친구이자 재능 있는 개발자인 Andy Feliciotti의 Google PageSpeed ​​최적화 가이드입니다.

Google은 또한 PageSpeed ​​점수를 사용하여 속도에 따라 웹사이트 순위를 매깁니다. 귀하의 웹사이트가 Google의 PageSpeed ​​테스트에서 100점 만점을 받는 것은 쉬운 일이 아닙니다. 하지만 난 도와주러 왔어! 블로그나 전자 상거래 사이트가 있든 관계없이 Google PageSpeed ​​점수를 100으로 만드는 방법을 단계별로 살펴보겠습니다.

Google PageSpeed ​​최적화: PageSpeed ​​Insights에서 100점을 얻는 방법

1. Google PageSpeed란 무엇입니까?
2. Google PageSpeed가 중요한 이유는 무엇입니까?
3. 웹사이트 속도를 테스트하는 방법
4. Google PageSpeed ​​모범 사례
5. Google PageSpeed ​​최적화 및 통계 FAQ

공개: 아래 링크 중 일부는 제휴 링크이며 추가 비용 없이 수수료를 받습니다. 내가 개인적으로 사용하고 지지하는 제품과 서비스만 추천한다는 것을 알고 계십시오. 내 제휴 링크 중 하나를 사용하면 회사에서 보상을 하여 이 블로그를 운영하고 내 심층 콘텐츠를 독자(귀하와 같은)에게 무료로 제공할 수 있습니다.

오늘 블로그를 시작할 준비가 되셨습니까?

Forbes , Inc 및 Entrepreneur 에 소개된 블로그를 시작하는 방법(측면) 내 최고의 가이드를 확인하세요.

먼저 Google PageSpeed의 기본 사항을 살펴본 다음 블로그 속도를 높이는 방법에 대해 살펴보겠습니다.

Google PageSpeed란 무엇입니까?

페이지 속도는 웹사이트의 콘텐츠가 사용자의 브라우저에 도달하는 데 걸리는 시간입니다.

귀하의 사이트를 방문하는 사용자가 귀하의 콘텐츠를 기다릴 필요가 없기 때문에 이는 매우 중요합니다. 느낌을 알고 Google에서 질문에 대한 답변을 찾고 링크를 클릭한 다음 페이지가 로드되지 않을 때 포기하게 됩니다. 구글도 이것을 알고 있습니다. 사이트의 속도가 주요 순위 요소인 이유입니다. 사이트 속도를 테스트하는 가장 인기 있는 도구는 Google PageSpeed ​​Insights 도구입니다. 이것은 페이지 속도 측면에서 Google이 귀하의 사이트에 대해 어떻게 생각하는지 정확히 알 수 있는 가장 좋은 방법입니다.

주목할 만한 Google PageSpeed ​​지표:

• LCP(Largest Contentful Paint): 사용자에게 인지되는 페이지 로드 속도를 측정합니다. 주로 스크롤 없이 볼 수 있는 콘텐츠의 로드가 완료되었을 때 발생합니다.
• FID(First Input Delay): 사용자가 웹사이트와 상호작용할 수 있을 때까지 지연 시간을 초 단위로 측정합니다.
• CLS(Cumulative Layout Shift): 페이지 레이아웃이 "이동"을 멈출 때까지 초 단위로 측정합니다. 예를 들어 이미지 로드로 인해 사이트의 레이아웃이 바뀔 수 있습니다. 시프트 로드가 완료되기 전에 사용자가 사이트의 요소를 클릭하려고 할 수 있기 때문에 이는 중요합니다. 그러면 다른 요소를 클릭하게 될 수 있습니다.
• FCP(First Contentful Paint): 화면에 무엇이든 렌더링되는 시간 측정.
• INP(Interaction to Next Paint): Interaction to Next Paint는 페이지와 이루어진 사용자 상호 작용의 대기 시간을 관찰합니다. 예를 들어 사용자가 아코디언을 클릭하고 열 때 예기치 않은 지연이 있는 경우입니다.
• TTFB(Time to First Byte): 브라우저가 서버로부터 응답을 받을 때까지의 시간 측정.

Google Search Console(Core Web Vitals 보고서), PageSpeed ​​Insights 및 Chrome 사용자 경험 보고서에서 이러한 용어가 자주 사용되는 것을 볼 수 있습니다.

페이지 속도가 중요한 이유는 무엇입니까?

페이지 속도는 트래픽 양과 블로그 수익에 직접적인 영향을 미치기 때문에 중요 합니다.

연구에 따르면 사이트 속도는 전환율에 직접적인 영향을 미칩니다. Portent의 데이터에 따르면 페이지 로드 속도가 1초인 경우와 5초인 경우 전환율이 거의 50% 감소합니다. 사이트 로드 시간은 Google 순위에 영향을 미칠 뿐만 아니라 전환율에도 영향을 미칩니다.

Google 검색 결과에서의 위치에서 고객의 인내심에 이르기까지 사이트의 페이지 로드 시간은 사용자 경험의 모든 측면에 영향을 미칩니다. 사용자는 주로 휴대기기를 사용하므로 사이트가 로드되는 모든 킬로바이트는 의도적이어야 합니다.

사용자가 앉아서 페이지가 로드될 때까지 기다려야 하는 시간이 길수록 이탈률도 높아집니다. 사이트 속도는 Google의 SERP에만 영향을 미치는 것이 아니라 대부분의 검색 엔진이 페이지 속도를 고려합니다. 이것이 바로 오늘날의 웹에서 빠르게 로드되는 사이트를 갖는 것이 필수적인 이유입니다.

다행스럽게도 최신 도구를 사용하고 있고 수행할 작업을 알고 있다면 빠른 사이트를 만드는 것이 그리 어렵지 않습니다.

웹사이트 속도를 테스트하는 방법

Google PageSpeed에 익숙하지 않은 경우 Google이 사이트 로드 속도를 결정하기 위해 사이트에서 실행하는 일련의 테스트입니다. Google 사용자는 검색 결과를 클릭할 때 검색 결과가 빠르게 로드되기를 기대합니다. 이것이 Google이 Google PageSpeed ​​Insights 테스트를 만든 이유입니다.

이를 통해 웹사이트 소유자는 웹사이트 속도를 저하시키는 원인과 해결 방법을 정확히 알 수 있는 도구를 얻을 수 있습니다. 또한 검색 엔진 알고리즘에서 웹 사이트의 순위를 올바르게 지정하는 데이터를 Google에 제공합니다.

이 도구를 사용하는 것은 웹사이트의 URL을 입력하고 분석을 클릭하는 것만큼 쉽습니다. 테스트는 빠르게 실행되며 많은 주요 메트릭이 제공됩니다. 또한 로컬 테스트를 실행하려는 경우 Google의 오픈 소스 Lighthouse를 사용하여 브라우저에서 바로 유사한 결과를 생성할 수 있습니다.

웹사이트 성능을 볼 수 있는 또 다른 곳은 Google Analytics 페이지 타이밍 보고서를 사용하는 것입니다.

이 문서에서 듣는 모든 것을 수정할 필요는 없지만 가장 일반적인 PageSpeed ​​문제와 해결 방법을 살펴보겠습니다.

PageSpeed ​​모범 사례: 일반적인 Google PageSpeed ​​문제 및 해결 방법

이 섹션의 대부분의 조언은 WordPress 블로그가 있다고 가정합니다. 또한 개발자가 문제를 수동으로 수정하도록 하는 자세한 지침도 포함했습니다.

워드프레스 사이트 로딩 속도를 개선하는 가장 좋은 방법은 WP-Rocket 을 사용하는 것입니다. WP-Rocket은 유료 플러그인이지만 즉시 사용할 수 있는 최상의 성능 사례를 많이 수행하므로 그만한 가치가 있습니다. 대부분의 페이지 속도 문제를 해결하기 위해 WP-Rocket이 도움이 될 수 있는지 강조하고 가능한 경우 무료 대안을 제공합니다.

WordPress 테마는 핵심 웹 바이탈에서도 큰 역할을 합니다.

서버 응답 시간 단축

빠른 서버 응답 시간은 우수한 Google PageSpeed ​​점수에 필수적입니다. 기본적으로 서버 응답 시간은 웹사이트 서버가 사용자를 위해 웹페이지를 생성하는 데 걸리는 시간입니다. PageSpeed ​​보고서에 경고가 표시되는 경우 가장 쉽게 해결할 수 있는 방법 중 하나입니다. 이 문제를 해결하는 가장 일반적인 방법은 페이지 캐싱을 사용하는 것입니다. 이것은 귀하의 사이트가 캐시에서 웹 페이지를 제공하므로 서버 자체가 거의 또는 전혀 작업을 수행하지 않아도 된다는 것을 의미합니다.

• 페이지 캐싱 활성화: 사용자가 사이트에서 페이지를 요청하면 렌더링 및 제공되어야 합니다. 이 프로세스는 페이지 캐싱으로 완전히 건너뛸 수 있습니다. 기본적으로 사용자가 사이트의 페이지를 방문하면 다음 사용자를 위해 캐시에 저장되어 즉시 반환될 수 있습니다. 많은 WordPress 호스팅 회사는 페이지 캐싱을 내장했지만 서버 응답 시간이 높은 경우 활성화되지 않았을 수 있습니다. 최고의 WordPress 페이지 캐싱 솔루션에는 WP-Rocket , W3 Total Cache 및 Cache Enabler가 포함됩니다. 페이지 캐싱을 위한 또 다른 인기 있는 옵션은 WordPress용 CloudFlare의 자동 플랫폼 최적화를 사용하는 것입니다. 이것은 CloudFlare의
• 최신 스택 사용: 웹 호스트에서 사용하는 PHP 및 MySQL 버전은 페이지 속도에서 큰 역할을 합니다. 고품질 웹 호스팅 회사에서 이 문제를 다루어야 합니다. 개발자라면 최신 버전의 PHP 및 데이터베이스 솔루션을 최신 상태로 유지해야 합니다.

압축 활성화

귀하의 사이트는 Brotli(Chrome에서 지원하는 최신 버전) 또는 GZIP 압축을 사용하여 콘텐츠를 사용자의 브라우저로 보내기 전에 콘텐츠와 페이지 크기를 압축할 수 있습니다. 사용자의 브라우저가 압축된 콘텐츠를 자동으로 처리하므로 이러한 압축 방법은 사이트 표시에 영향을 미치지 않습니다.

가장 인기 있는 WordPress 호스팅 회사는 자동으로 압축을 적용합니다. 사이트에서 압축 방법이 활성화되었는지 확인하려면 온라인 GZIP 압축 테스트를 사용할 수 있습니다.

인기 있는 성능 WordPress 플러그인은 WP-Rocket, WP Super Cache(설정에서 활성화해야 함) 및 W3 Total Cache(설정에서 활성화해야 함)를 포함하여 자동으로 GZIP 압축합니다. WP-Rocket은 구성 없이 Apache를 사용하는 경우 사이트에 GZIP 압축을 자동으로 적용합니다.

개발자용: 서버에서 Brotli 또는 GZIP 압축을 활성화하려면 Apache 또는 Nginx를 사용하는지 알아야 합니다. 다음은 Apache에서 Brotli를 활성화하는 방법과 Nginx에서 Brotli를 활성화하는 방법에 대한 가이드입니다. 서버 구성을 처리하는 대신 CloudFlare를 사용하도록 선택하는 것이 좋습니다. 무료로 CloudFlare는 사용자의 브라우저가 지원하는 것과 자동으로 제공되는 콘텐츠에 따라 GZIP 및 Brotli 압축을 적용합니다.

CSS, HTML 및 JavaScript 축소

HTML, CSS 및 JavaScript는 모두 페이지 로드 속도에 영향을 미칩니다. 코드를 작성하는 동안 대부분의 개발자는 사람이 읽을 수 있도록 탭, 공백 및 기타 불필요한 코드를 포함합니다. 이러한 사용되지 않은 문자가 모두 합산되어 사이트 속도가 약간 느려질 수 있습니다.

운 좋게도 이러한 모든 자산은 사용자 경험에 영향을 주지 않고 쉽게 축소할 수 있습니다. WP-Rocket은 CSS 및 JavaScript에 대한 축소 옵션이 있는 파일 최적화 페이지를 제공합니다. 또한 WP-Rocket에서 페이지 캐싱이 활성화된 경우 HTML 축소가 페이지에 적용됩니다. 무료 옵션은 자동 최적화 플러그인을 사용하여 CSS/JS/HTML을 축소하는 것입니다.

JavaScript를 축소하면 기능에 문제가 발생할 수 있으므로 활성화할 때 테스트해야 합니다.

개발자의 경우: 개발자 가 워크플로 중에 파일을 압축할 수 있는 많은 개발자 도구가 있습니다. Clean CSS와 같은 Node.js 패키지를 워크플로에 추가하여 작업하는 동안 파일을 압축할 수 있습니다. 또한 소규모 프로젝트의 경우 CSS, JS 및 HTML을 압축하는 온라인 도구가 많이 있습니다. WordPress를 사용하는 경우 훨씬 적은 노력으로 동일한 결과를 얻을 수 있으므로 플러그인을 사용하도록 선택하는 것이 좋습니다.

사용하지 않는 CSS 줄이기

사용하지 않는 CSS를 제거하는 것은 어려울 수 있습니다. 페이지 스타일에 사용되지 않는 페이지의 CSS 규칙은 사용되지 않는 CSS로 간주됩니다. 대부분의 프레임워크, 테마 및 플러그인은 사용하지 않는 CSS로 사이트를 떠납니다.

예를 들어 WordPress 테마는 연락처 페이지에 대한 스타일을 포함할 수 있지만 사이트의 다른 모든 페이지에서는 사용되지 않지만 스타일시트에는 여전히 존재합니다.

운 좋게도 WordPress를 사용하는 경우 사용하지 않는 CSS를 자동으로 줄이는 몇 가지 플러그인이 있습니다. WP-Rocket 및 Perfmatters는 블로그에서 사용하지 않는 CSS를 제거하는 데 큰 도움이 됩니다. 이 플러그인은 페이지를 로드하고 페이지를 올바르게 표시하는 데 필요한 CSS만 있는지 확인하고 더 작은 CSS 파일을 남깁니다.

개발자: 이 프로세스를 수동으로 수행하기 위해 개발자 는 WordPress 사이트에서 스타일시트를 대기열에서 빼는 작업을 할 수 있습니다. 이렇게 하면 테마의 스타일시트에 추가할 CSS를 수동으로 선택할 수 있습니다. 사이트에서 사용하지 않는 CSS를 찾는 온라인 도구도 있지만 대규모 사이트에 사용하기에는 지속 가능하지 않을 수 있습니다.

브라우저 캐싱 활용

사용자가 사이트의 여러 페이지를 방문하면 동일한 리소스를 사용할 가능성이 높습니다. 종종 이미지, CSS 및 JavaScript는 전체 사이트에서 공유됩니다. 이것은 브라우저 캐싱이 들어오는 곳이며 나중에 사용하기 위해 자산을 저장하도록 사용자의 브라우저에 알릴 수 있습니다. 대부분의 WordPress용 성능 플러그인은 기본적으로 브라우저 캐싱 규칙을 추가합니다.

개발자용: Apache 또는 Ngnix를 사용하는지 여부에 따라 서버 구성을 추가하여 사용자의 브라우저에 특정 콘텐츠를 캐시하도록 지시할 수 있습니다. 일반적으로 이러한 브라우저 캐싱 방법은 CSS, JS 및 이미지에 적용됩니다.

렌더링 차단 리소스 제거

웹 브라우저는 웹 사이트의 코드를 읽을 때 무엇을 다운로드하고 렌더링할지 결정합니다. <head> 태그의 JavaScript 및 CSS 파일은 렌더링 차단 리소스로 간주됩니다. 브라우저가 사용자에게 페이지를 반환하려고 하면 중지하고 파일을 다운로드해야 하며 전체적으로 페이지 렌더링이 지연됩니다.

사이트에 렌더링 차단 리소스가 있는 경우 Google PageSpeed ​​Insights는 가장 큰 파일과 잠재적 절감액을 보여줍니다.

다행스럽게도 WordPress용 대부분의 성능 플러그인은 JavaScript 및 CSS를 연기하거나 인라인하는 데 도움이 됩니다. WordPress 플러그인은 또한 필수적이지 않은 스타일시트와 JS를 이동하여 페이지 하단에 로드하도록 도와줍니다. WP-Rocket, Autooptimize(무료) 및 Perfmatters는 모두 렌더링 차단 자산을 제거하는 작업을 수행합니다.

개발자용: 개발자는 여러 브라우저 기능을 활용하여 자산 로드를 개선할 수 있습니다. 여기에는 스크립트에서 defer 속성 사용, CSS/JS를 바닥글로 이동, 헤더에 중요한 CSS만 포함하는 것이 포함됩니다. 렌더링 차단 리소스에 대한 Google의 가이드입니다.

이미지를 효율적으로 인코딩

이미지 압축 알고리즘은 품질 저하 없이 이미지를 압축하는 놀라운 결과를 제공합니다.

일반적으로 JPG 및 PNG 이미지는 내보낼 때 추가 압축을 사용할 수 있습니다. Imagify, ShortPixel 및 Smush는 이미지를 자동으로 압축하기 위한 훌륭한 WordPress 플러그인입니다. 기본적으로 이러한 플러그인은 업로드할 때 이미지를 압축하여 페이지 로드 속도를 높입니다. 이미지에 적용되는 압축 정도를 선택할 수도 있습니다.

이미지를 압축하는 데 처리 능력이 필요하기 때문에 이러한 플러그인 중 다수는 많은 양의 이미지에 대해 요금이 부과됩니다. ShortPixel은 콘텐츠 전송 네트워크 및 API를 사용하여 클라우드에서 이미지를 압축하는 플러그인도 제공합니다. 사이트에서 이미 CloudFlare를 사용하고 있다면 Pro 계획에 가입하여 즉시 이미지를 최적화할 수 있습니다.

개발자용: Image Compressor와 같은 온라인 도구와 Pichi와 같은 데스크톱 앱을 포함하여 이미지 최적화를 위한 도구가 많이 있습니다. 이미지를 대규모로 압축하기를 원할 것이므로 이미지를 자동으로 압축하는 CDN을 사용하는 것을 선호합니다. 개인적으로 가장 좋아하는 것은 웹 이미지를 자동으로 압축하고 서버까지 제공하는 CloudFlare Pro($20/m) 요금제입니다. 사이트 로고와 같은 그래픽에 SVG를 사용하도록 이동할 수도 있습니다. 또한 실제 사진에는 JPEG 파일을 사용하고 그래픽에는 SVG/PNG 파일을 사용하는 것이 좋습니다. 사진에 PNG 파일을 사용하면 파일이 불필요하게 커집니다.

이미지의 적절한 크기 조정

크기가 잘못된 이미지의 예로는 너비가 800픽셀인 div에 있는 2000픽셀 x 2000픽셀의 큰 이미지가 있습니다. 800px만 표시되기 때문에 브라우저는 아무 이유 없이 더 큰 이미지를 로드해야 했습니다. 이로 인해 페이지 로드 속도가 느려지고 사용자 경험이 저하됩니다. 대부분의 잘 설계된 WordPress 테마에는 이 문제가 없습니다.

개발자용: WordPress 테마를 개발하는 경우 기본 WordPress 이미지 크기를 테마 너비와 정확히 일치하도록 설정할 수 있습니다. 이미지 크기를 변경한 후 WordPress 축소판을 다시 생성해야 합니다. 레티나 디스플레이용 이미지를 제공하려면 srcset 속성을 사용해야 합니다. 워드프레스에는 고화소 밀도 디스플레이에 이미지를 제공하는 기능도 내장되어 있습니다.

오프스크린 이미지 연기

이미지가 포함된 웹사이트가 로드되면 접은 부분 아래에 있는 이미지도 포함하여 모든 이미지가 로드됩니다. 이미지를 볼 수 있기 때문에 리소스 및 네트워크 사용량이 낭비됩니다. 다행스럽게도 모든 주요 브라우저가 지연 로딩을 지원하므로 오프스크린 이미지를 연기하는 것이 그 어느 때보다 쉬워졌습니다.

기본적으로 WordPress는 이미지에 loading=”lazy” 속성을 적용하여 오프스크린 이미지를 자동으로 연기하므로 이 오류가 표시되지 않을 것입니다. WP-Rocket은 또한 이미지, iFrame 및 YouTube 삽입에 지연 로딩을 적용합니다. 또는 무료 a3 지연 로드 플러그인을 사용하여 화면 밖의 요소에 지연 로드를 적용할 수 있습니다. 사이트에 많은 이미지 파일과 gif가 있는 경우 이는 페이지 로드를 개선하는 중요한 측면입니다.

개발자용: 이미지에 지연 로딩을 추가하는 가장 쉬운 방법은 <img> 태그에 loading=”lazy” 속성을 포함하는 것입니다. 콘텐츠를 지연 로드할 수 있는 JavaScript 라이브러리도 많이 있습니다.

웹폰트 로드 중에 모든 텍스트가 계속 표시됨

웹폰트가 도입되었을 때 글꼴이 로드되기 전에 텍스트를 숨기는 것이 일반적이었습니다. 사용자가 사이트를 즉시 읽기 시작하기를 원하기 때문에 이는 절대 금물입니다. WP-Rocket은 CSS 최적화가 활성화되면 웹폰트 디스플레이를 자동으로 최적화합니다. 무료 WordPress 플러그인 Swap Google Fonts Display도 WordPress 사이트의 Google 글꼴에 올바른 매개변수를 추가합니다.

개발자의 경우: 아마도 이 발견을 해결하는 데 매우 간단한 Google 글꼴을 사용하고 있을 것입니다. Google 글꼴 URL에 "&display=swap" 쿼리 문자열을 추가하기만 하면 됩니다. 자세한 내용은 Google에서 제공합니다.

여러 페이지 리디렉션 방지

사이트에 리디렉션이 많으면 페이지 로드 속도가 천천히 증가합니다. 예를 들어 홈페이지가 / /home.html로 이동하면 사용자에 대한 응답이 지연됩니다. 리디렉션으로 연결되는 CSS 또는 JS 파일이 있는 경우 이 오류가 표시될 수 있습니다.

또 다른 예는 헤더 탐색의 URL이 리디렉션되는 URL로 이동하는 경우입니다. WordPress를 사용하는 경우 사이트에 플래그가 지정되지 않을 가능성이 큽니다.

Google PageSpeed ​​최적화 및 통계 FAQ

다음은 Google PageSpeed에 대한 가장 일반적인 질문입니다. 누락된 내용이 있으면 이 문서 끝에 있는 의견에 질문하십시오.

블로그의 Google PageSpeed ​​최적화에 대한 최종 생각

Google PageSpeed ​​최적화에 대한 이러한 팁이 블로그 성능을 개선하고 시간이 지남에 따라 유기적 트래픽 증가로 이어지는 데 도움이 되기를 바랍니다. 웹이 발전하고 도구가 사용하기 쉬워짐에 따라 WordPress 사이트의 속도를 점점 더 쉽게 높일 수 있습니다.

Google PageSpeed ​​점수를 향상시키기 위해 할 수 있는 일이 많이 있지만 테스트를 통과하는 것이 좋습니다.

테스트 통과(90점 이상)는 자연 Google 검색 결과에서 귀하의 콘텐츠를 상위 순위에 올리는 데 큰 역할을 합니다. 하지만 잊지 마세요. 완벽한 100점을 달성하는 것은 웹 표준이 변화함에 따라 끝없는 작업이 될 수 있으므로 90점 이상 범위를 유지하기 위해 노력하면 괜찮을 것입니다.

오늘 블로그를 시작할 준비가 되셨습니까?

Forbes , Inc 및 Entrepreneur 에 소개된 블로그를 시작하는 방법(측면) 내 최고의 가이드를 확인하세요.