预加载LCP图像时是否需要移除link标签的as属性以获得更高优先级？

结论：绝对不要移除as="image"属性，这么做反而会严重影响LCP性能。 #

具体原因如下：

• 首先as是rel="preload"的必填属性，符合W3C预加载规范要求。缺失as属性时，浏览器无法识别预加载的资源类型，即使提前下载了资源，后续页面<img>标签请求同地址图片时，也无法复用这份预加载的缓存，会重新发起请求，等于预加载完全失效，还额外多了一次无效请求。
• 你担心的「带as="image"的预加载优先级低」是Chrome旧版本的历史表现，目前Chrome早就针对LCP候选图片的预加载做了优化：只要是LCP元素对应的预加载图片，即使带as="image"，浏览器也会自动将其优先级提升为高，完全不需要靠移除as属性的方式手动调整。
• 移除as属性还会导致额外问题：部分浏览器会直接忽略缺少as属性的preload指令，预加载直接不生效；同时浏览器控制台也会抛出规范违反的警告。

正确写法就是你最初的版本：

<link rel="preload" as="image" href="cool-lcp-image.avif" />

如果是响应式LCP图片，还可以补充imagesrcset和imagesizes属性，让浏览器预加载对应尺寸的正确资源。

内容的提问来源于stack exchange，提问作者Josh Unger