如何解决如何根据屏幕尺寸预加载正确数量的图像?
我正在努力优化 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)"
>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。