The tides are turning once again and Google’s algorithm has a new ranking signal you need to look into. Don’t get caught out in the ranking game. Find out what you need to fix to improve your website’s page experience signals to stay visible in the search results.
Google announced that by mid-June 2021, Core Web Vitals will be included as one of Page Experience ranking signals. This means that loading, interactivity, and visual stability will be considered alongside other UX signals such as mobile-friendliness, safe browsing, HTTPS, and no intrusive interstitials.
Introduced in 2020, there are 3 Core Web Vitals:
- Largest Contentful Paint (LCP) is the time it takes for the biggest piece of content to load. So, this can be your page’s hero image, a video or a big block of text. Good LCP is 2.5 seconds or faster. From 2.6 to 4.0 secs of loading means it Needs Improvement and above 4.0 seconds means it’s poor.
- First Input Delay (FID) is the time it takes a page to become interactive — when a user clicks a link, taps a button, etc to the time the browser responds to that. Good FID is less than 100 milliseconds. Between 100 to 300 milliseconds is classified as Needs Improvement and over that is Poor.
- Cumulative Layout Shift (CLS) is the amount of unexpected layout shift of visual page content. Ideally, this should be less than 0.1 to be rated as Good. Between 0.1 and 0.25 Needs Improvement and above that is Poor.
Image from https://web.dev/vitals/
Identifying Opportunities for Improvement
Google offers several tools for measuring Core Web Vitals and identifying opportunities to fix issues. Here are a few tools you can get started with:
- Search Console – If you have Google Search Console for your website (and there’s really no reason why you shouldn’t), there’s a new report that identifies groups of pages that need to be fixed. The Core Web Vitals report in Search Console is based on real-world usage data (also called field data). Please note that this report is not designed to find the status of a specific page, but rather your site’s performance as a whole and to identify issues that affect multiple pages on your site. Check Google’s support page on Core Web Vitals report to understand how you can use it.
- Chrome UX Dashboard – Chrome User Experience Report (or CrUX report) gathers anonymized metrics about performance times from actual users visiting your URL. The CrUX database gathers information about URLs whether they are part of your Search Console property. FIRST recommends that the CrUX Dashboard for Data Studio be set up to track your user experience trends monthly.
- PageSpeed Insights – This is a great tool for identifying the specific issues for specific pages. It shows both historic user data as well as live test data for a given URL. You can test individual URLs here: https://developers.google.com/speed/pagespeed/insights/
You can also try other tools such as Lighthouse in Chrome DevTools and Web Vitals Extension.
Fixing CWV Issues
The key to fixing your issues is to find out what they are. For FIRST Digital’s clients, we have created dashboards that combine the elements from the above reporting tools as well as reports on the page-level Core Web Vitals. This helps us identify which pages to work on first.
Google recommends the following common page fixes for Core Web Vitals:
- Reduce your page size. Best practice is to keep each page and all of its resources less than 500kb.
- Limit the number of page resources to 50 for best performance on mobile.
- Consider using AMP for good page loading on both desktop and mobile.
Next, we look into each Core Web Vital and the factors that affect it. To do this, you could run affected pages in PageSpeed Insights. This will help identify issues specific to that page. Test it now with your site’s homepage. Remember that each page in your site may be affected by different problems.
To focus on fixes that affect Core Web Vitals, we’ve broken them down below:
LCP is primarily affected by:
- Slow server response time
- Render-blocking JavaScript and CSS
- Resource load times
- Client-side rendering
Below is a table of things you can try fixing to address these factors:
| Slow server response times | Render-blocking CSS | JavaScript blocking time | Slow resource loading time | Client-side rendering |
| Optimise your server | Minify CSS | Minify and compress JS files | Optimise & compress images | Minimise critical JavaScript |
| Use a CDN | Defer non-critical CSS | Defer unused JS | Preload important resources | Use server-side rendering |
| Cache assets | Inline critical CSS | Minimise unused polyfills | Compress text files | Use pre-rendering |
| Serve HTML pages cache-first | Adaptive serving | |||
| Establish third-party connections early by using the rel=”preconnect” | Cache assets using a service worker | |||
| Use signed exchanges (SXGs) |
The main cause of poor FID scores is heavy JavaScript execution and below are some things you can try to address this:
| Heavy JavaScript Execution |
| Break up long tasks |
| Optimise your page for interaction readiness |
| Use a web worker |
| Reduce JavaScript execution time |
The most common causes of poor CLS are:
- Images without dimensions
- Ads, embeds, and iframes without dimensions
- Dynamic content
- Web Fonts that cause FOIT (flash of invisible text) and FOUT (flash of unstyled text)
To fix this, see the table below:
| Images without dimensions | Ads, embeds and iframes without dimensions | Dynamic content | Web Fonts causing FOIT/FOUT |
| Add “height” and “width” attributes to image tags | Statically reserve space for the ad slot | Avoid inserting content above existing content | Use font-display to modify rendering behaviour |
| Avoid placing the ads near the top of the viewport | If it needs to be done, reserve sufficient space in the viewport in advance | Use the Font Loading API to reduce time to get fonts | |
| Reserve sufficient space for embeds and iframes | Pre-load optional fonts |
Still need help understanding Core Web Vitals and how it can affect your site’s organic performance? Contact FIRST Digital today, we’ll be happy to help.
===================
Want to learn more about SEO and factors that affect your organic rankings and visibility? Have a look at the resources below:
- What is Schema Markup & Why It Is Important for SEO
- 5 Critical SEO Mistakes eCommerce Site Owners Make
- Check out or latest blog posts
