如何更快地加载图像并提高网站性能(React JS、GSAP 和 Netlify)?

我有一个网站部署在下面的 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 左右,而不会损失任何实质性的质量。

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

感谢您的时间!

stack overflow How to load images faster and improve performance of website (React JS, GSAP and Netlify)?
原文答案

答案:

作者头像

要在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

注意:我不是专家。我还在寻找如何提高图像的负载速度,并遇到了上面提到的一些文章。