Connect with us


Elementor Update Addresses Core Web Vitals



Elementor Update Addresses Core Web Vitals

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 actual 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 cause core web vitals are in the code of the website itself.

Delivering that code faster from a fast web host won’t fix the 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 VideoScreenshot of Elementor Core Web Vitals optimization video

In 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 very heartening 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.



Introducing Text Path & Mask Layer Features!


Customize Your Entire Site With New Block Themes – News



Customize Your Entire Site With New Block Themes – News

Customize Your Entire Site With New Block Themes

Experiment with a new look for your site with themes created to take advantage of Full Site Editing.

In case you missed it, we’ve been rolling out a new set of powerful site design tools called Full Site Editing (or “FSE”) and it’s now available for all users!

Don’t worry if you’re just hearing about Full Site Editing for the first time. We’ve been releasing these new tools in a way that doesn’t actually require you to do anything with your existing site(s). If you are up for a change though, we’re happy to announce the launch of a brand new family of themes made specifically with Full Site Editing features in mind. As of this writing we have over two dozen themes available that support Full Site Editing.

These new themes have been designed with a wide variety of sites cases in mind. But their potential stretches well beyond their screenshots and demo sites. Because each theme is fully editable in the Site Editor, every one of these themes can be heavily customized to fit your site’s needs. You can start with theme that features single minimalist homepage, and then add as many menus and sidebars as you wish. Or, you can start with a complex business theme and strip it down to something minimal to suit your vision.

The Site Editor also includes a new feature called “Global Styles,” which allows you to edit site-wide settings for color, typography, and more. You’re free to change your theme’s default color scheme to whatever fits your mood, or even make all site text larger or smaller in a couple of clicks. To kick off this new feature, we’re also providing a few pre-built variations on some of these new themes.

All the new themes and variations can be found in the Theme Showcase. Or, if you’re starting a fresh site, they’ll be offered to you automatically in the site creation flow. This collection of themes is just the beginning, and we’re excited to continue launching a variety of diverse theme options for you. What would you like to see in the next set of themes on

Source link

Continue Reading

Subscribe To our Newsletter
We promise not to spam you. Unsubscribe at any time.
Invalid email address