3

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

问题：

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

所需的解决方案：

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

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

我不喜欢我目前最好的“解决方案”：无论如何都使用link's 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。有这样做的“正确”方法吗？我错过了什么吗？

4

1 回答 1

1

因此，使用el 的media属性确实有效。linktype="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)"
>
于 2021-03-26T16:39:16.713 回答