WebPageTestの新しい機会と実験：実質的に何でもテストする

Web開発者のSEOへのアプローチにとって今ほど良い時期はありませんでした。

新しいツールとなじみのあるものの両方のツールとリソースが、私たちにとって革新的でオープンなオプションであるペースも、私たちが追いつくことを要求します。 最近、Googleがアルゴリズムの更新とメトリック計算の変更をリリースするにつれて、パフォーマンスの最適化に対する要件が増えています。

よく知っておくべきツールの1つは、WebPageTestです。 彼らは最近、いくつかの信じられないほど便利な新しい完全に統合されたテストツールをリリースしました。

WebPageTestは、Netlifyを介してユーザー指定のリアルタイムHTML変更をプロキシし、ユーザーインターフェイス内で比較テストを実行するようになりました。 コーディングは必要ありません。

天才は理にかなっています

関心のある3つの大きな領域のスマートアプリケーションロジックは、テキストの宣伝文句だけでなく、比較のためにバリエーションの組み合わせを実行するための再テストオプションを用意して、結果をバブルします。 WebPageTestで利用できる一連のテストは、直接テストできるものを複製するサードパーティのプロキシツールを使用してテストを設定する必要がなくなることを意味します。

これは以前はすべて技術的に可能であり、元のアプローチは引き続き重要です。

非常に包括的ですが、選択したプロキシホストを使用して実行する必要のあるテストが常にあります。 ただし、これにはJavaScriptとCloudflareの処理が必要です。

WebPageTestを使用すると、ポイントしてクリックすることができます。

厄介なラボデータ

ラボテストで得られた数値の可能な限り最良の組み合わせでは、現場で同じ数値が得られない場合があることを常に念頭に置いてください。 実際には、Webサイトの機能が破損する可能性があります。

スクリプトとスタイルには開発者が定義したロード順序があり、変更は本番環境に適さない重大な変更を意味する可能性があります。 プロキシホストは、最適化プロセスの一部としてQAへのアクセスを提供できます。

その警告が邪魔にならないように、HTMLの最適化を実証するためのテストベッドがどれほど素晴らしいかをお話ししましょう。 これは、1年以上にわたって私たちのワークショップと会議セッションの基礎となっています。

検索エンジンランドガイドの記事は、テストベッドの設定に役立ちます。 SMXAdvancedでは更新されたバージョンを使用します。 できればライブで参加してください。

機会

WebPageTextのOpportunitiesテキストは、レポートで誰でも利用できます。

HTMLバリエーションの比較を実行するためにJavaScriptのスキルはもう必要ありません。 代わりに、Experimentsというラベルの付いた組み込みのプロキシテストを実行するには、有料アカウントが必要になります。

無料のアカウントを使用すると、レポートや履歴にアクセスしやすくなりますが、Experimentsは実行されません。 JavaScriptを記述して、独自のテストを無料でプロキシすることもできます。

便利なところはどこにもありませんし、時間がかかりすぎます。

実験

WebPageTestレポートで[Opportunities＆Experiments]メニュー項目を選択すると、結果の包括的なリストが表示されます。

ここでの機会は、実際のテスト条件から導き出されます（可能な場合はハードウェアでシミュレートされます）。 私たちのテストは、レンダリングブロックリソースのバリエーション（通常はJavaScriptとCSS）、遅延読み込みされた画像、セルフホストのサードパーティスクリプトなどを試して再テストする機会を示しました。

インターフェイスを使用して、非同期、延期、またはインラインスクリプトとスタイルシートをテストします。 これらのテストをプロキシするためにCloudflareWorkerJavaScriptを作成してきました。また、フッターを含むコンテンツの読み込みをページの下部に延期するためのインラインスタイルルールを追加しました。 WebPageTest統合の初期配列は、元のテストのすべてではありませんが、ほとんどを処理できます。

今すぐテストをまとめるのは簡単です。

テスト設定を変更し、バリエーションの実行を開始して、全体的に緑色のCoreWebVitalsの聖杯に焦点を合わせます。 このオファリングは驚くほど包括的であり、Webページのパフォーマンスに影響を与えるものよりもはるかに多くをカバーしています。

次の質問によって、実験の機会をグループ化する3つのカテゴリが見つかります。

• 速いですか？ 迅速性は、パフォーマンス最適化実験を分類およびグループ化します。
• 使えますか？ ユーザビリティは、スクリーンリーダーやレイアウトシフトに影響を与える可能性のあるHTML検証エラーをグループ化します。
• 弾力性はありますか？ 復元力は、混合プロトコルを含むセキュリティ上の懸念につながります。 チェックボックスインターフェイスを使用してテスト設定を変更し、バリエーションの実行を開始します。 比較レポートで洗練されたオプションを取得します。

テストスイートのダッシュボード

WebPageTestは、テストスイートのダッシュボードに似ており、Lighthouseよりも詳細で、ChromeDevToolsよりもはるかに優れたウォーターフォールチャート表現を提供するレポート内でそれを実行する必要があります。

ポイントアンドクリックの場合は「コードなし」環境でHTML実験を実行できますが、提供される詳細とナビゲーションには経験が必要です。コーディングの経験が最適です。

新しい組み込みのExperimentは、すべてのJavaScriptを削除することで、別のCloudflareワーカータスクを複製します。 そのようなものにアクセスしやすいようにすることは、テストバリエーションのスクリプトを作成するよりも非常に便利です。

高度な実験により、主要な場所にHTMLを挿入したり、ロード順序を変更するための戦術をテストしたり、ロードに失敗したり、リソースの縮小を含む変更を行ったりすることができます。

文字通り、どのページでも実際に何かをテストすることを技術的に妨げるものは何もありません。

成功の落とし穴に陥る

比較レポート自体は、より多くのバリエーションを選択して再テストするための目標到達プロセスに役立ちます。 結果メトリクスバナーには、コントロールと実験の間のスコアの色分けされた改善および悪化が含まれます。

実験スイッチのサブセットを含む残りの機会セクションを以下に示します。 クリックして大幅な改善を行うことができます。

SMX Advancedでのデモンストレーション用のテストを作成するために大変な作業を行いました。ライブでは、使用したツールそのものに対するこのメジャーアップデートをカバーすることが期待できます。 それはとても簡単になるでしょう。

WebPageTest実験統合の高速テキストサイクルが、すでに提供する準備をしていたものを獲得するかどうかを確認します。 全面的にグリーンに到達できるかどうか見てみましょう。