Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to prepare for Google's page experience update

167 views

Published on

What you can do to prepare your website including how to create a page experience audit.

Published in: Marketing
  • Be the first to comment

  • Be the first to like this

How to prepare for Google's page experience update

  1. 1. How to prepare for Google’s page experience update Rachel Costello Technical SEO Consultant
  2. 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. 3. You can learn a lot by keeping an eye on what tools and external comms Google is investing in.
  4. 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. 5. Google’s page experience update
  6. 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. 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
  8. 8. Query relevance is still key for ranking, but page experience will determine rankings for sets of pages with similar informational value.
  9. 9. The launch of Google’s Core Web Vitals
  10. 10. 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.”
  11. 11. 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.
  12. 12. Web Vitals are a quantifiable way of measuring user experience, this is why Google has chosen them.
  13. 13. • 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
  14. 14. 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.
  15. 15. Largest Contentful Paint
  16. 16. First Input Delay
  17. 17. Cumulative Layout Shift
  18. 18. Under 2.5s Under 100ms Less than 0.1
  19. 19. We have a 6-month time period to fix this before Google’s update rolls out
  20. 20. Putting together a page experience audit
  21. 21. 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.
  22. 22. 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
  23. 23. Remember, Core Web Vitals is just one aspect of page experience.
  24. 24. Auditing and optimizing for CWV could be cancelled out by security issues, for example.
  25. 25. • 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
  26. 26. 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.
  27. 27. The finished result
  28. 28. What you can do to prepare your website
  29. 29. Run page experience audits for the websites you manage to get a better idea of UX issues.
  30. 30. 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)
  31. 31. 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)
  32. 32. 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)
  33. 33. • 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
  34. 34. • 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
  35. 35. • 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
  36. 36. • 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
  37. 37. 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
  38. 38. 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
  39. 39. Thank you. builtvisible.com Rachel Costello Technical SEO Consultant @rachellcostello

×