What's Next for Page Experience - SMX Next 2021 - Patrick Stox

Editor's Notes

• #8: % 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
• #9: The difference between this data and CruX is that CrUX is for origins and this is page level.
• #10: The difference between this data and CruX is that CrUX is for origins and this is page level.
• #11: 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
• #12: 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.
• #13: John Mueller’s tweet
• #14: 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
• #16: FID isn’t listed here because this is a lab test and there’s no user clicking
• #17: 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.
• #18: 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
• #19: They aren’t blocking but they do have some limitations on their capabilities.
• #20: CLS measures how elements move around or how stable the page layout is.
• #26: Largest visible element loaded in the viewport It’s usually going to be a featured image, text, or maybe the <h1> tag
• #27: A lot goes into LCP which makes it the hardest to solve
• #28: Smaller JS files, smaller CSS files, smaller font files
• #29: 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
• #30: If you host your files on the same server, additional connections don’t have to be made
• #31: 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
• #32: Cached files can also be re-used across pages. So any subsequent page visits will be faster.
• #33: They’re fast for users, but AMP pages may not actually test well in lab tests.
• #35: Preload is similar to what we saw with preconnect for the connections, it starts loading preloaded resources earlier by prioritizing them in the browser.
• #36: 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.
• #38: you’re taking critical parts of the CSS and putting it directly into the HTMLYou can also inline images, but caching is more complicated.
• #41: Ideally you’d chunk the needed parts so they’re smaller, then load the rest later
• #42: 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
• #49: 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