In May 2020 Google is updating their search ranking algorithm to include their new “Page Experience” metric. In a rare and welcome twist, Google has signposted in great detail what goes into this new metric. After reading Google’s docs on “Page Experience”, I wanted to apply these new learnings to my personal website (findram.dev). The process of updating my site only took an afternoon! In this post I will show you the steps I took and the results!
Core Web Vitals
Google’s Page Experience metric draws from five signals: i) Core Web Vitals, ii) Mobile-Friendly, iii) Safe Browsing, iv) HTTPS and v) No Intrusive Interstitials. Points (ii) to (v) have been included in Google’s search rankings for a while now, so we will just focus on the new one: Core Web Vitals.
Core Web Vitals are a set of metrics for measuring the real-world user experience of visiting a website. The three current Core Web Vitals focus on: loading, interactivity, and visual stability. Web.dev have a fantastic series which explains each of the Vitals. Check it out here.
How do I benchmark my website’s performance?
We want to identify the lowest hanging fruit. The easiest way to do this is to test your website using a page-speed analyser. To test a site in production you can use the following tools:
To test a site in development you can use the Google Chrome Lighthouse tool in Chrome Devtools (press F12 and select the “Lighthouse” tab).
I ran the Lighthouse tool on findram.dev before doing any improvements — The results for mobile are below. We will focus on mobile score, as it is the hardest to perfect (download speed and processing power are both inferior on mobile). FYI the performance score for desktop was 92.
Improving Core Web Vital #1 — Largest Contentful Paint 🎨
The easiest core web vital to improve— and potentially the most neglected is Loading. Not surprisingly, loading time has a big impact on bounce-rate (see Google ‘mobile page speed’ report). Fortunately, there is plenty of low hanging fruit to improve LCP, especially on mobile.
Here are the steps I took to reduce LCP, in order of decreasing impact:
Improving Core Web Vital #2— First Input Delay ⏳
Here are the steps I took to reduce FID:
Improving Core Web Vital #3 — Cumulative Layout Shift ⬇️
Websites with bad Layout Shift annoy the hell out of me. We all know that experience when you load a web-page and start reading, and then suddenly all the text jumps down the page because of an image loading above. At this point I usually just leave the site.
I recommend reading this awesome empirical study on CLS and outcomes (conversion rate, bounce rate, etc.).
Not surprisingly, CLS is a much bigger issue on mobile. I assume this is because the standard “stacked” responsive layout on mobile views causes layout shift to impact more DOM elements.
Also not surprisingly, CLS has a significant adverse correlation to bounce rate and session length. I find that using a grid layout in CSS mitigates the impact of CLS. Conversely floating CSS elements tend to make CLS more difficult to manage.
Here are the steps I took to reduce CLS:
The Results 🏆
The simple improvements above resulted in the Performance score for mobile increasing from 71 to 91. I’m fairly pleased with that!
FYI For desktop, it increased to 99!
One last note — Google really emphasises that perfecting your Core Web Vitals is still no substitute for good content. And of course this is true. Developers and designers should primarily concern themselves with creating enriching content and pleasing user experiences.
BUT nevertheless — if you have a spare afternoon, I recommend benchmarking your site and seeing where you can improve 😃