Profile

Ultimate Elementor Speed Optimization Tips, Seconds to Open Page, Settings + Disable Code + Usage Tips

Elementor Speed Optimization
Article List
Article List

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 Pasted 76 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'); 

Pasted 77

 

Elementor settings optimization

There are many features in Elementor settings to reduce the amount of code and improve loading efficiency, so it is recommended to enable them.

Go to "Elementor" > "Settings" and enter the "General" tab.

Pasted 75

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.

Pasted 82

 

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, instead use honeypot + blacklist keyword blocking is better and faster. For more details, please check theBeat captcha! The best WordPress spam blocking method - fast and high blocking rate"..

Pasted 83

 

Click into the "Advanced Settings" tab and set up as shown below.

Pasted 84

 

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.

Pasted 85

Pasted 86

Pasted 87

Pasted 88

After opening "Form Submissions", there will be an additional section in the background where you can view the contents of submitted policies. If you are already using Elementor DB plugin to collect forms, or not using Elementor forms system, it is recommended to turn off this feature, otherwise turn it on.

Pasted 89

 

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.

Pasted 80

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.

Pasted 81

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.

Pasted 6

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.

Pasted 90     Pasted 17

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.Pasted 20

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.

Pasted 81

For ease of use, first enter"Settings"The interface is set up a bit.

Pasted 82

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.

perfmatters 2124

 

Delayed loading of JS code to generate critical CSS

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.

Pasted 84

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.

Pasted 86

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.

Pasted 79

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.

Pasted 85    Pasted 87

 

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.

Pasted 78

In order to comply with EU regulations, many websites will have created a cookies collection alert bar (below).

Pasted 6

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.

Pasted 5

End

Article out of date? Have a better opinion? Have a question? Please leave your comments below and we will follow up.

Recommended Articles.
Comments :

发表评论

Set as private comment

The email address will not be disclosed, and the URL needs to be removed from https://前缀 for insertion.

Chat
  • WeChat Service
Quick login without registration

Enter your username and password to log in

Have no account? Forgot password?
For a better user experience, the site uses cookies -Privacy Policy
This site uses cookiesPrivacy Policy