毎週のプラットフォームニュース：レイアウトシフト、停止したハイビトレートビデオ、Firefoxのスクリーンショット

今週のWeb Platform Newsは、レイアウトシフトデバッグ、ハイビットレートビデオの問題、新しいFirefoxスクリーンショット機能をカバーしています。飛び込みましょう！

WebPageTestを使用したレイアウトシフトの診断

WebPageTestは、ページの読み込み中にレイアウトシフトを特定するのに役立ちます。方法は次のとおりです。

ステップ1：カスタムメトリックを追加します

WebPageTestの「Advanced Settings」（カスタムタブ）で、このコードを「カスタムメトリック」フィールドに貼り付けます。 Chromeがブラウザとして選択されていることを確認してください。

 <code>[LayoutShifts] return new Promise(resolve => { new PerformanceObserver(list => { resolve(JSON.stringify(list.getEntries().filter(entry => !entry.hadRecentInput))); }).observe({type: "layout-shift", buffered: true}); });</code>

ステップ2：結果を調べます

テスト後、「カスタムメトリック」ページ（「詳細」セクションからリンク）で「レイアウトシフト」エントリを確認します。

ステップ3：フィルムストリップ分析

「起動時刻」と「値」データを使用して、WebPagetest FilmStripのシフトを見つけ、その原因を特定します。

（Rick Viscomi経由）

ハイビットレートビデオと3G再生

ビットレートを1.5 Mbpsを超える自己ホストのビデオは、3Gネットワ​​ークで再生ストールを引き起こす可能性があります。 FFMPEGやStreamClarity.comなどのツールは、Bitrateを監視するのに役立ちます。調査によると、ビデオの半分以上が3Gのダウンロード速度を超えており、再生の遅延と屋台につながることが明らかになりました。

（ダグシラーズ経由）

Firefoxの拡張スクリーンショットコマンド

Firefox Devtoolsは、強力な:screenshotコマンドを提供するようになりました。 Chromeの機能（要素、ビューポート、フルページスクリーンショット）を反映していますが、デバイスピクセル比と遅延オプションを追加します。

 <code>// Full-page screenshot at 2x DPR :screenshot --fullpage --dpr 2 // Viewport screenshot with 5-second delay :screenshot --delay 5</code>

（Reddit経由）

より多くのWebプラットフォームのニュースについては、毎週月曜日の朝に配信される毎週の日曜日のメールニュースレターを購読してください。

Webプラットフォームニュース：日曜日の問題→

以上が毎週のプラットフォームニュース：レイアウトシフト、停止したハイビトレートビデオ、Firefoxのスクリーンショットの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。