个人中心

终极Elementor速度优化技巧, 秒开页面, 设置+禁用代码+使用技巧

Elementor速度优化
文章目录
文章目录

Elementor(简称Ele)是一款功能强大、灵活的WordPress页面构建器,使用它可以轻易搭建出时尚、功能强大的响应式页面,因此非常受欢迎。

据统计有1/5的WordPress网站使用Ele搭建,它的受欢迎程度可见一斑。强大的功能和灵活性也导致Ele代码臃肿,速度偏慢,备受诟病。

 

Elementor为什么卡?

Elementor功能很强大有众多小部件可以实现各种功能和排版,而且设置多种多样很人性化。每个功能背后都是代码的堆叠,因此Ele往前端添加了一大堆代码,而且代码之间相互依赖导致无法禁用和延迟加载,所以速度慢。

实际上Ele页面速度也可以做到非常快!如果你使用Astra主题,并且使用配套的Premium Starter Templates模板插件直接导入Elementor模板,使用谷歌测速工具测速会发现速度很快。而且这还是在没有压缩图片、安装缓存插件、优化代码的情况下。

说Ele慢的人大多不懂得如何设置和优化,Ele速度有非常大的优化空间,插件团队也很关注速度一直在减少代码量,提升加载效率。我们搭建所有网站统一使用Ele,经过优化后谷歌测速分数都可以做到100分,电脑端加载时间1秒内,手机端2秒内。

 

Elementor优点

Elementor的主要优点是高效、美观、功能强大、操作简单。有很多小部件可以实现各种功能和布局,做出时尚美观的网站。还可以导出、复制、粘贴内容和模板到其它网站,因此非常方便、高效。这些是古腾堡等速度快的页面构建器说无法比拟的。

做网站的最终目的是为了赚钱,高效、美观、功能强大。操作简单才是产生效益的因素。至于速度有100种方法去提升(例如升级服务器配置,用好点的CDN、使用轻量主题、插件等),没必要为了芝麻丢了西瓜放弃它。

再说了,Elementor其实也很注重速度,一直在提升速度。例如把所有图标改成SVG图标,只在有使用到某些小部件的页面加载相应代码。

与 3.1 之前的版本相比,Elementor 3.1 设法将目标 JS 文件大小减少了 168kb,从 331kb 减少到 163kb。

与 3.1 之前的版本相比,Elementor Pro 3.1 设法将目标 JS 文件大小减少了 96kb,从 199kb 减少到 103kb。

与 3.1 之前的版本相比,Elementor 3.2 设法将目标 JS 文件大小减少了 195kb,从 331kb 减少到 136kb。与 3.1 之前的版本相比,目标 CSS 文件大小减少了 11kb,从 146kb 减少到 135kb。

与 3.1 之前的版本相比,Elementor 3.3 设法将目标 JS 文件大小减少了 62kb,从 146kb 减少到 86kb。

与 3.1 之前的版本相比,Elementor Pro 3.3 设法将目标 JS 文件大小减少了 95kb,从 199kb 减少到 104kb。与 3.1 之前的版本相比,目标 CSS 文件大小减少了 152kb,从 206kb 减少到 54kb。

我们坚决拥护Ele,迪亚莫所有网站都使用Ele搭建,并且使用深度优化方法把速度优化到100分左右(谷歌测速)。以后只有2种页面构建器,一种叫Elementor,另外一种叫其它。Ele现在以及未来都会是建站首选工具。

 

Elementor速度优化技巧

本教程仅优化Elementor页面构建器速度,请同时按照《终极WordPress速度优化教程》文章优化其它方面,全面提升网站加载速度。

增加Elementor使用内存

Elementor非常吃配置,如果内容不够很容易卡,大部分主机默认情况下可用内存只有64M或者128M,所以需要修改PHP内存限制。

修改方法:如果是虚拟主机,直接在主机管理面板修改PHP内存限制。VPS登录宝塔面板或者使用FTP进入文件管理,在网站根目录找到并且打开wp-config.php文件 Pasted 76 ,添加下面代码修改内存限制。

如果是1G内存主机,改为128M,2G内存改为256M,4G改为648M。

define('WP_MEMORY_LIMIT', '256M'); 

Pasted 77

 

Elementor设置优化

Elementor设置里有很多功能可以减小代码量,提升加载效率,建议启用。

进入“Elementor” > “设置”,进入“常规”选项卡。

Pasted 75

“文章类型”是选择哪些页面可以使用Elementor制作,按需勾选,一般只勾选页面。“禁用默认颜色”和“禁用默认字体”建议打开,将会使用主题的字体和颜色设置。

在主题设置里面控制增站字体和颜色效率比较高,代码量也少点。如果有需要在Elementor编辑界面还是可以单独修改具体内容的颜色和字体。

Pasted 82

 

点击进入“集成”选项卡,保持默认不要修改。reCAPTCHA 和reCAPTCHA V3如果填入key将会在每个页面加载谷歌验证代码,速度会变卡,尤其是国内网站,卡死。

不建议使用谷歌验证码,改用蜜罐+黑名单关键字拦截效果更好,速度更快。详情请查看《完胜captcha! 最优WordPress垃圾评论拦截方法 – 速度快、拦截率高》

Pasted 83

 

点击进入“高级设置”选项卡,按下图设置。

Pasted 84

 

点击进入“实验”选项卡,按下图启用相应功能可以大大减少代码量,速度提升很大!没提到的保持默认即可。

Pasted 85

Pasted 86

Pasted 87

Pasted 88

打开“Form Submissions”后后台将会多一个已提交保单汇总版块,可以查看提交过的保单内容,打开后提交表单速度会慢一点点。如果你已经使用Elementor DB插件收集表单,或者不使用Elementor表单系统建议关闭此功能,否则打开。

Pasted 89

 

不要使用Elementor搭建整站内容

这是Elementor速度优化的关键!也是效果最好的方法!

我们在《终极WordPress速度优化教程》里面提到过,提升Elementor最好的方法就是不要使用Elementor制作页眉、Cookies收集提示框,表单弹出等整站出现的内容。改用主题和其它插件制作相应内容。

因为Ele的代码是互相依赖的,一个小部件可能背后涉及到十几个文件,无法延迟加载也无法禁用。这就是Ele卡的根本原因。例如要正常显示Elementor制作的手机端菜单需要排除下图中JS被延迟加载。

Pasted 80

为了让Elementor Pro制作的一些元素、画廊和进入动画正常显示,需要排除下图中JS被延迟加载。

Pasted 81

排除那么多JS被延迟加载,速度可提升空间就小很多。

如果博客页面和产品页面使用主题制作,不含Ele代码,就可以使用Perfmatters插件禁用这些页面的所有Elementor代码,能极大提升加载速度。谷歌测速手机端分数能去到95-100。

如果你使用的主题做不出来你想要的效果,建议改用Astra Pro主题,速度快又好看。点击查看我们使用Astra Pro制作的产品列表页/页眉/页脚产品详情页文章列表页文章详情页

可以的话文章/产品详情页、列表页也用Astra Pro制作,好看,速度又快。这些页面的一些功能可以通过单独安装插件实现,例如文章详情页的文章目录可以用轻量化Fixed TOC插件实现,产品详情页询盘表单使用轻量化Fluent Forms制作。

很多网站会都有制作Cookies收集提示栏(下图),推荐使用Cookie Bar插件制作,轻量化,我们也在使用。

Pasted 6

想在页面增加文字、按钮、表单、图片、视频、表格等内容可以使用ACF字段插件+Hook代码插入方法

 

禁用无用Elementor代码

虽然Elementor的代码互相依赖,还是有一部分无用代码可以被禁用。禁用后会进一步提升速度,这也是Elementor速度优化的重中之重。

禁用代码需要用到Perfmatters插件,安装插件后进入Perfmatters设置界面,在“Assets”设置里面启用脚本管理器,点保存。

Pasted 90     Pasted 17

启用后在编辑文章、页面、产品的时候后台底部也会出现“脚本管理器”文字,点击后可以进入正在编辑页面的脚本管理界面。Pasted 20

或者在前端页面网址后面加上/?perfmatters按键盘回车键也可以进入相应页面的资源管理界面。例如本站首页地址是https://diiamo.cn,添加脚本管理器后缀变成https://diiamo.cn/?perfmatters。访问后进入下图所示的脚本管理器界面。

Pasted 81

为了方便使用,先进入“设置”界面设置一下。

Pasted 82

按下图设置后点保存。

注意:第三个测试模式打开后只有管理员才能看到禁用资源后的页面效果,访客访问的还是没有禁用资源的页面。禁用完资源测试网站显示和功能正常后记得回来关闭“测试模式”,清理缓存,禁用资源才能生效。

perfmatters 2124

 

延迟加载JS代码,生成关键CSS

对于无法禁用的Elementor JS/ CSS,需要使用延迟加载/ 生成关键CSS优化加载效率,缩短页面加载时间。具体教程请移步《终极WordPress速度优化教程》

 

Elementor页面搭建技巧

使用Elementor搭建页面,一样的设计可以有很多种实现方法。好的构建方法能有效减少代码量,对优化Elementor速度非常有帮助。

尽量少使用小部件或者Container

1- 可以使用一个小部件解决的,不要使用多个小部件拼凑。例如图片+标题+文字描述的排版不要用图片+标题+文本3个小部件搭建,也可以只用image box一个小部件实现速度快些。

2- 尽量少使用Container,善用Flex功能。例如某个版块内部有4个横线排列的内容块,有些人会建立一个含4个内部小Container的大Container,这样很方便,可是代码量也会增加很多。可以只使用一个Container,排列方向设置为向右,把内部4个元素设置宽度为25%,这样也可以横向排列。

3- 能使用一个小部件完成的事就不要使用多个小部件。例如下图内容有很多元素,有些人可能会用图片+标题+分割线+文本+标题这几个小部件做。

Pasted 84

如果是下图这种有4个一样内容,每个内容又由几个小部件组成,要实现这种排版需要把每个内容单独放入一个Container里面,然后设置成50%宽度实现下图排版。这样总共会用到接近20个小部件,5个Container。

Pasted 86

上图其实是我们一个电子产品B2B网站的一个版块,我们只用了1个Container+4个image box小部件就失效了一样的排版和效果,极大减小代码量。

有的人疑惑橙色下划线、角标以及橙色More用image box怎么做出来?答案是用CSS的before+after伪类。我们把CSS代码粘贴出来供大家参考。#productdispaly是Container的ID,var(--ast-global-color-0)是Astra Pro主题颜色代码。

#productdispaly figure.elementor-image-box-img{
    padding: 20px;
background-color:#efefef;
    max-width: 50%;
     z-index: 1;
}

#productdispaly .elementor-image-box-content {
    padding: 25px 40px;
    max-width: 50%;
     z-index: 2;
}

selector .elementor-image-box-img:after {
    content: "";
    border-radius: 0px;
    background-color: #ffffff;
    display: block;
    width: 18px;
    height: 18px;
    -webkit-transform: rotate(45deg) translate(-50%);
    transform: rotate(45deg) translate(-50%);
    z-index: 2;
    position: absolute;
    right: 50%;
    margin-right: -15px;
    top: 50%;
}
#productdispaly h3.elementor-image-box-title:after {
    content: "";
background-color:var(--ast-global-color-0);
    display: block;
    width: 37px;
    height: 2px;
    margin-top: 15px;
}

#productdispaly p.elementor-image-box-description:after {
    content: "More...";
    color:var(--ast-global-color-0);
    margin-left: 6px;
        font-size: 14px;
}

4- 尽量使用同一种小部件。例如有几张内容都能用image box实现的话,就都用它,不要用Icon Box。

5- 对字体和颜色使用全局样式,而不是为每个小部件单独设置它们。  

 

尽量避免使用重资产小部件

幻灯片,轮播滑块等小部件加载速度非常慢,而且加载过程会有无样式闪烁对客户体验不好。凡是速度很快的网站基本上不会使用这些小部件。

搭建页面可以换个思路实现,如果要展示很多相片不建议做幻灯片,直接平铺放2行相片展示出来。产品也是,没必要做轮播,直接放2行全部展示出来。

首页顶部Banner不要做轮播,速度慢转化率还低。只用一张图片做背景,把文字放图片上面效果最好,转化率最高,速度最快。少即是多,多就是乱。

如果要展示Woocommerce产品尽量不要使用产品小部件,改用Image box小部件,图片用产品图片,标题写产品标题,链接填产品链接就行。

 

尽量不要使用第三方Elementor扩展插件

尽量不要使用Happy Addon等第三方Elementor扩展插件,Ele本来就代码臃肿,再安装扩展插件就卡上加卡。举个例子,如果使用Ultimate Addons for Elementor制作页眉幻灯片,为了提高速度让内容尽快正确显示出来需要排除下图所有JS被延迟加载,因此速度会慢很多。

Pasted 79

如果有些功能ele没有,可以试下找人手写JS/ CSS实现。如果一定要使用第三方Elementor扩展插件实现功能,尽量选用Jet Tabs之类轻量扩展插件,并且只用来搭建首屏外内容。

 

使用“Transform”代替“Margin”

7- 如果版块水平/垂直移动幅度较大,甚至出现在屏幕之外,尽量使用“Transform”里面的“偏移”实现,不要使用“布局”里面的“外距(margin)”。这样可以避免谷歌测速工具的“布局偏移”错误提示。

Pasted 85    Pasted 87

 

使用图标+Popup代替手机端导航

上面说到不要使用Elementor制作页眉,改用主题制作速度会快很多。可是主题页眉构建器限制很多,可能满足不了有些人的需求,还是会选择Elementor制作页眉。

Elementor菜单(Nav)小部件手机端加载速度很慢,所以建议在手机端隐藏菜单。使用Icon小部件制作手机菜单图标,使用Popup制作手机菜单导航并且链接到Icon图标(记得在电脑端隐藏),速度快很多。

 

尽量不要使用进入动画

使用Elementor搭建的版块内容可以设置进入动画(动作效果里面),看起来比较酷,提升网站逼格。可是会增加 CPU、JS 和渲染时间。尽量不要使用进入动画,如果一定要使用建议只给首屏外的版块内容设置进入动画,首屏内容不设置任何动画,最好取消。

Pasted 78

为了符合欧盟法规,很多网站会都有制作Cookies收集提示栏(下图)。

Pasted 6

我们测试过,这个提示栏设置出场动画谷歌PageSpeed测试工具手机端加载时间为2.0秒左右,取消出场动画/条件或者删除Cookies收集提示栏加载时间为1.7秒左右。如果改成页面下滑(下图)到一定距离后再显示出来页面,加载时间为1.4秒左右。建议设置On Scroll 10%左右显示Cookies收集提示栏,速度大大加快,分数也提高不少。

Pasted 5

End

文章过时?有更好看法?有疑问?请在下方评论留言,我们会及时跟进。

推荐文章:
评论 :

发表评论

设为私密评论

邮箱不会被公开,插入网址需去掉https://前缀。

免注册快速登陆

输入用户名密码登录

没有账号? 忘记密码?
为了更好的用户体验,该网站使用 Cookies 隐私政策
该网站使用 Cookies 隐私政策