最大的内容涂料 用户感受页

hujaifaaiyat

然而，在多个页面具有相似内容的情况下，页面体验可能是决定结果的决定标准之一。 LCP：面加载速度最重要的指标是LCP。该指标衡量加载性能并指示浏览器窗口中可见的最大内容的处理时间。 为了提供良好的用户体验，LCP 必须在页面加载开始后 2.5 秒内发生。Google 之前使用了一种称为 FMP（First Meaningful Paint）的测量方法，现在在 LightHouse 6 中已过时（解释起来很复杂，有时计算方法也不正确）。Google 更喜欢使用 LCP，这是一种更简单的测量方法，其工作原理如下：加载页面时，最大内容绘制 (LCP) API 会测量所考虑的主要元素在屏幕上的尺寸，即： – <img> 标签（或 <svg> 中的 <image>）； – < video > 标签–通过url() 在背景中具有图像的元素； – HTML 块类型元素) 将计算窗口中出现的每个元素的大小。



直到最重要的元素加载到屏幕上，最大的元素是下例中的图像： Lcp 通过显示水线以上的 中国数据 主要元素来定义 LCP 通过在水线上方显示父元素来定义 再举一个例子，在包含文本和主图像的页面上，浏览器将首先查找文本，在这种情况下，浏览器将发送性能标记（）类型为larger-contentful-paint（可能会引用 <p> 或 <h1>。 稍后，加载主图像后，将发送large-contentful-paint类型的第二个标记，并且其属性将引用<img>标记。 这是水线以上尺寸最大元素的标记，一旦页面加载，浏览器就会将其记住为 LCP。必须考虑到，在任何用户交互（按键、滚动、触摸屏幕）之后，浏览器将停止通过 API 发送信息，此交互可能会修改显示。 该度量以独特的方式对项目进行计数：包含多个图像的图像块不一定是最重要的项目。在下面的示例中，该段落被视为主要元素，因为它比每个图像都大。 文本元素被认为是 Lcp 计算中最重要的元素 文本元素被认为是 LCP 计算中最重要的元素。



为了优化 LCP，需要特别注意以下几点： – 服务器响应时间（TTFB）； – 可能阻止页面渲染的 JavaScript 和 CSS 文件； – 浏览器执行Javascript的时间； – 资源加载时间（图像、视频）。 为了改进 LCP，主要建议是在服务器端进行良好的缓存管理，异步加载 JS 文件（并且仅加载必要的元素），并以最佳方式压缩图像和视频。 这个 KPI 很有趣，因为它允许您同时衡量多个优化的影响。然而，需要进行彻底的分析来检测导致 LCP 减速的因素。 FID 和 CLS 解决影响 UX 的问题 这两个指标重点关注与用户交互相关的Webperf问题的影响：当用户想要与页面交互但它没有响应（FID）时，或者当页面渲染的同时进行交互时.并且在查看期间可能会单击错误的元素（CLS）。