CloudflareとWebpageTestを使用して進化するコアWebバイタル戦術

公開: 2022-01-25

CloudflareとWebpageTestを使用したコアWebVitals戦術のガイドでは、WebpageTestで戦術的なHTMLの変更をテストするためのリバースプロキシとしてCloudflareを使用するための基本的な要件の概要を説明しました。 私たちのバージョンのテストは、 HTMLRewriter()を使用して要素を選択し、コードを変更するPatrickMeenanの元の概念から簡略化されています。

このチュートリアルでは詳しく説明しますが、Cloudflare Workerスクリプトを探しているだけの場合は、ここで見つけることができます。

私たちの最初の記事は、検索エンジンランドでの変更に追いついていないことを指摘しました。 LCPはハードコーディングされており、動的ページとその値を操作するために必要になります。 WebpageTestには、公開時点で最もよく考えられたウォーターフォールチャートと想像以上の詳細がありますが、結果を得るのに最速の方法ではありません。

コマンドラインからの灯台

テストに必要な--extra-headersオプションを指定してLighthouseCLI（コマンドラインインタープリター）プログラムを実行すると、WebpageTestで行った方法でCoreWebVitalsの標準設定をシミュレートすることもできます。 ターミナルエミュレータから作業する必要があります。

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); } } })

エッジコンピューティングの能力（および費用対効果）を活用して、真剣に役立つテストを実施しています。 x-hostリクエストヘッダーを変更して、テストベッドにさまざまなサイトをロードし、DevToolsを開きます。 変換は必要ないかもしれませんが、あなたのマイレージは異なります。 フロントエンドの経験はあなたにそれの感触を与えます。

スイッチのようなコメントブロックは失敗し、少し実験が必要になります（必要なのはこれだけかもしれません）。 たとえば、一部のアセット参照はHTTPコロンなしで綴られる場合があります。 hrefまたはsrcが「//」で始まるパスを確認するために別の条件を記述してから、スクリプトで選択した要素の値を変更する必要があります。 実際のサイトにはないコンソールエラーが発生しないようにしてください。

灯台はあなたにLCPを与えます

Lighthouse、PageSpeed Insights、またはWebpageTestを使用してLCP参照を取得するのは比較的簡単です。 <div>または<p>でない場合など、LCPがプリロードの対象であると想定し、まだプリロードされていない場合は、スクリプトにURL'query param'構造体によるhref値を提供します（または、HTMLを返します。フォーム）プリロードを使用してページの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」値を取得し、それを「href」として処理してHTMLを構築します。

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

オプション「html：true」に注意してください。 これは、HTMLを書き込むHTMLRewriter() APIメソッドでワーカーを使用するときにCloudflareが安全のために必要とするオプション設定です。 独自のテストをコーディングするための機能と制約について学びたいと思うでしょう。

CloudflareのKV

リモートで興味深いことを行う場合は、スクリプトの実行の間に永続データを保存する方法が必要です。 幸いなことに、CloudflareはKVと呼ばれるすっきりとした小さなデータストレージメカニズムも提供しており、ワーカーとバインドして、「 key 」でアクセスできる小さなデータ「 value 」フィールドを格納できます。 驚くほど簡単に理解して実装できます。 使用方法を示すために、簡単な小さなヒットカウンターを作成します。

 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名前空間インターフェース。
開始値としてゼロのKV名前空間とカウンター変数を追加します

名前空間を作成したら（上記の例では「SEL」を使用）、KVダッシュボードUIを使用して最初のキー（上記の場合は「 counter 」）を作成し、開始valueを割り当てます。 セットアップが完了したら、ワーカーダッシュボードに戻り、新しいKV名前空間をCloudflareワーカーにバインドして、キーと関連する保存された値にアクセスできるようにするために必要なインターフェイスを確認します。

KV名前空間をワーカーにバインドする

バインドするワーカーを選択し、その[設定]メニューをクリックして、変数のサブメニューを見つけます（[全般]のすぐ下）。 環境変数、耐久性のあるオブジェクトバインディング（今後の記事で検討します）、そして最後にKV名前空間バインディングを定義できることに注意してください。 [変数の編集]をクリックして、スクリプトで使用する変数を追加します。

次のケースでは、関連するワーカースクリプトで使用する、冗長な名前の「 KV 」変数を確認できます。これは、ナビゲート元のスクリプトです。 「 KV 」の使用は、説明の目的で名前が付けられました。 ドロップダウンから選択して保存すると、すぐにスクリプトでvariableを使用できるようになります。 必要な数のスクリプトとKV名前空間の組み合わせを作成します。

KV名前空間バインディング。
KV名前空間バインディング。

秘訣は、ワーカーで使用する変数をバインドすることを忘れないことです。 それはとても柔軟なので、最初は気軽にぶらぶらして混乱させることができます。 後日、それをまとまりのあるものに整理できるようになるでしょう。これは、アプリケーションのプロトタイプを作成したり、アプリケーションで使用するマイクロサービスを作成したりできるようにするために必要なものです。

KVサービスと開始値を設定したら、Workerに戻り、組み込みの「クイック編集」を開きます。 そこにあるものを、ヒットカウンター、およびこの投稿に書かれている他のすべてを含む、この更新された要点に置き換えます。 [保存してデプロイ]をクリックすると、公開されているワーカーのデモURLでサービスが稼働しているはずです。

なぜ私たちが気にするのか

私たちのオリジナルガイドは、あなたの食欲を刺激し、あなたが始めて興奮し、より価値のある学習に興奮するようにすることを目的としていました。 それを提供するために、私たちは無料のプラットフォームとコードの組み合わせを持っています。これは、それ自体を理解するのに十分シンプルであり、テスト結果を追跡して達成するのに十分簡単なプロセスと組み合わされています。

開発者にSEOを示すためにウェブサイトのテストを標準化することで、スクリプトをコピーしてCloudflareに貼り付け、手順に従い、特定のSEO戦術をテストできる場合、コードを理解する必要はありません。 コアWebVitalsテストは、メトリックの依存度を考えると、ランキングを上げるためにRUM（Real User Metrics）のパフォーマンススコアを向上させるために取得するのとほぼ同じくらい信頼性があります。

開発者のためにもっとSEOをしたいですか？ 2022年3月8〜9日に、DetlefJohnsonが率いるSMXマスタークラストレーニングにご参加ください。