Elementor(Ele for short) is a powerful and flexible WordPress page builder, which is very popular because it can be used to easily build stylish and powerful responsive pages.
According to statistics, 1/5 of WordPress websites are built with Ele, its popularity is evident. The powerful features and flexibility also lead to Ele's bloated code, slow speed and much criticism.
Why is Elementor stuck?
Elementor is very powerful with many widgets to achieve various functions and layout, and a variety of settings are very user-friendly. Behind each feature is a stack of code, so Ele adds a lot of code to the front end, and the code depends on each other, making it impossible to disable and delay loading, so it's slow.
Ele pages can actually be very fast! If you use the Astra theme, and use the companionPremium Starter TemplatesThe template plugin imports the Elementor template directly, and you will find it fast when you use the Google speed tool to measure the speed. And that's without compressing images, installing caching plugins, and optimizing code.
Most people who say Ele is slow do not know how to set and optimize, Ele speed has a very large optimization space, the plug-in team is also very concerned about the speed has been reducing the amount of code to improve loading efficiency. We build all websites unified use Ele, after optimization Google speed score can be achieved 100 points, the computer side of the loading time within 1 second, the cell phone within 2 seconds.
Elementor Benefits
The main advantages of Elementor are that it is efficient, beautiful, powerful and easy to use. There are many widgets to implement various functions and layouts to make stylish and beautiful websites. It is also very convenient and efficient as you can export, copy and paste content and templates to other websites. These areGutenbergand other fast page builders say it can't be matched.
The ultimate purpose of making a website is to make money, efficient, beautiful and powerful. Simple operation is the only factor that generates benefits. As for the speed there are 100 ways to improve (such as upgrading the server configuration, using a better CDN, using lightweight themes, plug-ins, etc.), there is no need to lose the watermelon for sesame seeds to give it up.
Besides, Elementor is actually very speed-conscious and has been improving speed. For example, changing all icons to SVG icons and only loading the corresponding code on pages that use certain widgets.
Elementor 3.1 manages to reduce the target JS file size by 168kb compared to previous versions of 3.1, from 331kb to 163kb.
Elementor Pro 3.1 manages to reduce the target JS file size by 96kb compared to previous versions of 3.1, from 199kb to 103kb.
Elementor 3.2 manages to reduce the target JS file size by 195kb, from 331kb to 136kb, compared to versions prior to 3.1, and the target CSS file size by 11kb, from 146kb to 135kb, compared to versions prior to 3.1.
Elementor 3.3 manages to reduce the target JS file size by 62kb compared to previous versions of 3.1, from 146kb to 86kb.
Elementor Pro 3.3 manages to reduce the target JS file size by 95kb, from 199kb to 104kb, compared to versions prior to 3.1, and the target CSS file size by 152kb, from 206kb to 54kb, compared to versions prior to 3.1.
We strongly support Ele, and all of Diamor's websites are built with Ele and optimized to a speed of about 100 points using deep optimization methods (Google speed test). Ele is and will continue to be the tool of choice for building websites.
Elementor Speed Optimization Tips
This tutorial only optimizes the speed of the Elementor page builder, please also follow theThe Ultimate WordPress Speed Optimization TutorialThe article optimizes other aspects to improve the overall site loading speed.
Increase the memory used by Elementor
Elementor very eat configuration, if the content is not enough it is easy to card, most hosts by default the available memory is only 64M or 128M, so you need to modify the PHP memory limit.
Modification method.If it is a web host, directly modify the PHP memory limit in the host management panel. vps login to pagoda panel or use FTP to enter file management, in the websiteRoot directoryFind and open the wp-config.php file 
Add the following code to modify the memory limit.
If it is 1G memory host, change to 128M, 2G memory to 256M, 4G to 648M.
define('WP_MEMORY_LIMIT', '256M');
Elementor settings optimization
There are many features in Elementor settings that can reduce the amount of code and improve loading efficiency, so it is recommended to enable the corresponding features according to the tutorial below. Features not mentioned have nothing to do with speed, so enable them as needed. The following settings are based on Elementor Pro version 3.12.2.
Go to "Elementor" > "Settings" and enter the "General" tab.
The "Post Type" is to choose which pages can be made with Elementor, check it as needed, usually only the pages are checked. "Disable default colors" and "Disable default fonts" are recommended to be turned on and will use the theme's font and color settings.
It is more efficient to control the font and color of the add-on site inside the theme settings, and the amount of code is less. If there is a need to edit the interface in Elementor can still modify the color and font of specific content separately.
Click into the "Integration" tab, leave the default unchanged. reCAPTCHA and reCAPTCHA V3 if you fill in the key will be loaded in each page Google verification code, the speed will become stuck, especially the domestic site, stuck.
It is not recommended to use Google CAPTCHA, it is too slow and unusable in mainland China. Change to use honeypot + blacklist keyword blocking effect is better and faster. For more details, please check theBeat captcha! The best WordPress spam blocking method - fast and high blocking rate"..
Click into the "Advanced Settings" tab and set up as shown below.
CSS printing method:Be sure to select "external" files, which can be cached and prioritized for loading, and use thePerfmatters PluginDisable unnecessary code. Speed up MAX!
Google Fonts:Be sure to turn it off, the speed boost is great. After disabling it, you will not be able to select Google fonts in the Elementor editor page, with the color scheme set above using the theme fonts, just select the fonts there in the theme settings, you can also locally host Google fonts.
LoadingFont Awesome 4 Support:Be sure to turn it off for a big speed boost. The loaded Font Awesome icon font is over a hundred kilobytes in size, and it's a priority loading level, which really affects the speed!
Click into the "Experiment" tab and enable the corresponding functions as shown below to greatly reduce the amount of code and increase the speed! If you don't mention it, just keep the default.
Inline Font Icons:You can turn the icon font into inline SVG icons, a great improvement in speed! Note: star rating RatingRating widget stars do not choose Fontawsome, otherwise it will aggravate a more than 70KB icon font, choose the beginning of the U that is SVG icons.
Flexbox Container:Open, you can use Container to build page structure, more flexible and powerful than the previous section/column layout. It can also reduce the DOM size to improve the page speed.
"Lazy Load Background Images" will automatically delay the loading of all Elementor section background images outside the first screen to improve the loading speed, it is recommended to enable. If you are already using the Perfmatters plugin's Lazy Load Background Images feature (faster and better user experience), you don't need to enable this.
Tips: The "Lazy Load Background Images" and Elementor Vedio widgets are loaded using their own JS lazy load code, not using WordPress native loading.
Optimized DOM output:Enabled to improve performance by reducing the number of wrapper elements (e.g., below) present in the HTML generated by Elementor, resulting in less DOM volume for faster and more efficient loading.
Improved resource loading:Enable. When the page does not use the corresponding widget, it will not load some JS and the following resources, which can reduce the amount of code by about 200kb.
Improved CSS Loading:Enable. Reduce the amount of unused CSS generated by the page by adding conditional and inline CSS loading experiments for faster page loads.
Upgrade Swiper Library:Switch to the rotate function, corresponding to the speed of the improvement, if you do not use the rotate widget please ignore.
Enabling "Form Submissions" stores the submitted Elementor form data in the background and is very useful. If you already use Elementor DB plugin to collect forms, or don't use Elementor forms system, it is recommended to turn off ↑ this feature, otherwise enable it.
The following ↓ these features are recommended to disable if not used to improve the speed.
Disable Elementor Google Fonts
Google Fonts is slow and we are inThe Ultimate WordPress Speed Optimization TutorialAs mentioned in it, Google fonts are very slow, try not to use Google fonts. Especially for mainland websites, if you use Google fonts, you will be very stuck. If you must use Google fonts, you need to host them locally.
If it is a mainland website, you need to disable Elementor Google Fonts. Add the following code to the bottom of the "Appearance" > "Theme File Editor" > functions.php file.
// Disable Elementor Google fonts add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );
Update 2023.01.10: Elementor(Free) version 3.10.0 "Advanced Settings" adds the ability to disable Google Fonts ↓ without adding the above code.
Follow the Elementor setup tutorial above to use the theme default font, use Ele to build the page when the widget font to keep the default, do not change. Then set the font inside the theme settings, if you choose Google fonts to use the corresponding plug-in or theme automatic function locally hosted Google fonts.
Don't use Elementor to build whole site content
This is the key to Elementor speed optimization! And the best way to get the best results!
We atThe Ultimate WordPress Speed Optimization TutorialAs mentioned in it, the best way to improve Elementor is to not use Elementor to create headers, cookies collection alert boxes, form popups and other content that appear throughout the site. Instead, use themes and other plugins to create the appropriate content.
Because Ele's code is interdependent, a widget may involve a dozen files behind it and cannot be delayed loaded nor disabled. This is the fundamental reason why Ele is stuck. For example, to display the mobile menu created by Elementor properly, you need to exclude the JS in the figure below from being loaded late.
In order for some elements, galleries and entry animations created by Elementor Pro to display properly, it is necessary to exclude the JS from being delayed in loading in the figure below.
Excluding so much JS is delayed loading, the speed can be improved much less space.
If blog pages and product pages are made with themes that do not contain Ele code, you can usePerfmattersThe plugin disables all Elementor code on these pages and can greatly improve the loading speed. Google speed test mobile scores can go up to 95-100.
If the theme you're using doesn't do what you want, we recommend switching toAstra Prothemes that are fast and look good. Click to see the ones we made with Astra ProProduct Listing Page / Header / Footer, ,Product Detail Page, ,Article list page, ,Article Detail Page.
If you can, article/product detail pages and listing pages are also created with Astra Pro, which looks good and is fast. Some features of these pages can be achieved by installing separate plugins, for example, the article table of contents on the article detail page can be made with LightweightFixed TOCPlugin implementation, product detail page inquiry form using light weightFluent FormsProduction.
Many websites will have created cookies collection alert bar (below), recommended to useCookie Bar pluginMaking, light weight, we are also using.
If you want to add text, buttons, forms, images, videos, tables, etc. to the page, you can useACF field plug-in + Hook code insertion method.
Disable useless Elementor code
Although Elementor's code depends on each other, there is still some useless code that can be disabled. Disabling it will further improve the speed, which is the top priority of Elementor speed optimization.
Disabling the code requires thePerfmattersPlugin, after installing the plugin, enter the Perfmatters settings interface, enable the script manager in the "Assets" settings, and click Save.
When enabled, the "Script Manager" text will appear at the bottom of the background when editing articles, pages or products, and you can click it to enter the script management interface of the page you are editing.
Or inFront EndPage URL followed by/?perfmattersYou can also enter the resource management interface of the corresponding page by pressing the Enter key on the keyboard. For example, the address of the home page of this site is https://diiamo.cn, add the script manager suffix to become https://diiamo.cn/?perfmatters. After visiting, you will enter the script manager interface shown in the figure below.
For ease of use, first enter"Settings"The interface is set up a bit.
Click Save after setting as shown below.
Note: After the third test mode is opened, only the administrator can see the effect of the page after disabling the resources, visitors still visit the page without disabling the resources. After disabling the resources to test the site display and function normally, remember to come back to close the "test mode", clean up the cache, disable the resources to take effect.
For a more detailed and comprehensive method of disabling the code, please move to thePerfmatters Disable Useless Code TutorialThe.
If you want to know which Elementor codes can be safely disabled, move to theAdvanced Advanced Optimization TutorialIt contains a detailed list of Elementor codes that can be safely disabled, as well as troubleshooting which resources can be safely disabled.
Note: "Advanced Advanced Paid Optimization Tutorial" is paid content, including advanced optimization ideas, optimization techniques, and advanced use of plug-ins, which can take your website speed optimization results to the next level, and also enhance your WordPress speed optimization skills.
After purchase, enjoy the WeChat manual 1-to-1 consulting service ↓, you can enjoy the manual help you analyze website problems and give optimization suggestions / ideas. If you have other speed-related questions, you can also leave a message / consult customer service.
Delayed loading of JS code, generation of critical CSS, delayed loading of images
For Elementor JS/CSS that cannot be disabled, you need to use delayed loading/generating critical CSS to optimize loading efficiency and reduce page loading time. For detailed tutorials, please go toThe Ultimate WordPress Speed Optimization Tutorial.
Elementor page building tips
There are many ways to implement the same design when building pages with Elementor. A good build method can effectively reduce the amount of code and is very helpful in optimizing the speed of Elementor.
Minimal use of widgets or Containers
1- You can use a widget to solve the problem, do not use multiple widgets to put together. For example, the image + title + text description of the layout do not use the image + title + text 3 widgets to build, you can also use only image box a widget to achieve faster.
2- Use Container as little as possible, make good use of Flex features. For example, if there are 4 horizontal content blocks inside a section, some people will create a large Container with 4 small internal Container, which is very convenient, but the amount of code will also increase a lot. You can use only one Container, set the alignment direction to the right, and set the width of the four internal elements to 25%, so that you can also be arranged horizontally.
3- Don't use multiple widgets if you can use one widget to accomplish something. For example, the content of the picture below has many elements, some people may use the picture + title + split line + text + title which are several widgets to do.
If it is the same as the picture below, there are 4 pieces of content, and each piece of content consists of several widgets, to achieve this layout, you need to put each piece of content into a separate Container, and then set it to 50% width to achieve the layout below. This will use a total of nearly 20 widgets, 5 Container.
The above figure is actually a section of our electronic products B2B website, we only used 1 Container + 4 image box widgets on the failure of the same layout and effect, greatly reducing the amount of code.
Some people wonder how to make orange underlines, corner marks, and orange More with image boxes. The answer is to use the CSS before+after pseudo-class. We paste the CSS code for your reference. #productdispaly is the ID of Container, var(--ast-global-color-0) isAstra Pro ThemeColor code.
#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- Try to use the same kind of widgets. For example if there are several pieces of content that can be implemented with image box, use them all, not Icon Box.
5- Use global styles for fonts and colors instead of setting them individually for each widget.
Try to avoid using heavy asset widgets
Slideshows, rotating sliders and other widgets load very slowly, and the loading process will have no style flicker on the customer experience is not good. Where the speed of the site basically will not use these widgets.
Build a page can be a different idea to achieve, if you want to show a lot of photos is not recommended to do slideshows, directly tiled to put 2 lines of photos to show out. Products are also, there is no need to do rotation, directly put 2 lines all show out.
Home top Banner do not do rotation, slow conversion rate is also low. Only use a picture to do background, put the text on top of the picture the best effect, the highest conversion rate, the fastest speed. Less is more, more is chaos.
If you want to display Woocommerce products try not to use product widgets, use Image box widgets instead, use product images, write product titles in the title, and fill in product links in the link.
Try not to use third-party Elementor extension plugins
Try not to use third-party Elementor extensions such as Happy Addon. Ele is already bloated with code, and installing extensions adds to the card. For example, if you use Ultimate Addons for Elementor to create a header slideshow, in order to improve the speed so that the content is displayed correctly as soon as possible need to exclude the following figure all JS is delayed loading, so the speed will be much slower.
If some features ele does not have, you can try to find someone to write JS / CSS by hand to achieve. If you must use a third-party Elementor extension plugin to achieve the function, try to useJet TabsThe plugin is a lightweight extension and is only used to build content outside the first screen.
Use "Transform" instead of "Margin"
7- If the section moves horizontally/vertically to a large extent, even outside the screen, try to use "offset" in "Transform", not "layout "Layout" inside the "distance (margin)". This can avoid the "Layout Offset" error prompted by Google's speed measurement tool.
Use Icons+Popup instead of mobile navigation
It is mentioned above that you should not use Elementor to make the header, but use the theme to make it much faster. However, the theme header builder has many limitations and may not meet the needs of some people, so they will still choose Elementor to make the header.
The Elementor menu (Nav) widget loads slowly on the mobile side, so it is recommended to hide the menu on the mobile side. Use Icon widget to make mobile menu icons, use Popup to make mobile menu navigation and link to Icon icons (remember to hide them on the computer side), it is much faster.
Try not to use entry animations
The content of the section built with Elementor can be set into animation (inside the action effect), which looks cooler and enhances the site's realism. However, it will increase CPU, JS and rendering time. Try not to use entry animations, if you must use them, it is recommended to set entry animations only for the section content outside of the first screen, no animations for the first screen content, it is better to cancel them.
In order to comply with EU regulations, many websites will have created a cookies collection alert bar (below).
We have tested this tip bar set out animation Google PageSpeed test tool mobile loading time of about 2.0 seconds, cancel the appearance of animation / conditions or remove the Cookies collection tip bar loading time of about 1.7 seconds. If you change to page down (below) to a certain distance and then show out the page, the loading time of about 1.4 seconds. It is recommended to set On Scroll 10% around the display of cookies collection prompt bar, the speed is greatly accelerated, the score also improved a lot.
