如何给Elementor网站有效提升速度?13个黄金tips赶快利用起来!(4000字)

   日期:2024-12-26    作者:hnaa1688 移动:http://mip.riyuangf.com/mobile/quote/24021.html

亲爱的梨粉们,看这里吖!!!

更多精品文章,请查看博客shelleydigital.com

大家好,我是雪梨~

跟大家说说如何有效提升你的Elementor网站速度。

希望这会对你有所帮助(如果您有疑问,请在文章的最后随时私信我们)。

1激活Elementor Experiments

激活 Elementor 实验

前往 Elementor → 设置 → 实验,然后激活以下选项:

图片来源:谷歌截图

内联字体图标– 字体图标(即 Font Awesome + eicons)将作为 SVG 内联加载,而无需加载整个库。这意味着 PSI 中的 CSS 请求和渲染阻塞 CSS 问题更少。

延迟加载背景图像– 您最初必须使用带有“lazy-bg”帮助程序类(或类似)的优化插件,并将其添加到您的背景图像中。这更容易。

优化 DOM 输出– 地址通过删除不必要的 div 包装器来避免 PSI 中的 DOM 大小过大项(elementor-inner、elementor-row 和 elementor-column-wrap)。

改进的资源加载– 仅在页面上使用灯箱和全屏库、对话框库和共享链接库时加载它们,从而减少您网站上的 JavaScript .

改进的 CSS 加载– 仅加载正在使用的小部件 CSS 和动画(同时加载它们),从而减少网站上的 CSS 和渲染阻塞资源。

使用数据共享– 与插件开发人员共享数据需要少量用于发送数据的服务器资源。因此,我建议在所有插件中禁用此功能。

图片来源:谷歌截图

该测试是在“延迟加载背景图像”发布之前完成的(这减少了图像请求)

2将CSS打印方法更改为“外部文件”

虽然有优点和缺点缺点对于每个外部 CSS 文件都可以缓存,并且它们不会增加 HTML 的大小。您可以测试您网站的结果,但我通常推荐外部文件。

图片来源:谷歌截图

3禁用默认的谷歌字体

在接下来的几个步骤中,我们将在预加载时仅加载您需要的字体(本地使用 woff2)。第一步是禁用 Google Fonts 和 Font Awesome 图标。

图片来源:谷歌截图

更改字体/CSS 设置时,您应该重新生成 CSS 和 CSS Elementor 的工具设置中的数据,然后在瀑布图(例如 GTmetrix 或 Chrome 开发工具)中测试结果。您可以立即判断字体是否是本地托管的,使用更快的 woff2 格式,GTmetrix 中的棕色条表示阻塞时间,可以通过预加载来减少阻塞时间。

图片来源:谷歌截图

4使用woff2在本地托管字体

如果 fonts.gstatic.com 或其他第三方字体加载到您的网站上,请将它们托管在本地。

第 1 步:转至 Google Fonts 网站(或其他字体网站)并下载您的字体字体。确保仅选择所需的权重,因为过多的权重会增加文件大小。

第 2 步:使用 CloudConvert 将它们转换为 woff2(woff2 文件为 < a i=4>比 .ttf 小)。

顺便说一下


特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


举报收藏 0评论 0
0相关评论
相关最新动态
推荐最新动态
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号