Popular WordPress page builder plugin Elementor announced an update focused on delivering faster page loads. The update introduces improved efficiencies in how JavaScript and CSS files are delivered. These changes in Elementor version 3.2 promise to improve Core Web Vitals scores.
According to the Elementor’s announcement:
“The company has optimized its development cycle and created a five-track plan fixated on specific performance areas such as Optimized Asset Loading, JavaScript/CSS Libraries, Optimized internal JavaScript and CSS, Optimized Backend and Rendering Processes, and more slim code output.
Elementor’s plan ensures that all aspects of performance receive significant improvements, front and back.”
Elementor has also introduced a way for publishers to indicate how to load Google Fonts more efficiently:
“A new Google font loading feature personalizes users’ loading experience, enabling them to modify how Elementor loads Google Fonts. Elementor dashboard settings offer auto, swap, block, optional, and fallback.”
Core Web Vitals
Core Web Vitals are metrics designed to measure the web page experience for actual users on mobile devices. The measurements are collected by users on Chrome who have opted in to provide the information which is then collected as the Chrome User Experience (CrUX) Report.
It is this data that is used to create the Core Web Vitals scores for websites which in turn will become a ranking signal in June 2021.
Hosting a website at a fast server will not improve the core web vitals scores because the problems that negatively impact core web vitals scores are related to how the website is coded.
Delivering unoptimized code faster from a fast web host won’t fix the bottleneck caused by that unoptimized code that has to be downloaded and rendered on a mobile device.
That’s why it’s important for the makers of website templates and page builders to make the code their users rely on more efficient.
What Elementor announced is their renewed effort to deliver the web page code more efficiently to help publishers give their site visitors a better user experience and help the publishers rank better.
Why JavaScript and CSS Can Be Problematic
JavaScript and Cascading Style Sheets (CSS) are files that respectively provide functionality and visual style to web pages. A JavaScript file can make a contact form work and the Cascading Style Sheet tells the browser what colors and fonts to use (among other visual style related data).
When a person visits a web page the browser will download these files in order to create (render) the web page. But the web page rendering will stop every time it encounters a JavaScript or CSS file. That’s why they’re called Render Blocking Files.
While there are coding tactics to delay downloading the files or to download them in parallel (simultaneously with other files), those files still need to be activated (so to speak) in order to complete the rendering of the web page.
The ideal approach is to minimize how many files need to be downloaded. The best approach is to download the absolute minimum amount of JavaScript and CSS necessary to create a given web page.
For example, if a web page doesn’t contain a contact form then there is no need to download the files necessary to create a contact form.
This more efficient approach to downloading JavaScript and CSS is called conditionally loading. That means to download them when they are needed and not downloading if they are not needed.
And that is part of what Elementor announced.
Elementor Is Now More Efficient
What Elementor changed was to download many JavaScript files only when they are needed. That’s called loading files conditionally. Elementor confirmed to me that they have plans to begin conditionally loading CSS in the near future as well.
According to Elementor:
“The Lightbox, Screenful, Dialog, and Share links libraries are all loaded conditionally…”
Elementor also announced:
“The e-icons CSS file has also been split into two separate libraries – frontend and backend – saving up to 50KB on any given page load.”
Another improvement is that CSS that only affects site visitors who are Editors will not be loaded automatically for all users. That means if a site visitor is not an Editor their browser will download less files to make the web page render, saving 17 kilobytes.
The Elementor team shared this with me:
“Both our R&D team and our SEO team have been working on this project for the past 6 months, making sure that Elementor is fully compatible with the upcoming Web Vitals Google algorithm change. We’ve been focusing on reducing the number of DOM elements, rendering process optimization, dynamic asset loading, and much more.”
Elementor Publishes Videos for Improving Core Web Vitals
Screenshot of Elementor Core Web Vitals optimization videoIn addition to the code changes Elementor has taken the extra step to provide YouTube courses to help them better understand best practices for building sites that provide a faster user experience.
“To guide people through this update, we’ve made some excellent educational materials, including a new course on improving performance on your website. This will take a look at the whole process, since performance is based on a combination of factors, not just your website building platform of choice.”
Watch the Elementor optimization courses on YouTube here.
Elementor Takes the Initiative
It’s encouraging to see more and more companies step up to make these important updates. The announcement by Elementor is an exciting development for users of the plugin and puts the pressure on the rest of the WordPress ecosystem from plugins to theme makers to keep up with Elementor.
