[问题] 使用 nextjs 开发的网站图片资源加载较慢

[quehei]

网站打开首次加载图片比较慢（ 1 、2m 的图片都要加载一阵，不知道是网卡还是服务卡），我去找大哥咨询是不是服务器的性能不够，他说是因为我使用的 nextjs 开发的，虽然在 public 里但是资源是 node 给的所以慢，想要优化要换换成 oss 这种，没法优化。我不知道这种说法是否合理。（因为本身大哥不太支持使用 nextjs 开发公司官网，然后开发完只能交给他来部署，使用的 k8s ）

[yier4ha]

浏览器控制台网络那个 tab 里面找到加载慢的图片，点开看看加载时间，是等待服务器响应耗时太多了还是下载内容耗时太多了？
我猜是下载内容耗时多。因为我本地开发的时候大图都是秒开的

[shiny]

看你用的什么标签加载图片，如果是 next/image ，首次加载的时候还会有图片优化的过程。你也可以直接 build 出纯静态的网站。node 本身并不慢。

[seeu2ex]

换 cdn 中不中

[wunonglin]

1 、静态图片的话可以自行压缩
2 、在对象存储的话，那么用云服务
3 、对象存储没用云服务的话，那么可以搭配 imgproxy 以及 varnish-cache 。链条是：minio -> imgproxy -> varnish-cache -> client

[Nosub]

1 ，2MB 的图片，是否已经压缩，不应该压缩后的 10-100kb 左右吗，浏览器有开发者工具，哪个慢，点击哪个，然后分析原因。

[Memoriae]

1.不用 next/image ，直接引用/public ，修改 cdn 缓存规则，交给 cdn 完成；
2.next/image 自定义 loader 功能就能适配 oss ；
3.和 node 无关，你可以开 f12 开发者工具，看下渲染的顺序，next.js 的图片好像默认是延迟（优先度不是最高的）。

官方文档的说明应该足以解决。

https://nextjs.org/docs/app/building-your-application/optimizing/images