Page experience has become an increasingly important aspect of how Google ranks websites in the SERPs. Page experience constitutes several factors but there are a set of core web vitals that must be accounted for or else your site’s rank will suffer.
Understanding core web vitals will help you improve your site’s rank and its overall user experience. Today, we’ll be define what they are and propose ways to improve them on your website.
Defining Core Web Vitals
Everything we’ll be discussing here today relates directly to page speed and user interaction. That is, Google highly values page speed and user interaction in how it determines search engine ranking as it pertains to page experience. There are three key aspects that makeup the core web vitals. Let’s define each aspect now:
Largest Contentful Paint
First up is the largest contentful paint. It can be best described as the amount of time it takes for a page to load from the perspective of a real-life person browsing the Internet. So, the LCP is the time it takes from when a user clicks on a link to when the majority of the viewable page has loaded.
While other page speed metrics emphasize how long it takes a page to load in a technical sense, the largest contentful paint describes how long it takes to get to the point of being readable and usable to the average viewer.
First Input Delay
The second core web vital is the First Input Delay. It outlines the amount of time it takes for a user to interact with an element of your website. So, the FID measures the time after a page has loaded when a user first clicks a link, selects a menu option, fills out a form, or similar.
Google has set FID as a core web vital because it is another way to accurately measure how real people interact with websites. An important thing to note here is that FID might not be as relevant for every website type. If your site largely serves content, it’s understandable it might take users longer to interact with your site. If you have a prominent call-to-action on your page, however, then optimizing for this web vital is a must.
Cumulative Layout Shift
The last marker is called the Cumulative Layout Shift. It essentially refers to how stable a web page appears as it’s loading. Sometimes a page looks like it’s rearranging and fluctuating all over the place when processed in the browser. This means it has a bad CLS, which can spell bad news for the site’s SERPs.
It makes for a much better user experience for visitors if page elements aren’t shifting all over the place while loading. It also prevents them from accidentally clicking on links or buttons too early, only for them to shift right out from under their cursor.
A Note About Other Web Vitals
Now, the above three core web vitals are currently deemed the most important for determining a positive page experience. However, they aren’t the only factors you need to be mindful of. These aren’t “core” vitals but still important to keep in mind when developing or updating your websites:
- Mobile-friendliness — Pretty self-explanatory. In this day and age when over half of all web browsing is done on mobile devices, a responsive and mobile-friendly site is a must.
- HTTPS — People expect you to provide a secure experience when landing on your site. It will not do well in search if it doesn’t have HTTPS.
- Interstitials — Everyone hates popups and Google does, too. That’s why it’s important to avoid using intrusive pop ups and overlays on your site. Otherwise, your site’s ranking will be punished for it.
- Safe-browsing — Lastly, your website also needs to provide a safe browsing experience for visitors. That means no malicious content or malware on your site.
Now that we have a clearer idea of what the core web vitals are, we can discuss how to improve them on your website.
Improving Largest Contentful Paint
Your first order of business is to improve the LCP for site visitors. To make that first swathe of content load more quickly and efficiently, you can do the following.
Use a CDN
If you’re not using one already, now’s the time to make sure your site runs on a content delivery network (CDN). This will speed up site delivery considerably, making for faster page speeds and better overall load times for your visitors. It makes your site look better in the eyes of both search engines and real users, which is a total win-win.
Enable Caching
Caching speeds up page load times for repeat visitors. This is a no brainer. So while it might not improve your LCP on the first visit, it can do so for repeat visitors. Besides, it can make for a more pleasant viewing experience for visitors, so it’s well-worth doing for that reason alone.
Minify CSS
Another thing you can do is to minify the CSS on your website. If your CSS is repetitive or inefficient, it can slow down your LCP dramatically. This literally comes down to things like too much whitespace, extra lines, and extra bits of code.
So, the way to fix this is to either manually remove these unnecessary pieces of CSS or use a plugin to scan through your CSS and remove it automatically.
Lazy Loading
Another way to improve your largest contentful paint is to implement lazy loading. This refers to a process where images only load when a site visitor scrolls down to their position on the page. So, only the images viewable upon initial site load are loaded first, then the rest appear as the user scrolls. This can make your site load much faster than it would normally, especially if your web pages are image-heavy.
Tools to Help
WordPress-compatible CDN options are plentiful and include Cloudflare, KeyCDN, and Bunny.net.
WordPress has many plugins that make enabling caching a snap. WP Total Cache and WP Super Cache are two popular examples.
There are also several free plugins available for minifying CSS and Javascript, including Autoptimize, Fast Velocity Minify, and Hummingbird.
And if you want to implement lazy loading, you need look no further than plugins like LazyLoad and Smush.
Improving First Input Delay
Next up on our improvement list for core web vitals is the First Input Delay or FID. To make improvements here, you need to address three main areas of concern. The first, is to use caching, which overlaps with the section above. After that, you need to optimize the JavaScript on your website as well as remove third-party scripts that could be slowing down site functions and overall load time.
Optimize JavaScript
There are two general approaches to optimizing the Javascript on your website. The first is to defer it, which means to force the site to load its LCP before the Javascript has a chance to do its thing. The second tactic is to minify your JavaScript, much in the same way we discussed minifying CSS above.
Regardless, it’s essential that your JavaScript loads quickly as users can’t do much of anything on your site while it’s still loading. So either reduce it greatly or defer it.
Remove Extra Scripts
This one gets quite tricky, as often third-party scripts are recommended and touted as super helpful for web development. A good example is Google Analytics. Or third-party heatmap plugins. Tools like these can provide you with valuable insight into how your site functions and how it’s reaching visitors. But they do so at a weighty cost, significantly slowing down site load times and FID.
One way to combat this is to obviously remove any third-party scripts you don’t need. After all, just like with plugins, if you’re not using them, there’s no reason for them to be there.
Another thing you can do is enable on-demand loading of third-party code.
Tools to Help
To optimize the Javascript on your website, you’ll often find the same tools that aid in minifying CSS will minify Javascript as well. So, our suggestions above apply here as well. To defer Javascript, minify, and adjust how third-party scripts load (as well as enable caching and other features that improve FID), WP Rocket is really the plugin to seek out here. It streamlines these processes into an all-in-one solution.
Improving Cumulative Layout Shift
Last but not least of the core web vitals is the cumulative layout shift. To prevent your site’s content from moving this way and that as it settles into place, you can actually focus on three key areas.
Make Full Use of Width and Height Attributes on Media
Pretty straightforward, isn’t it? But this tip really can make all the difference in how your site appears as it loads. Since WordPress themes often have flexible spaces for media to appear, they can shift around and resize depending on the dimensions of the media inhabiting that space. So, if you post photos often, the layout will likely shift around depending on each image’s size.
To prevent this, you can assign fixed width and height attributes to each photo, photo gallery, video, GIFs, or slideshow. By doing so, your browser will know how much space to dedicate to them. Consequently, even before the image or video loads, the space designated for it will hold steady and your layout won’t be shifting around to accommodate new media items as they load.
Create Designated Spaces for Ads
While it’s common to place ads in the sidebar or header of WordPress websites, doing so without further specification can lead to some dramatic shifting around as your site’s content loads. To reduce the cumulative layout shift, you need to define the dimensions of your ads as well. Make it clear how much space they’ll be taking up so your content doesn’t move about while loading. Often, you can use widgets with specific dimensions to help with this.
Host Your Own Fonts
Web fonts are very popular but the fact they must be loaded from a third-party source can result in some out-of-order site loading issues. Hosting fonts locally is a good solution for this issue.
Tools to Help
The Google Cumulative Layout Shift Debugger is a great way to determine how bad your CLS is so you can make a plan to fix it. It tells you specifically which HTML elements cause the biggest shifts.
We’ve already mentioned the plugin, WP Rocket, but it’s a helpful addition to your toolbox for dealing with CLS, too. In fact, when you open the plugin’s settings, you can go to the Media tab and manually add in any dimensions for images that are missing throughout your site’s content. You can do the same for the dimensions on videos and iframes.
Lastly, you can use a plugin like OMGF to host any fonts you want to use locally. Then, add the URLs to these local fonts to your preload key requests in any of the popular speed optimization plugins.
How Will You Improve Your Site’s Core Web Vitals?
Though it may feel overwhelming to keep up with all the latest requirements for optimum search engine rankings, it’s more than worth the effort. Especially when you consider the fact that these page experience optimizations actively create a more pleasant browsing experience for real-life human beings.
Here, we’ve discussed what makes up core web vitals and how you can improve yours for better SERPs. Now you can take this knowledge and improve upon your website’s page and user experience. Happy optimizing!
Which area of the core web vitals is your site most struggling with? How are you planning to address it? Let us know in the comments!
