Cloudflare 및 WebpageTest를 사용한 Core Web Vitals 전술에 대한 가이드

게시 됨: 2022-01-12

웹 페이지 코드에 대한 전술적 편집을 수행하고 Core Web Vitals 점수를 향상시킬 수 있는 가장 좋은 방법 중 하나는 A/B 테스트와 같은 비교를 설정하는 것입니다. 개발자는 로컬 개발 환경에서 Lighthouse를 실행하고 변경하면서 테스트할 수 있습니다. 개발자가 아닐 때 수행해야 하는 프로덕션 코드를 테스트하는 데 여전히 유용합니다.

우리는 지난 12월 SMX Build: SEO for Developers에서 Core Web Vitals Site Clinic에서 멋진 데모 스택을 사용했습니다. 앞으로 있을 SMX 마스터 클래스 교육과 지금부터 개발자를 위한 SEO 시리즈 게시물에서 계속 사용할 것입니다.

Cloudflare 작업자를 역 프록시로 사용하고 WebpageTest를 사용하여 Core Web Vitals 점수 및 코드 변경 사항을 테스트하는 방법은 다음과 같습니다. 이 모든 서비스는 무료이며 우리가 처음으로 사용하는 것은 아닙니다. WebpageTest 개발자인 Patrick Meenan은 모든 것을 생각해 냈습니다. 무거운 작업 없이 시작하는 방법을 간략하게 설명합니다.

Cloudflare 및 WebpageTest

Cloudflare 작업자 앱은 역방향 프록시 테스트베드와 프록시 환경을 사용하는 변환 코드를 제공합니다. cloudflareworkers.com에 플레이그라운드가 있지만 해당 주소의 단편화된 URL로 인해 Cloudflare 계정 없이 테스트할 수 없습니다(무료 계정 작동). WebpageTest 계정이 필요하지 않습니다.

Cloudflare 계정이 있으면 작업자로 이동하여 서비스 만들기 버튼을 클릭하여 새 작업자를 만듭니다. 그러면 샘플 JavaScript 작업자가 빠른 편집 버튼으로 액세스할 수 있는 UI 편집기로 채워집니다. 생성한 각 작업자는 고유한 URL을 얻습니다. 언제든지 이름을 변경할 수 있습니다. 이를 위해 https://sel.deckart.workers.dev에 하나를 설정했습니다.

탐색하는 경우 "x-host 헤더" 요구 사항을 확인하십시오. 요구 사항은 요청을 테스트로 제한합니다. 브라우저 확장을 사용하여 요청을 수정하고 테스트하려는 호스트에 스크립트를 제공하는 데 필요한 x-host 헤더를 추가합니다. 페이지를 보고 소스를 보고 DevTools를 실행할 수 있도록 브라우저에서 요청을 수정하겠습니다.

ModHeader로 테스트 탐색

주요 브라우저를 지원하는 ModHeader를 사용할 것입니다. 우리의 경우 크롬 확장 프로그램을 설치하고 아래와 같이 커스텀 헤더 2개를 추가했습니다. x-host 헤더는 테스트를 위해 프록시할 호스트를 제공하고 x-bypass-transform 헤더는 변환을 켜고 끔으로 전환하여 차이점을 테스트할 수 있습니다.

x-bypass-transform을 "true" 값으로 설정하면 변환이 해제됩니다. 그런 다음 소스를 보고 테스트할 전술을 찾을 수 있습니다. 위에 표시된 대로 x-host 헤더가 있으면 작업자 URL로 이동할 수 있으며 Search Engine Land의 홈페이지를 보고 소스 코드를 보고 DevTools를 열 수 있습니다.

자신의 작업자 설정

작업자의 작업은 헤더 값을 얻고 그에 따라 요청을 처리하는 것입니다. 현재 중요하지 않은 몇 가지 세부 사항을 제외하고 아래 스크립트를 요약할 것입니다.

x-host 헤더 값을 사용하는 프록시 URL.
문자열에 "text/html"이 포함된 수락 헤더 값 이 있는 변환 요청.
x-bypass-transform 헤더 값이 true인 경우 변환을 우회합니다.
x-bypass-transform 헤더가 없거나 값이 false인 경우 HTML을 변환합니다.

코드의 조건부 제어 흐름 블록을 작성한 적이 있다면 이러한 작업을 JavaScript로 직접 작성하는 것을 상상하기가 매우 쉬울 것입니다. 더 흥미로운 질문은 다음과 같습니다. HTML을 어떻게 변환할 것인가? 그것이 바로 HTMLRewriter()의 마법이 있는 곳입니다. 기본 작업자 Gist를 복사하고 기본 작업자를 원시 소스로 바꿉니다.

비교를 위한 WebpageTest 설정

기본 작업자 스크립트는 하나의 변환만 수행합니다. LCP 이미지를 미리 로드하면서 우리는 요청을 대기열의 몇 위치에 부딪쳤습니다. 모바일 LCP 로드 시간이 5초 이상에서 4초 미만으로 약 500ms 개선되었습니다. 이를 재현하려면 스크립트가 변경 사항을 따라잡아야 합니다. 요점은 개발자 및 자신의 작업을 위한 SEO로 테스트를 준비하는 것입니다.

이제 브라우저에서 A/B 변경을 할 수 있으므로 WebpageTest를 사용하여 점수 간의 차이를 얻는 방법은 무엇입니까? 우리는 전술적 변화의 효과를 보는 데 가장 유용한 지도인 상세한 폭포 차트의 일부로 LCP 요소 참조를 얻습니다. 요청 순서를 살펴보고 속도 향상을 위해 리소스가 로드되는 순서를 변경할 계획입니다.

우리의 출발점은 URL이 있는 WebpageTest가 될 것입니다(역방향 프록시가 아님). Cloudflare 작업자 URL의 조건이 원본 호스트 공급자와 다르기 때문입니다. 예를 들어 호스트는 이전 HTTP/1.1 프로토콜을 사용하여 작동하는 반면 Cloudflare는 서비스의 일부로 HTTP/2로 업그레이드합니다. 이 첫 번째 WebpageTest 보고서는 전술 개발에 사용해야 합니다.

다음으로 WebpageTest에서 스크립트 테스트를 실행하여 역방향 프록시 URL을 사용하여 변경 사항을 A/B 테스트하는 데 필요한 사용자 정의 헤더를 제공합니다. 핵심 Web Vitals 조건을 시뮬레이션하기 위해 WebpageTest에는 찾기 쉬운 버튼이 있습니다. 초기 테스트에 사용하는 것이 좋습니다. 후속 테스트에서 설정을 편집해야 하며 Core Web Vitals 버튼 페이지에는 이에 대한 UI가 없습니다.

대신 기본 홈페이지 테스트를 사용하고 테스트 입력 필드에 원본 URL을 입력합니다. 브라우저 드롭다운 메뉴를 변경하여 "Motorola G(4세대)"를 선택합니다. 고급 설정 대화 상자를 열고 연결 드롭다운 메뉴를 변경하여 "4G(9Mbps, 170ms RTT)"를 선택합니다. "고급" 탭을 클릭하고 다음 헤더를 추가할 사용자 정의 헤더 필드를 찾으십시오.

지금은 변환을 우회하지 않을 것이므로 값을 false로 설정합니다. 계속해서 WebpageTest가 테스트 필드에 https://searchengineland.com 을 넣는 것을 무시하도록 테스트를 스크립트로 작성해야 합니다. 기본 HTML 문서. 스크립트 탭으로 전환하고 다음을 추가합니다.

Cloudflare로 설정한 후에는 모든 URL 문자열을 자신의 테스트와 일치하도록 교체하려고 할 것입니다. 스크립트 테스트를 실행하면 대부분의 웹 페이지에서 핵심 성능 향상을 위한 전술을 개발하기에 충분한 세부 정보와 타이밍이 포함된 일괄 요청 대기열을 얻을 수 있습니다. 대부분의 웹페이지는 쉽게 프록시 처리되지만 마일리지는 다를 수 있습니다.

우리가 관심을 갖는 이유

Core Web Vitals는 Google 사용자 경험 순위 요소입니다. 페이지 제목 최적화와 같이 순위를 높이는 가장 강력한 방법은 아닐 수 있습니다. Google은 기록에 따라 점수에 따라 순위가 향상될 것이라고 말합니다. 그들은 혜택을 즐기기 위해 모든 Vitals가 Good 점수를 받을 필요는 없다고 말했습니다. 최적의 점수는 90점 이상이며 임계값에 도달하면 90점보다 높은 점수가 90점 자체보다 좋지 않습니다.