October 4, 2022 Smashing Newsletter: Issue #373
This newsletter issue was sent out to 222,464 subscribers on Tuesday, October 4, 2022.
Editorial
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 <head> order for performance. But there is always something new to learn in web performance, and this newsletter is just about that.
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.
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 <head> 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.
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)
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?
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.
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.
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 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.
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)
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.
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)
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).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.