如何更快地加载图像并提高网站性能（React JS、GSAP 和 Netlify）？

Question

我有一个网站部署在下面的 Netlify 上： https://hungry-mclean-362570.netlify.com/

Github： https://github.com/shindosu/mutsuki-portfolio-client

为了提供一点背景知识，该应用由 React JS 提供支持。在<div id="right-side"> 的主页中，我有两个正在渲染的 React 组件。它们每个都由三个 JS 提供支持，它通过 GSAP 在两张图片之间无限交替，并带有图像过渡动画。所以总的来说，我在右侧渲染了 4 张图像。图片的大小总共约为 13MB（更多图片即将推出）

我还有一个滑块，如果值达到>=50，那么样式和图像将会改变，让用户知道他们正在查看的图像的“类别”。

现在，它还没有完成，所以不要介意不完整。困扰我的是图像的加载时间（由三个 JS，GSAP 处理）加载时间非常长，我认为这也会影响其他元素的加载时间。

如何加快加载过程？ 我尝试减小图像大小（之前是 60MB，现在是 13MB！）；我正在尝试切碎更多，但我能做到的最多是 600~KB/img 左右，而不会损失任何实质性的质量。

还有其他方法可以解决这个问题吗？这将是一个投资组合网站，因此项目页面中将有更多图像，所以我假设如果我继续我现在正在做的方式，结果将与我的页面一样或更差正在努力。

感谢您的宝贵时间！

Answer 1

要在 React 应用程序中更快地加载图像，您可以使用以下技术之一：

1. 使用延迟加载方法 --> 图片只有在用户滚动到它时才会加载。
2. 使用模糊技术 --> 这会在原始加载之前以低分辨率加载图像
3. 使用 JPEG-XR 和 WebP 代替 PNG、JPG 等。

更多详情可以参考https://teacode.io/blog/how-to-speed-up-your-react-app-using-cloudinary-and-lazy-loading

注意：我不是专家。我也在搜索如何提高图片的加载速度，遇到了一些类似上面提到的文章。