Does any of the following sound familiar: your website always seems to be sluggish, pages load haphazardly with elements bouncing around the page, or you don’t seem to be generating (and keeping) the organic traffic that you expect?
Any of these symptoms might be a sign that you need to check up on your WordPress website’s core web vitals.
Core web vitals is a 2020 Google initiative to help website owners and search engines get on the same page regarding how to improve user experiences.
As such, how your website scores on these metrics don’t only directly affect your search engine rankings but can also give you a glimpse of whether visitors will find your website pleasant or frustrating to use.
But, what exactly are website core web vitals? Why do they matter? And, how can you make sure your websites’ core web vitals are up to scratch?
In this definitive guide, we’ll cover everything you need to know about how to improve your WordPress website’s core web vitals now, and in the future.
Here is an executive summary to help you navigate the article:
What Are Core Web Vitals?
As you might expect, it’s challenging to boil something as subjective as user experience down to objective metrics that can be measured and compared.
However, this is exactly what Google is trying to do, at least when it comes to how website performance affects the user experience.
In their own words: “Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.”
Google have developed their core web vital metrics to focus on three distinct facets of the user experience:
- Loading time/speed: This is the most straightforward facet which directly refers to how fast/slow a page and its contents loads. More than half of mobile users abandon a page that takes more than 3s to load. In this fast-paced world, users are becoming more-and-more impatient, making slow loading websites a key frustration.
- Interactivity: Interactive elements, such as buttons, often have delayed response times as content loads in the background. The sooner elements on your page can be interacted with, the better for the overall user experience.
- Visual stability: Sometimes when loading a slow or unoptimized web page, elements jump around on the screen because they are loaded in the wrong order or simply because some elements take much longer to load than others. This can cause users to take incorrect actions and just plain looks bad.
Google has established three main core web vitals related to each of these factors. The current set of core web vitals that were introduced in early 2020 are as follows:
Largest Contentful Paint (LCP)
This is the largest element that loads in the visible area of the website page (anything you see before scrolling down). LCP directly affects how fast your web page seems to load.
Google recommends an LCP of 2.5s, which means the largest element should load in under this time.
For example, in the image below, the purplish background image will be the LCP:
In many modern website pages, the LCP tends to be a full width featured image that accompanies a page or blog article.
Because this is such a popular practice now, it’s a common WordPress site core web vital that needs improvement. So, the LCP is mostly affected by using slow servers or elements with large file sizes that take a long time to load.
Google themselves list the following key factors that affect LCP:
- Slow server response times
- Render-blocking JavaScript and CSS
- Resource load times
- Client-side rendering
First Input Delay (FID)
Simply put, this measures the time it takes before interactive elements can execute events. For example, how long does it take the first time a user clicks a link or button before the action can be completed?
There may be a delay because the browser is busy loading content (such as page elements or JavaScript or executing code at the time when a user clicks a button or link.
Google only measures the first input delay because interactivity problems tend to happen when a page is initially loaded.
Google recommends a time of under 100ms (or, 0.1s). FID covers the interactivity aspect of the core web vitals.
FID is mostly affected by the JavaScript or CSS on your page, particularly when loading at executing code just as the page loads.
Cumulative Layout Shift (CLS)
CLS attempts to measure unexpected changes in the page layout as the page is loading. A prime example is a page with two buttons below each other.
Just as you want to tap the bottom button, another element loads at the top of the screen, making you accidentally tap the first button instead.
We’ve all experienced this issue and the frustration that goes with taking the wrong action or navigating to the wrong link.
Here is an example from Google. In this case, the button loads in between the already loaded grey and green sections, moving the green section down:
While the concept is simple, the math can get a bit complicated. For each element, CLS calculates the size of the element and the distance that they travel as a fraction of the overall screen size.
These two values are then multiplied to get an overall impact score for each element. These impact scores are then added together to get a total CLS for the page which is a value between 0 and 1.
Google recommends websites should aim for a CLS of 0.1 or less.
Why Are Your Core Web Vitals Important for Your WordPress Website?
There are a number of reasons why your WordPress website’s core web vitals can spell success or failure. That’s why they call them user-centric performance metrics.
By improving your core web vitals, you’ll provide better user experiences and make your website more user-friendly.
This alone is important for a number of reasons:
- Reduce your bounce rate by keeping more users on your website
- Make better first-time and lasting impressions on your users
- Build a reliable and trustworthy image of your website
- Convert more visitors into customers
- Provide more enjoyable experiences to your new and existing users
If your website takes long to load, users are prone to just abandon it and move to the next one. In fact, 53% of mobile users abandon a website that takes more than 3s to load.
However, there is another reason why core web vitals are crucial to your website’s success: Google now also uses them as a ranking signal when ranking web pages for its search engine results.
This means that how high your WordPress website core web vitals score will directly affect how highly you rank on Google SERPs.
As you probably know, ranking highly on Google (and, especially on the first page), is one of the best ways to get more organic traffic.
How to Test Your WordPress Website’s Core Web Vitals
Now that you have a good idea of what core web vitals are as well as why they are important, let’s take a quick look at tools you can use to uncover your website’s performance in this regard.
By using these tools, you’ll be able to uncover any current issues as well as opportunities for improving your score.
We’ll be focussing on tools that are easily accessible and usable by most website owners so that you can start using them today to improve your website.
LightHouse
LightHouse is a web developer tool built right into Chrome that you can use to test your WordPress website’s core web vitals.
You can access LightHouse on any website by pressing “F12”. That will open a page like this with a preview of the website on the left and the LightHouse console on the right:
You can open the LightHouse performance audit tool by clicking the “>>” in the top bar and then “LightHouse.” This will take you to the page below.
To test your performance metrics for core web vitals, you’ll want to check the “Performance” box and then choose whether you want to test the page for mobile or desktop. Click “Generate Report” to get the results:
This is how your score will look and you can see a breakdown of the individual metrics below:
Helpful, below your score, LightHouse will also highlight opportunities where you can improve your page performance:
Below are more diagnostic results. These factors may help you further optimize your WordPress website core web vitals further by improving your overall performance and optimization:
Lighthouse doesn’t directly assess the FID. However, the Total Blocking Time (TBT) and Time to Interactive (TTI) are very closely related to FID. Improving these metrics should improve your FID as well.
For example, it actually points out what was your largest LCP element, the overall size of your page, large layout shifts, and main-thread tasks that may hamper interactivity.
PageSpeed Insights
PageSpeed Insights is another easy-to-use tool. All you have to do is go to PageSpeed Insights and paste the link to the web page that you want to analyze:
The results are very similar to that of LightHouse. The main difference is that PageSpeed Insights also provides real-world results for websites with enough traffic:
As you can see, PageSpeed Insights directly measures your FID and actually shows you in which percentile your website falls.
It also tells you whether or not your website has passed the core web vitals assessment on aggregate over the last 28-day period by using real-world data.
Google considers websites that fall under at least the 75th percentile across all metrics as passing the assessment.
Below that, you can find the same lab-based results that LightHouse provides as well as opportunities for improvement and diagnostics:
As well as looking at the individual scores, you should also aim for an overall score of 75+.
Google Search Console
You can also use Google Search Console to generate performance reports for your website. However, you will first need to create an account and go through the process of registering your website with the console.
Related Reading: How to Use GTmetrix to Test Your Website Speed?
How to Improve the Core Web Vitals for Your WordPress Website
It’s important to realize that many of these fixes will help improve more than one CWV metrics. That’s why it’s important to holistically approach optimizing your CWV for the best results and to provide the best user experience.
That being said, we’ll indicate where a particular optimization applies directly to a specific CWV:
Improve Slow Server Response Times
This is the first and foremost issue you should address whenever trying to improve your website performance. It doesn’t matter how well you optimize your pages, if your website is hosted on a slow server, it will still perform poorly.
Improving server response times will perhaps have the biggest effect on the LCP. The faster things load from the server, the more likely your LCP is to load fast as well.
However, it will also indirectly benefit all other metrics as well by simply reducing the total time to load.
You can usually tell if your server is slow if most of your website pages load slowly, if the performance is consistently sluggish on the front or backend.
If you use one of the tools above to audit your performance, it’s also a good indicator if the “Initial server response time was short” falls in the red:
Overutilizing Hosting Resources
You can also check your resources usage in your hosting dashboard to see whether you’re overutilizing resources, such as CPU, RAM, I/O operations, unique visit budget, or bandwidth.
Operating close to these thresholds will inevitably lead to slower performance. If you reach or surpass these thresholds, your host might be intentionally throttling your account. This is especially likely to happen on shared hosting services.
For example, here is a screenshot of resource usage on a Bluehost account:
Many of the best WordPress hosting providers offer a number of shared hosting as well as VPS packages, such as A2Hosting, Bluehost, GoDaddy, and HostGator.
You can also go with a high-performance WordPress-specific provider such as WPEngine or Kinsta which are a bit pricier but offer much more scalable WordPress packages.
You can see that most percentages are still within relatively healthy ranges.
There are two ways you can try to address this issue:
- Reduce your website footprint: If you’re struggling with computing resources, you might see improvement by optimizing your website using some of the other fixes listed here. This means removing unnecessary code, plugins, themes, or anything else that might strain your resource usage. Running multiple websites on a single shared hosting account can have a massive impact, and you might have to decommission some or move them to another account/server.
- Upgrade your account: Overused resources could be a sign that you’ve outgrown the limits of your current account. It might be the right time to upgrade your plan or consider moving to hosting with dedicated resources, such as a VPS or dedicated server. While the latter two options are more expensive, it’s worth investing in if you’re growing an online business.
Utilize a CDN
A CDN (Content Delivery Network) is a global network of servers. When you register your website with a CDN, it will distribute your website content to multiple servers in different regions.
If a user in that region visits your website, it will load the content from the nearest server, improving page loading times.
The good news is that most hosting services today provide a free CDN. The most common is the free tier of the popular CDN CloudFlare.
So, first of all, check whether your account comes with a CDN and that it’s configured. Support should be able to help you with this.
You can then also easily upgrade to a premium CDN account for even higher bandwidth availability, better speeds, and added security.
Related Reading: How to Speed Up WordPress Site?
Cache Your Assets
Caching means saving your website content (such as HTML files) on edge servers where they are typically accessed by visitors.
This prevents the website from having to be recreated from scratch every time. Registering your website with a CDN should already improve your caching.
The trick is that you want visitors to get the cached version of your website as long as nothing is updated on your website, but you want them to get the new version as soon as you make changes to your site.
This can be tricky to do manually, especially if you want to leverage in-browser caching.
If you have a WordPress website, your best bet is to use a caching plugin, such as WP Rocket, Cache Enabler, Comet Cache, etc.
Prefetch Third-party Content
If you’re loading content from third-party websites before your LCP (or even as your LCP), you’ll want to get this out of the way as soon as possible.
First of all, you can detect whether third-party content is affecting your pages if the following issue is highlighted by PageSpeed Insights:
In this case, we’re only loading third-party fonts, so all is good.
In WordPress, this issue is typically caused by third-party plugins, such as Google Analytics, WooCommerce, etc.
The obvious solution would be to simply remove the plugin or third-party code if it’s not necessary. As a rule, you should never leave unused plugins installed on your WordPress installation.
However, you can also add the following custom markup to your website pages:
<link rel="preconnect" href="https://example.com" />
Or:
<link rel="dns-prefetch" href="https://example.com" />
You can simply replace the href domain with the domain of the service you are using, you can alert the browser of your intent.
To pre-load videos from YouTube, for example, you can just swap in “https://youtube.com.” You can find more commonly used prefetch domains here.
Some caching plugins, like WP Rocket, allow you to also prefetch third-party content from within an easy-to-use dashboard.
Optimize Your JavaScript and CSS
Loading JavaScript or CSS files may also delay the time it takes to load and render the LCP element on your page.
The browser will delay rendering the HTML page if it encounters external stylesheets or JavaScript <script> tags before the content.
There are a number of solutions you can use to help limit the impact of JavaScript and CSS on your web pages:
- Eliminate render-blocking resources
- Minify CSS and JavaScript
- Combine CSS files and JavaScript files
- Optimize the delivery of CSS and JavaScript files
Optimizing JavaScript and CSS will mostly benefit your FID by eliminating code that executes on the main thread, preventing your website from being interactive.
However, it will also play a role in reducing LCP loading times as you may eliminate items blocking the LCP from loading first.
Once again, PageSpeed Insights will helpfully point out whether you can improve in this regard, the exact files/queries causing the issue as well as the potential savings:
For example, here we see a number of CSS and JavaScript files that are blocking the page from rendering content.
You may also see these prompts to minify CSS and JavaScript:
Or, these opportunities to remove unused CSS and JavaScript:
If using Lighthouse as your performance auditing tool, you might also see: “Remove unused JavaScript”:
For some of the opportunities in the above images, you’ll see a potential savings in terms of milliseconds.
This is important because it shows the amount of time that the executing code might block the main thread rendering your website page, and directly contributing to FID.
As a WordPress website owner, your best bet is to have a plugin do the hard work for you to optimize your WordPress website’s core web vitals.
Unless you have experience in web development, you can seriously impact your website functionality or appearance by manually altering the underlying code.
Once again, a plugin like WP Rocket (paid) or Autoptimize (free) comes with this capability built-in.
That will give you options to:
- Minify CSS and JavaScript files
- Combine CSS files and combine JavaScript files
- Exclude unnecessary/unused CSS files
- Defer files so they are no longer render-blocking
Here is an example of the Autoptimize interface with the available settings. There are similar options for CSS and HTML:
There is a chance that using these features might disturb how your page’s appearance. So, always double-check what the effect is and then enable/disable the settings accordingly.
You can do most of this manually as well by editing the markup, although you’ll need to know what you’re doing to avoid messing up how your pages render.
There are also more advanced fixes that are less likely to cause major issues such as “avoid serving legacy JavaScript to modern browsers” and “remove duplicates in JavaScript bundles” but you should just keep an eye out for these potential issues when running the performance test.
How to Improve Your CLS Score
CLS is a relatively unique WordPress core web vital because it doesn’t rely on actual loading times or improving your website speed. Instead, it relies more on using good practices to ensure the elements on your page load in the correct order.
However, generally speeding up loading times for your website content may reduce the perceived CLS. That’s because, if your pages load really fast, users will be less likely to notice any instability and it will be less likely to interfere with them using your website.
Below, we describe some concrete ways you can reduce CLS on your WordPress pages. However, you should read the entire Google whitepaper on optimizing CLS to get a look at all the other aspects.
Give Your Images and Video Elements Size Attributes
Before images and videos are actually loaded on the page for visitors to see, the browser will try to allocate space for them.
However, it needs the height and width values of the element in order to allocate a box with the right size. If the browser can create the correctly-sized box for each element, they will load in the same spot and keep the view stable.
WordPress should automatically provide height and width attributes for all your images. However, you should double-check this to be sure.
To do this, simply view a page you have published with some images on it. Right-click any image and then click “Inspect:”
That will open up a window with the underlying HTML with the image-specific markup highlighted. You’ll see that this image has width=”1024″ and height=”683″ specified:
Limit Where You Use Dynamic Content
While images and videos are the most common offenders here, you should also watch out for embeds (such as widgets or video embeds), iframes, ads, and other dynamic content.
Ads that pop up at the top of the screen, moving all other page content down is particularly annoying. If you do have to use them, you should make sure that they are loaded first or that space is created for them from the beginning.
Google has been known to punish dynamic content that blocks the user from using or viewing content on the page. These are often referred to as “Intrusive Interstitials.”
A prime example today is a subscribe popup that covers the entire page and needs to be closed before you can view the content.
If you do want to use these types of elements, it’s best to configure it as a slide-in or sidebar that only covers a part of the page and doesn’t insert itself between other elements.
There is a lot of popup and ad plugins for WordPress that allow you to configure these kinds of elements. For example, JetPopup, OptinMonster, Bloom, or even the built-in Elementor popup builder.
Unfortunately, there is no step-by-step way to show you how to do this. You’ll just have to make common-sense decisions based on the CLS guidelines provided by Google.
Preload Fonts to Avoid FOIT and FOUT
Like we did for third-party content, you should also preload optional fonts to prevent them from interfering with a smooth page loading sequence.
The problem is that sometimes the browser starts loading elements that are ready and defers loading the font files until later. This leads to situations where the text is ready to be rendered but the font is not loaded yet.
That causes what’s called Flash of Invisible Text (FOIT). Or, it can also lead to a FOUT, or Flash of Unstyled Text (FOUT).
The former means that there will be an empty space without any text while the latter means that unstyled, system font will be loaded instead. This can be jarring at worst or just plain looks bad at best.
You can do this manually, but the implementation can be browser-specific, meaning you might have to do it multiple different ways and keep updating it as browsers change their techniques.
As a WordPress user, there are plugins available that can do this for you with just a couple of clicks as well. Here are all the ways you can preload fonts for your website:
Header.php:
- Go to the Appearance >>Theme Editor from your WordPress dashboard.
- Click on the “header.php” file in the right-hand file list.
- Copy and paste this text:
<link rel="preload" href="https://fonts.google.com/specimen/Roboto" as="font" type="font/woff2" crossorigin="anonymous">
to the file and swap in the url to the font you want to use.
There are also other premium plugins, such a WP Rocket which can do the same thing so that you don’t have to mess around in your website’s code.
In this case, you only need to copy the same link to the font and then add it to the appropriate field from within the plugin dashboard.
We recommend rather investing in a plugin that does this for you because accidentally removing or altering a bit of code in your WordPress website’s files can seriously damage its appearance and functionality.
Bonus Tips to Optimize the Core Web Vitals for Your WordPress Website
Now that you know what actions to take to directly optimize your WordPress website core web vitals, let’s take a look at some other best practices:
Optimize Your Image Assets
It’s all fun and games to use tonnes of images on your site, but few consider the impact of using images when trying to optimize their WordPress site’s core web vitals.
So, what’s the big deal?
Well, in a 2018 talk, Google themselves identified images as one of the leading factors that slow down website pages. Google also says that optimizing images is one of the ways with the most potential for improving your website performance.
According to data from HTTPArchive, image data has shot up by over 50% on mobile desktop websites and over 150% on mobile websites.
What’s more, images almost always directly affect two core web vitals:
- LCP: Typically, the largest element in the visible area of the page is an image.
- CLS: If not used correctly, images can have a massive impact on page stability as you can see in the “How to improve your CLS score” section above.
That being said, images are a very necessary part of creating engaging, attractive, and modern website pages, so you likely don’t want to get rid of them completely.
Instead, you should use them wisely and make sure to optimize them for core web vitals where possible. There are a number of ways you can do this:
- Responsive images: Responsive images mean that you resize images as necessary for different screen sizes, such as desktop, tablet, and mobile. You need much lower quality images to display nicely on smaller screens without a visual loss of quality, which reduces the impact on loading times. Nowadays, WordPress has built-in responsive images. However, you will want to ensure that your themes/plugins support them and don’t break the responsive design. If you want galleries on your pages, but keep your images responsive, use top plugins like NextGEN, Modula, and Envira.
- Lazy-loading: Lazy-loading ensures that images above the fold are loaded first and lower down images are only loaded when they are scrolled to. This improves LCP and the user experience. Today, most browsers have built-in lazy loading and WordPress supports it as well. Once again, you should just ensure that nothing on your WordPress installation interferes with this or uses JavaScript for lazy loading. You can also check this via Lighthouse.
- Serve images in next-gen formats: Some newer formats, like WebP and JPEG-200, are more efficient at encoding images, reducing payloads and making them faster to load. You can manually convert images to these formats using software like PhotoShop, web-based tools, or even WordPress plugins.
- Use an image plugin or CDN: We introduced CDNs above, but there are also image-specific CDNs. These CDNs may have built-in responsiveness, intelligent image compression (that lowers size while maintaining quality), lazy-loading, caching, format conversion, and more as well as another layer of CDN to deliver the images faster. ShortPixel, Imgix, Imigify, and Cloudinary are just some of the options with WordPress-specific plugins.
As you can see from the same screenshot as above, we have lazy loading, width and height, and “srcset” with all the responsive image sizes:
Focus on Mobile
Another thing you should consider is to focus your core web vitals optimization for mobile website visitors. The reason is simple: mobile internet traffic has officially surpassed desktop traffic.
That means it’s more important to cater for a mobile crowd than the desktop one. This trend is also likely to continue in mobile’s favor for the foreseeable future.
Google themselves has acknowledged the importance of mobile by switching to mobile-first indexing. That means Google will prioritize ranking pages for search results according to the mobile version of the website.
Thankfully, both Lighthouse and PageSpeed Insights have the option to perform a mobile as well.
The good news is that most fixes will improve the score for both desktop and mobile. However, there might be cases where a specific theme or plugin is causing issues specifically on desktop or mobile.
In this case, you’ll need to try and get to the bottom of the issue and solve it using the Lighthouse or PageSpeed Insight tools.
Build a Healthier, Better WordPress Website Through Core Web Vital Optimization
We just covered a lot of ground, and you might be feeling a bit overwhelmed. However, the key is to take a deep breath and work through these WordPress core web vital optimizations step-by-step.
Once you get the hang of it, it will just become another part of your website maintenance routine.
Start by testing your current website health through PageSpeed Insights or Lighthouse. Make some improvements and test again to see if it had any effect. Rinse and repeat.
Remember why you are doing this: you’re setting your website up for success by making your visitors happier and ranking higher on search engines.
This creates a snowball effect of not only attracting more visitors, but keeping them too.
Luckily, by using WordPress alongside fantastic plugins, like WP Rocket, Imigify, Elementor, etc., you’ll make your life much easier.
Have you tried to optimize your WordPress website’s core web vitals? Did you manage to raise your score or improve your overall website performance?
Which aspects did you find harder/easier to do? Let us know in the comments below.
Other Guide Related Articles:
- access
- Account
- Action
- Ad
- Ads
- AREA
- around
- article
- articles
- audit
- availability
- BEST
- best practices
- Biggest
- Bit
- Blog
- Box
- browser
- business
- call
- cases
- Cause
- caused
- change
- Chrome
- closed
- code
- comments
- Common
- computing
- considers
- content
- contents
- continue
- Conversion
- Couple
- Creating
- Current
- dashboard
- data
- dc
- deal
- delay
- delivering
- delivery
- Design
- Developer
- Development
- DID
- distance
- domains
- Early
- Edge
- editor
- etc
- events
- executive
- Experiences
- eye
- Failure
- FAST
- featured
- Features
- First
- first time
- Flash
- Focus
- format
- Free
- full
- fun
- future
- Games
- GitHub
- Global
- good
- Google Search
- great
- Green
- Growing
- guide
- Health
- here
- High
- Highlight
- Highlighted
- hosting
- How
- How To
- HTTPS
- idea
- image
- Impact
- information
- Initiative
- insights
- intent
- interactive
- Internet
- investing
- issues
- IT
- JavaScript
- jump
- keeping
- Key
- large
- lead
- leading
- Leverage
- LINK
- List
- load
- Long
- major
- Making
- math
- measure
- Metrics
- Mobile
- move
- network
- news
- offer
- online
- Online Business
- open
- Operations
- Opportunity
- Option
- Options
- order
- organic traffic
- Other
- Others
- owner
- owners
- paint
- performance
- photoshop
- plugin
- plugins
- Popular
- Premium
- preventing
- Preview
- quality
- raise
- RAM
- Reading
- reasons
- reduce
- report
- Reports
- resource
- Resources
- response
- Results
- running
- saving
- Screen
- Search
- search engine
- Search engines
- security
- Services
- serving
- set
- setting
- shared
- shift
- Simple
- Size
- So
- Software
- Solutions
- SOLVE
- Space
- speed
- Spot
- Stability
- start
- success
- support
- Supports
- system
- Tablet
- Tap
- tells
- test
- Testing
- The Future
- theme
- time
- tips
- top
- traffic
- travel
- uncover
- us
- users
- value
- Video
- Videos
- View
- Watch
- web
- Website
- websites
- Whitepaper
- within
- WordPress
- Work
- world
- worth
- XML
- youtube