每周平台新闻：布局偏移、高比特率视频卡顿、Firefox 屏幕截图

在本周的综述中：对抗布局偏移，一些视频可能会有点卡顿，以及在 Firefox 中截取屏幕截图的新方法。

让我们来看看新闻吧！

识别页面加载期间布局偏移的原因

您现在可以使用 WebPageTest 捕获网站在页面加载期间发生的任何布局偏移，并识别其原因。

步骤 1：粘贴代码片段

将以下代码片段粘贴到 webpagetest.org 中的“自定义指标”字段中，位于“自定义”选项卡（在“高级设置”下），并确保选择了 Chrome 浏览器。

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

步骤 2：检查条目

测试完成后，在“自定义指标”页面上检查捕获的 LayoutShifts 条目，该页面链接自“详细信息”部分。

步骤 3：检查胶片条

根据数据中的 "startTime" 和 "value" 数字，使用 WebPageTest 的胶片条视图来精确定位单个布局偏移并识别其原因。

(来自 Rick Viscomi)

高比特率可能导致视频卡顿

如果您从自己的 Web 服务器为您的网站提供视频，请注意视频比特率（作者建议使用 FFmpeg 和 streamclarity.com）。如果您的视频比特率超过 1.5 Mbps，则根据视频长度，3G 连接的用户可能会遇到一次或多次播放卡顿。

在本研究中，50% 的视频的比特率大于 3G 连接的下行速度，这意味着视频播放将被延迟并包含卡顿。

(来自 Doug Sillars)

Firefox 的 :screenshot 命令

Firefox 的开发者工具控制台包含一个强大的命令，用于捕获当前网页的屏幕截图。与 Chrome 开发者工具类似，您可以捕获单个元素、当前视口或整个页面的屏幕截图，但 Firefox 的 :screenshot 命令还提供高级选项来调整设备像素比和设置延迟。

// capture a full-page screenshot at a device pixel ratio of 2
:screenshot --fullpage --dpr 2

// capture a screenshot of the viewport with a 5-second delay
:screenshot --delay 5

(来自 Reddit)

在我的每周 星期日版 中阅读更多新闻，每周一早上通过电子邮件发送给您。

Web 平台新闻：星期日版 →