图片的优化问题

[Pathsis]

最近终于无法再忍受国内电信和移动网络访问网站的龟速，经常点击链接毫无反应，加上Next.js网页又没有普通网页的浏览器载入进度，导致我（和用户）常常以为鼠标单击未成功或网页出现故障，就速度体验而言十分糟糕，比一般的静态网站要糟糕。于是，有了想对网站添加CDN优化的念头。

我大概找了下next.js网站使用CDN的方法，就是为建构后的_next/static目录下的所有资源添加CDN地址前缀。由此发现了一个问题，图片不在_next/static下，这就可能会带来一定的麻烦。

另外，这可能也是一个独立的问题，似乎目前没有为markdown中引入的图片执行next/image优化。如果有的话，图片应该会被建构到_next/static目录下。

我在其他的一些next.js网站中看到，它们的图片就是这样的。

比如上图这个网站。https://github.com/Kamigami55/easonchang.com-next

[la3rence]

Vercel 自身有全球 CDN，但是国内环境不太好，可以尝试直接套 Cloudflare。

图片建议一律先压缩后存放，比如使用 TinyPNG 服务。

/label performance

[Pathsis]

谢谢回复！套 Cloudflare 的话应该没啥作用吧。尝试了下 CDN ，发现俺技术不行，遂决定放弃了。

现在图片一般先转成 webp，再 TynyPNG 压缩。

不过我体验下来， next.js 网站在大陆速度慢的问题主要不在图片，反而是 js 的载入。经常是一个链接点击半天没有任何动静。

不过使用 next/image 优化，好像还可以解决 CLS 的问题。