1. How to
prepare for
Google’s page
experience
update
Rachel Costello
Technical SEO Consultant

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
investing in.

4. Speed Update Rolls
Out for Mobile
Rankings
9th July 2018
Page Speed Used in
Desktop Rankings
9th April 2010
Google’s Test My
Site Tool Updated
25th February 2019
Google Search
Console Rolls Out
Speed Report
4th November 2019
PageSpeed Insights
Incorporates CrUX
Data
12th November 2019
Core Web Vitals
Launched
5th May 2020
Page Experience
Update Announced
28th May 2020
A snapshot of Google’s activity around site speed over the last 10 years:

5. Google’s page
experience update

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,
JavaScript and mobile-friendliness.
• 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
out.
• We have work to do. Google only pre-announces updates and provides
information like this when there are specific things we can improve. Remember
mobile-first indexing?
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
informational value.

11. The launch of
Google’s Core Web
Vitals

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
web.”

13. The 3 most
annoying things
about websites
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
your eyes.
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
happen.
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
actually wanted.

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
Vitals measure
First Input Delay
(FID)
Cumulative Layout Shift
(CLS)
Largest Contentful Paint
(LCP)
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
hidden.

18. Largest Contentful Paint

19. First Input Delay

20. Cumulative Layout Shift

21. Under 2.5s Under 100ms Less than 0.1

23. We have a 6-month
time period to fix
this before
Google’s update
rolls out

24. Putting together a
page experience
audit

25. The goal was to future-proof a client’s
site ahead of the upcoming algorithm
update by analysing the speed,
performance and user experience of key
page templates.

26. 1. Document summary and intent
2. Priority list
3. Site speed landscape and page experience commentary
4. Speed and page experience performance benchmarking
5. Core Web Vitals fixes – LCP, FID and CLS
6. Mobile-friendliness fixes
7. Safe browsing fixes
8. HTTPS fixes
9. Interstitials fixes
10. List of resources
Page experience audit
structure

27. Remember, Core Web Vitals is just one
aspect of page experience.

28. Auditing and optimizing for CWV could be
cancelled out by security issues, for
example.

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
issues.
• PageSpeed Insights: Useful for gathering Core Web Vitals scores for individual
pages and templates.
• WebPagetest: Useful for visualising page experience and running competitor
comparisons.
• 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
basis.
• Screaming Frog: Useful for analysing HTTPS and insecure content, as well as using
JavaScript rendering to analyse screenshots of interstitials.
• URL Profiler: Can be used to query the Mobile-friendly Test API and Google’s Safe
Browsing API at scale.
Page experience
measurement tools

30. Use visual
examples
• 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
learn from.
• This also enhances the client’s
understanding by showing them
where page experience plays into
real-world examples.

31. The finished result

32. What you can do to
prepare your
website

33. Run page experience audits for the
websites you manage to get a better idea
of UX issues.

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
important resources.
• 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
(Largest Contentful
Paint)

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)
• Reduce JavaScript execution time: Async or defer loading of large JavaScript
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
Input Delay)

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
(Cumulative Layout
Shift)

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-
friendliness

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
browsing

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
fixed.
• 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
the bottom).
7. Optimising
interstitials

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.
Key takeaways

49. https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
https://blog.chromium.org/2020/05/introducing-web-vitals-essential-metrics.html
https://webmasters.googleblog.com/2020/11/timing-for-page-experience.html
https://developers.google.com/search/docs/guides/page-experience
https://developers.google.com/web/fundamentals/performance/speed-tools
https://web.dev/optimize-lcp/
https://web.dev/optimize-fid/
https://web.dev/optimize-cls/
https://developers.google.com/search/docs/advanced/security/https
https://www.youtube.com/watch?v=AQqFZ5t8uNc
https://github.com/GoogleChrome/web-vitals/
Resources

50. Thank you.
builtvisible.com
Rachel Costello
Technical SEO Consultant
@rachellcostello