Get started with Web Vitals, optimize JS for faster pages & understand the impact of anti-flicker snippets
Jun 1, 2022
 |
 Hi there, One of the best (and most challenging) things about the web performance industry is walking the fine line between communicating with seasoned performance veterans who want detailed deep-dives into nuanced issues, while at the same time recognizing that a great number of people in our community are new to performance and need to learn to walk before they can run. It's also exciting to see how our community has expanded beyond developers and engineers to include UX, marketing, business, and SEO folks. If this is you, hello and welcome! :) In this month's newsletter, we've aimed to deliver a balance of resources for both newcomers and veterans – and for both technical and non-technical folks. I hope you find something helpful and relevant to a problem you're trying to solve. As always, I'd love to hear back from you. Please feel free to reply to this email with your feedback and suggestions about what types of resources you'd like to see in future newsletters. Until next time, I hope you stay safe, happy, and well. Tammy ––––– Getting started with Core Web Vitals It's been two years since Google announced Core Web Vitals, and it's become clear that Vitals are here to stay for a while. If you're not sure where to begin measuring Web Vitals and how to optimize for them, this guide is for you! In it you'll find:
NEW! Vitals badges on performance recommendationsAll the performance optimization recommendations you see on your Vitals and Improve dashboards – as well as in your synthetic test details – are now badged so you can see which Web Vital they affect. When you fix those issues, you should see improvements in your Vitals and Lighthouse scores. Learn more about how SpeedCurve helps you track and improve Web Vitals.  The ultimate guide to optimizing JavaScript for quick page loadsIf you want to improve your Web Vitals, then you'll most likely need to focus on optimizing the JavaScript on your pages. Steve Sewell has created a super-helpful collection of JS recommendations for you to start with.  Don't fight the browser preload scannerPreloading is a great technique for rendering key page resources – such as hero images and other important content – more quickly. The preload scanner is a highly effective browser optimization that helps pages load faster and greatly improve Largest Contentful Paint times for your site. Jeremy Wagner (@malchata) explains how to help the browser preload scanner help you.  A management maturity model for performanceManagement is quite often the missing link when it comes to delivering consistently good user experiences. In this excellent post, Alex Russell (@slightlylate) breaks down the six levels of performance management maturity – from 'Bliss' and 'Firefighting' to 'Strategic Performance – helps you identify what level your organization is at, and how to evolve. This is a must-read for anyone who cares about not just making your site faster and more user-friendly, but keeping it that way.  Image: Colton Sturgeon Understanding the performance impact of anti-flicker snippetsIf you use A/B testing tools on your site, then this post is for you. Anti-flicker snippets hide page content until your A/B test tool has finished applying its experiments. But hiding the page can have a dramatic impact on a visitor's experience. Andy Davies (@AndyDavies) explains how to measure the performance and UX impact of anti-flicker snippets.  Mark your calendar!We're very excited to be supporters of some of our favourite in-person events returning this year!  I'm planning to get to at least a couple of these events – and I'm doing talks at LazyLoad and performance.now(). Hopefully I'll see you there!
It's time people knew the TRUTH about their own websites...And finally, courtesy of Cassidy Williams (@cassidoo), the funniest thing I've seen on Twitter in a long time. :)  |
