Nextjs中小体积webp图片从_next/缓存加载过慢如何解决

• 未使用官方内置的next/image组件，直接用原生<img>标签引入图片，没有触发Next.js提供的资源压缩、格式自适应、加载优先级调度等优化逻辑，小体积webp也会被归类为普通静态资源，加载优先级被压低。
• next.config.js配置异常：images配置项未开启webp自适应能力，或是设置了过高的quality参数，或是错误配置remotePatterns规则将本地_next路径下的资源走远程代理拉取，额外拉长了请求链路。
• 开发环境特性限制：Next.js开发模式默认会对所有静态资源做实时编译校验，哪怕图片已经缓存到_next路径下，每次请求都会触发编译侧的校验逻辑，不会启用生产环境的强缓存策略，该表现在部署到生产环境后会自动消失。
• 缓存策略配置错误：next.config.js或是部署服务的静态资源响应头配置不当，没有给_next/image/*、_next/static/*路径下的资源设置合理的强缓存时间，导致每次加载都需要向服务器重新发起资源有效性校验，增加耗时。
• 图片尺寸不匹配：引入的webp图片原始尺寸远大于页面实际渲染的尺寸，next/image组件会在请求时实时做裁剪转码，额外增加了服务端/边缘节点的计算耗时，表现为加载缓慢。
• 加载优先级配置错误：首屏可见的核心图片未设置priority属性，导致图片的加载顺序被排在脚本、样式等其他资源之后，哪怕资源体积很小也会出现加载延迟的情况。

内容的提问来源于stack exchange，提问作者Martin Ivanko