大家好,感谢您成为这个社区的一部分。
我正在这个网站上工作 orangecountymovers.com 并且渲染延迟和 LCP 非常慢。我尝试过在英雄滑块中预加载元素,注册了 siteground 高级 CDN,清理了 CSS,虽然它有所改进,但仍然很糟糕。有人可以插话吗?谢谢!
在 Siteground 上添加了 CDN 溢价 为英雄横幅元素添加了预加载 删除了未使用的 CSS
渲染延迟的直接原因是在首次绘制 LCP 和实际绘制之间存在大量 JavaScript 加载和运行。
LCP 通过预加载加载,并以内联样式静态地在 HTML 中找到,但直到加载脚本、运行其初始化代码并删除“预加载器”微调器 div 后,才会显示静态布局。
我发现这里出现了一些问题:
对 CSS 进行更多调整、使用 CDN 等不会在很大程度上解决这个问题。我建议:
捆绑你的CSS和JS
如果首次渲染确实需要 CSS 和 JS,请确保它们在所有这些图像之前加载
但是,乍一看,至少其中一些 JS 对于初始交互来说是不必要的,并且可以在加载和初始化中延迟(例如精美的图像滑入动画)。如果可能的话,请考虑拆分您的包,并推迟初始化 LCP 不需要的任何代码,甚至稍后再运行一帧。
例如,如果我禁用 JS 并删除预加载器 div,布局看起来都不错,但显然不是交互式的。考虑捆绑分割点是否可用于仅初始化完全必要的内容,或者仅隐藏交互元素并在初始化时将它们添加回页面布局。这样,当交互元素加载时,可以立即绘制页面(和 LCP)的总体框架。或者在这些方法之间找到一些不错的中间立场。
最后,这不会产生巨大的差异,但由于 LCP 图像的预加载现在运行良好,请务必在其上添加
fetchpriority="high"
以确保其保持良好运行 :)