预加载 Largest Contentful Paint 图片

什么是预加载？

预加载资源会触发浏览器提前下载资源，甚至在浏览器的主要渲染启动之前。这确保资源更早可用，不太可能阻塞页面渲染，从而在大多数情况下提升性能。

<link rel="preload" 
as="image" 
href="image.jpg" 
imagesrcset="image_400px.jpg 400w, image_800px.jpg 800w">

为什么应该预加载 Largest Contentful Paint 图片？

可见且在视口内的图片将具有较高优先级，并在整个页面加载过程中较早被下载。Chrome 等浏览器会尽力为您优先处理这些图片，通常做得很好。但浏览器会对下载顺序做出有根据的推测，有时会将远程 JavaScript 或其他可见图片的优先级排在 LCP 图片之前。

由于这种行为，LCP 图片的下载不会像您期望的那样早开始。预加载 Largest Contentful Paint 图片将解决这个问题。

预加载 Largest Contentful Paint 图片如何影响页面性能？

预加载 Largest Contentful Paint 图片将使图片在渲染过程中更早可用。这通常会带来更好的 LCP 分数。在几乎所有情况下，预加载 LCP 元素都会为您带来更好的 Lighthouse 和 RUM 分数。

当 LCP 图片由于某种原因不是第一个被下载的图片时，预加载 LCP 元素可能会更加有益。这可能发生在以下情况：

• 可视视口中有多张图片
• LCP 图片是背景图片（背景图片通常比前景图片更晚下载）
• LCP 元素依赖于 JavaScript。例如使用滑动脚本，或者您的网站构建在 REACT 等 JavaScript 框架上。

如何预加载 Largest Contentful Paint 图片

预加载 LCP 图片相对简单。只需三个步骤：

1. 确定 LCP 元素：运行 Lighthouse 审计并检查 Largest Contentful Paint 元素。确保 LCP 元素确实是一张图片！
2. 检查响应式图片格式。如果您使用响应式图片，需要将所有图片尺寸添加到预加载标签的 srcset 中。否则我们会预加载错误的图片，这只会拖慢页面。
3. 添加预加载标签。剩下要做的就是添加预加载标签。语法很简单。

<link 
   <!-- indicate preload -->
   rel="preload" 
   <!-- as is required and indicates we are preloading an image -->
   as="image" 
   <!-- image src -->
   href="wolf.jpg" 
   <!-- optional: the responsive image srcset -->
   imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w">

如何在 Wordpress 中预加载 Largest Contentful Paint 图片

在 Wordpress 中预加载 Largest Contentful Paint 图片一点也不难。通常 Largest Contentful Paint 图片是博客文章或页面的特色图片。只需几行代码，我们就可以获取特色图片的 URL 和 srcset，并将其添加到页面的 head 中。

只需将此代码直接添加到当前模板的 header.php 文件中 title 元素之后。

<?php if((int)get_post_thumbnail_id() > 0){?>
 $imgurl = get_the_post_thumbnail_url();
 $srcset = wp_get_attachment_image_srcset(get_post_thumbnail_id());
 <link rel="preload" 
       as="image" 
       href="<?php echo $imgurl;?>" 
       imagesrcset="<?php echo $srcset;?>">
<?php } ?>.