일반적으로 실패한 PageSpeed ​​감사 및 해결 방법

이 기사에서는 WP Rocket을 사용하여 WordPress 웹 사이트를 최적화하는 방법에 대해 설명합니다. 이 플러그인을 사용하여 가장 일반적으로 실패한 PageSpeed ​​감사를 통과하는 방법을 단계별로 살펴보겠습니다. 우리는 가장 일반적인 감사에 의해 이 문서를 실패에서 가장 적게 일반적인 감사에 실패하도록 정렬했지만 이 게시물 왼쪽의 목차를 사용하여 빠르게 탐색할 수 있습니다.

웹사이트가 제대로 최적화되지 않은 경우 Google은 웹사이트의 성능을 향상시키기 위해 추구할 수 있는 기회 목록을 제공합니다. 또한 통과하거나 실패한 감사 목록을 제공합니다. 감사에 실패하면 감사를 처리하는 최선의 방법에 대한 권장 사항을 제공합니다.

Google PageSpeed에서 100점 만점에 100점 만점을 받는 것은 중요하지 않습니다. 속도가 Google 검색의 순위 요소이기 때문에 웹사이트를 빠르게 로드할 수 있어야 합니다. 또한 더 빠른 웹사이트가 더 높은 전환율과 더 낮은 이탈률로 이어지는 이유를 설명하는 수많은 통계가 있습니다(Google을 검색하기만 하면 됩니다). 당신은 확실히 당신의 속도 지수에 대해 2.0 이하의 점수를 받기를 원합니다.

이제 속도가 중요한 이유를 알았으므로 웹 사이트 최적화를 위해 WP Rocket을 선택하는 이유를 살펴보겠습니다.

우리는 WP Rocket을 사용하여 모든 WordPress 웹사이트를 최적화합니다. 여기에는 에이전시로 구축한 웹사이트와 SpeedOpp(워드프레스 전문 속도 최적화)로 최적화 서비스를 실행할 때 작업하는 웹사이트가 포함됩니다. 우리가 WP Rocket을 선택한 이유는 업계에서 가장 빠르고 구현이 매우 쉽고 간단하기 때문입니다.

우리를 오해하지 마십시오. 그것은 매우 강력한 도구이며 이해하고 사용하기 쉽도록 설계되어 많은 시간을 절약합니다. 프리미엄 플러그인($49/yr)이지만 간단하고 가장 빠른 웹 사이트로 연결됩니다(이를 테스트했습니다).

이제 실패할 수 있는 개별 페이지 속도 감사에 대한 실제 최적화 자습서를 살펴보겠습니다. WordPress 웹사이트에 대한 보고서를 생성할 때 Google PageSpeed가 제공하는 가장 일반적인 기회를 다룰 것입니다. 이러한 기회와 감사는 Lighthouse 보고서에서도 찾을 수 있습니다. 들어가 봅시다.

렌더링 차단 리소스 제거

이것은 아마도 WordPress 웹 사이트에서 발생하는 가장 일반적인 오류일 것입니다. 웹사이트를 최적화하기 위해 아무 것도 하지 않았다면 렌더링 차단 리소스가 만연하고 있습니다. Google 기회는 렌더링 차단 리소스를 제거해야 한다고 제안합니다.

먼저 렌더링 차단 리소스란 무엇입니까? 여기에서 더 자세히 알아볼 수 있지만 간단히 말해서 웹사이트의 로딩 시간을 늦추는 스크립트나 파일입니다. 특정 유형의 파일이 특정 관리자에 로드되면 브라우저는 해당 파일을 로드하기 위한 웹 페이지 렌더링을 중지하고 읽은 다음 웹 페이지 렌더링을 계속합니다. 여러 렌더링 차단 리소스가 추가되면 웹 사이트 속도가 훨씬 느려집니다.

WP Rocket 주소는 세 가지 방법으로 차단 리소스를 렌더링합니다. 첫째, 웹사이트에 플러그인을 설치하는 두 번째, 자동으로 캐시를 생성합니다.

둘째, 이 도구는 WP Rocket 대시보드의 파일 최적화 탭으로 이동하여 JavaScript 및 CSS 기간의 전달을 최적화하기 위해 활성화할 수 있는 2가지 설정을 제공합니다.

해당 페이지에서 다음 두 가지 설정을 활성화할 수 있습니다.

• CSS 전달 최적화 - 이것은 매우 강력하지만 자동 기능입니다. 두 단계로 진행됩니다. 첫째, WP Rocket은 웹사이트 로딩에 필요한 모든 CSS를 식별합니다. 이를 임계 경로 CSS라고 하며 초기 뷰포트를 로드하는 데 필요합니다. 그런 다음 렌더링 차단 측면을 제거하는 모든 추가 CSS를 비동기식으로 로드합니다.
• load JavaScript deferred - JavaScript 로드를 연기하면 렌더링 차단 측면이 제거됩니다.

CSS 및 JavaScript 파일도 병합 및 축소하는 것이 좋습니다. 이것은 모든 개별 파일을 하나의 더 큰 파일로 결합하여 HTTP 요청의 양을 줄이고 차단 리소스를 렌더링합니다.

사용하지 않는 CSS 연기

CSS 전달을 최적화하여 사용하지 않는 CSS를 연기합니다. 미사용 CSS는 페이지의 초기 표시 영역을 로드할 때 필요하지 않은 CSS입니다.

WP Rocket --> 파일 최적화로 이동하여 "CSS 전달 최적화" 기능을 활성화하기만 하면 됩니다. 이것은 렌더링 차단 리소스 제거에서 방금 논의한 것과 동일한 "CSS 전달 최적화" 설정입니다.

빠르고 쉬웠죠?

CSS 축소 및 JavaScript 축소

WordPress 웹 사이트는 일반적으로 여러 플러그인과 테마를 사용하기 때문에 이 두 가지 감사에 실패합니다. 그것에는 아무런 문제가 없으며 WP Rocket을 사용하여 WordPress에서 CSS와 JavaScript를 병합하고 축소하는 것은 상당히 쉽고 간단합니다.

우선, 축소는 WordPress 웹사이트에서 JavaScript 스크립트와 CSS 파일을 구성하는 코드에서 공백과 사용하지 않는 문자를 제거하는 것을 말합니다. 계속해서 수동으로 수행할 수 있지만 WP Rocket이 자동으로 수행합니다.

WP Rocket의 파일 최적화 탭에서 CSS 축소 및 자바스크립트 축소를 선택하기만 하면 됩니다. 이 탭에는 HTML 축소, CSS 파일 병합 등과 같은 추가 기능이 있습니다.

파일을 축소할 때 WP Rocket은 이것이 문제를 일으킬 수 있음을 경고합니다. 이는 WordPress 웹사이트가 의존하는 기본 코드를 변경하기 때문에 유효한 경고입니다. 문제가 발생하면 설정을 선택 취소하면 모든 것이 정상으로 돌아갑니다.

키 요청 미리 로드

99%의 경우 사전 로드 키 요청 감사에 실패하면 글꼴과 관련이 있습니다. 이는 사전 로드 태그를 포함하지 않고 타사 글꼴을 호출하는 Elementor 페이지 빌더 및 기타 플러그인에서 특히 그렇습니다. 다행히도 이것은 매우 쉽게 해결할 수 있는 문제입니다.

이 감사에 실패하면 Google에서 미리 로드되지 않은 파일에 대해 경고합니다. 글꼴 파일인 경우 Google에서 WP Rocket으로 관련 URL을 복사하여 붙여넣기만 하면 됩니다. 글꼴 사전 로드를 위한 입력 필드는 WP Rocket의 사전 로드 탭에서 찾을 수 있습니다.

외부 파일 및 DNS 요청을 미리 가져올 수도 있습니다. 이는 사전 로드 글꼴 입력 바로 위의 사전 로드 섹션에서 찾을 수 있습니다.

오프스크린 이미지 연기

이 감사에 실패하면 페이지가 로드될 때 모든 이미지를 로드한다는 의미입니다. 방문자가 이미지로 스크롤하여 이미지를 보지 않더라도 여전히 데이터를 로드하고 웹사이트 로드 속도를 늦춥니다.

오프스크린 이미지를 연기하려면 지연 로드만 하면 됩니다.

WP Rocket의 미디어 탭에서 이미지, iframe 및 비디오에 대한 지연 로딩을 활성화합니다. 웹사이트에 YouTube 동영상이 많은 경우 페이지 속도에 심각한 영향을 미칠 가능성이 있습니다. 웹사이트에 YouTube 동영상이 포함된 경우 높은 프레임 및 동영상에 대해 지연 로드를 활성화하는 것이 좋습니다.

자바스크립트 렌더링 차단으로 인해 YouTube 플레이어가 로드되는 데 시간이 걸리기 때문입니다. 사용자가 비디오로 스크롤할 때 비디오를 로드하면 이 문제가 완전히 제거됩니다.

YouTube 동영상에 대해 지연 로드를 활성화한 후 YouTube iframe을 미리보기 이미지로 교체하도록 선택할 수도 있습니다. 이것은 WordPress 웹 사이트에서 YouTube 포함을 많이 실행하는 경우 또 다른 매우 유익한 것입니다.

플레이어를 미리보기 이미지로 교체하면 사용자가 미리보기 이미지를 특별히 클릭하지 않는 한 비디오와 플레이어가 로드되지 않습니다. 즉, 필요한 데이터만 로드하고 해당 웹 페이지의 로드 시간을 크게 향상시킵니다.

서버 응답 시간(TTFB) 단축

WP Rocket으로 이 메트릭을 개선하기 위해 아무 것도 할 수 없음에도 불구하고 우리는 이것을 우리 기사에 포함시킬 것이라고 생각했습니다.

서버 응답 시간 단축(첫 번째 바이트까지의 시간이라고도 함)은 일반적으로 부적절한 호스팅을 의미합니다. 특히 공유 호스팅(Bluehost, GoDaddy, HostGator...)을 사용하는 경우 서버 응답 시간은 항상 매우 낮습니다.

서버 응답 시간을 개선하는 가장 좋은 방법은 단순히 고급 호스트로 마이그레이션하는 것입니다. 이것은 항상 비쌀 필요는 없습니다. 공유 호스팅과 동일한 비용으로 프리미엄 호스트로 마이그레이션하는 방법에 대한 몇 가지 심층 기사를 만들었습니다.

첫 번째 바이트로 시간을 줄이기 위한 권장 사항은 기존 WordPress 호스트에서 Cloudways로 전환하는 것입니다. 그들은 한 달에 10달러의 비용이 드는 계획을 가지고 있으며 웹사이트를 호스팅할 수 있는 엔터프라이즈 수준의 클라우드 호스팅을 제공합니다. 신용 카드 번호를 입력하지 않고 3일 동안 무료로 플랫폼을 사용해 볼 수 있습니다(웹사이트 사본을 마이그레이션할 수도 있습니다). 또한 할인 코드 "ISOTROPIC"을 사용하여 호스팅 첫 달에 30% 할인을 받을 수 있습니다.