Elementor插件是一款功能强大、灵活的WordPress页面构建器，使用它可以轻易搭建出时尚、功能强大的响应式页面，因此非常受欢迎。据统计有1/5的WordPress网站使用Elementor搭建，它的受欢迎程度可见一斑。强大的功能和灵活性也导致Ele代码臃肿，速度偏慢，备受诟病。很多小伙伴都问了搬主题，如何进行Elementor插件加速啊，其实是可以的，通过了解本文的Elementor速度优化技巧, 做到秒开页面。从设置Elementor、禁用无用代码,、增加内存限制、页面构建技巧、延迟JS加载等方面详解如何优化Elementor速度。含无用JS/CSS禁用列表。这里搬主题就分享一下Elementor插件网页加载超级优化加速图文教程。Elementor为什么卡？Elementor功能很强大有众多小部件可以实现各种功能和排版，而且设置多种多样很人性化。每个功能背后都是代码的堆叠，因此Elementor往前端添加了一大堆代码，而且代码之间相互依赖导致无法禁用和延迟加载，所以速度慢。Elementor有免费版和Elementor Pro收费版，搬主题也分享了Elementor Pro收费版
Elementor Pro完美汉化中文版|页面拖动自定义设计WordPress插件介绍1年前1047193实际上Elementor页面速度也可以做到非常快！如果你使用Astra主题，并且使用配套的Premium Starter Templates模板插件直接导入Elementor模板，使用谷歌测速工具测速会发现速度很快。而且这还是在没有压缩图片、安装缓存插件、优化代码的情况下。说Elementor慢的人大多不懂得如何设置和优化，Elementor速度有非常大的优化空间，插件团队也很关注速度一直在减少代码量，提升加载效率。我们搭建所有网站统一使用Elementor，经过优化后谷歌测速分数都可以做到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。Elementor速度优化技巧本教程仅优化Elementor页面构建器速度，还需要配合其他优化插件，全面提升网站加载速度。增加Elementor使用内存Elementor非常吃配置，如果内容不够很容易卡，大部分主机默认情况下可用内存只有64M或者128M，所以需要修改PHP内存限制。修改方法：如果是虚拟主机，直接在主机管理面板修改PHP内存限制。VPS登录宝塔面板或者使用FTP进入文件管理，在网站根目录找到并且打开wp-config.php文件，添加下面代码修改内存限制。如果是1G内存主机，改为128M，2G内存改为256M，4G改为648M。define('WP_MEMORY_LIMIT', '256M');
Elementor设置优化Elementor设置里有很多功能可以减小代码量，提升加载效率，建议按下面教程启用相应功能。没提到的功能和速度无关，按需启用。下面设置基于Elementor Pro 3.12.2版本。进入“Elementor” > “设置”，进入“常规”选项卡。“文章类型”是选择哪些页面可以使用Elementor制作，按需勾选，一般只勾选页面。“禁用默认颜色”和“禁用默认字体”建议打开，将会使用主题的字体和颜色设置。在主题设置里面控制增站字体和颜色效率比较高，代码量也少点。如果有需要在Elementor编辑界面还是可以单独修改具体内容的颜色和字体。点击进入“集成”选项卡，保持默认不要修改。reCAPTCHA 和reCAPTCHA V3如果填入key将会在每个页面加载谷歌验证代码，速度会变卡，尤其是国内网站，卡死。不建议使用谷歌验证码，速度太慢，大陆无法使用。改用蜜罐+黑名单关键字拦截效果更好，速度更快。点击进入“高级设置”选项卡，按下图设置。CSS打印方法：一定要选“外部”文件，可以被缓存而且设置优先加载顺序，还可以使用Perfmatters插件禁用不必要代码。速度提升MAX！Google Fonts：一定要关闭，速度提升很大。禁用后在Elementor编辑器页面将无法选择谷歌字体，配色上面设置的使用主题字体，只要在主题设置那里选择字体就行，还可以本地托管谷歌字体。加载Font Awesome 4 支持：一定要关闭，速度提升很大。加载的Font Awesome 图标字体体积超百kb，而且是优先加载级别，非常影响速度！点击进入“实验”选项卡，按下图启用相应功能可以大大减少代码量，速度提升很大！没提到的保持默认即可。Inline Font Icons：可以把图标字体变成内联SVG图标，对速度有极大提升！注意：星星评价Rating小部件的星星不要选Fontawsome，不然会加重一个70多KB图标字体，选U开头那个就是SVG图标。Flexbox Container：打开，可以使用Container构建页面结构，比以前section/column布局更加灵活强大。还可以减少DOM体积提升页面速度。“Lazy Load Background Images”会自动延迟加载首屏以外所有Elementor版块背景图片，提升加载速度，建议启用。如果已经使用Perfmatters插件的背景图片延迟加载功能(速度更快，用户体验更好)，就不需要启用这个。Tips: “Lazy Load Background Images”和Elementor Vedio小部件的延迟加载使用自己的JS延迟加载代码，不使用WordPress原生加载。优化的 DOM 输出：启用，能减少Elementor生成的HTML中存在的包装元素(例如下图)数量来提高性能，从而较少DOM体积提高加载速度和效率。改善资源加载：启用。在页面没有用到相应小部件时，不会加载一些JS和下面资源，可以减少200kb左右代码量。Improved CSS Loading：启用。通过添加条件和内联 CSS 加载实验来减少页面生成的未使用 CSS 的数量，从而实现更快的页面加载。Upgrade Swiper Library：改用轮播功能，相应对速度有提升，如果没有使用轮播小部件请忽略。启用“Form Submissions”后会在后台存储已提交的Elementor表单数据非常实用。如果你已经使用Elementor DB插件收集表单，或者不使用Elementor表单系统建议关闭↑此功能，否则启用它。下面↓这些功能如果用不到建议禁用，提升速度。禁用Elementor谷歌字体谷歌字体很慢，尽量不要使用谷歌字体。尤其是大陆网站，如果使用谷歌字体会非常卡。如果一定要使用，需要本地托管谷歌字体。目前Elementor(Free) 3.10.0版本以上“高级设置”增加了禁用谷歌字体功能。按照上面Elementor设置教程使用主题默认字体，使用Elementor搭建页面时小部件的字体保持默认，不要更改。然后在主题设置里面设置字体，如果选谷歌字体要使用相应插件或者主题自动的功能本地托管谷歌字体。不要使用Elementor搭建整站内容这是Elementor速度优化的关键！也是效果最好的方法！其实提升Elementor最好的方法就是不要使用Elementor制作页眉、Cookies收集提示框，表单弹出等整站出现的内容。改用主题或其它插件制作相应内容。因为Elementor的代码互相依赖，一个小部件可能涉及到十几个文件，它们无法延迟加载也无法禁用。这就是Elementor卡的根本原因。例如要正常显示Elementor制作的手机端菜单需要排除下图中JS被延迟加载。为了让Elementor Pro制作的一些元素、画廊和进入动画正常显示，需要排除下图中JS被延迟加载。排除那么多JS被延迟加载，速度可提升空间就小很多。如果博客页面和产品页面使用主题制作，不含Elementor代码，就可以使用Perfmatters插件禁用这些页面的所有Elementor代码，能极大提升加载速度。谷歌测速手机端分数能去到95-100。如果你使用的主题做不出来你想要的效果，建议改用Astra Pro主题，速度快又好看。点击查看我们使用Astra Pro制作的产品列表页/页眉/页脚、产品详情页、文章列表页、文章详情页。
Astra Pro完美汉化中文合集|自定义页面设计轻量响应式WordPress主题模板介绍1年前037121可以的话文章/产品详情页、列表页也用Astra Pro制作，好看，速度又快。这些页面的一些功能可以通过单独安装插件实现，例如文章详情页的文章目录可以用轻量化Fixed Toc插件实现，产品详情页询盘表单使用轻量化Fluent Forms制作。
Fixed Toc中文专业版|浮动跟随的自动目录WordPress插件介绍3年前213320
Fluent Forms Pro汉化中文版|最快最直观的 WordPress表单构建设计生成插件介绍1年前011389很多网站会都有制作Cookies收集提示栏（下图），推荐使用Cookie Bar插件制作，轻量化，我们也在使用。想在页面增加文字、按钮、表单、图片、视频、表格等内容可以使用ACF字段插件+Hook代码插入方法。禁用无用Elementor代码虽然Elementor的代码互相依赖，还是有一部分无用代码(大概1/3)可以被禁用。禁用后会进一步提升速度，这也是Elementor速度优化的重中之重。禁用代码需要用到Perfmatters插件，安装插件后进入Perfmatters设置界面，在“Assets”设置里面启用脚本管理器，点保存。
Perfmatters汉化中文版|轻量级WordPress优化加速插件介绍1年前010767启用后在编辑文章、页面、产品的时候后台底部也会出现“脚本管理器”文字，点击后可以进入正在编辑页面的脚本管理界面。或者在前端页面网址后面加上/?perfmatters按键盘回车键也可以进入相应页面的资源管理界面。例如本站首页地址是https://diiamo.cn，添加脚本管理器后缀变成https://diiamo.cn/?perfmatters。访问后进入下图所示的脚本管理器界面。为了方便使用，先进入“设置”界面设置一下。按下图设置后点保存。注意：第三个测试模式打开后只有管理员才能看到禁用资源后的页面效果，访客访问的还是没有禁用资源的页面。禁用完资源测试网站显示和功能正常后记得回来关闭“测试模式”，清理缓存，禁用资源才能生效。延迟加载JS代码、生成关键CSS、延迟加载图片对于无法禁用的Elementor JS/ CSS，需要使用延迟加载/ 生成关键CSS优化加载效率，缩短页面加载时间。Elementor页面搭建技巧使用Elementor搭建页面，一样的设计可以有很多种实现方法。好的构建方法能有效减少代码量，对优化Elementor速度非常有帮助。尽量少使用小部件或者Container1- 可以使用一个小部件解决的，不要使用多个小部件拼凑。例如图片+标题+文字描述的排版不要用图片+标题+文本3个小部件搭建，也可以只用image box一个小部件实现速度快些。2- 尽量少使用Container，善用Flex功能。例如某个版块内部有4个横线排列的内容块，有些人会建立一个含4个内部小Container的大Container，这样很方便，可是代码量也会增加很多。可以只使用一个Container，排列方向设置为向右，把内部4个元素设置宽度为25%，这样也可以横向排列。3- 能使用一个小部件完成的事就不要使用多个小部件。例如下图内容有很多元素，有些人可能会用图片+标题+分割线+文本+标题这几个小部件做。如果是下图这种有4个一样内容，每个内容又由几个小部件组成，要实现这种排版需要把每个内容单独放入一个Container里面，然后设置成50%宽度实现下图排版。这样总共会用到接近20个小部件，5个Container。上图其实是我们一个电子产品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扩展插件，Elementor本来就代码臃肿，再安装扩展插件就卡上加卡。举个例子，如果使用Ultimate Addons for Elementor制作页眉幻灯片，为了提高速度让内容尽快正确显示出来需要排除下图所有JS被延迟加载，因此速度会慢很多。如果有些功能Elementor没有，可以试下找人手写JS/ CSS实现。如果一定要使用第三方Elementor扩展插件实现功能，尽量选用Jet Tabs之类轻量扩展插件，并且只用来搭建首屏外内容。使用“Transform”代替“Margin”7- 如果版块水平/垂直移动幅度较大，甚至出现在屏幕之外，尽量使用“Transform”里面的“偏移”实现，不要使用“布局”里面的“外距(margin)”。这样可以避免谷歌测速工具的“布局偏移”错误提示。使用图标+Popup代替手机端导航上面说到不要使用Elementor制作页眉，改用主题制作速度会快很多。可是主题页眉构建器限制很多，可能满足不了有些人的需求，还是会选择Elementor制作页眉。Elementor菜单(Nav)小部件手机端加载速度很慢，所以建议在手机端隐藏菜单。使用Icon小部件制作手机菜单图标，使用Popup制作手机菜单导航并且链接到Icon图标（记得在电脑端隐藏），速度快很多。尽量不要使用进入动画使用Elementor搭建的版块内容可以设置进入动画（动作效果里面），看起来比较酷，提升网站逼格。可是会增加 CPU、JS 和渲染时间。尽量不要使用进入动画，如果一定要使用建议只给首屏外的版块内容设置进入动画，首屏内容不设置任何动画，最好取消。为了符合欧盟法规，很多网站会都有制作Cookies收集提示栏（下图）。我们测试过，这个提示栏设置出场动画谷歌PageSpeed测试工具手机端加载时间为2.0秒左右，取消出场动画/条件或者删除Cookies收集提示栏加载时间为1.7秒左右。如果改成页面下滑（下图）到一定距离后再显示出来页面，加载时间为1.4秒左右。建议设置On Scroll 10%左右显示Cookies收集提示栏，速度大大加快，分数也提高不少。以上就是搬主题分享的Elementor插件网页加载超级优化加速图文教程。
THE END
