Cloudflare 및 WebpageTest를 사용하여 진화하는 핵심 Web Vitals 전술

게시 됨: 2022-01-25

Cloudflare 및 WebpageTest를 사용하는 핵심 Web Vitals 전술에 대한 가이드에서 WebpageTest로 전술적 HTML 변경 사항을 테스트하기 위한 역 프록시로 Cloudflare를 사용하기 위한 기본 요구 사항을 설명했습니다. 우리의 테스트 버전은 HTMLRewriter() 를 사용하여 요소를 선택하고 코드를 수정하는 Patrick Meenan의 원래 개념에서 단순화되었습니다.

우리는 이 자습서를 통해 심층적으로 진행하지만 Cloudflare 작업자 스크립트를 찾고 있다면 여기에서 찾을 수 있습니다.

첫 번째 기사에서는 Search Engine Land의 변경 사항을 따라가지 못할 것이라고 언급했습니다. LCP는 하드 코딩되었으며 동적 페이지 및 해당 값과 상호 작용하는 데 필요합니다. WebpageTest는 발행 당시 가장 잘 짜여진 폭포 차트와 상상할 수 있는 것보다 더 많은 세부 정보를 가지고 있지만 결과를 얻는 가장 빠른 방법은 아닙니다.

명령줄에서 등대

테스트에 필요한 --extra-headers 옵션과 함께 Lighthouse CLI(명령줄 해석기) 프로그램을 실행하면 WebpageTest에서 했던 방식으로 Core Web Vitals에 대한 표준 설정을 시뮬레이션할 수도 있습니다. 터미널 에뮬레이터에서 작업해야 합니다.

Lighthouse를 설치하는 가장 쉬운 방법은 NPM(Node Package Manager)을 사용하는 것입니다. 설치가 완료되면 다음 명령문을 실행하십시오.

$ lighthouse https://sel.deckart.workers.dev \
--extra-headers "{\"x-host\":\"searchengineland.com\", \"x-bypass-transform\":\"false\"}" \
--form-factor=mobile \
--throttling.cpuSlowdownMultiplier=4 \
--only-categories=performance \
--view

테스트베드의 진화

우리의 목표는 테스트베드의 원래 개념에서 미래의 이벤트 및 기사에 적합한 프로젝트로의 진화를 보여주는 것입니다. 테스트베드는 성능 평가 실행에만 국한되어서는 안 됩니다. 그것이 바로 우리가 시작할 곳입니다. 그러나 웹 사이트와 관련된 여러 상황에서 상당히 잘 작동해야 하며 이는 꽤 어려울 수 있습니다. 도움이 되는 방법을 제공하겠습니다.

예를 들어 사이트는 종종 절대 경로가 아닌 자산 리소스에 대한 상대 경로를 사용합니다(HTTP 프로토콜 및 모두 사용). HTML이 일반적으로 작동하도록 이들과 일치하는 블록을 제공할 것입니다. 이것을 적용한 후에도 여전히 작동하지 않을 때 테스트와 테스트 대상 호스트 이름 사이의 번거로운 참조를 전환하면 CORS 정책 위반에 대해서도 종종 트릭을 수행합니다.

Cloudflare의 HTMLRewriter() 의 아름다움이 정말 빛나는 곳입니다. 사이트 전체 자산은 일반적으로 페이지 HEAD 하위 요소로 로드됩니다. jQuery와 같은 유연성 매칭을 통해 유사한 구문이라도 필요할 때 HEAD의 자식 요소를 선택할 수 있습니다. XPath 선택기와 정규식을 사용할 수 있습니다. 간단하게 유지하고 src 또는 href 속성에 대해 "/"로 시작하는 상대 경로를 찾습니다.

 return new HTMLRewriter() .on('link', { element: el => { const link_href = el.getAttribute('href'); if (link_href && link_href.startsWith('/')) { el.setAttribute('href', 'https://' + host + link_href); } } }) .on('script', { element: el => { const script_src = el.getAttribute('src'); if (script_src && script_src.startsWith('/')) { el.setAttribute('src', 'https://' + host + script_src); } } }) .on('img', { element: el => { const img_src = el.getAttribute('src'); if (img_src && img_src.startsWith('/')) { el.setAttribute('src', 'https://' + host + img_src); } } })

우리는 Edge Computing의 성능(및 비용 효율성)을 활용하여 매우 유용한 테스트를 수행하고 있습니다. x-host 요청 헤더를 수정하여 테스트베드의 다른 사이트를 로드하고 DevTools를 엽니다. 변환이 필요하지 않을 수도 있지만 마일리지는 달라집니다. 프론트엔드 경험을 통해 느낄 수 있습니다.

스위치와 같은 주석 블록은 실패하고 약간의 실험이 필요합니다(필요한 전부일 수 있음). 예를 들어, 일부 자산 참조는 HTTP 콜론 없이 철자를 지정할 수 있습니다. href 또는 src 가 "//"로 시작하는 경로를 확인하고 스크립트에서 선택한 요소 값을 수정하려면 다른 조건을 작성해야 합니다. 실제 사이트에는 없는 콘솔 오류가 발생하지 않도록 하십시오.

Lighthouse는 LCP를 제공합니다.

Lighthouse, PageSpeed Insights 또는 WebpageTest를 사용하여 LCP 참조를 검색하는 것은 비교적 쉽습니다. LCP가 <div> 또는 <p> 가 아닌 경우와 같이 미리 로드할 수 있다고 가정하고 이미 미리 로드되지 않은 경우 스크립트에 href 값을 URL 'query param' 구조로 제공합니다(또는 양식) 미리 로드하여 페이지의 LCP 타이밍에 대한 변경 사항을 테스트합니다.

대부분의 기술 SEO 실무자는 요청 쿼리 매개변수를 수정하여 Google 검색 결과와 같은 서버 측 프로그램에서 다양한 작업을 처리하는 데 능숙합니다. 동일한 인터페이스를 사용하여 스크립트는 "lcp" 매개변수 값에 적용한 경로를 사용하여 LCP를 미리 로드하고 테스트를 위해 HTML을 보간하기 위해 addPreloadAfter() 라는 함수에 전달합니다.

 async function handleRequest(request) { const { searchParams } = new URL(request.url); let lcpHref = searchParams.get("lcp"); return new HTMLRewriter() .on('title', addPreloadAfter(lcpHref)) .transform(newResponse); }

addPreloadAfter() 함수는 searchParams.get() 에서 "lcpHref" 값을 가져와 HTML을 빌드하기 위해 "href"로 처리합니다.

 const addPreloadAfter = (href) => ({ element: (el) => { el.after(`<link rel="preload" href="${href}" />`, { html: true }); } });

"html: true" 옵션이 보이시나요? HTML을 작성하는 HTMLRewriter() API 메소드와 함께 작업자를 사용할 때 Cloudflare가 안전을 위해 요구하는 옵션 설정입니다. 자신의 테스트를 코딩하기 위한 기능과 제약 조건을 배우고 싶을 것입니다.

Cloudflare의 KV

원격으로 흥미로운 작업을 수행하려면 스크립트 실행 간에 영구 데이터를 저장하는 방법이 필요합니다. 운 좋게도 Cloudflare는 ' key '로 액세스할 수 있는 작은 데이터 ' value ' 필드를 저장하기 위해 작업자와 바인딩할 수 있는 KV라는 깔끔한 작은 데이터 저장 메커니즘도 제공합니다. 놀라울 정도로 이해하고 구현하기 쉽습니다. 그것을 사용하는 방법을 보여주기 위해 우리는 빠른 적중 카운터를 작성할 것입니다.

 const counter = parseInt(await KV.get('counter') || 0); if (!host || counter > 1000) { return new Response('hit limit exceeded or x-host missing', {status: 403}); } else { await KV.put("counter", counter + 1); }

작업자 아래에서 KV 탐색 메뉴 항목을 찾습니다.

KV 네임스페이스 인터페이스. — 시작 값으로 0을 사용하여 KV 네임스페이스 및 카운터 변수 추가

네임스페이스를 생성했으면(위의 예에서 "SEL"이 사용됨) KV 대시보드 UI를 사용하여 첫 번째 키(위의 경우 ' counter ')를 생성하고 시작 value 을 할당합니다. 설정이 완료되면 새 KV 네임스페이스를 Cloudflare 작업자와 바인딩하는 데 필요한 인터페이스의 작업자 대시보드로 돌아가서 작업자가 키 및 연결된 저장된 값에 액세스할 수 있도록 합니다.

작업자에 KV 네임스페이스 바인딩

바인딩할 작업자를 선택하고 설정 메뉴를 클릭하여 변수에 대한 하위 메뉴(일반 바로 아래)를 찾습니다. 환경 변수, Durable Object Bindings(나중에 다룰 예정), 그리고 마지막으로 KV Namespace Bindings를 정의할 수 있습니다. 변수 편집을 클릭하고 스크립트에서 사용할 변수를 추가합니다.

다음의 경우, 우리가 탐색한 관련 Worker 스크립트에서 사용할 중복된 이름의 ' KV ' 변수를 볼 수 있습니다. ' KV '의 사용은 설명을 위해 명명되었습니다. 드롭다운에서 선택하고 저장하면 스크립트에서 즉시 variable 를 사용할 수 있습니다. 원하는 만큼 스크립트와 KV 네임스페이스 조합을 생성합니다.

트릭은 작업자에서 사용하려는 변수를 바인딩하는 것을 기억하는 것입니다. 너무 유연해서 처음에는 아무렇게나 뒹굴고 엉망이 될 수 있습니다. 나중에 응용 프로그램을 프로토타이핑하거나 응용 프로그램에서 사용할 마이크로서비스를 작성하기 위해 원하는 것과 정확히 일치하도록 구성할 수 있습니다.

KV 서비스와 시작 값을 설정했으면 작업자로 돌아가 내장된 "빠른 편집"을 엽니다. 적중 횟수 카운터와 이 게시물에 작성된 다른 모든 내용을 포함하는 업데이트된 요점으로 거기에 있는 내용을 교체하세요. "저장 및 배포"를 클릭하면 공개적으로 사용 가능한 작업자 데모 URL에서 서비스를 시작하고 실행해야 합니다.

우리가 관심을 갖는 이유

우리의 원래 가이드는 식욕을 돋우고 시작하게 하고 더 가치 있는 학습을 하게끔 하기 위한 것입니다. 이를 제공하기 위해 우리는 자체적으로 이해할 수 있을 만큼 간단한 무료 플랫폼 및 코드 조합과 함께 테스트 결과를 따르고 달성하기에 충분히 쉬워야 하는 프로세스와 함께 제공합니다.

개발자에게 SEO를 보여주기 위해 웹사이트 테스트를 표준화할 때 스크립트를 Cloudflare에 복사하여 붙여넣고 단계를 따르고 특정 SEO 전술을 테스트할 수 있을 때 코드를 이해할 필요가 없습니다. Core Web Vitals 테스트는 메트릭이 얼마나 의존적인지를 감안할 때 순위 향상을 위해 RUM(실제 사용자 메트릭) 성능 점수를 개선하는 것만큼 신뢰할 수 있습니다.

개발자를 위한 더 많은 SEO를 원하십니까? 2022년 3월 8-9일에 Detlef Johnson이 이끄는 SMX 마스터 클래스 교육에 참여하십시오.