Page Experience Update TMC June 2021 Patrick Stox
•Download as PPTX, PDF•
0 likes•229 views
Patrick Stox is a product advisor, technical SEO, and brand ambassador who writes for various publications and speaks at conferences. He discusses Google's Page Experience update, which focuses on core web vitals like Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift. He provides tips to measure these signals and optimize page speed, such as prioritizing critical resources, lazy loading images, and inlining critical CSS.
Recommended
More Related Content
What's hot
What's hot (19)
Similar to Page Experience Update TMC June 2021 Patrick Stox
Similar to Page Experience Update TMC June 2021 Patrick Stox (20)
More from patrickstox
More from patrickstox (9)
Recently uploaded
Recently uploaded (20)
Page Experience Update TMC June 2021 Patrick Stox
- 2. @SPEAKER@patrickstox #TMCtonight Product Advisor,Technical SEO, & Brand Ambassador at • I write for Ahrefs blog but have written for many industry publications in the past • I speak at some conferences like SMX, Pubcon, UnGagged,TechSEO Boost • Organizer for the Raleigh SEO Meetup (most successful in US) and the Beer & SEO Meetup • We also run a conference, the Raleigh SEO Conference • FounderTechnical SEO Slack Group • Moderator /r/TechSEO on Reddit Who is Patrick Stox?
- 3. @SPEAKER@patrickstox #TMCtonight Mid-June to late August rollout The Page Experience Update Is Happening Now
- 5. @SPEAKER@patrickstox #TMCtonight 2007 - Safe Browsing 2010 - Page Speed Desktop 2014 - HTTPS 2015 - Mobile Friendly 2017 - No Intrusive Interstitials 2018 - Page Speed Mobile 2021 – Core Web Vitals (Mobile) Yes and No
- 7. @SPEAKER@patrickstox #TMCtonight AMP No Longer Required For Top Stories
- 8. @SPEAKER@patrickstox #TMCtonight Should you work on them? Page Experience Signals Are Small Ranking Signals
- 10. @SPEAKER@patrickstox #TMCtonight Page Experience Report In Google Search Console
- 12. @SPEAKER@patrickstox #TMCtonight https://almanac.httparchive.org/en/2020/seo 10.84% Of Mobile Sites Are Probably Not Mobile Friendly
- 13. @SPEAKER@patrickstox #TMCtonight Bulk Checker In Google Search Console Mobile Usability Report
- 15. @SPEAKER@patrickstox #TMCtonight In robots.txt add: User-Agent: Googlebot Allow: .js Allow: .css Don’t Block CSS Or JS Files
- 16. @SPEAKER@patrickstox #TMCtonight Google is shifting how they index content from the desktop to the mobile version of sites This started in 2016 and is nearly done Mobile-First Indexing
- 20. @SPEAKER@patrickstox #TMCtonight https://search.google.com/search-console/security-issues Report in Google Search Console
- 21. @SPEAKER@patrickstox #TMCtonight HTTPS • Authentication • Data Integrity • Encryption
- 24. @SPEAKER@patrickstox #TMCtonight https://twitter.com/patrickstox/status/1289949065606606857 HTTPS – Uncommon SEO Knowledge
- 25. @SPEAKER@patrickstox #TMCtonight HTTPS Is Required For Many Modern Technologies • HTTP/2, HTTP/3 • Accelerated Mobile Pages (AMP) • Progressive Web Apps (PWAs) • Service Workers • Geolocation • Push Notifications
- 26. @SPEAKER@patrickstox #TMCtonight Make sure content on the page is easily accessible to the user. No Intrusive Interstitials
- 28. @SPEAKER@patrickstox #TMCtonight Legal notices for cookies or age consent Banners that use a reasonable amount of screen space and can be dismissed What Doesn’t Count Against You
- 30. @SPEAKER@patrickstox #TMCtonight From Google Webmaster Trends Analyst John Mueller
- 32. @SPEAKER@patrickstox #TMCtonight It’s usually going to be a featured image, text, or maybe the <h1> tag LCP Is The Largest Visible Element Loaded In The Viewport
- 33. @SPEAKER@patrickstox #TMCtonight •<img> element •<image> element inside an <svg> element •The image inside a <video> element •Background image loaded with the url() function •Blocks of text <svg> and <video> may be added in the future. But LCP Can Be Any Of These
- 34. @SPEAKER@patrickstox #TMCtonight How To See The LCP Element In PageSpeed Insights
- 35. @SPEAKER@patrickstox #TMCtonight How To See The LCP Element in DevTools • Performance > check “Screenshots” • Click ‘Start profiling and reload page’ • LCP is on the timing graph • Click the node; this is the element for LCP
- 37. @SPEAKER@patrickstox #TMCtonight FID is the time from when a user interacts with your page until the page can respond. You can also think of it as responsiveness. What Is FID?
- 38. @SPEAKER@patrickstox #TMCtonight Counted •Clicking on a link or button •Inputting text into a blank field •Selecting a drop-down menu •Clicking a checkbox What Counts As An Interaction? Not Counted •Scroll •Zoom
- 40. @SPEAKER@patrickstox #TMCtonight How To See Long Tasks In PageSpeed Insights
- 42. @SPEAKER@patrickstox #TMCtonight CLS measures how elements move around or how stable the page layout is. What Is CLS?
- 43. @SPEAKER@patrickstox #TMCtonight Simply: It's the 5 second timeframe where the most shifting occurs https://web.dev/evolving-cls/ Cumulative Layout Shift (CLS) Was Changed Recently
- 44. @SPEAKER@patrickstox #TMCtonight •Images without dimensions •Ads, embeds, and iframes without dimensions •Injecting content with JavaScript •Applying fonts or styles late in the load What Causes CLS?
- 45. @SPEAKER@patrickstox #TMCtonight How To See CLS in PageSpeed Insights
- 46. @SPEAKER@patrickstox #TMCtonight How To See CLS in WebPageTest Filmstrip View Options: Highlight Layout Shifts Thumbnail Size: Huge Thumbnail Interval: 0.1 sec
- 47. @SPEAKER@patrickstox #TMCtonight How To See CLS in defaced.dev Layout Shift GIF Generator
- 48. @SPEAKER@patrickstox #TMCtonight https://ahrefs.com/blog/advanced-pagespeed-guide/ Speed Is A Complex Topic
- 49. @SPEAKER@patrickstox #TMCtonight People Waited Until The Last Minute To Work On This Data from CrUX Real user data 0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1 Percent Good CWV + metrics pct_good_lcp pct_good_fid pct_good_cls pct_good_cwv
- 51. @SPEAKER@patrickstox #TMCtonight Both Lab And Field Data For Multiple Pages
- 52. @SPEAKER@patrickstox #TMCtonight https://ahrefs.com/awt Site Audit, Rankings, Links & More, FREE
- 53. @SPEAKER@patrickstox #TMCtonight Core Web Vitals report in Google Search Console Easiest Way To See CWV For Your Site
- 55. @SPEAKER@patrickstox #TMCtonight So How Do I Make My Site Load Faster?
- 56. @SPEAKER@patrickstox #TMCtonight The smallest page: <!DOCTYPE HTML> If you need JavaScript: <!DOCTYPE HTML><html></html> Basic Concept #1 - Smaller Is Faster
- 58. @SPEAKER@patrickstox #TMCtonight Images: Do you need it? If so, optimize size + quality CSS: Remove unused CSS, Minify CSS Fonts: System fonts over custom fonts if possible JS: Remove unused JS, Minify JS HTML: Minify Get Rid Of Unused Things & Make The Rest Smaller
- 59. @SPEAKER@patrickstox #TMCtonight Use a CDN Basic Concept #2 – Location Matters
- 60. @SPEAKER@patrickstox #TMCtonight Note the delay for each additional connection Basic Concept #3 – Use The Same Server If Possible
- 61. @SPEAKER@patrickstox #TMCtonight These start the connections earlier if you need to connect to 3rd parties. <link rel="preconnect" href="https://site.com"> <link rel="dns-prefetch" href="//asset1.com"> Preconnect and DNS-Prefetch
- 62. @SPEAKER@patrickstox #TMCtonight Basic Concept #4 – Caching 1st load 2nd load
- 63. @SPEAKER@patrickstox #TMCtonight AMP pages clicked from search are prefetched and cached. Now you can do this with Signed Exchanges for any site. https://web.dev/signed-exchanges/ AMP’s Magic Trick
- 64. @SPEAKER@patrickstox #TMCtonight Goal: Load things people see first, then load other things. Basic Concept #5 – Prioritization Of Resources
- 65. @SPEAKER@patrickstox #TMCtonight Preload images above the fold <link rel="preload" as="image" href=“cat.jpg" imagesrcset=“cat_400px.jpg 400w, cat_800px.jpg 800w, cat_1600px.jpg 1600w" imagesizes="50vw"> Images - Early
- 66. @SPEAKER@patrickstox #TMCtonight Set height and width of images <img src=“cat.jpg" width="640" height="360" alt=“cat with string" /> Reserve the maximum space needed for ads CLS Specific – Include Sizes
- 67. @SPEAKER@patrickstox #TMCtonight Lazy Load <img src=“cat.jpg" alt=“cat" loading="lazy"> Images - Late
- 70. @SPEAKER@patrickstox #TMCtonight Defer non-critical CSS <link rel="preload" href="stylesheet.css" as="style" onload="this.rel='stylesheet'"> CSS - Late
- 71. @SPEAKER@patrickstox #TMCtonight Best: System fonts over custom fonts if possible, if not: Use the same server Good: font-display: optional Okay: Preload Fonts
- 72. @SPEAKER@patrickstox #TMCtonight Prioritize what’s needed for the site to function only, inline or preload Pre-render or server-side rendering if needed JavaScript - Early
- 73. @SPEAKER@patrickstox #TMCtonight Break up long tasks – code splitting JavaScript Throughout
- 75. @SPEAKER@patrickstox #TMCtonight JavaScript - Late Normal: <script src="https://www.domain.com/file.js"></script> Async: <script src="https://www.domain.com/file.js" async></script> Defer: <script src="https://www.domain.com/file.js" defer></script>
- 76. @SPEAKER@patrickstox #TMCtonight Make a static copy on your own server and test performance improvements of changes https://youtu.be/ULJ-2AUdZYQ Estimate Impact Of Changes
- 77. @SPEAKER@patrickstox #TMCtonight SEE YOU AT THE NEXT SMX!
Editor's Notes
- Page Experience was announced about a year ago
- Lots of Google signals are small factors
- I say probably because you could technically still make a page mobile friendly without a viewport but it’s way more work and will be difficult to maintain I’m the lead author for the SEO Chapter of the Web Almanac for 2021
- HTML or CSS fixes
- If you have an issue, there’s a ton of documentation on cleaning up different issues. There’s also the webmaster help forum and they can help guide you.
- Authentication, Data Integrity, and Encryption Years ago I wrote a very popular guide on migrating to HTTPs on Search Engine Land
- Look for the lock. Fun fact, Google doesn’t actually validate certificates, they just look for HTTPs
- All kinds of things about referral data, using a content security policy called upgrade-insecure-requests to fix mixed content issues at scale, redirects, and more
- You’ll have to visually check for these
- You’ll get a boost for jumping up categories but once you hit good you kind of cap out, there’s not an additional boost for improving after this.
- But it’s basically going to be some kind of image or text
- You know when you click something and nothing happens
- Not all users will interact with a page, so they may not have an FID value. This is also why lab test tools won’t have the value because they’re not interacting with the page. Use Total Blocking Time (TBT) instead.
- Javascript competes for the main thread. There’s just one main thread, and JavaScript competes to run tasks on it. These get flagged with little red tags in Chrome Dev Tools if they’re too long
- Notice how our font re-styles between 5.1s‑5.2s, shifting the layout as our custom font is applied. I like this view because I can see changes along with the waterfall to see what was loaded at that time.
- This is usually the territory of devs, so you’re generally going to have to work with them. You’ll generally need to sell the idea that speed is important and maybe even do some testing, but it’s rare that SEOs will actually be the ones implementing speed changes
- This is the source of data, metrics taken at 75th percentile of users, so ¾ people are having a good user experience At least so far it doesn’t look like sites have made significant improvements. You get some benefit in ranking until you hit good, after that the signal just caps
- Field = real user data, lab data = tested under specific conditions
- 28 day moving average, so any changes you make will take some time to be reflected here You can also track your own RUM data if you want and send to Google Analytics for instance
- You’ll want to look at this to help you prioritize. Look at the issue and click into these and you’ll see groups of pages with the same issue. Then you can look at why specifically they’re not meeting the metrics in pagespeed insights and try to resolve the issues. Many sites struggle with LCP.
- Smaller JS files, smaller CSS files, smaller font files You don’t need 8 fonts, 37 tracking scripts, and all the JS and CSS needed for every single imaginable function or layout loaded.
- You don’t need 8 fonts, 37 tracking scripts, and all the JS and CSS needed for every single imaginable function or layout loaded.
- CDNs basically give you a way to connect and serve your site that’s closer to users. It’s like having copies of your server in different locations around the world
- If you host your files on the same server, additional connections don’t have to be made
- A browser would typically wait for the HTML to finish before starting a connection, but here it’s starting before it normally would DNS-prefetch has better support than preconnect
- Cached files can also be re-used across pages. So any subsequent page visits will be faster.
- They’re fast for users, but AMP pages may not actually test well in lab tests.
- Preload is similar to what we saw with preconnect for the connections, it starts loading preloaded resources earlier by prioritizing them in the browser.
- Basically loads images later in the process or when a user is close to seeing them. Many systems kind of handle this for you now.
- you’re taking critical parts of the CSS and putting it directly into the HTML You can also inline images, but caching is more complicated.
- hide text for up to 100ms, then only use the web font if it is available - never swapping
- Ideally you’d chunk the needed parts so they’re smaller, then load the rest later
- Maybe async things like analytics to get that data sooner, but in general anything not needed until later or that doesn’t have dependencies you’ll want to defer