Weekly Platform News: Layout Shifts, Stalled High-Bitrate Videos, Screenshots in Firefox

This week's web platform news covers layout shift debugging, high-bitrate video issues, and a new Firefox screenshot feature. Let's dive in!

Diagnosing Layout Shifts with WebPageTest

WebPageTest now helps pinpoint layout shifts during page load. Here's how:

Step 1: Add a Custom Metric

In WebPageTest's "Advanced Settings" (Custom tab), paste this code into the "Custom Metrics" field. Ensure Chrome is selected as the browser.

<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>

Step 2: Examine Results

After the test, check the "LayoutShifts" entries on the "Custom Metrics" page (linked from the "Details" section).

Step 3: Filmstrip Analysis

Use the "startTime" and "value" data to locate the shifts in the WebPageTest filmstrip and identify their causes.

(via Rick Viscomi)

High Bitrate Videos & 3G Playback

Self-hosted videos with bitrates exceeding 1.5 Mbps may cause playback stalls on 3G networks. Tools like FFmpeg and streamclarity.com can help monitor bitrate. A study revealed that over half of videos have bitrates exceeding 3G download speeds, leading to playback delays and stalls.

(via Doug Sillars)

Firefox's Enhanced Screenshot Command

Firefox DevTools now offers a powerful :screenshot command. It mirrors Chrome's functionality (element, viewport, full-page screenshots), but adds device pixel ratio and delay options.

<code>// Full-page screenshot at 2x DPR
:screenshot --fullpage --dpr 2

// Viewport screenshot with 5-second delay
:screenshot --delay 5</code>

(via Reddit)

For more web platform news, subscribe to the weekly Sunday email newsletter, delivered every Monday morning.

Web Platform News: Sunday issue →

The above is the detailed content of Weekly Platform News: Layout Shifts, Stalled High-Bitrate Videos, Screenshots in Firefox. For more information, please follow other related articles on the PHP Chinese website!