如何修复最大内容绘画元素

Question

我想修复 LCP（最大内容绘制）。我的网站 (https://kreativehive.ca/) 建立在 WordPress 上。我已经安装了 wp Rocket 但它不能完美工作。请给我您如何解决这个问题的建议。

目前最大的内容绘制元素分数是 3.9 秒，我想将其设为 1.5 秒

Answer 1

根据我对

https://kreativehive.ca

的初步分析，要改进 LCP，请尝试以下建议，

1. 缓存 + CDN：通过 CDN 缓存和服务您的网站将有助于降低

   TTFB

   ，根据您的屏幕截图，这是导致 LCP 分数不佳的主要原因。

2. 优化CSS

   • 问题：您的主要 CSS 大小为

     ~1.1 MB

     ，在页面加载时需要时间下载。
   • 解决方案
     • 生成关键CSS并将其添加为内部样式表并延迟加载当前的CSS样式表（或）
     • 将当前 CSS 分成更小的块。预加载负责 LCP 的 CSS。延迟加载所有其他 CSS 块。
     请注意，优化样式
   <link rel="preload" ...>
   • 并不容易，但可能是必要的。
3. 预加载

   负责 LCP 元素的资产，如字体、背景图像...

根据我的经验，改善LCP的方法有多种，但没有一个公式可以适用于所有站点。有些策略会起作用，有些则不会。大多数网站都需要定制的解决方案。