缓慢的页面速度渲染延迟

Question

大家好，感谢您成为这个社区的一部分。

我正在这个网站上工作 orangecountymovers.com 并且渲染延迟和 LCP 非常慢。我尝试过在英雄滑块中预加载元素，注册了 siteground 高级 CDN，清理了 CSS，虽然它有所改进，但仍然很糟糕。有人可以插话吗？谢谢！

在 Siteground 上添加了 CDN 溢价 为英雄横幅元素添加了预加载 删除了未使用的 CSS

Answer 1

渲染延迟的直接原因是在首次绘制 LCP 和实际绘制之间存在大量 JavaScript 加载和运行。

LCP 通过预加载加载，并以内联样式静态地在 HTML 中找到，但直到加载脚本、运行其初始化代码并删除“预加载器”微调器 div 后，才会显示静态布局。

我发现这里出现了一些问题：

• PSI 使用 http/1.1 加载您的页面，因此并行加载所有这些图像和 JavaScript 文件时会受到影响。您可能会考虑在本地运行 Lighthouse（如在 DevTools 中）以获得稍微更实际的 http/2 负载
• 页面正在加载这些图像和 JavaScript 文件，至少在我的机器上，JavaScript 文件会在所有图像之后排队等待加载。这是有道理的，因为脚本标签都位于 HTML 的底部，如果第一次绘制不需要它们，那就太好了，但它们是，并且所有首先加载的图像都不是必需的。我数了一下，在这些脚本启动之前，有 40 个图像开始加载（图标、页面下方的图像等），这是一个巨大的数字！
• 然后，脚本在显示页面内容（最终到达 LCP）之前运行一些初始化代码。

对 CSS 进行更多调整、使用 CDN 等不会在很大程度上解决这个问题。我建议：

• 捆绑你的CSS和JS

• 如果首次渲染确实需要 CSS 和 JS，请确保它们在所有这些图像之前加载

• 但是，乍一看，至少其中一些 JS 对于初始交互来说是不必要的，并且可以在加载和初始化中延迟（例如精美的图像滑入动画）。如果可能的话，请考虑拆分您的包，并推迟初始化 LCP 不需要的任何代码，甚至稍后再运行一帧。

  例如，如果我禁用 JS 并删除预加载器 div，布局看起来都不错，但显然不是交互式的。考虑捆绑分割点是否可用于仅初始化完全必要的内容，或者仅隐藏交互元素并在初始化时将它们添加回页面布局。这样，当交互元素加载时，可以立即绘制页面（和 LCP）的总体框架。或者在这些方法之间找到一些不错的中间立场。

• 最后，这不会产生巨大的差异，但由于 LCP 图像的预加载现在运行良好，请务必在其上添加

  fetchpriority="high"

  以确保其保持良好运行 :)