#373: Web Performance

With critical CSS, encoding quality settings, resource hint validator and memory debugging. Issue #373 • October 4, 2022 • [View in the browser]( 💨 [Smashing Newsletter]( Salām Smashing Friends, Over the years, we’ve all heard about the importance of image optimization and compression. We’ve learned that we should always [self-host our static assets](. We even learned about the [perfect order]( for performance. But there is always something new to learn in web performance, and this newsletter is just about that. [SmashingConf New York]( Meet [SmashingConf NYC]( taking place on Oct 10–13: from design systems to boosting web performance. We look into some of the useful things and tools to keep in mind when boosting web performance today. We’ll also be looking at some of these issues in our upcoming [SmashingConf New York]( which is going to take place next week — both in-person and [online]( too! Indeed, we are packing our things at this very moment, making sure we are prepared for the trip and to see you, of course! And if you are up for a run around Central Park, or an informal gathering with the Smashing Crew, please ping us on Twitter [@smashingmag]( — we’d love to meet you! Looking very much forward to the next week! — Vitaly ([@vitalyf]( --------------------------------------------------------------- 1. The State Of The Web 2022 What’s the current state of the web? No resource answers the question in such detail as the Web Almanac. Backed up by data from nearly 8.4 million tested websites and the expertise of 107 trusted web experts, the 2022 edition of the HTTP Archive’s [Web Almanac]( dives deep into the current state of the web. [Web Almanac 2022]( This year’s Web Almanac features 22 chapters spanning aspects of page content, user experience, publishing, and distribution. From CSS to third parties, accessibility to security, and CMS to page weight, the report not only explores current trends, stats, tools, and techniques but also best practices in each field. A goldmine for every developer. (cm) --------------------------------------------------------------- 2. Critical CSS Best Practices Inlining critical CSS into the of your pages is a popular technique to improve a website’s performance. But is it a good recommendation for every project? Harry Roberts [argues]( that the Critical CSS pattern is a good idea in theory. However, according to him, it often falls short as a fragile and expensive technique to implement, which seldom provides the benefits that many developers expect. [Critical CSS? Not So Fast!]( In his post “[Critical CSS? Not So Fast!]( Harry dives deeper into the approach and why Critical CSS is not as straightforward as we’d like. He takes a closer look at the performance implications of getting Critical CSS right, when it’s worth the effort, and when it is difficult to implement. A helpful overview that shows the performance optimization technique from a different perspective. (cm) --------------------------------------------------------------- From our sponsor Start Accessibility Testing In Just Minutes With The Free axe DevTools Extension Run a quick in-browser test any time you want with the free axe DevTools extension. Get instant results with detailed information on your web accessibility issues and how you can easily fix them. No accessibility experience necessary. Build a more accessible website today with [axe DevTools for Chrome](. --------------------------------------------------------------- 3.WebP And AVIF Encoding Quality Supporting modern image formats like AVIF and WebP can help improve performance metrics like Largest Contentful Paint. But what quality settings should you choose for your AVIF and WebP images if you want to serve them as an alternative to JPEG? [AVIF and WebP encoding quality settings]( In his [blog post on AVIF and WebP encoding quality settings]( Malte Ubl helps you find the perfect quality setting to ensure your image looks as good as the original JPEGs but at a smaller size for improved page load times. In a nutshell: If you usually encode JPEGs with a quality setting 60, encode AVIF with a quality setting 50 and WebP with a quality setting 65. You should expect your AVIF files to be on average 36% smaller and WebP 15% smaller than the equivalent JPEG. In the post, you’ll also find a handy little tool to compare the impact that different quality settings have on an image. If you want to learn more about how changes to your image format, size, quality, and encoding can improve page load speed, also be sure to check out Cloudinary’s [Website Image Analysis Tool](. (cm) --------------------------------------------------------------- 4. Browser Resource Hint Validator Resource hints improve page performance by giving the browser extra information that it can’t infer from the HTML. We can use preload to load content that’s required for the initial render, prefetch loads content that may be needed to render the next page, and preconnect establishes a server connection without loading a specific resource yet. [Browser Resource Hint Validator]( To help you check if resource hints are working as they should, DebugBear offers a free [Browser Resource Hint Validator](. All you need to do is enter a URL, and the validation will start. The test results show you the different resource hints detected on the site, their size, source, type, and if they are working correctly or if you can consider removing a hint. A handy little helper. (cm) --------------------------------------------------------------- 5. Upcoming Online Workshops For the last year, we’ve been running [online workshops on front-end and UX]( from accessibility and design systems to web performance and complex navigation. We have [new dates and new workshops]( coming up soon, and we thought that, you know, you might want to join in as well. [Smashing Online Workshops]( With [online workshops]( we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are. As always, here’s an overview of our [upcoming workshops]( - [Architecting Design Systems]( Workflow with Nathan Curtis. Oct 6–14 - [Deep Dive On Accessibility Testing]( Dev with Manuel Matuzović. Nov 14–28 - [Figma Workflow Masterclass]( UX with Christine Vallaure. Nov 17 – Dec 1 - [Designing Better Products Masterclass]( UX with Stéphanie Walter. Nov 28 – Dec 12 - [Maintaining Sucessful Design Systems]( Workflow with Brad Frost. Jan 10 – 24 - [Jump to all workshops →]( --------------------------------------------------------------- 6. JavaScript Memory Leaks Memory leaks aren’t usually obvious and seldom get caught in code review. But they can have a significant, negative impact on page load and interaction performance, as well as on user engagement. To help you find and address the root cause of memory leaks, the Engineering team at Meta open-sourced [MemLab]( a JavaScript testing framework for automating leak detection. [MemLab]( MemLab finds memory leaks by running a headless browser through predefined test scenarios and diffing and analyzing the JavaScript heap snapshots. You can install it through npm or from the [GitHub repo](. A great solution for anyone who wants to prevent their web application from getting slowed down. (cm) --------------------------------------------------------------- 7. Total Blocking Time And LCP Nobody likes to wait. But did you know that most users will only accept a waiting time of 50 milliseconds before they sense a page as unresponsive? That’s a fraction of the time it takes you to blink. A metric to keep an eye on to reduce that feeling of unresponsiveness, is the Total Blocking Time. It tracks how long the main thread of a page is blocked by long tasks during the loading process. Ben Schwarz wrote a [short and sweet guide]( that explains how to implement fixes and track results to improve Total Blocking Time and, ultimately, the user experience. [Total Blocking Time: A Short and Sweet Guide for Happier Users]( Another performance metric to watch out for to improve page speed is Largest Contentful Paint (LCP). The Core Web Vital tracks how long it takes your page’s most data-intensive above-the-fold elements to load, whether it’s text, images, elements with background images, or videos. Karolina Szczur takes a look at [four proven methods to help you find and fix performance issues](. They range from basic to advanced, and even by implementing only a few of her suggestions, you’ll achieve faster LCP load times, lower bounce rates, and a better overall experience. (cm) --------------------------------------------------------------- From our sponsor Northwestern’s Online MS in Information Design and Strategy [Northwestern’s Online MS in Information Design and Strategy]( Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design. [Learn more](. --------------------------------------------------------------- 8. Front-End Performance Essentials When talking about web performance and optimizing strategies, it is important to have a solid understanding of the fundamentals. Matthew Costello started an article series that helps you get to grips with frontend web performance essentials and, if you’re already more advanced in the field, maybe close some existing knowledge gaps along the way. [Frontend Web Performance: The Essentials]( The [first part]( in the article series lays the base for a performant front-end in browsers by giving you a better understanding of the rendering cycle and how you can analyze it with available tools. [Part two]( dives deep into concepts such as Event Loop, Web Workers, and asynchronous scheduling to keep the main thread running as fast as possible and prevent frozen pages or jank. If you’re looking for a performance optimization roadmap you can follow along, Vitaly’s [Front-End Performance Checklist]( has got your back. It summarizes everything you need to know to create fast experiences on the web today. From metrics to tooling and front-end techniques. Happy optimizing! (cm) --------------------------------------------------------------- 9. New On Smashing Job Board - [UX Designer]( at Software Engineering Institute (Pittsburgh , PA) - [Product Designer (UX/UI)]( at Jack Henry (United States) - [E-Commerce UX Auditor]( at Baymard Institute (Remote) --------------------------------------------------------------- 10. Recent Smashing Articles - [Delightful UI Animations With Shared Element Transitions API (Part 1)]( - [October Vibes For Your Desktop]( - [Unconscious Biases That Get In The Way Of Inclusive Design]( - [Building Your Security Strategy (Case Study)]( - [Read more articles on Smashing Magazine →]( --------------------------------------------------------------- That’s All, Folks! Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time! --------------------------------------------------------------- This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris LjeÅ¡njanin (il). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](