What's Next for Page Experience - SMX Next 2021 - Patrick Stox
•Transferir como PPTX, PDF•
0 gostou•356 visualizações
Patrick Stox gave a presentation at SMX Advanced discussing changes to page experience metrics since the last conference. He began by introducing himself and his background. He then covered updates to metrics like Cumulative Layout Shift (CLS) and changes to AMP requirements. Stox reviewed current page experience metrics and provided tips on optimizing Core Web Vitals like improving First Input Delay (FID), reducing Cumulative Layout Shift (CLS), and lowering Largest Contentful Paint (LCP). He speculated that metrics may expand to consider all user interactions and page size. Stox closed by discussing challenges with Single Page Apps and potential future developments.
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (19)
Semelhante a What's Next for Page Experience - SMX Next 2021 - Patrick Stox
Semelhante a What's Next for Page Experience - SMX Next 2021 - Patrick Stox (20)
Mais de Ahrefs
Mais de Ahrefs (18)
Último
Último (20)
What's Next for Page Experience - SMX Next 2021 - Patrick Stox
- 1. @SPEAKERNA@patrickstox #SMX What’s Coming Next For Page Experience?
- 2. @SPEAKERNA@patrickstox #SMX 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 • Helped define the role of Search Marketing Strategist for the US Department of Labor • Lead author for the SEO Chapter of the 2021 Web Almanac Who is Patrick Stox?
- 3. @SPEAKERNA@patrickstox #SMX Things Changed Since I Spoke At SMX Advanced
- 4. @SPEAKERNA@patrickstox #SMX Simply: It's the 5 second timeframe where the most shifting occurs https://web.dev/evolving-cls/ Cumulative Layout Shift (CLS) Was Changed
- 5. @SPEAKERNA@patrickstox #SMX Google Dropped AMP Requirement For Top Stories And The Label
- 6. @SPEAKERNA@patrickstox #SMX The Update Finished Rolling Out
- 7. @SPEAKERNA@patrickstox #SMX People Did Work On It
- 8. @SPEAKERNA@patrickstox #SMX Only 11.4% of pages had CWV metrics We Looked At 5.2M Pages In Ahrefs
- 9. @SPEAKERNA@patrickstox #SMX Most pages had CLS and LCP #s FID was the metric missing the most CLS = 99.91% LCP = 99.79% FID = 93.08% For Those That Had Data
- 10. @SPEAKERNA@patrickstox #SMX This Is What We Saw For Page Level Data 21.27 42.06 98.08 50.24 39.52 32.6 1.84 31.63 39.21 25.34 0.09 18.13 0 20 40 60 80 100 120 CWV CLS FID LCP CWV Metrics Good Needs Improvement Poor
- 11. @SPEAKERNA@patrickstox #SMX Should you work on them? Page Experience Signals Are Small Ranking Signals
- 12. @SPEAKERNA@patrickstox #SMX From Google Webmaster Trends Analyst John Mueller
- 13. @SPEAKERNA@patrickstox #SMX Sistrix Study: Inconclusive IMO
- 14. @SPEAKERNA@patrickstox #SMX Let’s Talk About Improving CWV
- 15. @SPEAKERNA@patrickstox #SMX https://developers.google.com/speed/pagespeed/insights/ Use These Tabs In PageSpeed Insights To Filter
- 16. @SPEAKERNA@patrickstox #SMX Improve FID Source: web.dev/vitals
- 17. @SPEAKERNA@patrickstox #SMX Break up long tasks – code splitting JavaScript
- 18. @SPEAKERNA@patrickstox #SMX Normally all JavaScript is run on the main thread, but it doesn’t have to be. Service Workers
- 19. @SPEAKERNA@patrickstox #SMX Improve CLS Source: web.dev/vitals
- 21. @SPEAKERNA@patrickstox #SMX •Images without dimensions •Ads, embeds, and iframes without dimensions •Injecting content with JavaScript •Applying fonts or styles late in the load Caused By
- 22. @SPEAKERNA@patrickstox #SMX 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 Include Sizes
- 23. @SPEAKERNA@patrickstox #SMX <img width="1000" height="1000" src="puppy-1000.jpg" srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w" alt="Puppy with balloons" /> Responsive Images
- 24. @SPEAKERNA@patrickstox #SMX Use system fonts if you can Use font-display: optional and you won’t get shifts, but may not get your custom font. Best chance of no shift with custom font is combining <link rel=preload> and font-display: optional Avoid Flashes Of Invisible Text (FOIT)
- 25. @SPEAKERNA@patrickstox #SMX Improve LCP Source: web.dev/vitals
- 27. @SPEAKERNA@patrickstox #SMX The smallest page: <!DOCTYPE HTML> If you need JavaScript: <!DOCTYPE HTML><html></html> Basic Concept #1 - Smaller Is Faster
- 28. @SPEAKERNA@patrickstox #SMX Use a CDN Basic Concept #2 – Location Matters
- 29. @SPEAKERNA@patrickstox #SMX Note the delay for each additional connection Basic Concept #3 – Use The Same Server If Possible
- 30. @SPEAKERNA@patrickstox #SMX 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
- 31. @SPEAKERNA@patrickstox #SMX Basic Concept #4 – Caching 1st load 2nd load
- 32. @SPEAKERNA@patrickstox #SMX 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
- 33. @SPEAKERNA@patrickstox #SMX Goal: Load things people see first, then load other things. Basic Concept #5 – Prioritization Of Resources
- 34. @SPEAKERNA@patrickstox #SMX Do you need it? If so, optimize size + quality 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
- 35. @SPEAKERNA@patrickstox #SMX Lazy Load <img src=“cat.jpg" alt=“cat" loading="lazy"> Images - Late
- 36. @SPEAKERNA@patrickstox #SMX Remove unused CSS Minify CSS Inline Critical CSS CSS - Early
- 38. @SPEAKERNA@patrickstox #SMX Defer non-critical CSS <link rel="preload" href="stylesheet.css" as="style" onload="this.rel='stylesheet'"> CSS - Late
- 39. @SPEAKERNA@patrickstox #SMX Best: System fonts over custom fonts if possible, if not: Use the same server Good: font-display: optional Okay: Preload Fonts
- 40. @SPEAKERNA@patrickstox #SMX Minify Prioritize what’s needed for the site to function only, inline or preload Pre-render or server-side rendering if needed JavaScript - Early
- 42. @SPEAKERNA@patrickstox #SMX 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>
- 45. @SPEAKERNA@patrickstox #SMX We want the new metric to: 1.Consider the responsiveness of all user inputs (not just the first one) 2.Capture each event's full duration (not just the delay). 3.Group events together that occur as part of the same logical user interaction and define that interaction's latency as the max duration of all its events. 4.Create an aggregate score for all interactions that occur on a page, throughout its full lifecycle. https://web.dev/better-responsiveness-metric/ FID Will Probably Change
- 46. @SPEAKERNA@patrickstox #SMX Page Size – my best guess You can pass the current metrics by prioritizing assets and still have an extremely large page What Metrics Might Come Next Year?
- 47. @SPEAKERNA@patrickstox #SMX App History API https://web.dev/vitals-spa-faq/ SPAs Are Hard To Measure
- 48. @SPEAKERNA@patrickstox #SMX Speculative prerendering https://web.dev/speculative-prerendering/ Early hints https://blog.cloudflare.com/early-hints/ Get Things Earlier
- 49. @SPEAKERNA@patrickstox #SMX Cloudflare: Early Hints Signed Exchanges HTTP/3 Wordpress: making a team for CWV Platforms Doing The Work
- 50. @SPEAKERNA@patrickstox #SMX SEE YOU AT THE NEXT SMX!
Notas do Editor
- % passing up 10% in the last year, but still looking at 33% passing CLS and FID are up LCP is where people are really struggling Source of the data is CrUX which is real users of Chrome who opted into sharing their data
- The difference between this data and CruX is that CrUX is for origins and this is page level.
- The difference between this data and CruX is that CrUX is for origins and this is page level.
- Less pages than overall origins are passing CWV For page level data FID shows better, CLS worse, and LCP about the same vs the origin data. So it seems CLS may be a bigger issue than thought
- Lots of Google signals are small factors. I’d say if you’re in the poor category then maybe, but I don’t think most businesses should spend a ton of time on this. It’s hard to argue for SEO when multiple Google employees have called these signals tie breakers. You won’t win against dev teams with that argument. Argue for users and user experience. Argue for analytics and better business data. Faster sites mean the analytics tag probably fires sooner and records more people.
- John Mueller’s tweet
- Sites got more traffic over time, even the bad one or sistrix did some database updates Sites with better core web vitals got more visibility But it’s like saying sites that do SEO and care about things like CWV probably get more traffic than those that don’t
- FID isn’t listed here because this is a lab test and there’s no user clicking
- You may not need to work on this. As I mentioned most sites are passing. 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.
- 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
- They aren’t blocking but they do have some limitations on their capabilities.
- CLS measures how elements move around or how stable the page layout is.
- Largest visible element loaded in the viewport It’s usually going to be a featured image, text, or maybe the <h1> tag
- A lot goes into LCP which makes it the hardest to solve
- Smaller JS files, smaller CSS files, smaller font files
- 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.
- 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
- Speculative prerendering starts loads when it thinks it knows what the next page will be Early hints tries to prioritize and start loading assets early for you