在 Wordpress 中优化 Lottie/JSON 图像

Question

我在优化网站上的 .json Lottie 文件时遇到一些问题。在我的主页上，我将 Wordpress 与 Elementor Pro、WP Rocket、Bunny CDN 和 Asset CleanUp Pro 结合使用。我成功地将网站加载速度从 8 秒降低到 2 秒以下；然而，我的lottie 文件是我唯一努力优化的东西。

首屏上方有一张我想立即加载的乐透图像，然后页面上有 8 个其他乐透图像，我希望在用户交互（滚动/鼠标等）时加载它们。所有乐蒂图像的大小都在 50kb 到 200kb 之间。

我注意到的一件有趣的事情是，根据 GTMetrix，.json 文件没有使用 Keep-Alive，即使我在 htaccess 中配置了 Keep-Alive，因此这会进一步减慢 .json 图像的加载速度。我不确定为什么它们没有通过保持活动来启用。

我注意到的另一件事是，根据 GTMetrix，.json 文件不是由我的 CDN 提供的。

我尝试过的：

• 我想我可以使用 Elementor Pro Lottie 的功能链接到我的 .json 文件的 CDN 版本；但是，当我这样做时，Elementor 无法加载任何内容。它只是留下了一个空白区域。它似乎只从媒体库加载文件。

• 我想我可以通过链接首屏下的 .json 文件来使用 WPRocket 中的“延迟 Javascript 执行”功能；但是，GTMetrix 仍然在页面加载时正常加载这些文件。

• 我尝试在 Elementor 插件上为这些 .json 文件启用“延迟加载”功能 - 这在一定程度上有效，但它导致内容发生变化，导致网站的流程过于混乱。

有什么想法可以加快/优化这里的乐蒂图像吗？理想情况下，如果我可以使用 Keep-Alive 或 Lottie 图像的 CDN 版本，或者可能获得某种延迟的用户交互负载，这不会使我的网站发生太大变化......那就太理想了。

如有任何帮助，我们将不胜感激！

Answer 1

您可以使用这个免费工具 Lottiemizer 来优化和缩小 Lottie JSON 文件大小。

https://lottiemizer.com/