我的reactjs网站非常慢且滞后。我不知道为什么

Question

这是网站链接：https://kannanautomationandsolutions.com/ 尤其是在移动屏幕上。它变得非常慢并且滞后。全屏下仍然可以正常工作。

有办法解决这个问题吗？或者我应该删除动画和其他东西可能会让它变得简单。我没有太多时间。

Answer 1

除非你做了一些严重错误的事情，否则 React 网站不会滞后这么多。您网站的问题是图像未优化。

在这里您可以看到您的网站有大约 37 MB 的数据。理想情况下，网页应仅包含 10-15 MB 左右的数据。如果您仍然想在网页中拥有更多数据，那么您应该使用骨架加载。

此外，您使用的许多图像的宽度都超过 5000x4000 像素，而它们仅占用大约 400x300 像素的视口。您可以轻松地将此类图像从 8MB 缩小到 100-150KB。这将大大提高您的网站速度。

正如我之前所说，您正在使用静态图像（直接在网页中）。这会导致图像同步加载并减慢网站的初始加载时间。我建议你引入图像的骨架组件，然后异步获取图像（使用react-query等），然后渲染它们。它将提高您的网站加载速度和 SEO 速度得分。