이 WordPress 개발 기술로 모든 CWV 및 PageSpeed ​​Insights 테스트 통과

2021년에 영국에 기반을 둔 풀 스택 디지털 에이전시인 StrateggiQ에서 우리는 Google의 CWV(Core Web Vitals) 및 PSI(PageSpeed ​​Insights) 성능을 통과하기 위해 개발 및 출시하는 각각의 모든 웹사이트 개발을 시작하는 것을 목표로 삼았습니다. 보고서.

Core Web Vital은 웹사이트가 다양한 방식으로 수행되는 방식을 보여줍니다. 여기에는 페이지의 첫 번째 콘텐츠를 로드하는 속도(첫 번째 및 가장 큰 콘텐츠가 포함된 페인트), 사용자가 상호 작용할 수 있기 전에 기다려야 하는 시간(대화형 시간) 및 레이아웃 이동(누적 레이아웃 이동)이 포함됩니다. .

CWV 테스트는 파이처럼 쉽습니다. https://pagespeed.web.dev/로 이동하여 주소를 입력하기만 하면 됩니다. 상단 영역에는 지난 28일 동안의 최신 실제 데이터가 표시되고 하단 영역(모바일 및 데스크톱 모두에서 100점 만점)은 실험실에서 생성된 데이터입니다.

이것이 왜 중요합니까? 글쎄, 구글이 그렇게 말했기 때문에.

2018년 7월, Google은 속도가 특히 모바일에서 검색 결과에 사이트가 표시되는 방식에 영향을 미친다고 발표했습니다. 원천.

2020년에는 사용자 경험 메트릭(Core Web Vitals/CVW를 구성함)이 이제 사이트 순위 지정 방식에 사용된다고 발표했습니다. 원천.

간단합니다. 사이트의 성능이 더 빠르고 빠를수록 순위가 높아질 가능성이 높습니다.

그래서 StrategiQ의 개발 팀은 SEO 부서를 도울 차례라고 결정했습니다. SEO 전문가는 가능한 한 열심히 그들의 작은 부랑자 일을 할 수 있지만 끔찍한 성능을 보이는 사이트는 득보다 실이 훨씬 더 많을 수 있습니다. 그러나 CWV와 PSI를 통과한 사이트는 그들의 뛰어난 작업이 훌륭한 발판을 갖게 될 것입니다.

주목할 가치가 있는 것은 CWV와 PSI가 통과하기가 매우 어렵다는 것입니다. 대다수의 사이트는 그렇지 않으며, 세계에서 가장 유명한 웹사이트도 많습니다. YouTube, BBC, 심지어 WP Engine 자체도 모바일과 데스크톱 모두에서 통과하기 위해 고군분투하고 있다고 생각하십시오( 죄송합니다 ).

그렇다면 우리는 그 유쾌한 그린 패스 도넛을 보기 위해 무엇을 했을까요?

우리는 모든 것을 다시 제거하고 하나의 간단한 만트라로 일했습니다.

가능한 한 빨리, 가능한 적게 로드하십시오.

가장 세세한 부분까지 다루지는 않겠지만 맞춤형 WordPress 테마를 가능한 한 간소화된 상태로 유지하기 위한 기본 방법을 살펴보겠습니다.

먼저 하드웨어에 대해 알아보겠습니다. 먼저 WP 엔진에 대해 이야기하지 않고는 계속할 수 없습니다. 의심의 여지 없이, 그들은 최고의 WordPress 전용 호스팅 공급업체는 아닐지라도 그 중 하나입니다. 우리는 인상적인 지원, 가동 시간, 각 설치를 위한 환경, 백업, 그리고 다른 많은 기능 중에서 SSL 인증서와 도메인을 관리하는 것이 얼마나 쉬운지에 대해 기쁘게 생각합니다. 또한 캐싱 및 하드 베이크된 속도 최적화를 통해 사이트가 서버 수준에서 최대한 빠르게 수행할 수 있습니다.

고성능 서버를 핵심으로 하는 우리는 웹사이트를 가능한 한 빨리 작동시키는 것이 이제 우리에게 달려 있다는 것을 알고 있습니다.

대부분의 에이전시와 마찬가지로 당사는 모든 맞춤형 웹사이트의 출발점으로 사용하는 자체 수제 기본 템플릿을 보유하고 있습니다. 우리가 만드는 각 사이트는 미리 구축된 테마가 아니라 사내에서 디자인되고 코딩됩니다.

우리의 기본 템플릿에는 모든 프로젝트에서 필요로 하는 여러 영리한 기능과 재사용 가능한 구성 요소뿐만 아니라 하드 베이크된 속도 최적화 방법이 있습니다. 이 시작점을 사용하면 장기적으로 시간을 절약할 수 있고 모든 사이트가 개발자에게 필요한 오버헤드가 거의 없이 최상의 성능을 발휘할 수 있습니다.

나는 당신이 생각하는 것을 알고 있습니다 – 좋은 물건을 얻으십시오!

"게으른 로드 이미지"와 같이 모든 블로그 게시물에서 볼 수 있는 일반적인 지루한 항목을 나열하는 것을 귀찮게 하지 않겠습니다. 하지만 그렇게 하지 않는다면, 그것은 정말로 필수입니다. 우리는 srcset 및 크기 태그(반응형 이미지라고 함)로 지연 로드된 이미지를 인쇄하는 이미지 기능을 가지고 있습니다.

바로 들어가 보겠습니다.

방법 1: 청크 및 대기열에 추가

많이 발생합니다. 프로젝트에는 하나의 css 파일과 하나의 js 파일만 있고 결국 작은 행성 크기로 부풀려집니다. 다음은? Google은 "이 페이지에서 사용되지 않는 스타일과 자바스크립트를 로드하는 이유는 무엇입니까?"라고 묻습니다. 왜요? 왜?!

유효한 지적입니다. 페이지당 일부만 필요한데 전체 웹사이트에 대해 대량의 CSS와 자바스크립트를 로드해야 하는 이유는 무엇입니까?

당사의 모든 사이트는 전적으로 구텐베르크 블록으로 구축되었습니다. 즉, 각 블록에 대해 CSS 및 js 파일을 대기열에 추가하는 놀라운 능력을 활용할 수 있습니다.

각 블록에 대해 해당 파일에 대해서만 별도의 CSS 및 js 파일을 만듭니다(필요한 경우). 그런 다음 이들은 축소되고(자세한 내용은 다음 항목 참조) 블록 단위로 대기열에 추가됩니다.

결과? 우리는 각 페이지에 실제로 있는 것만 로드합니다.

방법 2: gulp와 같은 작업 실행기를 사용하여 자산 결합 및 축소

생성된 모든 자산은 꿀꺽 꿀꺽 꿀꺽 꿀꺽 마시기 기능으로 축소됩니다(grunt와 같은 다른 자산도 사용 가능). 여러 달 전에 Google은 축소보다 연결을 선호했지만(하나의 큰 요청이 5개의 작은 요청보다 더 나음) HTTP/2(여러 요청을 한 번에 다중화함)의 등장 이후로 이것은 더 이상 필요하지 않습니다. 문제.

다시 말하지만 파일을 가능한 한 작게 유지하기 위해 이 작업을 수행합니다. 따라서 이제 페이지에 있는 자산만 로드할 뿐만 아니라 크기도 아주 작습니다.

방법 3: 렌더링 차단 자산 중지

우리는 대기열에 있는 이러한 모든 자산이 페이지 하단에 있도록 하여 렌더링 차단이 되지 않도록 합니다.

WordPress와 함께 제공되는 jQuery를 대기열에서 빼고 페이지 하단에서도 새 버전(보안 취약점이 없는 버전)을 대기열에 추가합니다.

하지만 FOUC(Flash of Unstyled Content)는 어떻습니까?

방법 4: 스크롤 없이 볼 수 있는 CSS 위

스타일시트가 페이지 하단에 있기 때문에 스타일이 없는 콘텐츠의 플래시는 페이지가 처음에 스타일 없이 로드될 때 발생합니다. 스타일시트가 로드되면 스타일이 적용되고 사이트가 깜박이며 마침내 올바르게 보입니다.

이 문제를 해결하기 위해 위의 접기 스타일을 분할하고 헤드에 인라인 <style> 태그로 추가합니다. 그것은 렌더 차단 자산이 아니며 FOUC를 얻지 못합니다.

방법 5: WP 로켓

퍼즐의 마지막 조각은 동급 최고의 성능 플러그인 WP Rocket입니다. WP 엔진 엔지니어와 함께 구축된 이 플러그인은 호스팅 플랫폼에서 허용되는 유일한 캐싱 플러그인입니다.

결과는?

글쎄, 점수가 스스로를 말해줍니다.

SportsAidEastern은 영국 선수들을 지원하는 자선 단체입니다. PSI에 따르면 우리가 그들을 위해 개발한 사이트는 모바일에서 97/100, 데스크톱에서 100/100이라는 엄청난 점수를 받았습니다.

Calligo는 혁신적인 데이터 서비스를 제공하며 사이트 점수는 SportsAid보다 훨씬 좋습니다. 모바일에서는 거의 완벽한 99/100, 데스크탑에서는 100/100입니다.

결론

바라건대 이것은 다른 모든 same-ol' same-ol' "WordPress 속도를 높이는 방법" 사이트 게시물에서 신선한 공기의 숨결이 되었기를 바랍니다. 통과하기 위해 고군분투하는 경우 아마도 우리는 강조 표시했을 것입니다. 시도해 볼 수 있는 것.

StrateggiQ는 전략 우선 마케팅 대행사입니다. 가치 있는 시장 통찰력을 발견하고, 경쟁자를 압도하는 기회를 공개하고, 효과적인 마케팅 전략을 정의 및 제공함으로써 우리 팀은 자문, 크리에이티브, 마케팅 및 기술을 통해 야심 찬 브랜드가 목표를 능가하도록 돕습니다.
전략, 조언, 리소스 또는 전문 지식이 필요한 경우 첫 번째 단계를 수행하십시오. 자신에 대해 알려주시면 어떻게 도와드릴 수 있는지 알아보겠습니다.