在WordPress中优化Lottie/JSON图像

798qvoo8  于 2023-11-20  发布在  WordPress
关注(0)|答案(2)|浏览(191)

我在优化我网站上的.json Lottie文件时遇到了一些问题。在我的主页上,我使用Wordpress与Elementor Pro,WP Rocket,Bunny CDN和Asset CleanUp Pro相结合。我已经设法将我的网站加载速度从8秒降低到2秒以下;然而,我的Lottie文件是我唯一在努力优化的东西。
在文件夹上方有一个我想立即加载的乐透图像,然后我在页面上有8个其他的乐透图像,我想在用户交互(滚动/鼠标/等)时加载。所有的乐透图像都在50 kb到200 kb之间。
我注意到的一个有趣的事情是,根据GTMeetings,.json文件没有使用Keep-Alive,即使我在htaccess中配置了Keep-Alive,所以这会减慢.json图像的加载速度。我不知道为什么它们没有被keep-alive启用。
我注意到的另一件事是,根据GTMeetings,.json文件不是从我的CDN提供的。
我尝试过的:

  • 我想我可以使用Elementor Pro Lottie的功能链接到我的.json文件的CDN版本;然而,当我这样做时,Elementor无法加载任何东西。它只是留下了一个空白的白色空间。它似乎只从媒体库加载文件。
  • 我想我可以通过链接文件夹下的.json文件来使用WPRocket中的“延迟JavaScript执行”功能;然而,GTMeetbox仍然在页面加载时正常加载这些文件。
  • 我试着在Elementor的插件上为这些.json文件启用“延迟加载”功能-这有点效果,但它导致了内容的变化,使网站的流量变得一团糟。

有什么想法可以加快/优化Lottie图像吗?理想情况下,如果我可以使用Keep-Alive或CDN版本的Lottie图像,或者可能获得某种延迟的用户交互负载,不会使我的网站移动太多.这将是理想的。
任何帮助将不胜感激!
GTMetrix Screenshot

ego6inou

ego6inou1#

您可以使用这个免费工具Lottiemizer来优化和缩小Lottie JSON文件的大小。
https://lottiemizer.com/

rqqzpn5f

rqqzpn5f2#

当你实现延迟加载时,你必须提前为图片预留空间。如果你的图片没有响应,这可以像在它们周围使用div一样简单:

<div style=height:43px;width:107px>
    <img class=lazy data-lazy=foo.jpg>
</div>

字符串
如果你的图像是响应式的,你需要使用一个具有相同宽高比的占位符。https://www.andreaverlicchi.eu/blog/aspect-ratio-modern-reserve-space-lazy-images-async-content-responsive-design/有新的方法可以在现代浏览器中工作。

相关问题