LCP全称为 Largest Contentful Paint，是一个衡量网页加载性能的重要指标，它代表了网页主要内容的加载速度。具体来说，LCP 测量的是从用户开始加载页面到视口内最大的图像或文本块渲染完成的时间。为了提供良好的用户体验，网站应努力在至少75%的页面访问中实现2.5秒或更少的LCP。
在很多WordPress站点中，都会在页面首屏使用一张较大的图片作为背景或Slider 来吸引用户关注。这些图片没有加载之前，图片所占的区域会显示空白或替代颜色背景，用户体验不是太好。在有些主题中，会使用「网站加载器」来优化这一方面的用户体验，但是会降低整个页面的打开速度，很难说对整体用户体验是正优化还是反优化。
使用 rel=”preload” 属性来预加载网站关键图片
其实，使用HTML的 rel=”preload” 属性，我们就可以预加载这些图片，让用户在打开网站页面时，能够及时看到这些Banner 图片。实现这一点其实很简单，看一下下面的代码就一目了然了。
<link rel="preload" as="image" href="path/to/your/image.jpg">除了预加载图片资源，我们还可以预加载视频、字体文件、CSS和JS文件这些需要在页面首屏中用到的静态资源。
相关资源
- 关于优化LCP的更多信息，可以查看谷歌关于优化 Largest Contentful Paint的文章。
- 关于 rel=”preload” 的更多信息：可以查看 MDN 关于 rel=preload 的文档
