Chromeに負けるな、EdgeにWebサイトの読み込み遅延、原因を自動検出する新機能：ユーザー体験を損なうリソースを特定

Microsoft EdgeにWebサイトの読み込みパフォーマンス改善機能「Network Efficiency Guardrails」が追加された。

[＠IT]

　Microsoftは2026年3月17日（米国時間）、Webブラウザ「Microsoft Edge」向けに、Webアプリケーションの読み込みパフォーマンスを改善する機能「Network Efficiency Guardrails」を追加した。

　大規模なWebアプリケーションは多くの独立したコンポーネントで構成されており、それぞれが独自のデータやリソースを読み込む。これらの要素が単一のネットワーク接続を奪い合うことで通信の混雑が発生し、UX（ユーザー体験）を損なう要因となっている。

　さらに、Webアプリケーションが自社とサードパーティーのコンテンツを組み合わせている場合、パフォーマンスの最適化は自社で開発した部分だけでなく、これら個々の要素に依存する。

　Microsoftは、「読み込み時間を改善するには、まずどのリソースを最適化すべきかを特定することが不可欠であり、Network Efficiency Guardrailsはまさにその機能を提供するものだ」と述べている。

Network Efficiency Guardrailsの利用方法

　Network Efficiency Guardrailsは、Webブラウザ側でアプリケーションのネットワークリソース使用状況を監視し、あらかじめ定義された「非効率なリソース読み込みパターン」に合致した場合、レポートを送信する。

Network Efficiency Guardrailsを活用したWebアプリケーション改善フローのイメージ（提供：Microsoft）

　現在、以下のパターンを違反として検出するという。

• HTTP圧縮されていないテキストベースのリソース
• 200KBを超える画像
• 100KBを超える「data: URL」（埋め込みデータ）

　これらの基準は集計データ、業界のベストプラクティス、Webアプリケーションに関する包括的なレポート「Web Almanac」の調査結果に基づいて設定されており、Microsoftは今後のフィードバックやデータに応じて値を変更する予定だ。

Network Efficiency Guardrailsの利用方法

　同機能を利用するには「Microsoft Edge 146」以降が必要だ。以下の手順で機能を有効化できる。

1. Microsoft Edgeで「edge://flags」を開く
2. 上部の「Search flags」テキストボックスに「Experimental Web Platform features」と入力する
3. ドロップダウンメニューから「Enabled」を選択する
4. Microsoft Edgeを再起動する

　次に、ドキュメントポリシーを設定してサイトで機能を有効化する。設定方法は2つある。

1. サーバからHTTPレスポンスヘッダを送信する方法

　以下のレスポンスヘッダをサーバから送信して設定する。

Document-Policy: network-efficiency-guardrails; report-to=neg-endpoint
Reporting-Endpoints: neg-endpoint="/neg-reporting/"

　ここでの「report-to」のエンドポイント名や値は、Webブラウザにレポート出力を開始させるための仮設定だ。そのため、サーバ側でエンドポイントを構築していなくても検証作業を進められる。

2. DevToolsのローカルオーバーライドを使用する方法

　DevToolsでローカルオーバーライドを作成して上記のレスポンスヘッダを設定する。サーバのコードを変更する必要がないため、手早く検証を始めたい場合に便利だ。

レポート内容の確認方法

　いずれかの設定を終えた後、Webアプリを通常通り使用すると、Webブラウザが問題のあるネットワーク使用パターンを報告し始める。違反が検出されると、DevToolsのコンソール画面でエラーメッセージとして表示される。また「アプリケーション（Application）」の「Reporting API」セクションで、各レポートの詳細情報を把握できる。

本番環境でユーザーからのレポートを収集する

　本番環境でユーザーのデバイスからレポートを収集するには、レポートを受信するためのサーバ側のエンドポイントを稼働させる必要がある。

　前述の「Document-Policy」および「Reporting-Endpoints」ヘッダで指定した任意のパス（例：/neg-reporting/）に合わせて、サーバ上にエンドポイントを構築し、レポートを受信できることを確認する。クロスオリジンエンドポイントを使用している場合は、プリフライトリクエストを受け入れるようにする。

クライアントサイドでのレポート確認

　JavaScriptコードを使用して、クライアントサイドで違反レポートを取得することも可能だ。「ReportingObserver」インタフェースを利用して発生したレポートにアクセスし、「ReportBody.featureId === "network-efficiency-guardrails"」に該当するレポートを探すことで、自社の分析ツールへ転送したり画面に警告を出したりする処理を実装できる。

詳細情報とフィードバックの提供先

　Microsoftは、Network Efficiency Guardrailsについて開発者からのフィードバックを受け付けている。詳細な運用方法やフィードバックの提供方法については、MDNの「Reporting API」ドキュメントおよび「GitHub」で確認できる。