2. Table of content
What we’ll cover
1. Google’s upcoming page experience update
2. The launch of Core Web Vitals
3. Creating a page experience audit
4. What you can do to prepare your website
3. You can learn a lot by keeping an eye on
what tools and external comms Google is
4. Speed Update Rolls
Out for Mobile
9th July 2018
Page Speed Used in
9th April 2010
Google’s Test My
Site Tool Updated
25th February 2019
Console Rolls Out
4th November 2019
12th November 2019
Core Web Vitals
5th May 2020
28th May 2020
A snapshot of Google’s activity around site speed over the last 10 years:
6. Page experience is “a set of signals that
measure how users perceive the
experience of interacting with a web
page beyond its pure information value.”
7. • There is a new page in the Google Search documents on Google Developers
dedicated to ‘page experience,’ which sits alongside key topics like indexing,
• The page experience algorithm update will be released in May 2021.
• As Google originally stated, we have been given 6 months notice before it rolls
• We have work to do. Google only pre-announces updates and provides
information like this when there are specific things we can improve. Remember
What we know about
page experience so far
9. Query relevance is still key for ranking,
but page experience will determine
rankings for sets of pages with similar
12. Web Vitals is “an initiative by Google to
provide unified guidance for quality
signals that, we believe, are essential to
delivering a great user experience on the
13. The 3 most
Interactivity Visual StabilityLoading
Experiencing a never-ending
loading wheel, or a blank
page which slowly populates
with different tiles, like a very
slow and painful virtual jigsaw
being pieced together before
Seeing the thing you want
right in front of you and
clicking on it, with no
response. And then endlessly
clicking in the vain hope that
something might eventually
Going to click a button and
the screen shifts at the last
minute and you end up
clicking on a new thing
instead, then you have to go
back to find the thing you
14. Web Vitals are a quantifiable way of
measuring user experience, this is why
Google has chosen them.
15. • Core Web Vitals are three metrics that help us to measure the user’s
experience of a page as it loads; not just objective load times.
• These will focus on three key areas of UX: loading performance, interactivity
and visual stability.
• They will be annually updated to cover even more elements of user experience
that are not yet being measured, such as smoothness and privacy.
What we know about
Web Vitals so far
16. What Core Web
First Input Delay
Cumulative Layout Shift
Largest Contentful Paint
Measures the time when the
largest text block or image
element is rendered on the
screen. This metric has
replaced FMP in lighthouse.
Measures the time from when
a user first interacts with your
site to when the browser is
actually able to respond.
Measures all unexpected
layout shifts that occur
between when the page
starts loading and when its
lifecycle state changes to
29. • Google Search Console: Useful for looking at how Core Web Vitals are trending
across the entire site as well as highlighting site security issues and mobile usability
• PageSpeed Insights: Useful for gathering Core Web Vitals scores for individual
pages and templates.
• WebPagetest: Useful for visualising page experience and running competitor
• Chrome DevTools: Useful for looking at loading dependencies and identifying the
LCP elements of your pages.
• Mobile-friendly Test: Useful for running mobile-friendly reports on a page-by-page
• Screaming Frog: Useful for analysing HTTPS and insecure content, as well as using
• URL Profiler: Can be used to query the Mobile-friendly Test API and Google’s Safe
Browsing API at scale.
30. Use visual
• WebPagetest’s filmstrip view is really
helpful for demonstrating the
experience of a page loading.
• Comparing your client’s site against
competitors here can highlight areas
that they are doing well that you can
• This also enhances the client’s
understanding by showing them
where page experience plays into
34. LCP measures the time when the largest text block or image element is rendered on the
screen. Google uses this metric to assess the visual aspect of a page loading for users.
Some key audit recommendations:
• Preload key requests: Add ‘link rel=“preload”’ attributes to prioritise the loading of
• Eliminate render-blocking resources: Only ship the code that is needed, and defer or
async load resources that aren’t essential for core content loading.
• Remove unused scripts: Identify unused code through the ‘Network’ tab in Chrome
DevTools. Make sure to test these scripts first before recommending their removal to
see how crucial they are for the loading of content.
• Compress image file sizes: Use tools like Kraken.io or TinyJPG to compress large
images. You can also serve images via next-gen image formats such as WebP,
which often reduce file sizes.
• Defer offscreen resources: Lazy-loading can be implemented through using native
browser lazy-loading, the Intersection Observer or scroll and resize event handlers.
1. Optimising LCP
36. FID measures the time from when a user first interacts with your site to when the
browser is actually able process event handlers and respond to that interaction.
Some key audit recommendations:
• Eliminate render-blocking resources (also useful for auditing LCP)
• Remove unused scripts (also useful for auditing LCP)
files, try minifying them, and also reduce reliance on client-side rendering.
• Minimise main thread work: Long tasks can be optimised through methods
such as code splitting, to serve code in smaller chunks, and using web workers
to deliver code off the main thread.
2. Optimising FID (First
38. CLS measures the cumulative score of all unexpected layout shifts that occur
between when the page starts loading and when its lifecycle state changes to
hidden. CLS measures how much visible content shifts within the user’s viewport,
and to what extent, rather than being a timed metric.
Some key audit recommendations:
• Specify image and embed dimensions: You can specify these in the ‘img’
HTML tag. You can also use a CSS aspect ratio box to block out the required
space for images.
• Reserve space for embeds: Precompute sufficient space for embeds and style
a placeholder or fallback by finding the height of your final embed by inspecting
it with your browser developer tools.
3. Optimising CLS
40. • Mobile-friendliness is determined by how easy the page is to use and navigate
on mobile devices. This can be tested by using Google’s Mobile-Friendly Test
and the Mobile Usability report in Google Search Console.
• Some of the key issues to watch out for are: incompatible plugins, viewport not
set, content wider than the screen, text too small to read and clickable
elements too close together.
• In addition to GSC, you can also use URL Profiler to query the Google Mobile
Friendly test API. If GSC returns no issues, it may be worth verifying this by
running a few hundred pages.
4. Optimising mobile-
42. • Safe browsing looks at whether there is any malicious or deceptive content
detected on the website in question. This includes security issues like malware
and phishing content.
• To assess where or not a site is safe, check the ‘Security Issues’ report in
Google Search Console. This report will highlight instances of hacked content,
malware and unwanted software, and social engineering content which tricks
visitors into revealing confidential information or downloading software.
• In addition to GSC, you can also use URL Profiler to query the Google Safe
Browsing API. Consider running this across a broad subset of pages if an issue
is detected, to help to determine the cause.
5. Auditing safe
44. • All sites should be using HTTPS rather than HTTP to ensure secure
connections for users. You can spot check the connection security by looking
at the icon next to the URL in the Chrome browser. If any URLs have the Info,
Not secure or Dangerous icons, then this will need to be investigated and
• To gain a more holistic view of non-secure pages, also run a full website crawl
which includes the resources on your site such as scripts, images, and most
importantly, pages with forms which require the input of user data. All internal
links to pages and scripts should be filtered down to the HTTP protocol to
identify any URLs or resources that need to be migrated to HTTPS.
• To get started with HTTPS auditing, look for expired certificates, HTTPS being
blocked by robots.txt, noindexing of HTTPS pages, check TLS versions, and
analyse content embeds.
6. Auditing HTTPS
46. • Interstitials that cover crucial content and impede the user’s journey on a site
should be avoided. As part of a mobile usability update in 2017, Google
introduced an interstitial penalty, which would demote pages in organic
rankings that didn’t have their content immediately accessible to users.
• Cookie banner and pop-up designs need to be analysed to make sure they
don’t take up too much of the viewport. The aim should be to make sure that
the most important hero element of a page remains unobstructed for users.
• To test the page templates just load up a few pages using each and manually
review. Alternatively, you could do a Screaming Frog list crawl on a small
quantity of pages, enabling JS rendering within the settings (make sure
rendered page screenshots is ticked too). Then just flick through the
screenshots for the URLs (which can be found on the ‘rendered page’ tab at
48. 1. With Google’s page experience algorithm update coming in May 2021, the
time to optimise your website is now.
2. A Core Web Vitals audit will not cover all aspects of page experience; don’t
neglect mobile-usability, HTTPS, security and interstitial issues.
3. User experience is becoming an increasingly crucial aspect of SEO and
organic performance, a user-centric optimization strategy is key.