Core Web Vitals are meant to improve the web experience and are the latest initiative from Google. Their introduction in May 2021 is designed to issue metrics that will help sites rank according to user experience.
Explaining Core Web Vitals
There are three specific Core Web Vitals Google will use to evaluate user experience. Website owners can measure these metrics to see where improvements can be made to their sites.
The three areas of user experience Google will focus on are loading, interactivity, and visual stability.
Loading performance of a webpage is important and the Core Web Vital that measures this is called Largest Contentful Paint (LCP). When measured, the LCP must be less than 2.5 seconds. This is not about the loading speed but the perceived loading speed felt by the user. It refers to the speed with which the main content takes to load at the top of a page.
The Interactiveness of webpages is measured by the First Input Delay (FID), and ideally, it should be less than 100ms. This measures how long it takes before a user can interact with a website, whether it is to click on a link, use a custom form, or tap on a button. The faster a user can move between interactions, the better.
The stability of a webpage is called the Cumulative Layout Shift (CLS) and should measure less than 0.1. CLS measures the frequency with which layouts shift in a page. Constant shifts are annoying for the user, and these are caused because DOM elements are added to the top of an existing file or resources have been loaded asynchronously. Different elements within a webpage change size vigorously, and this causes these frustrating shifts.
All the core web vitals can be measured with Google’s popular tools.
Speeding up a WordPress Site
If a WordPress site is not currently meeting Google’s recommendations for the three Core Web Vitals, a few general strategies can be followed.
Choosing a web hosting provider
Shared hosting environments often fail to deliver good loading times. Cloud hosting has become cheaper, and web hosting providers with cloud servers ensure uptimes that never fail and increase LCP performance.
Advanced Caching
WordPress has many caching plugins like Total Cache and W3 to enable caching. They make it easier to add caching rules, and they can be combined with advanced caching mechanisms to increase loading speeds, which speeds up how the server responds.
Image sizes
Optimized images speed up the loading times, but their reduced sizes shouldn’t compromise on their quality. Image optimization takes time when done manually with tools like Photoshop, but there are several plugins on WordPress that drastically reduce the image size and improve website speeds. Some of the best tools are EWWW Image Optimizer and Optimole.
Minimizing JS and CSS files
Unnecessary CSS or JavaScript before the main content also slows downloading time. Usually, a website owner will be alerted to this if the website is run through the Google Pagespeed Insights tool. Google does provide a guide to fix this manually on WordPress, but Autoptimize is a great plugin to optimize website code like CSS, JavaScript, and even HTML.
File Compression
Server-level compression reduces the file size of a site and saves disk space. Brotli and GZIP are both great tools to compress page sizes and bandwidth usage. They help reduce the time users need to gain access to a website. A plugin like PageSpeed Ninja enables GZIP compression.
Preconnect and important resources
Third-party resources can slow pages down because the browser makes a round-trip around them before downloading the actual resources needed. This happens especially if the resources are from different hosts.
Preconnect allows the browser to be told when a page is going to make an external connection and gets it to make the connection as soon as possible.
Several valuable guides help site owners reduce rendering blocking and improve paint time.
CDN maintains loading speed
Visitors to a website from various locations globally may have different loading speeds, and this also depends on where the website is hosted from. CDN (Content Delivery Networks) optimize website speed to all users, wherever in the world they are. CDNs keep copies of a website in various data centers in a different location, and the one nearest to the user location serves the webpage. Some of the most popular CDN users are MaxCDN and Cloudflare.
Final Take
With more than 40% of the world’s websites powered by WordPress, understanding Core Web Vitals can help make these faster. Suggested tools can help even beginners implement the necessary changes to improve their WordPress site speed.