Sep 2023

Core Web Vitals for WordPress

Understanding Core Web Vitals for WordPress
Instagram

Google provides a useful tool to help you improve the performance on your website. The tool is called Google Page Speed Insights and its primary used to measure the speed of a website, yet if you delve a little deeper, you'll find it can help in many more ways and ultimately increase your website's ranking in the search engine results.

It's Google's way of sizing up your website for user-experience - you know, things like how quickly it loads, how accessible it is to people with disabilities and how well it has been optimised for... Google. Here's how you can use it to analyse and hopefully improve your site.

The main indicator of performance

The higher the overall score for 'Performance' the better, however, ideally you'd want all of these in the green.

The detailed Core Web Vitals assessment

When you run an assessment of your site using the PageSpeed Insights too and scroll down, you'll get to the metrics which form the nitty gritty of the assessment.

What the hell are these?

First Contentful Paint

When the browser first renders part of the website, signalling to the user that the page is actually loading. So if visit a website and see absolutely nothing loading and can't tell if it's going to load, it likely has a very low FCP score. If you visit a website and the page loads straight away or at least you have an idea that it's loading already, the score would be much higher.

Time to Interact

This is a measurement of when the web page becomes interactive because the last long task whilst the page was loading has been completed. So essentially, as a user you can start doing stuff on the page because the last of the laborious loading tasks is over with and the page is almost fully functioning.

Speed Index

This is Googles way of working out how well the site follows page speed principles including optimising images, minimising HTTP requests, leveraging browser caching and minisming CSS and JS. Basically, if you've taken steps to optimise your website for speed, Google will pick up on this and give you a score to show how well you've done with this so far.

Total Blocking Time

In short, this measures the total amount of time your website blocked the user from interacting with the page because for example it was loading something.

Largest Contentful Paint

The LCP measures the loading speed as perceived by the user. This is the point in time when the page's main content has Lilly loaded, so the page looks like it has loaded to the user, even if there are some last bits still loading in the background.

Cumulative Layout Shift

This last metric CLS measures how visually stable the page is as it loads. It actually quantifies how often the page moved unexpectedly for the user, known as a layout shift, without them taking an action or doing something to expect that shift. An example of this might be an ad which flashes up unexpectedly.

I'm not going to pretend that I can guide you with a short article on how to improve the above metrics on your site yourself, as they're often very technical and need a professional eye to improve them. However, if you've backed your website up and are willing to try and cover off some of the basics yourself, I'd recommend doing the following:

  • Optimise your images so they fit the space they are filling. If an image is too big and has to be downsized to fit the space, you're wasting valuable website energy and increasing loading time required. So optimise images down in size and reduce the file size to no more than 500kb per image.
  • Set up caching so your site serves up a cached version of itself faster than it could normally load the site from scratch.
  • Minify the CSS and JS so that the site is able to work through the files and render the pages faster.
  • Get better web hosting so there's more juice to load your website faster.

On the same page as the above metrics in Google PageSpeed Insights you can also find Poppotunises and Diagnostics. These will give you some more specific pointers for what is hindering your site's performance.

There's some low hanging fruit such as to properly size images

If you expand any of these pointers there will be even more information. For example:

I hope the above information helps you to optimise your WordPress website, or at least gives you more of an idea of the factors which go into ranking how well your website performs. Often when you think about website performance the main thing that springs to mind is just how quickly the pages load, however, at least now you know there are other key things to work on and in return for your hard work in optimising your site, your users as well as Google ranking will benefit.

If you would like me to help with improving your WordPress website performance using Google's PageInsights as a measurement tool and see how effective your site is at pleasing the Google gods, and ultimately your users, get in touch.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.