Mark Zeman
2025年5月15日 水曜日
SpeedCurvのサードパーティメトリックとダッシュボードを、リニューアルしました。CPUのブロックなどの新しい測定基準を使用し、サードパティタグが悪いユーザーエクスペリエンスを作り出している原因を見つけることができます。
また、個々のサードパーティを長期にわたって監視し、それらのパフォーマンスバジェットを作成することもできます。
サードパーティの識別
すべてのサードパーティタグを簡単に識別できるように、サードパーティのウォーターフォールチャートに、すべてのリクエストが自動的にグループ化されるようになりました。
それぞれのサードパーティタグでは、コンテンツタイプごとにリクエスト数とサイズを取得します。自分の要求のうちサードパーティの要求の割合を確認するために、オン/オフを切り替える自社比較もあります。
JS、CSS、CPUのブロック
多くの人は、サードパーティを恨みますが、それでも増やし続けユーザエクスペリエンスの劣化続けています。
リクエストを見たまえ、彼らに違いない！
サードパーティからのリクエスト数やリクエストのサイズを見るだけでは、それらが悪い原因かどうかを示すのに十分な指標とは言えません。 それらのリクエストを管理しようと構築されたWebページは、ページがレンダリングされてインタラクティブになる前に、それらのリクエストを遅らせることによって問題を簡単に無効にすることができます。
サードパーティタグでどうレンダリングか、インタラクティブ化をどうブロックするのか。
そのため、サードパーティごとに、ブロックしているJSまたはCSS要求が含まれているかどうかを確認します。 これにより、サードパーティからのブロック要求によりレンダリングが遅延しているかが分かります。 また、サードパーティによって引き起こされたブロッキングCPUも探します。 ブロッキングCPUは50msより長い時間がかかる（ロングタスクとして知られている）場合もあり、どんなJS関数でも、時々ページを低品質なものにします。 CPUをブロックすると、ユーザーがページとスムーズにやり取りできなくなり、First CPU IdleやTime to Interactiveなどの他の指標が悪化します。 これらのサードパーティのブロッキングは、何がそのページで問題を引き起こしているかを示す優れたメトリックです。
この例では、Vidibleは594ミリ秒のブロッキングCPUを使用しているため、ページに混乱を引き起こしますが、他のすべてのサードパーティはまったくCPUアクティビティを引き起こしません。 これにより、どのサードパーティが実際にどのようにユーザーエクスペリエンス問題を引き起こしているのかを特定することができます。
証拠を集めましょう！
ウォーターフォール内のどんなサードパーティに対しても、「Track Histoy（追跡記録）」をオンにすることができます。そしてテストを実行する度に詳細なサードパーティのメトリックを収集が可能です。 それから、サードパーティを監視し、パフォーマンスバジェットとアラートを設定できます。 これは、サードパーティが行っている可能性のある変更を監視し、ページへの影響を警告するのに最適な方法です。 SLAにサードパーティを合意させた上で、SpeedCurveを使用して監視および適用し、みなに誠実に、同一のページを表示させることもできます。
リクエストの追跡
そのタグがサードパーティと呼ばれていても、カスタムフィルタを構築し、リクエストグループを追跡することができます。 履歴を追跡してパフォーマンスバジェットを設定し、1つのリクエストに対してアラートを受け取ることもできます。 特定のJSリクエストを削減し、サイズまたはCPU使用率がバジェット内であることの確認が目的である場合は、特定のフィルタを設定して改善を監視できます。
貢献
Speed Cueveはサードパーティを識別するために自社ライブラリを持っていましたが、現在はサードパーティのリストが急速に増えているPatrick Hulceによるサードパーティウェブに切り替えました。 requestmapの名声を誇るSimon Hearneのようなperfコミュニティの多くの人々が、サードパーティを特定してサードパーティウェブに貢献しています。
そしてSpeed Curveもたくさん追加をしました！ ウォーターフォールチャートに「認識されていないサードパーティ」のリクエストがある場合は、それらをプロジェクトに投稿できます。
始め方
すでにSpeedCurveを使用している場合は、[設定]または[合成]> [サードパーティ]ダッシュボードでサードパーティの追跡をすぐに開始できます。 それ以外の場合は、無料トライアルを開始して、帯域幅とCPUを使い果たしているサードパーティ、または自身のリクエストであるかどうかを確かめてください。
