Core Web Vitals For WordPress

Core Web Vitals (CWV) is being introduced by Google to help business owners find opportunities to improve their website visitors experience. This is the result of extensive work in human–computer interaction (HCI) and user experience (UX). The update is now expected to start in mid June and be completed by the end of August.

CWV is part of the bigger Page Experience Update, which will be the biggest update Google have ever carried out.

User Experience
How users experience your webpage

Visitors to your web pages are on a journey from initial search to end goal and each of their actions is another step in what would ideally be a smooth path until they reach their goal i.e. finding information, purchasing a product or service etc. However their journey can be interrupted by delays and distractions caused by a poorly performing web page leading to reduced visitor satisfaction and, sometimes, abandonment of their journey.

Website Visitor Satisfaction

Delays, Distractions And Interruptions

“Mobile web users only keep their attention on the screen for 4-8 seconds at a time.”

These take three forms:

  • Waiting for pages to load. This is the most common type of delay your visitors experience. How your visitor perceives delays varies depending on personality, past experience and the urgency of their journey.
  • Web Page Instability. As a web page loads you may find that the elements that make up that page, i.e. images, blocks of text, forms etc. move around as other elements load. This can annoy your visitor and possibly cause errors to be made.
  • Poor Responsiveness. If your visitor clicks on a link or button or interacts with your page in some other way there is a delay before your page reacts. If this reaction time is too long it will cause visitor frustration.

Core Web Vitals Are Vital To Your Online Success in 2021

At the end of 2020 Google announced that it would start to measure how web site visitors were interacting with a web page (page experience). Their plan was to devise measures that would quantify how good or bad a visitor found a web page i.e. a good or poor experience. The overall aim was to improve user experience on mobile devices.

These measures were to include:

  • How quickly a page loads.
  • How long does it take before a visitor can interact with the page, i.e. click on a link.
  • How stable is the page when it is loading, i.e. does the page jump about when adverts and images start loading in the page. Check out eltiempo.es to see poor stability in actions.

Also to be included in Core Web Vitals, but equally important, were existing criteria such as mobile friendliness, site safety (HTTPS) and excessive use of such things a popups (intrusive interstitials).

These measures are called Core Web Vitals (CWV). Good Core Web Vitals will improve your page’s ranking in Google AND improve conversion of visitors to sales. Sites with good CWV will rise in ranking and those with poor CWV will drop.

What Does The Core Web Vitals Measure?

CWVs focuses on improving the experience your page visitor has from the moment he finds the page on Google search until the page is fully loaded. Emphasis is placed on visitors using mobile devices with less than optimum Internet access. Note that it is the visitors perception that is important of how good or bad their experience is when visiting your page.

Core Web Vitals Explained

Google’s CWVs are not just a one off change it is anticipated that this will be continually developed over time. At present CWVs will set out to measure three things.

  1. How long does it take for the main content on your page to load. Google calls this Largest Contentful Paint. This is often your main or featured image.
  2. How long does it take from when a visitor clicks on a link or button to the when the page reacts to that action. This is called First Input Delay.
  3. How much does your site jump about when loading. When a page jumps about this can be annoying because it may cause you to click on the wrong link or disrupt your reading. This is know as Cumulative Layout Shift.

Core Web Vitals Will Affect How You Rank In Google

Quite simply, Googles Core Web Vitals will affect both mobile and desktop organic results. To make the best of your Google ranking all the CWV’s metrics will have to be met. So if you care about your ranking good CWVs scores are mandatory.

How to Measure Your Core Web Vitals Scores.

Pagespeed Insights

There are a number of ways to measure your score but the most important is to go to Google’s Pagespeed Insights Tool and insert your website URL in the box.

The Lighthouse tool is able to provide a lot of information to help a web designer improve his CWV score.

Improving Your Largest Contentful Paint (LCP) Score.

Usually three things affect LCP:

  • Slow server response times. Your website may be hosted on a slow server that increases the amount of time it takes for send and receive requests for information. Quite often cheap hosting services are are slow.

Server Response Time

  • Render-blocking JavaScript and CSS. When loading a web page your browser makes a request to your server and gets the page content to display. At this point, your browser will show the page content. Well, not always. To show the content, the browser has to run through the HTML coding on the page when the content will be fully displayed. Unless some scripts block the reading of the HTML. These scripts are call render-blocking resources and cause the display of the content to be delayed.

Render Blocking Response Time

  • Slow resource load time. Slow loading files such as images, videos and CSS files cause a page to load slowly and create a bad user experience. The resource load times can be reduced by optimizing images, minifying and compressing CSS, JS, HTML files, etc.

Slow Resorce Load Time

In a nutshell if your LCP is under 2.5s you are good, if it is over 4s then you need to fix the issues causing the delays.

What You Need To Do To Fix a Long LCP.

Pagespeed Insights pretty well tells you what you need to do.

  • Optimize Your Images
  • Compress Text Files
  • Defer Javascript And Remove Unused Javascript
  • Minify CSS and Javascript Files
  • Improve Server Response Times
  • Use A Content Delivery Network

How To Improve Your First Input Delay (FID)

Heavy Javascript files are the main culprit when it come to poor FID. When your browser is busy processing a JS file it cannot do other things and your page cannot respond to visitor requests.

WordPress Note: If you are using WordPress having an excessive number of plugins, especially those that are based on JS can cause FID, so carefully check to see if you actually need all plugins on every page. In addition complex themes can cause excessive FID. Themes most suited to CWV are lightweight and preotimized to load quickly (WPOptimal).

  • Defer Javascript And Remove Unused Javascript
  • Minify CSS and Javascript Files
  • Compress Text Files
  • Break Up Long Tasks

How to Fix Poor Cumulative Shift Layout (CLS)

The most common factors causing poor Cumulative Layout Shift grade are:

  • Images and videos without dimensions
    Ads, embeds, and iframes without dimensions
    Dynamically injected content such as animations.

So you need

  1. Include Width and Height Size Attributes on Images and Videos.
  2. Preload and Optimize Fonts.
  3. Manage Space and Size for Ads.
  4. Manage Dynamic Content
  5. Performance impact: high
  6. Dynamic content such as banners can also affect Cumulative Layout Shift so you avoid displaying new content unless it’s triggered by user interaction.

Actions to Improve Core Web Vitals

1. Optimize Your Images. Many images on web pages can be optimised to reduce their file size and improve pag load times. This can be achieved by:

  • Compressing and resizing your images, which will reduce the file size without losing quality.
  • Converting your images into new formats such as the WebP format.
  • Make your images responsive. You shouldn’t use the same images’ size for desktop and mobile, i.e. large for desktop, small for mobile.
  • Use a static image instead of a slider for mobile

2. Compress Text Files. Somwhat similar to image files text files such as HTML, CSS, or JavaScript can be compressed and optimised into smaller, lighter and faster loading files (GZIP and Brotli).

3. Defer loading of Javascript Files. Javascript is a programming language that makes your web pages interactive. However sometimes it can delay how parts of your webpage load (render blocking). Often the reading of the Javascript can be delayed until after the important parts (from the visitors perspective) of the page have loaded.

4. Remove unused Javascript. Sometime a web page contains redundant or non-critical Javascript which causes poor loading and can be removed safely.

5. Break Up Long Running Javascript Files. Sometimes your browser processing can be delayed because of a long Javascipt file that the browser is unable to interrupt so the page can’t respond to user inputs, and responsiveness is affected. To solve this issue, you should split long-running scripts into smaller chunks that can be run in less than 50ms.

6. Defer Non-Critical CSS and Inline Critical CSS. CSS stands for Cascading Style Sheets. CSS describes how HTML elements, such as text, are to be displayed on your browser screen. It can be handled similarly to Javascript in that it’s loading can be delay so not to delay critical elements of the page.

7. Minify CSS and Java Files. This is a technique used to shrink CSS and Javascript file sizes by optimizing the code.

8. Improve Server Response Times. The initial server response time affects the overall loading time and performance of your page, so if your PageSpeed Insights test resulted in the recommendation: “Reduce initial server response time”, you need to get to work.

One way of resolving reducing Server Response Time is by enabling page caching. Page caching stores a copy of your web page on your host server.

A second way of improving Server Response time is to move your site to a high performance server, such as WPX Hosting, Dreamhost or Siteground.

9. Use a Content Delivery Network (CDN). A CDN is a network of servers located around the world on which your web pages are stored. This cuts down the communication time between your visitors browser and your website.

Content Delivery Network

Resources
Defining the Core Web Vitals metrics thresholds by web.dev
The Science Behind Web Vitals by Chrome