-min.jpg)
You’ve probably heard of “Core Web Vitals” and the fact that they have something to do with site speed and user experience. But - what exactly are they, and how can you use them to make sure your WordPress site is the best it can be? Today, we’re answering all of that and more.
What are Core Web Vitals?
Core Web Vitals are the three main metrics Google uses to rate a webpage’s overall performance and user experience (UX) - ensuring that you have a great site. These metrics look at how quickly your pages load, how quickly the main content becomes visible to the user, and how soon interactive elements are functional. The score you get depends on how your webpage performs for these three tests:
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) refers to the time it takes for the main element on the page to load. This can be your hero image, video content or a large piece of text. As this is the element on the page that has the biggest impact on users, it's important that it loads quickly. A load time of under 2.5 seconds is considered “good” and anything longer will need some work.
First Input Delay (FID)
First Input Delay (FID) measures interactivity, the time a page takes to respond to a user’s input. Think hitting “add to cart” or “submit” on a form fill. Users can experience a lot of frustration if a button has been loaded on the page, but clicking it does nothing because it's not yet functional.
Ideally, you want interactive elements to be functional within 100 milliseconds; anything that takes longer than 300 milliseconds will need to be looked at!
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) measures the visual stability of a page’s layout. Unexpected layout shifts where already loaded content moves around as other page elements load can cause frustration in users. CLS is worked out by multiplying the screen share that’s affected by the distance the content travels. A good CLS score is under 0.1, and anything over 0.25 will need your attention.
Why are Core Web Vitals important?
Core Web Vitals show you, and Google, how your website performs for users. It’s not just about how fast your pages load, but how quickly they can be used. Delays in page load time can cost you conversions, page views and increase bounce rate. It’s important to optimise your website for both speed and performance if you want to keep your customers happy and those conversions coming.
User experience is a vital aspect of SEO; poor UX can impact your ranking on search engines like Google (it's been one of their page ranking factors since 2021). So, ignoring a bad Core Web Vitals score will not only frustrate your users, but it can also lead to less traffic thanks to low rankings and less-than-ideal visibility.
How to check the Core Web Vitals score of your WordPress site
There are a few tools you can use to check your Core Web Vitals score, all of them analyse the three metrics mentioned above, LCP, FID, and CLS, and give you feedback on anything that needs to be improved.
Three of the main tools you can use are:
Google PageSpeed Insights – This is really easy to use; just go to PageSpeed Insights, enter your URL, and it will give you a score for both mobile and desktop, plus detailed diagnostics and recommendations.
Google Search Console – You’ll need to have your site connected to Google Search Console to use it, but this is worth doing for both SEO performance and Core Web Vitals monitoring, among other things. You can find your Core Web Vitals report under the Experience menu; it will show your site’s performance and highlight any pages that need improvement.
Chrome Lighthouse panel – This is a quick and easy way to check individual pages. Just open the Chrome browser, navigate to the page you want to check and right-click anywhere on the page. Then select “Inspect” from the menu, which will open the DevTools panel where you can choose the “Performance” tab at the top. This will give you a rundown of the page’s Core Web Vitals performance.
10 tips for improving Core Web Vitals in WordPress
If you’ve checked your Core Web Vitals score and found that it could be better, these ten tips will help you optimise your WordPress site.
Optimise your WordPress hosting
Your hosting company plays a big role in your website’s performance. Servers optimised for WordPress give you a solid foundation to build from. Luckily, when it comes to WordPress hosting, Webcentral has got you covered. From built-in installation to easy customisation, optimised performance and security, we've thought of it all.
Improve your LCP score
As mentioned before, Largest Contentful Paint (LCP) measures how quickly the largest content element within a user's view loads on your page. This could be an image (like a featured image on a blog) or a block of text. To find out which element is impacting your LCP score, you can check the "Largest Contentful Paint element" section in your test results. If the LCP element is a large image, you can optimise it by using a smaller file size. If it's text, breaking it into paragraphs and headings can help.
Improve your INP score
Just like we want the largest content to appear quickly, we also want interactive elements to respond quickly when a user interacts with them. A faster INP score will mean a more responsive and less frustrating user experience.
When running a Web Core Vitals report or test, look for insights related to "Total Blocking Time" (TBT) and "Minimises work during key interaction" or "Long tasks." They’ll often point to JavaScript or other processes that are blocking the main thread and preventing your site from responding quickly.
There are a few things you can look at working on to speed things up:
Optimise your JavaScript: This usually involves deferring non-critical scripts and breaking up large JavaScript tasks into smaller chunks, so they don't block the browser's main thread.
Reduce the number of plugins: Each plugin adds code. So, audit your WordPress plugins and get rid of any that are unnecessary.
Server response time: A slow server can delay the initial processing of an interaction. Make sure your hosting is optimised for WordPress and that you're using the latest PHP version.
Improve your CLS score
When users experience noticeable shifts in the layout of a page they are trying to read or interact with, it can be incredibly frustrating. These shifts are often caused by elements loading slowly or dynamically changing size, pushing other content around.
You can find out which elements are causing these shifts by checking the "Avoid large layout shifts" section in your PageSpeed Insights results.
To prevent or fix these layout shifts, it's important to explicitly tell browsers the dimensions (width and height) of your on-page elements like images, videos, and ads. While WordPress usually handles this for images, you should check other media, especially embeds, using a browser's Inspect Tool, like the Chrome DevTool, to make sure their dimensions are included in the source code.
Remove render-blocking elements
Render-blocking elements are website resources (usually JavaScript or CSS files) that must load fully before a web page can display its content. This can really slow down perceived page load time and have a negative impact on your Core Web Vitals score and user experience.
Tools like PageSpeed Insights can identify these render-blocking elements, often originating from WordPress plugins, themes, or third-party integrations like Google Analytics. Because these are usually added programmatically, it can be difficult for beginners to optimise or remove them manually, so you might need to get some professional help with this one!
Properly size your images in WordPress
Large images are often behind low Core Web Vitals scores. Unnecessarily big, high-resolution images can lead to longer load times. This tends to have a bigger impact on mobile users, as even responsive themes that adapt image display to smaller screens need to download the larger, original file. Properly optimising images without sacrificing quality is crucial for addressing this.
Use a CDN to Server to improve your Core Web Vitals score
Content Delivery Networks (CDNs) are third-party services that boost website performance by serving static files (like images and CSS) from geographically distributed servers. This means users download content from a server closer to their location, making loading times much faster and delivering a better Core Web Vitals score. CDNs can also reduce the load on your main website server, meaning it can handle other processes more efficiently.
Some CDN services include Cloudflare, which offers a free CDN plan with basic firewall protection.
Implement an effective caching strategy
Caching stores static versions of your website's pages, so when a user requests a page, the server can deliver it much more quickly without needing to process all the PHP and database queries over again. This reduces server response time, improving your LCP (Largest Contentful Paint) and overall loading speed. You can implement this by using popular WordPress caching plugins like LiteSpeed Cache, W3 Total Cache, or the one we recommend, our partner WP Rocket.
Minify CSS, JavaScript, and HTML
Minification removes unnecessary characters from code, like whitespace, comments, and line breaks, without changing its functionality. This can reduce the file size of your website's assets, meaning faster download times and improved page load performance. A lot of caching plugins offer minification features, or you can use dedicated optimisation plugins.
Optimise fonts and icons
If not handled correctly, web fonts and icon libraries can be major culprits for render-blocking resources and layout shifts.
Self-host fonts - Instead of relying on external services like Google Fonts, download the font files and host them on your own server. This gets rid of the external request and gives you more control.
Preload fonts - Use rel="preload" in your HTML. This tells the browser to download the most important fonts early in the loading process.
Use font-display: swap; - This CSS property allows the browser to display a fallback font while your custom font is loading, improving the user experience.
Subset fonts - Only include the characters you actually need from a font file.
Use SVG icons - Vector-based SVG icons are usually lighter and scale better than image-based icons, improving your site’s performance.
So, there you have it – the full lowdown on Core Web Vitals and how to improve your WordPress site's score. While you don’t need to check and optimise for Core Web Vitals as regularly as you might for organic SEO, it's still important to check in on this aspect of your site once a month, especially if you are actively making changes to your site, like adding new pages or content.
You can find out lots more about getting the best out of your WordPress site on our blog. And if you’ve not already signed up for WordPress hosting with Webcentral, what are you waiting for? Our optimised servers and expert team are waiting to help you bring your WordPress site to the world for as little as A$7.45 a month!
