There has always been a lot of focus on user experience when designing WordPress sites but now with the Google initiative Web Vitals we have a way to measure what good is. This becomes an essential tool in any team to ensure a website meets the users’ expectations and becomes even more important as it becomes a ranking signal.
So what is Web Vitals?
Web Vitals is more than just performance but covers four critical areas:
- Performance looks at the page and measures first visible items along with when the user can interact.
- Best Practices gives advice on recommended design and implementation patterns.
- SEO (Search Engine Optimisation) checks if the page is discoverable and understood.
- Accessibility checks if the page has any problems that may prevent users from interacting.
What most people focus on is Core Web Vitals which maps to the area of performance. But, our recommendation is you must address all points as to why would you have a great performing site if users can find it (SEO) and are frustrated when using it (Best Practices & Accessibility).
Many tools exist for measuring Web Vitals (see options below) and often they will report two values, the first for Mobile and the second for Desktop. Although, we need to consider Desktop it is Mobile that we need to get working as that is the harder and with a modern responsive website, Desktop will naturally come along as you fix Mobile.
We will now look at each in turn and the diagrams are based on a real Mobile example we have worked on.
Performance
The performance report gives you an overall score, for this website 95, but we really need to focus on three items, these are the three aspects of the user experience; loading, interactivity, and visual stability, indicating if you pass the Core Web Vitals assessment, however, we do expect this to evolve:
- Largest Contentful Paint (LCP): measures loading performance and to provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
- First Input Delay (FID): measures interactivity and to provide a good user experience, pages should have a FID of 100 milliseconds or less.
- Cumulative Layout Shift (CLS): measures visual stability and to provide a good user experience, pages should maintain a CLS of 0.1. or less.
Compliance considers a page passing if it meets the recommended targets at the 75th percentile for all of the above metrics. This website as depicted below comfortably passes this:
Tools can often give three sets of these measurements:
- Lab Data is scores calculated from a single run by the tool you are using.
- Field Data is real-world data captured for this page.
- Origin Summary (as depicted above) is the aggregate experience of all pages on the website from the previous 28 days.
Although lab data is useful for debugging improvements, the field data and origin summary gives you a view of the overall website health.
Best Practices
This evaluation looks at the coding aspect of your page and gives your developer pointers as to what needs to be improved or where errors exist. In many cases, this could be problems with WordPress plugins or themes and you may need to raise support tickets on the provider to get fixed. In other cases, it may be down to the way you have configured and set up your WordPress site and hosting.
SEO
The SEO evaluation looks at Search Engine quality guidelines focusing on three main areas:
- How search engines find your pages
- How search engines understand your pages
- How visitors use your pages
Often some SEO activies can negetively effect your site and you should make sure that you
- make pages for your users and not for search engines
- don’t deceive or trick your users
- think about what makes your website unique, valuable and engaging.
Imagine you ran a shop on a high street where everyone sold the same thing. SEO is about convincing the passer-by in the street to come into your shop and not the others. After working hard to get them in, there is no point at all in having them enter to find out it was not what was expected.
Accessibility
In today’s world, we must make sure our website just like traditional bricks and mortar shop is accessible to all. This simply means that the site’s content is available, and its functionality can be actioned, by anyone. We must consider people that need to access but don’t use the traditional route of keyboard, mouse or touch screen, therefore, considers users who are experiencing some type of impairment or disability.
As note mentions below in the diagram, automated testing can only test a few elements and it is recommended that not only do you address those reported but you also run manual testing as part of your test and release processes.
How to Measure
Google believes that the Core Web Vitals are critical and is committed to surfacing these metrics in all of its tools; Page Speed Insights, Search Console and Chrome User Experience Report.
In addition you can go directly to web.dev web vitals for more reading and tools to measure.
Conclusion
Often the areas we have talked about are looked at by different members of the team and what this article hopefully indicates is it is about the whole and you can’t afford to be great in one quarter you must aim for achievements in all areas. In our example here we still have work to do in Accessibility and Best Practices.
WordPress itself encourages non-technical users to install plugins to provide functionality and often the ease of doing this creates problems that will be identified in Web Vitals. Unlike what WordPress marketing suggests we believe that WordPress when used for all but a small personal blog needs care and attention to achieve good results. In the example above we started at values in the 20s to 30s for most categories and it took a lot of work and effort to achieve the acceptable result, we have today.
But, please remember the job never finishes and this standard will evolve over time.