如何更快地加载图像并提高网站性能（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

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