如何根据屏幕尺寸预加载正确数量的图像？

问题描述

我正在努力优化 Largest Contentful Paint (LCP)，但无法根据设备大小预加载正确数量的 LCP 候选图像。

问题：

• 在小屏幕上，单张图片显示在轮播中
• 在较大的屏幕上，最多可以显示四张图片
• 我无法控制所述图像的大小，这意味着任何图像都可以成为 LCP 候选
• 在小型设备上加载所有四个图像是不行的：浪费带宽并影响性能

想要的解决方案：

• 在小屏幕上只预加载一张图片
• 在大型设备上预加载所有四个图像

我的第一个想法是显而易见的，使用 link els 的 media 属性来决定加载什么；但是，无论如何都会下载所有资源（参考 1、2）。

我不喜欢我目前最好的“解决方案”：使用 link 的 imagesrcset + imagesizes 属性加载第一个图像，而后一个图像在小型设备上为 1px x 1px。

例如

<link 
  rel="preload" 
  as="image" 
  href="image1" 
  imagesrcset="image1-small 100w 200h,image1-large 200w 400h" 
  imagesizes="(max-width: 40em) 100vw,400px"
>

<link 
  rel="preload" 
  as="image" 
  href="image2" 
  imagesrcset="image2-tiny 1w 1h,image2-small 100w 200h,image2-large 200w 400h" 
  imagesizes="(max-width: 40em) 1px,400px"
>

显然非常hacky。有没有“正确”的方法来做到这一点？我错过了什么吗？

解决方法

因此，对于 media 的 link el 使用 type="image" 属性确实起作用。

学到了总是测试我读过的东西:)

因此，以下工作可以解决手头的问题：

<link 
  rel="preload" 
  as="image" 
  href="image1" 
  imagesrcset="image1-small 100w 200h,image1-large 200w 400h" 
  imagesizes="(max-width: 40em) 100vw,400px"
>

<link 
  rel="preload" 
  as="image" 
  href="image2" 
  imagesrcset="image2-small 100w 200h,image2-large 200w 400h" 
  imagesizes="400px"
  media="(min-width: 40em)"
>