还有另一个关于简化绘制过程复杂度的指南
代码范例： <link rel="preconnect" href="https://site.com"> 如果只想尽早处理连接的部分，那还有 DNS 预取(DNS-prefetch)。绿色(DNS)部分会提前连接，但其余的连接部分将在稍后发生。DNS-prefetch 比 preconnect 有更好的技术支持，但是如果查看当前的使用统计数据，差异几乎可以忽略不计。如果知道需要尽早加载来自该服务器的某些内容使页面正常运行，则预连接通常会更好。但是由于预连接需要更多的路由和安全工作(橙色和紫色)，所以它在早期也会占用更多的资源。 代码范例： <link rel="dns-prefetch" href="//asset1.com"> 浏览器如何渲染页面 在我们继续讨论优化选项之前，我认为最好先了解一下浏览器如何渲染页面。我们现在有其他文件像是 CSS、JavaScript、图像和字体，浏览器必须将它们与 HTML 一起转换成有用的东西。随着新文档的引入、下载、解析，这会是一个动态过程，并不断重新排列内容以构建页面，这个过程通常称为关键渲染路径，它看起来像这样： HTML被处理成我们前面提到的DOM树 CSS 被解析为 CSS 对象模型 (CSSOM)，它告诉浏览器所有内容的样式、填充、颜色、大小等 CSSOM 与 DOM 一起构成了所谓的渲染树 根据渲染树中的内容，来处理每个元素在浏览器视口中的位置来布局 像素被绘制在屏幕上，因此你看到的不是白色屏幕，而是颜色、形状、文本和图像。小提示.Google 的 Martin Splitt 透露了一个有趣的事实，就是 Googlebot 通过不实际绘制页面 手机号码数据 像素来节省时间和资源，他们在布局后就拥有所需的信息。 目标应该是尽早获得所需的元素，以尽可能快地构建初始视图，可视加载时间是人们对页面速度的感知视图，也就是内容在他们屏幕上出现的时间。对此影响最大的是资源的加载方式，通常由 CMS 或 JavaScript 框架负责帮助浏览器确定何时/什么/如何加载资源的优先级，以使站点显示得更快，稍后会详细介绍。 你还希望在布局阶段保持简单、避免复杂的计算和大量更改，谷歌在这里有一个以开发人员为中心的指南。 视觉加载指标： 首次绘制 First Paint (FP) 浏览器首次渲染任何东西 首次内容绘制 First Contentful Paint (FCP) 浏览器从 DOM (文档对象模型)渲染一些东西，可以是文本、图像等 首次有效绘制 First Meaningful Paint (FMP) 加载视觉上最重要的元素 最大内容绘制 Largest Contentful Paint (LCP) 折叠上方加载的最大元素 视觉完成 Visually Complete 页面视觉化加载 速度指数 Speed Index 考虑到多个时间点视觉加载的计算得分 累积布局偏移 Cumulative Layout Shift (CLS) 测量加载期间元素在视口中移动程度或是布局的稳定性。这里有一个很好的指南关于造成 CLS 的形成。 推文译：“如果你不能衡量它，你就无法改进它” http://web.dev/metrics 介绍了如何衡量现代网络性能指标并优化他们。
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGlD3laaBFrLQdpiyRfsCOL2_mx_FqxIj9pRsgiNBckfWlh58Gzec1Hq-9iz4xrTRtseB8q4o_ufhBGMC6xcFvo3tHVfl8ppSRWrYUmmNT35wVdiie0LvBv8qqof-qocX9a_MzhgerM5IIikGAJ9538ONwUH6Upg1lWpirEuk3FV9e5NBBMCYQbbCuqDvd/s467/Phone%20Number%20Data.......jpg
通过瀑布图查看视觉加载 在 WebPageTest 的摘要(Summary)部分，如果你启用录制，那么主表中应该有一个带有“Filmstrip View”的视频列。在该视图中，顶部带有视觉快照的红线与底部瀑布图的红线位于同一点。 通过将红线移动到视觉加载图中的不同点，应该能够查看刚刚加载到瀑布图中的内容，它允许不同元素在视觉显示呈现，这可以帮你确定可能需要优先处理哪些文件。 例如，如果你看到除了文字之外页面大部分都已加载，但紧接着加载了字体并显示了文字，那很好的表明需要使用字体来显示文字。你还可以简单的查看生成的屏幕截图来判断不同视口下可能需要哪些图像。 此图表底部是其他信息，例如 CPU 使用率、带宽、浏览器主线程上的活动和交互性，所有这些图表再次说明取决于设备和连接类型，这些信息可用于帮助解决不同的问题。
頁:
[1]