Let’s talk about Elementor’s Product Roadmap for 2021, specifically performance optimization. While we continue to plan and develop cool new features requested by our community, this year we’ve made it our mission to improve the performance of our users’ websites. In this post, I would like to share with you some of the actions we have already taken towards achieving this goal, and talk a bit about what’s to come in the upcoming year.

Website performance has been an issue for web creators since the dawn of the internet. Being a web creator myself, I would always ask questions like:

  • “Is my site too slow? Is it causing users to leave or hurting my Google rankings?”
  • “Should I let go of a certain functionality in order to improve site speed?”
  • And of course: “What on earth is still causing my performance issues? I thought I covered all bases here!”

So yes, getting stellar performance out of a website has always been a challenge for web creators, regardless of the platform or tools we’ve been using. With so many relevant factors affecting performance, it’s not always easy to isolate the real issue, let alone find a solution for it. This is exactly why we’ve created this five-part video course on performance. In this series, we delve into each important factor that may be affecting your site’s performance, whether it’s related to Elementor or not, and walk you through how to optimize it.

To make things truly interesting, Google recently announced that website performance will now officially play a part in its ranking algorithm. This puts the issue of performance under the spotlight, raising concerns among website owners across the globe. That’s why over the past six months, our R&D and SEO teams have been working tirelessly to make sure that Elementor websites get through this update and pass with flying colors.

When it comes to Google’s mysterious algorithm, we know that it would take much more than our word to make you feel safe. Therefore, as a service to our users and the web creator community, we will be hosting a free web performance webinar with leading SEO experts to discuss the upcoming change. Not only will this cover the update itself, but will also detail how this change may impact your website and what you can do to prepare. The webinar is taking place on April 28th, so make sure you save your seat.

However, setting aside all courses and webinars, our primary goal is to make sure that our product doesn’t negatively affect your site’s performance. This has been, and will continue to be, a top priority for us. So without further ado, let’s dive into Elementor’s performance optimization efforts, as set in our 2021 Product Roadmap.

Run a Website Speed Test To Ensure That Your Website Is Performing Well

Table of Contents

Our Five-Track Plan to Further Improve Performance

Elementor-Performance-1

Beyond optimization of our product development cycle, our vision for improving Elementor’s performance consists of a five-track approach. We’ve already made some significant improvements in some of these areas, while others will be addressed in Elementor’s upcoming versions.

We are also proud to say that performance has become an integral part of our development and release pipeline. Every version of Elementor is now validated against a variety of performance metrics to ensure that no new feature, tweak, or fix has any negative effect on existing websites built with Elementor. 

Now let’s review our tracks one by one:

Track 1: "Load Only What You Need"

We’re improving the way Elementor loads assets to ensure it only loads what it needs on each page. In the latest versions of both Elementor and Elementor Pro, we’ve introduced the optimized asset loading experiment to improve a website’s front-end performance, speeding up each page by only loading the functionalities needed. You can learn more about it here.

We’ve also added lazy loading options to certain widgets and will continue doing so in the future. For example, the Video widget includes a lazy load option, giving you the ability to replace the embedded full video player with a static image thumbnail. The image will then switch back to the full video once a visitor interacts with it. 

By utilizing these lazy loading techniques, you can greatly reduce the page size and number of HTTP requests during the initial page load, which will lead to a much faster experience for your visitors.

Track 2: Reduce the Use of JavaScript/CSS Libraries and Leverage Native Browser Support

Since we launched Elementor almost five years ago, web browsers have evolved a lot. Now, some features that required external libraries five years ago can be implemented using native browser support. This makes for much more efficient implementation and can, in some cases, greatly reduce the JavaScript execution time.

One example of this is the Waypoints library which, in certain cases, was replaced with the native Intersection Observer API.

We aim to reduce the use of these types of CSS and JavaScript libraries and replace them with native browser support wherever possible.

Track 3: Improve and Optimize Existing Internal JavaScript and CSS

We plan to continue to improve and optimize Elementor’s existing internal JavaScript and CSS.

Examples of this include the ability to configure Google Fonts loading method and the font-display property added to the Font Awesome library. These improvements should reduce the render-blocking processes for these files and provide additional optimization of existing CSS and JS files.

Track 4: Optimize Backend and Rendering Processes

In Elementor 3.0, we improved the dynamic CSS loading and rendering mechanism. Elementor used to scan pages for elements with dynamic values on each page load. Starting in Elementor 3.0, when a page is created and visited for the first time, Elementor creates a cache of all elements with dynamic values. Then, instead of scanning the page for dynamic elements every time a page is visited, the list is fetched from the cache and rendered immediately. This significantly improves server-side rendering times and results in noticeable improvements. We plan on implementing additional parsing improvements to Elementor in the future. You can learn more about it in this blog post.

Track 5: Improved, Slimmer, and Better Code Output

Finally, we plan to continue to improve and slim down the code output that Elementor generates to reduce the size of the DOM.

We already started making these improvements in Elementor 3.0, where we removed three wrapper elements to create a smaller DOM and simplify the code output.

In Elementor 3.2, we removed two more elements to achieve even greater reductions in the size of the DOM. More reductions are planned in the near future.

As you can see, new features, improvements, and overhauls can be expected in 2021 and beyond. This is all done in an effort to help you continue to build amazing websites with better performance. If you haven’t upgraded to the latest version yet, make sure you do to enjoy these and other improvements.

Free Elementor Resources on Performance

Elementor-Performance-2

As you may know, there are many non-Elementor-related factors that affect the performance of your WordPress website. These include image optimization, web hosting, server providers, CDN, and more. Since we aim to empower our users to implement complete WordPress optimization, we’ve created a vast resource bank of free tutorials, webinars, and articles to help you learn more about performance. 

  • We’ve created a video course about performance – in this five-part series, we go over every important factor that may affect your performance, and how you can optimize it. 
  • On April 28th, we’ll be hosting a webinar on Core Web Vitals with leading SEO experts to discuss the upcoming Google algorithm change and its impact on your websites. Save your seat here. 

We will continue to create free webinars, blog posts, and videos to address other aspects of WordPress performance in order to continue to support the web creator community.