CloudflareのHTMLRewriterを使用したコアWebVitals戦術の関数

公開: 2022-02-04

CoreWebVitalsのA/Bテストガイドでは、フロントエンドコード戦術のテストを作成するための2つのサービスとブラウザー拡張機能を備えた一連の小さな手順について説明しました。 30年前は、同じ種類の推奨事項を示すためにWeb対応フォルダーに配置されたページの複製を管理できるようになるまで、ページの生のソースをコピーして検索と置換の操作を実行していました。

もうそれをする必要はありません。

20年前にSEOを実施するためのリバースプロキシの設定とソフトウェアの作成は、インフラストラクチャを独自に構築してホストする少数の企業に限定されていました。 Cloudflareはターンキーソリューションを提供します。無料のアカウントを使用して起動して実行できます。フロントエンドコードを変更するには、CloudflareのHTMLRewriter() JavaScriptAPIを使用します。

コードは比較的理解しやすいです。

Core Web Vitalsの場合、最終的に価値を示し、本当に感銘を与えるのは、さまざまなテストを循環できる即時性、認識されたニーズ、および迅速性です。基本的なプラットフォームは、ガイドで概説されている手順を通じて利用できます。実際の戦術のテストをすぐに開始できるように、ありふれた変更を行うための関数を作成します。

HTMLRewriter（）

フォローしている場合は、スクリプトがLCPのリクエストパラメータで指定できる要素をプリロードするオプションを提供していることをご存知かもしれません。参照を簡単に追加できるように、値が欠落している場合はフォームを返します。 重要度と呼ばれるもののプレースホルダーもあります。これについても説明します。重要なのは、私たちが何をしようとしているのかを理解することです。

HTMLRewriter() APIを使用すると、jQueryスタイルの要素セレクターを使用して生のページソースのHTML要素にアタッチし、その足場からJavaScriptを実行できます。強力な方法で、要素、要素のグループ全体、またはベースドキュメントを変更することができます。たとえば、ページのタイトルを編集できます。本番環境では、編集内容がタイトルになり、GoogleとBingでインデックスに登録されます。

発生する問題の1つは、未加工のソースのみを編集でき、ハイドレイテッドドキュメントオブジェクトモデル（DOM）は編集できないことです。生のソースを表示する簡単な方法の1つは、ブラウザーに組み込まれているビューソース機能を使用することです。 Firefoxの場合、たとえば、view-sourceは検証エラーを赤で強調表示します。ブラウザが壊れたHTMLを「修正」する場合でも、これは通常、ワーカーで修正できます。

DevTools内で作業する場合、[ソース]タブから生のソースにアクセスできます。プリファレンス設定を使用して、ソースを常に「きれいに印刷」します。これにより、コードをスキャンして最適化を探すことができるようにフォーマットされます。もう1つの設定のヒントは、DevToolsが開いているときにキャッシュをバイパスする設定です。このワークフローは、最適化によって参照エラーが発生しないようにするために役立ちます。

要素セレクター

HTMLRewriter()で修正したいものを見つけたら、変更を絞り込み、要素を分離して、意図したよりも多くのコードを変更しないようにする必要があります。可能な限り最も排他的なセレクターを使用します。これは、要素に一意のIDがある場合に非常に簡単になります。それ以外の場合は、 hrefまたはsrc属性内の一意の場所への参照など、わかりやすい記号を見つけます。

ワイルドカードと、属性値に一致する「コマンドモード」のvimスタイルの正規表現を使用する機能があります。同じ属性名であっても、複数の基準を指定することもできます。 vimのパワーを使用して、一致を単一の要素に絞り込んだり、要素のグループをより広い表現で一致させたりします。ロジックは、変更間の関心の分離を行うことができます。

fonts.googleapis.comのワイルドカード「fonts.g」プリフェッチリンク要素を一致させてそれらを削除する例。

 .on(`link[rel="dns-prefetch"][href*="fonts.g"]`, removeEl())

href属性の2つの一致を示し、多数の中から1つのファイルを絞り込んだ例。

 .on('link[href^="https://example.com/static/version"][href$="/print.css"]', unblockCSS())

上記の最初の例では、ワイルドカードの一致を使用しており、文字列「fonts.g」はリンク要素のhref属性のどこにでも表示できます。これは、一致する要素がある場合はそれを削除するなど、適切なアクションのために複数のリンク要素にアタッチされる可能性のある部分一致の例です。

上記の2番目の例は、文字列で始まり、別の文字列で終わる特定のリンク要素を選択する方法を示していますが、その間に何でも含めることができます。これは、ビルドシステムの一部である単一の要素を選択する場合に役立ちます。これにより、動的に名前が付けられたブラウザのキャッシュバスティング用のバージョン管理トークンディレクトリが存在する可能性があります。

リンク要素

リンク要素は、いくつかの属性によって多面的です。したがって、それらは多くの目的を果たすことができます。リンクと混同しないように（アンカーの場合のように）、リンク要素は通常、迅速なパフォーマンス戦略を探し始める場所です。一部のプリロードおよびプリコネクトリンク要素は、実際に邪魔になるか、まったく不要な場合があります。

同時に接続できるホストは最大6つだけです。あなたの最初の戦略はそれらを最大限に活用することです。すべての優先度ヒントリンク要素ステートメントを削除して、結果をテストしてみてください。タイミングが間違っている場合は、一度に1つずつ追加して、それぞれの実際の影響をテストします。 WebpageTestウォーターフォールチャートを詳細に読み取る方法を学ぶ必要があります。

これに続いて、戦術はリソースの読み込みに進みます。これには、リンク要素もかなり多く含まれますが、排他的ではありません。この時点で、スクリプトも調べたいと思います。リソースがロードされる順序は、物事に非常に悪い影響を与える可能性があります。私たちのテストベッドは、ウォーターフォールチャートを読んで収集したさまざまな戦術を試すのに最適です。 DevToolsのコンソールドロワーを開いたままにして、作業中にエラーがないか確認します。

要素の削除

要素の削除は非常に簡単です。要素またはそのグループを選択したら、 HTMLRewriter().on()ステートメントの次のフィールドでスクリプトブロックを記述します。これは、中括弧を使用して適切に行うことができます。名前付き関数を参照できます。または、以前に定義したオブジェクトの新しいclassインスタンスを作成することもできます。このコンテキストでは、過剰なエンジニアリングが行われている可能性があります。

サンプルのWorkerコードに遭遇すると、 class初期化子が表示される場合があります。要素を削除するために本当に必要なのは、次の関数だけです。名前付きクラスオブジェクトで行われることはすべて、より少ないコード、より少ないバグ、より読みやすい構文、およびはるかに教えやすいものを使用して、プレーンな関数（オブジェクト）で行うことができます。耐久性のあるオブジェクトを詳しく調べるときに、 classコンストラクターを再検討します。

 element: (el) => { el.remove(); }

簡単に言うと、このブロックは要素インスタンスを参照して変数「el」を定義し、コードブロックは組み込みのremove()要素メソッドを呼び出します。これについては、対応するドキュメントで詳しく説明しています。すべてのHTMLRewriter()要素メソッドは、要素一致のインスタンスで使用できます。要素の削除は、理解しやすいものの1つです。

レンダリングブロックリソースのブロックを解除する

script要素のブロックを解除することは、スタイルシートリソースのブロックを解除するよりもはるかに簡単です。運が良ければ、スクリプトを非同期にロードするか、スクリプトを完全に延期する（アイドル時間がある場合）ことをブラウザーに通知するためのブール属性があります。それは理想的です！一方、スタイルシートは、ブロックを解除するために少し「ハック」する必要があります。インラインJavascriptが必要です。

基本的に、スタイルシートのリンク要素参照をプリロードに変換してブロックを解除します。ただし、これにより、リンク要素の性質が、スタイルルールが適用されない性質に変わります。プリロードはリソースをダウンロードしてローカルキャッシュに保存し、必要なときにすぐに使用できるようにしますが、それだけです。 DevToolsは、リソースがプリロードされていて適切に使用されていない場合に警告します。これは、リソースを削除できることがわかっている場合です。

プリロードしてからonload属性を使用してJavaScriptを実行し、プリロードからスタイルシートに戻すことは、CSSの「ハック」であり、それ以外の場合は自然にレンダリングをブロックするリソースのブロックを解除します。 JavaScriptのthisキーワードを使用すると、 rel属性（およびonload属性自体）を含むそのプロパティを変更できます。このパターンには、JavaScript以外のセッションの埋め戻しもあります。

これは、既成の要素メソッドを使用して戦略を実装するunblockCSS()関数です。

 const unblockCSS = () => ({ element: (el) => { el.removeAttribute('media'); el.setAttribute('rel', 'preload'); el.setAttribute('as', 'style'); el.setAttribute('onload', "this.onload=null;this.rel='stylesheet';this.media='all'"); el.after(` `, { html: true }); }});

レンダリングをブロックしているリンク要素のスタイルシート参照を選択し、それらに対してこの関数を呼び出します。これにより、ブラウザはスタイルシートをプリロードしてダウンロードを開始できます。ロードされると、 rel属性はスタイルシートに戻り、CSSルールがすぐに適用されます。この変更後にスタイルの問題が発生した場合は、1枚以上のシートを通常のリクエスト順にロードする必要があります。

この関数は、再利用可能なコードブロックとして機能します。 HTMLRewriter()を使用して要素の選択を切り替え、アプローチに応じて、CSSシートのブロックを一度に1つずつ、またはグループで解除する違いをテストします。戦術を利用して、可能な限りブロックを解除する全体的な戦略を達成します。ただし、CSSおよびスクリプトリソースの変更に起因する問題を常に探すことを忘れないでください。

スクリプトの優先順位

スタイルをロードする順序によって、デザインが失敗する可能性があります。予期せず高速にロードされるスタイルシートルールは、ロードが遅いスタイルシートルールによって上書きされます。また、スクリプトが評価され、ドキュメントが評価されたときにメモリに常駐するように、スクリプトを別の順序でロードしている間も監視する必要があります。参照エラーは、数十または数百のスクリプトエラーにカスケードする可能性があります。

問題をチェックする最良の方法は、コンソールドロワーを監視し、低速のネットワーク接続をシミュレートすることです。これにより、問題が誇張されて、DevToolsで明らかになる可能性があります。スクリプトリソースがより強力なCPUを使用して処理され、ケーブルモデムの速度以上でロードされる場合、重大なエラーを見逃す可能性があります。リクエストも適切な間隔で配置されます。

これが、非同期属性と延期属性を変更または追加する関数です。

 const makeAsyncJS = () => ({ element: (el) => { el.removeAttribute("defer"); el.setAttribute("async", "async"); } });

 const makeDeferJS = () => ({ element: (el) => { el.removeAttribute("async"); el.setAttribute("defer", "defer"); } });

スクリプトに元々非同期または延期がない場合は、より再利用可能なコードブロックに対してremoveAttribute()要素メソッドを実行しても問題はありません。スクリプトで以前に定義した関数を呼び出すのではなく、このインラインで作成する可能性のある1回限りのプロジェクトですばやく作業している場合は、これを安全に無視できます。

SEOの代替属性

前述のように、A / BコアWebバイタル戦術のガイドは、設計上、完全に機能するエッジコンピューティングをテストベッドでテストして実行し、将来のSEOforDevelopersの記事や将来のイベントでコンテンツをデモンストレーションすることを目的としています。昨年（2021年）のSMX Westイベントでは、Cloudflare WorkersをWebサイトに使用して、Lighthouse花火を達成するデモを行いました（すべてのテストで100点を獲得）。

花火を手に入れるために必要なものはたくさんあります。重要な側面の1つは、すべての画像に有効なalt属性が必要であるということです。このテストでは、 alt属性のテキストが「説明なし」であるか、存在するが空であるかを検出できます。関連する画像の内容を表す言葉が必要です。これを行う1つの方法は、 src属性からファイル名を解析することです。

これは、 img src属性からテキストを抽出して、ハイフンを使用してファイル名からaltテキストを強化する関数です。

 const img_alt = element.getAttribute('alt'); const img_src = element.getAttribute('src'); if (!img_alt) { element.setAttribute('alt', img_src.replace('-', ' ')); }

一言で言えば、これはalt属性値がない画像の状態を探します。 src属性のファイル名がハイフンでつながれている可能性がある場合は、ハイフンをスペースに置き換えて、適切な値を指定します。このバージョンは、ほとんどの場合機能しません。スラッシュやプロトコルおよびドメインを置き換えるものではありません。これは単に出発点として機能します。

パフォーマンスと可視性の向上をテストします

さまざまなコアWebVitalsパフォーマンス最適化戦術を試すためのテストベッドを持つことは、サイト所有者にとって非常に印象的です。あなたはあなたの代理店の兵器庫にこの能力を持っているべきです。良いスコアでわずかにGoogleのランキングが上がることは、測定可能であり、ほとんどのサイトで、これから説明および実証する戦術を通じてほぼ達成可能です。 3月8日から9日までのライブパフォーマンスにご注目ください。

SEO技術者は、検索エンジンランキングのパフォーマンス向上を長い間推奨してきました。ランキングのメリットはかつてないほど明確になっています。 Googleは文字通りメトリックを定義し、その効果について公開しています。ここで画像のalt属性を使用して示すように、EdgeSEOレメディを実装するCloudflareワーカーがいます。 Cloudflareのおかげで私たちのリバースプロキシテストベッドは、開発者との豊かなコミュニケーションのための準備を整えます。