How to: Core Web Vitals WordPress Optimisation

Core Web Vitals will be used as a ranking signal by Google from May 2021. What will it mean for SEO? Google is explicitly telling website owners that page experience signals will affect rankings –
alongside other rankings signals. By incorporating these new signals into search ranking, Google just wants website owners to provide the best page experience for their site users.

What is Core Web Vitals?

Core web vitals provides a way to measure the user experience of your website made up of these 3 metrics. For each of these metrics, they are clearly defined as “Good”, “Needs improvement”, and “Poor” thresholds.

  1. Largest Contentful Paint (LCP): is essentially a measure of page loading experience for the user. LCP metric is the speed of the largest contentful component of the screen. To provide an optimal user experience, LCP ought to happen under 2.5 seconds when the page starts loading.
  2. First Input Delay (FID): a measure of page responsiveness or interactivity of a page for the user when the user interacts with the page. It measures how long it takes the browser to respond when a user interacts with the page. If the browser is ‘busy’ with background tasks, user input is delayed. To provide an optimal user experience, FID should be under 100 milliseconds.
  3. Cumulative Layout Shift (CID): measures the experience of a page in terms of visual stability. If page elements are shifting around while trying to use the page, it can be ‘frustrating’ for users. To provide an optimal user experience, CID should be under 0.1.

How to Optimise WordPress for Core Web Vitals?

How do we Improve CLS in WordPress?

  • Ensure all of your images include dimensions – width and height. If you make use of ads, JavaScript widgets, embeds or iframes, make sure you include dimensions.
  • Dynamically injected content can cause layout shifts. Anything that’s going to render after the initial page load, make sure that you reserve the space that the element needs so that it can render without causing the rest of the content to reflow.

How do we improve the LCP in WordPress?

  • Optimise Images:
    • Optimise those big header images/hero images, the featured image at the top of your posts. Use a tool like squoosh.app, that gives you side by side view where you can drag a bar to see how the image looks before and after the compression.
    • Don’t lazy-load images that are going to be in the viewport initially. If you know an image is going to be in the viewport, exclude it from lazy loading, so the browser will more eagerly load it.
    • Use an image CDN.
  • Use a fast hosting provider with adequate resources.
  • Minify CSS & JavaScript.
  • Reduce Time to query the database.
  • Configure efficient caching.

How do we improve the FID in WordPress?

  • Review your plugins: Look for CPU intensive scripts in plugins or in your theme code. One way to test this is by disabling all of your WordPress plugins and make a note of the FID, and then reenable your plugins one by one and check the FID each time. This will help you discover plugins that are adding resource-intensive scripts that are impacting your FID score.
  • Concatenate your scripts into a single load.
  • For scripts that don’t need to load immediately, add the async tag, so that those scripts can load in the background while the browser attends to other elements that need to be rendered.
  • Finally, consider AMP-first using an AMP Plugin. AMP is going to provide a great FID score, and it’s really straight forward to enable AMP in WordPress. The AMP Plugin is compatible with a wide range of themes and plugins, and it will deliver amazing Web Vitals scores typically.

How to Measure Core Web Vitals?

There are a number of ways to check both the field and lab information of these metrics. In fact, Google now includes coverage of Core Web Vitals in all their tools.

    • PageSpeed Insights is an awesome web-based tool that provides great lab and field data when it’s available. It also gives you recommendations for how to address each of the issues that it finds that could be improved, including WordPress specific recommendations. This is a great tool to get actionable feedback on how to improve your core web vitals scores.
  • On Search Console, you get web vitals data segmented by mobile and desktop traffic, as well as by performance. The URL’s are grouped by performance, so you can see a bunch of URLs that need performance attention in the Search console.
  • Web Vitals Chrome Extension – you can install it to see Web Vital scores for any page that you visit.
  • Chrome Devtools is a great tool for developers to deep dive into page experience and performance. On the performance tab, you can see the layout shift. For each item that you click on here in the summary section, you’ll see how much that item shifted, and how much it contributed to your CLS score. It’s also got the Total Blocking Time, which is a good proxy for First Input Delay. Improving the Total Blocking Time score will improve your First Input Delay score as well. Then finally, under the timing section, you can click on LCP, and it will highlight the Largest Contentful Paint Node for that load. Lighthouse is another tool that’s built into Chrome.
  • Site Kit by Google is Google’s official WordPress plugin that brings all the Google data into your WordPress site. You get Analytics data, Search console data and more importantly PageSpeed Insights Lab and Field data for any page of your WordPress site.
  • The Chrome user experience report collects data from Chrome users who’ve opted in. There’s a great dashboard that you can build for your own URL’s that will give you data from the field if it’s available, and lab data going back over time. There’s also an API where you can get right at this data, and explore it on your own.
  • You can also install the Web Vitals JavaScript library on your site. As users come and visit your site, it measures real-world performance metrics, and then sends that data to analytics so that you can record it. You can do reports later to see how you’re performing over time with these Web Vitals.
  • Webpage Speed Test.

Useful Resources with tons of information covering Core Web Vitals.

We have a minimum of six months to address any core web vitals issues since Google made the announcement that it is going to be part of the ranking algorithm. Learn more about Web Vitals on web.dev/vitals

0 comments… add one

Leave a Reply

Your email address will not be published. Required fields are marked *