In this post, we’re going to test your site’s user experience based on “Core Web Vitals”.
Core web vitals are the new metrics that Google is going to use in May to rank sites. But it is only part of the process of deciding where a page will rank on the search index. The first and most important thing anyone looks for is the user experience. If a page takes too long to load? That’s not a great user experience. If a page jumps around so that you end up clicking an ad by accident? Not a great user experience!
Before we get into the tools lets definite the new Core Web Vitals briefly. (These are other than the obvious relevance, timely, and authoritative. ) There are 3 new ones: Cumulative Layout Shift; Largest Contentful Paint, and First Input Delay.
First Input Delay
FID (first input delay): The time from when a user first interacts with your page (pushes a button, clicks a link, etc) to the time when the page responds. The FID indicates when the page is ready for interactivity and is especially important on pages with forms or e-commerce sites. First Input Delay should be no more than 100ms.
Largest Contentful Paint
LCP (largest contentful paint): The time it takes to load the biggest element in view. This is measured from the time the user clicks on the url to load the page. And should be no longer than 2.5 seconds.
Cumulative Layout Shift
A layout shift occurs any time a visible element changes its position from one rendered frame to the next. (https://web.dev/cls/)
An example of cumulative layout shift…
Not all layout shifts are bad. If a user clicks a dropdown menu, and the menu shifts to drop-down, that is not a bad layout shift. The cumulative layout shift should be no more than .1 of a second.
To Do List Prior to Core Web Vitals
Before you even get into Core Web Vitals, there are some website best practices that should be in place. I’m talking about serving your site through https://. A secure site is still one of the most important things Google looks for. And also – that your site is mobile friendly. Here are some tips to implement the most important aspects of your site:
- Https – are you serving your site through an ssl certificate? (see our post here to get that set up)
- Mobile Friendly – is your site mobile friendly? Use this tool to test your site’s pages.
- Images – serve them in nextgen formats (svg or webp). We recommend easy ewww.io or imagely or shortpixel for this.
How to test Core Web Vitals
The tools mentioned below are all accurate to varying degrees and they all have different tips that you might find helpful in the results portion of the test. I find Lighthouse and GTMetrix to be the most helpful. When running tests keep this in mind:
- test multiple pages; including archives, categories, single posts and pages and homepage/landing pages
- use the same tool to test before and after any changes
- clear your cache (including cloudflare and server caches) after making changes and before testing
If you’re not a developer these results are sometimes difficult to interpret. But they are accurate and since they are from Google itself, we hope that a good grade translates into a happy Google. The testing on these tools are already on a fast 3G network (that is the baseline for testing world-wide), already mobile and 4x CPU slow down.
When testing remember that “field” data is the most important but if that’s not available then “lab” data is the next best thing.
“Lab” data is the tests run on your live site today, as is.
“Field” data is the accumulation of real users’ experiences.
Open up this page in Google’s website. And click the blue button “Run Audit”. In order for this to work you must have this already done:
- have a search console (webmaster) account
- your website needs to be a few days (to a few weeks) old for the report to generate
If your website is new to Search Console, you can test individual pages using these other Google tools:
Our favorite is GTMetrix – you can freely test your desktop pages. Be sure to set the analysis to throttled and 3G testers outside of your continent. You’ll need a premium account to test mobile pages.
We also use KeyCDN Performance Tool. This test won’t give you the specifics of the Core Web Vitals but the details in the results report are very helpful. When you get the report, click the down-arrow next to each suggestion and there are specific urls that you can use to add to your lazyloading plugin or asset cleanup plugin.
WordPress Speed Tools & Plugins
- Use cloudflare (Free version) to host your dns and ssl
- Use WP Cloudflare Super page caching plugin (this is CDN caching, free version)
- Use a fast host(consider us!) to cut down on your “Time to first Byte” and install WP Cloudflare Super Page Caching to help with this too
- Use a WP Caching plugin like WP-Rocket (premium plugin) or W3Total Cache
- Use Asset Cleanup (free) or Autoptimize (free version available) for scripts
These plugins can all be customized based on the results of the tests.