WordPress' Elementor update addresses core web vitals
Published by OSG Team05/03/2021 Category(ies): News, SEO
Copyright © Shutterstock / Thepanyo
The popular WordPress page builder plugin Elementor has received an update focused on providing faster page loads. The update introduces improved efficiencies when serving JavaScript and CSS files. These changes in Elementor version 3.2 are intended to improve the Core Web Vitals scores. You'll find more about it here.
Elementor has also released a way for publishers to show how Google Fonts can be loaded more efficiently.
What are Core Web Vitals?
Core Web Vitals are metrics designed to measure the actual website experience for users on mobile devices. Measurements are collected from users on Chrome who have opted in to providing the information, which is then collected as a Chrome User Experience (CrUX) Report.
This data 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 on a fast server will not improve Core Web Vitals scores because the problems that Core Web Vitals check are in the website's code itself. Delivering this code faster from a fast web host will not fix the bug in the code that needs to be downloaded and rendered on a mobile device. That's why it's important for website template and page builders to make the code their users rely on more efficient.
What Elementor has announced is their renewed effort to deliver website code more efficiently to help publishers offer their website visitors a better user experience and thus rank higher.
Why JavaScript and CSS can be problematic
JavaScript and Cascading Style Sheets (CSS) are files that each provide functionality and visual style for 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.
When a person visits a web page, the browser downloads these files to create the web page. However, the rendering of the web page stops 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 the downloading of the files or download them in parallel, these files still need to be activated to complete the webpage rendering. The ideal approach is to minimize the number of files to download. It downloads the absolute minimum amount of JavaScript and CSS required to build a given webpage.
If a website e.g. For example, if it does not contain a contact form, there is no need to download files that would be required to create it. This more efficient approach to downloading JavaScript and CSS is called conditional loading. This means that they are only downloaded when they are needed.
Elementor takes the initiative
It is important that more and more companies implement these important updates. Elementor's announcement is an exciting development for users of the plugin and puts pressure on the rest of the WordPress ecosystem from plugins to theme makers to keep up with Elementor.
Source: Search Engine Journal