Make A New Elementor Website Loads Faster

Elementor has been regarded as a highly intuitive page builder for WordPress sites among web developers over the years. So the popularity keeps inviting many new web developers to use it to build WordPress websites.

But we all know the downside of using elementor is their bloats. The bloats are practically everywhere. From the HTML markups, CSS and JavaScripts, even from the default fonts setup, it bloats our site all the way.

So it was no surprise that there are many Elementor users who are still struggling with the test speed result from Core Web Vitals (CWV), Google PageSpeed Insights (PSI) & GTMetrix speed tools.

Building Elementor Page with Speed & Performance Mindset

But, you don’t have to be a “Speed Expert” to create a new fast loading website using WordPress & Elementor page builder.

Yes, Elementor can be fast. We just need to know where all the bloats came from, and how to handle them. The key is to use Elementor with some speed and performance mindsets in mind.

By using the speed and performance mindset while building it, before doing any optimization process, we’ve managed to get a decent speed result for our new site built with Elementor.

Let’s walk through the 10 proven steps to make your new Elementor website loads faster with important scripts included to pass the speed test and enhance the user page experience without losing the design quality.

10 proven steps to make our new Elementor website loads faster:

1. Choose lightweight WordPress theme with header & footer feature
2. Install only lightweight & necessary plugins
3. Resize & compress all images before upload
4. Use optimized SVG icons & logo
5. Host custom fonts locally
6. Elementor ‘A Must Do’ Setting
7. Build any single page with speed and performance mindset (CRUCIAL)
8. Add custom optimization scripts (BOOSTER)
9. Optimize your site with our recommended optimization plugins & setting
10. Use fast hosting server

Let’s get started!

1. Choose lightweight WordPress theme with header & footer feature
   Why do we suggest a theme that has a header & footer feature? Whereas we are able to create a custom header & footer using Elementor Pro.
   Yes, Elementor Pro enables us to build our own custom header & footer. We used this feature before. But we found out that when we use the Elementor Nav Menu widget, it is called an external script for the hamburger (toggle), close (X) & dropdown icons. Those are elementor icons or eicons. Even, Elementor itself recommends to disable the eicons script on their tips on how to speed up a slow site. If we disable the script, it means we can not use the icons to display on the navigation menu, especially on mobile.
   Therefore, we prefer to use a lightweight theme that has its own header & footer feature. The icons for the navigation menu are automatically hosted on your server.
   GeneratePress (GP) Premium is our best recommendation to use for creating our new site. GP theme is a well known WordPress theme among the speed enthusiasts. The theme is clean and lightweight coded developed by Tom Usborne. Other themes which are on our recommendation lists are Suki, Blocksy, and Kadence.
   GP Premium has a feature called Elements where you can create one or several headers & footers and assign those to the entire site or specific page(s). With the Menu Plus feature, you can custom your navigation menu layout to your like. For some custom layouts, you would need to use some additional CSS. GP has complete documentation for you to look at. But, if you are looking for a beginner friendly dashboard, you can explore Suki, Blocksy, and Kadence themes.
   If you have a decent CSS skill and knowledge, you can use the Hello theme which is recommended and developed by Elementor. You can override / replace the hamburger (toggle), close (X) and dropdown (chevron or angle) icons with your own svg icons for the Elementor Navigation Menu widget. So, you can use the header and footer template on the theme builder.
   Bonus tip: Use child theme to put any code snippets or additional CSS. We will give you some useful code snippets to optimize your elementor page later. If you are not using child theme, you can use plugins like Code Snippets or Advanced Scripts plugins to add some custom scripts.
   
2. Install only lightweight & necessary plugins
   There is a golden rule among speed optimizers: Less is more.
   Plugins can make your database and page size larger and increase your site request. That is why we recommend to use only lightweight & necessary plugins on your WordPress site. Remove any unused plugins. Elementor & Elementor Pro have a lot of widgets that can cover some other plugins. Check out this article about WordPress plugins that can be replaced by Elementor.
   Other plugins that we recommend:
   
   1. For SEO -> Slim SEO.
      This free plugin is lightweight and a good fit if you only need a basic seo tool to submit XML sitemap, use custom meta title & description tags and apply an automatic Schema. You can add some tracking scripts such as Google Analytics & Facebook pixel on the Custom Code feature.
   2. For boosting Elementor Layout -> OohBoi Steroids For Elementor.
      BREAKING BAD & WIDGET STALKER features from this plugin help you to create an Elementor site with lesser DOM output. It means you can use less columns & inner sections to achieve some designs without writing a single line of CSS code. (At the time we write this article, Elementor does not have features like Widget Stalker and Breaking Bad as this plugin has.) This plugin is free. But, if you like this plugin, you can make some donation to the developer.
      
      
3. Resize & compress all images before upload
   Why do the images need to be resized & compressed before upload?
   Maybe, you are thinking that we can do it later by using image optimization plugin. Yes, but we don’t recommend to do it by using a plugin. We mention before that less is more. If we can do it without installing a plugin, why not?
   Using plugin(s) to do this job will also create much duplicated images in our storage and increase our server’s load. The best practice is to do it manually with our desktop app or any online image compressor.
   Next question, why do the images need to be resized & compressed?
   By doing so, your site has the possibility to pass “Properly Size Images” and “Efficiently Encode Images” warnings from PSI and CWV.
   Check out this screenshot:
   

   

   
   You can see that there are no warnings of properly size images & efficiently encode images. The images were already resized & compressed accordingly. If you still get this warning, you need to re-resize some images mentioned in the warnings
   
   How to properly resize an image?
   For a background in the hero section, we can set 1920 pixels wide with the resolution of 72 px.
   For displaying a single image, it depends on how do you want your single image to be displayed. If half of the desktop viewport, we can set 800 pixels wide as the starting point. After uploading to the site, you can inspect elements in the image container to find the proper dimension of your image.
   

   

   
   Then, we resize the image dimension accordingly.
   
   How to properly compress an image manually?
   For the simple way, we can use a free online tool such as TinyJPG (our favorite tool). We can use any image editor software like Photoshop or Affinity Photo. There are a lot of resources on how to compress an image using those tools.
   
4. Use optimized SVG icons & logo
   To speed up your site, we recommend uploading your SVG icons instead of using the Elementor icon library.
   “Hey, Elementor has the icon library that gives access to more than 1,500 free Font Awesome icons. Why don’t we use this feature?” maybe this question crosses into your mind.
   You can find the answer from the question itself. Why should we load more than 1,500 icons while we (usually) only use no more than 3 – 5 icons of them?
   And when you read this article, Elementor even recommends deactivating the Font Awesome feature. Because when you use it, the site will call the Font Awesome as an external script and it will slow your page load.
   For simple icons and a logo, we prefer to use SVG than PNG files. But it depends on the design itself. If you decide to use SVG for icons & a logo, make sure to optimize the SVG files before uploading to the media library.
   This online tool can help you to optimize the SVG file -> https://jakearchibald.github.io/svgomg/.
   If you need to see the tutorial, check this tutorial (coming soon) about how to optimize & upload SVG icons in Elementor the right way.
   Important note: If you still want to use icons from the Elementor library, make sure not to use it on the above the fold (the Hero section). So, you can delay the Font Awesome’s Assets.
   
5. Host custom fonts locally
   Maybe, you are asking yourself “Why don’t we use fonts in the Elementor editor instead?”
   Elementor uses Google fonts. It means when you use any of Google fonts in your Elementor site, your site will be calling the font family from Google Font Api as an external source.
   So, if you host your font family locally on your own server, it makes your site load faster.
   How to upload custom fonts in Elementor?
   
   1. Using Custom Fonts in the Elementor setting (Method 1)
      This is the easiest method but it only works best with the Hello theme since all site development is using the Elementor page builder. Check out this tutorial how to add and use custom fonts with Elementor.
   2. Upload your custom font manually and integrate it to the Elementor Editor (Method 2)
      Since we recommend using the Generatepress theme, this method is the best way for our case. Check out this tutorial how to add custom fonts manually in any WordPress theme and integrate it with Elementor.
      
      Bonus tips: Use up to 2 or maximum 3 types of custom font. And only upload necessary font style / weight.
      For Example:
      
   • Heading 1/ Extra Large Heading = font weight 900 (Extra Bold)
   • Heading 2 -6 / Large & Sub Heading = font weight 700 (Bold)
   • Body, Button & Accent = font weight 400 (Regular)
6. Elementor ‘A Must Do’ Setting
   In the Elementor version 3.x, there are some settings that you MUST set as Active state for better performance.
   Those settings are:
   
   1. Optimized DOM Output
   2. Improved Asset Loading
   3. Accessibility Improvement
      

      

7. Build any single page with speed and performance mindset (CRUCIAL)
   Well, we have arrived at the most critical part which is the site development.
   When we build each web page using Elementor, we should build the site with a performance mindset.
   12 Tips to optimize layout of your Elementor site:
   
   1. Create above the fold (the Hero section) 100vh on Desktop & Mobile
   2. Avoid using Slider / Carousel on the Hero Section if possible
   3. Less columns are better and avoid using Inner Sections if possible (use BREAKING BAD & WIDGET STALKER features from Ooi Boi Steroid addon, disable other features when you are not using it)
   4. Avoid using Spacer if not necessary (use padding or margin if you need more space)
   5. Avoid using the Hide on devices feature for section, column & widget element if possible
   6. Set your image width
   7. Use Navigation Menu from the theme for the header
   8. Use Global Fonts, Global Colors & Typography setting for blog post
   9. Organize your CSS scripts (put your CSS scripts on Elementor Global CSS, Custom CSS customizer or Style Sheet of the Child theme
   10. Avoid using animation feature if possible
   11. Use an image that link to YouTube instead of using the YouTube widget for video (unless you can delay the Youtube external script)
   12. Use an image that link to Google Map instead of using the Map widget (unless you can delay the Google Map external script)
       
8. Add custom optimization scripts (BOOSTER)
   When we’re using WordPress & Elementor for developing a site, there are lots of scripts running on the backend. But, some of the assets are not used when loading a certain web page. For example, if our homepage (frontpage) is fully built by Elementor, so the WordPress default Gutenberg library asset has no point to be active on the front-end since we don’t use it. So, if we stop the Gutenberg CSS from running on the front-end, our homepage will certainly load faster.
   To achieve our goal, we need to add some codes in the Child theme function, Code Snippets or Advanced Scripts plugins.
   How to remove wordpress assets (CSS/JS) manually without plugin in any page or certain page:
   
   1. To disable the Gutenberg’s CSS loading on the front-end
      

      function tw_unload_files() {
       
              wp_dequeue_style ( 'wp-block-library' );
              wp_dequeue_style ( 'wp-block-library-theme' );
       
       }
       add_action( 'wp_enqueue_scripts', 'tw_unload_files', 100 );

      
      
   2. To disable Elementor’s Google font
      

      add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

      
      
   3. To disable Elementor’s Font Awesome
      

      add_action('elementor/frontend/after_register_styles',function() { 
       
              foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
                      wp_deregister_style( 'elementor-icons-fa-' . $style );
              }
       
      }, 20 );

      
      
   4. To disable Elementor’s icons (eicons)
      

      function tw_unload_files() {
       
              if ( is_admin() || current_user_can( 'manage_options' ) ) {
                      return;
              }
       
              wp_deregister_style( 'elementor-icons' ); 
       
       }
       add_action( 'wp_enqueue_scripts', 'tw_unload_files', 100 );

      
      
   5. To fix “Image elements do not have explicit width and height” warning from CWV / PSI
      

      add_filter( 'the_content', 'add_image_dimensions' );
      
      function add_image_dimensions( $content ) {
      
          preg_match_all( '/<img[^>]+>/i', $content, $images);
      
          if (count($images) < 1)
              return $content;
      
          foreach ($images[0] as $image) {
              preg_match_all( '/(alt|title|src|width|class|id|height)=("[^"]*")/i', $image, $img );
      
              if ( !in_array( 'src', $img[1] ) )
                  continue;
      
              if ( !in_array( 'width', $img[1] ) || !in_array( 'height', $img[1] ) ) {
                  $src = $img[2][ array_search('src', $img[1]) ];
                  $alt = in_array( 'alt', $img[1] ) ? ' alt=' . $img[2][ array_search('alt', $img[1]) ] : '';
                  $title = in_array( 'title', $img[1] ) ? ' title=' . $img[2][ array_search('title', $img[1]) ] : '';
                  $class = in_array( 'class', $img[1] ) ? ' class=' . $img[2][ array_search('class', $img[1]) ] : '';
                  $id = in_array( 'id', $img[1] ) ? ' id=' . $img[2][ array_search('id', $img[1]) ] : '';
                  list( $width, $height, $type, $attr ) = getimagesize( str_replace( "\"", "" , $src ) );
      
                  $image_tag = sprintf( '<img src=%s%s%s%s%s width="%d" height="%d" />', $src, $alt, $title, $class, $id, $width, $height );
                  $content = str_replace($image, $image_tag, $content);
              }
          }
      
          return $content;
      }
      

      
      Note: If your host supports “allow url f-open” in the php version settings, this function will run properly, and all images will automatically have its width & height, taking from their original size. If it’s not working, just remove it, or ask your host to allow this if possible.
   6. To preload any critical assets such as fonts, CSS, JS and images on the above the fold content area, check out this Core Web Vitals Optimization guide.
9. Optimize your site with our recommended optimization plugins & setting
   After building a whole new Elementor site, we can start to integrate Google Analytic & Facebook Pixel if needed. And install & set up a security plugin if needed too.
   After everything is set, we can install a cache plugin. Nowadays, many cache plugins have full compact features. Not only a caching feature, they also have features to minify html / css / js, combine css / js, defer / delay/ async js, disable some core WordPress features that are used, integrate CDN and clean databases.
   Our recommendation of WP Rocket setting:
   
   1. Mobile Cache -> On
   2. Cache Preloading -> On
   3. Minify CSS -> On
   4. Combine CSS -> Off
   5. Optimize CSS Delivery -> On *Especially if you have a large page
   6. Minify JS -> On
   7. Combine JS -> Off
   8. Load JS deferred -> On
   9. Lazy Load images & iframes -> On
   10. Google Tracking & Facebook Pixel Add-ons -> On if you’re using Google Analytics and Facebook Pixel to track your visitor
10. Use fast hosting server
    It’s the basic prequirement to have a fast loading website. If you have already followed the above steps, and still not getting any performance improvements, then you should consider to move your site to a better hosting provider.

Finally, we hope that you’ll get some beneficial insights from our guide.

If you are a beginner and do not have a strong skill in coding (HTML, CSS & Javascript), using the Elementor page builder is a good fit for you. But always remember this: Create your new Elementor site with SPEED & PERFORMANCE mindset. Then, it will improve the page experience when visitors visit your site.

To end our guide, here is our speed result using Generatepress + Elementor from one of the Site Library of Generatepress: (see https://elementor-gp.thinkweb.dev/)