网站打开首次加载图片比较慢( 1 、2m 的图片都要加载一阵,不知道是网卡还是服务卡),我去找大哥咨询是不是服务器的性能不够,他说是因为我使用的 nextjs 开发的,虽然在 public 里但是资源是 node 给的所以慢,想要优化要换换成 oss 这种,没法优化。我不知道这种说法是否合理。(因为本身大哥不太支持使用 nextjs 开发公司官网,然后开发完只能交给他来部署,使用的 k8s )
![]() |
1
yier4ha 203 天前
浏览器控制台网络那个 tab 里面找到加载慢的图片,点开看看加载时间,是等待服务器响应耗时太多了还是下载内容耗时太多了?
我猜是下载内容耗时多。因为我本地开发的时候大图都是秒开的 |
![]() |
2
shiny 203 天前
看你用的什么标签加载图片,如果是 next/image ,首次加载的时候还会有图片优化的过程。你也可以直接 build 出纯静态的网站。node 本身并不慢。
|
3
seeu2ex 203 天前 via iPhone
换 cdn 中不中
|
![]() |
4
wunonglin 203 天前 ![]() 1 、静态图片的话可以自行压缩
2 、在对象存储的话,那么用云服务 3 、对象存储没用云服务的话,那么可以搭配 imgproxy 以及 varnish-cache 。链条是:minio -> imgproxy -> varnish-cache -> client |
![]() |
5
Nosub 203 天前 via iPhone
1 ,2MB 的图片,是否已经压缩,不应该压缩后的 10-100kb 左右吗,浏览器有开发者工具,哪个慢,点击哪个,然后分析原因。
|
![]() |
6
Memoriae 203 天前 ![]() 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 |
![]() |
7
xmsz 1 天前
我在 vercel ,慢得跟屎一样... 变成了负优化
本来一张图如果是国内加载 200ms ,然后 nextImage 默认会对图片进行优化处理,它先下载图片,耗时 1s ,然后优化图片,耗时 200ms ,再返回图片,耗时 1s... 如果你是国内图片国内服务器还好,如果源图片确实比较大,那优化是有效果,否则大概率还是蛮.... 而且现在大部分项目都是使用第三方储存库... 都自带压缩,所以这个功能更加没用 然后解决办法 1. unoptimized 设为 true 意思就是不要优化了,纯当个 img 用 2. 使用自定义 loader 兼容第三方储存库的 第一个最粗暴但是最好用,你自己要优化就和以前一样加个判断函数,或者直接加后缀 第二个 loader ,想象是美好的,但是会遇到其他一些问题 比如不同像素比的屏幕生成宽度很坑爹... 比如不知道宽高用 fill 的时候,宽度基本就是最大的,移动端 1200 ,pc 端 3840... |