Smashing Magazine - #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 <head> 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 <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.

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 Events
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:


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.

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


10. Recent Smashing Articles


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

unsubscribe update preferences view in your browser

Older messages

Meet “Smart Interface Design UX Checklists” (166 cards)

Thursday, September 29, 2022

Meet “Smart Interface Design Patterns Checklists”, 166 UX checklist cards to design and build better interfaces, faster. It's here! The Smart Interface Design Patterns Checklists, 166 UX checklist

#372: Free Fonts and Illustrations

Tuesday, September 27, 2022

With free Figma kits, free fonts and illustrations, generators and a few lovely spinners. Issue #372• September 27, 2022 • View in the browser 💨 Smashing Newsletter Bună Smashing Friends, Every now and

#371: The Incredible Web

Tuesday, September 20, 2022

With UX challenges, free icons, Markdown to timelines and smart ways to say No. Issue #371• September 20, 2022 • View in the browser 💨 Smashing Newsletter Zdravo Smashing Friends, The web is a magical

Meet SmashingConf New York 🇺🇸 (Oct 10–13)

Thursday, September 15, 2022

A friendly in-person conference on front-end, performance, UX and design. For interface designers and front-end engineers. October 10–13, 2022. SmashingConf NYC Is Back! Front-End, UX & Design.

#370: Front-End Accessibility

Tuesday, September 13, 2022

Accessible charts, tooling, forced colors, dark mode accessibility and an accessibility checklist. Issue #370• September 13, 2022 • View in the browser 💨 Smashing Newsletter Hej Smashing Friends, Last

You Might Also Like

Adobe AI, Remote, Stripe Sessions, Node.js Redesign, light-dark()

Thursday, March 28, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 28 2024 Defining experience quality in large language

Are Photorealistic Renderings Worth It?

Wednesday, March 27, 2024

Plus, the go-to garden stores of top designers and landscaping pros View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Home Decor, Lamp, Desk, Furniture,

CSS Variable Groups, Layout Rhythm, Animate Borders, Parallel Lives, Visualization Techniques

Wednesday, March 27, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 27 2024 Proposal: CSS Variable Groups lea.verou.me CSS

The History of Ikat

Tuesday, March 26, 2024

Plus, Kips Bay Decorator Show House New York announces designer lineup View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Art, and Painting SAVE YOUR

#449: UX Research

Tuesday, March 26, 2024

UX research impact, research invite emails, research without access to users, and UX research methods cheat sheet. Issue #449 • Mar 26, 2024 • View in the browser Smashing Newsletter Joh-eun jeonyeog-

Progress Indicator, Lissajous Curves, Pixel to Ink, Azulejo, Mac at 40

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 26 2024 Front-End solution: progress indicator piccalil.

Responsive Font Size, Icon Design, text-emphasis, Inclusive Sans, Accessible Forms

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 25 2024 A formula for responsive font-size jameshfisher.

👏 Impressive Dashboard Design Files + 🏆 Challenge Updates

Tuesday, March 26, 2024

🌟 Brighten Your Day with UpLabs' Design News! Firstly, let's congratulate Syndell, the winner of our latest 📝 Todoist Dashboard Redesign Challenge! Congratulations!! Secondly, don't forget

16 Designers Reveal Their All-Time Favorite IKEA Products

Monday, March 25, 2024

Plus, gardens every design lover must see in person View in your browser | Update your preferences Architectural Digest AD PRO Logo lush gardens with sparkling blue water and trees 14 GARDENS EVERY

Accessibility Weekly #389: On Popover Accessibility

Monday, March 25, 2024

March 25, 2024 • Issue #389 View this issue online or browse the full issue archive. Featured: On popover accessibility: What the browser does and doesn't do "One of the premises of the new