April 18, 2023 Smashing Newsletter: Issue #401
This newsletter issue was sent out to 213,582 subscribers on Tuesday, April 18, 2023.
Editorial
What should we focus on when boosting web performance today? Surely we’ve heard about Core Web Vitals and Lighthouse scores, but is it enough to get into the green zone in the Google Search Console? How do we optimize for specific regions in a world where our user base is? And how do we debug long tasks and layout shifts?
In this newsletter, we try to answer at least some of these questions — with a few helpful guides to resolve performance issues in your sites or apps, along with a few low-hanging web performance fruits that you could apply to improve your performance today.
And we are getting super-duper-excited about our new frontend adventures this year: we have an upcoming Smashing Meets all around JavaScript, and our SmashingConf season is just about to start (in-person/remote):
- Smashing Meets JavaScript (Apr 25)
A free community event on JavaScript performance, security and the Canvas API. - SmashingConf SF 🇺🇸 (May 23–26)
All around frontend, web performance, CSS, JavaScript, Next.js and accessibility, - New Front-End Adventures 2023 (online, Apr 25–May 9)
With an overview of the things to keep in mind in frontend these days by Vitaly Friedman, - React Performance Masterclass (online, June 29–July 13)
With an overview of React performance optimization techniques with Ivan Akulov.
And, of course, we’d love to welcome you to our upcoming SmashingConf Freiburg 🇩🇪 and our very first SmashingConf Antwerp 🍫 coming up later this year. Oh my, what an adventure it’s going to be (in a good way!) ;-)
Happy learning and we hope to see you soon, everyone!
— Vitaly (@vitalyf)
1. CLS Debugger
We’ve all come across sites where page elements shifted just when we were trying to interact with them. To prevent your users from experiencing unexpected page shifts, you should keep an eye on the Cumulative Layout Shift (CLS) Core Web Vital. The CLS Debugger helps you identify what needs improving in the initial load of your site.
The CLS Debugger uses the Layout Instability API in Chromium to detect and measure layout shifts in the viewport between when a page starts loading and when it finishes loading. It visualizes where shifts are happening and gives you a list of HTML elements to find the culprits in the code base. A handy little tool to prevent bad surprises and a bad Core Web Vitals score. (cm)
2. Web Performance Snippets
How to measure the time to first byte of all resources loaded? How to find lazy-loaded images outside of the viewport? How to determine when long tasks happen? Joan León curates a list of useful snippets to get web performance metrics to use in the browser console.
The collection includes snippets for Core Web Vitals, loading, and interaction. Covering everything from Largest Contentful Paint to time to first byte, script timings, resource hints, font loading, and layout shifts, they offer a quick and easy way to analyze a website’s performance. One for the bookmarks. (cm)
3. Optimizing Time To First Byte
The Time to First Byte (TTFB) metric is a foundational web performance metric. If it’s too high, you risk that TTFB slows down the metrics that follow it — First Contentful Paint or Largest Contentful Paint, for example. But how to assess if the TTFB of your site is problematic? And if it is, how to fix it? Jeremy Wagner wrote a comprehensive post on how to prioritize for Time to First Byte.
In “Optimize Time to First Byte,” Jeremy shares different strategies for getting things faster on the server side. Since no article can encapsulate every combination of backend application stacks, the post doesn’t provide stack-specific guidance but focuses on optimizations that apply to most architectures. A great overview of effective options to explore and try. (cm)
4. Upcoming Workshops and Conferences
That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.
As always, here’s a quick overview:
- UX/UI Design & Figma Introduction UX
with Christine Vallaure. Apr 20–28 - New Frontend Adventures, 2023 Edition Dev
with Vitaly Friedman. Apr 25 – May 9 - Architecting Design Systems Workflow
with Nathan Curtis. May 11–19 - Data Visualization Masterclass Dev
with Amelia Wattenberger. May 4–18 - SmashingConf SF 🇺🇸 — May 23–26
- Deep Dive On Accessibility Testing Dev
with Manuel Matuzović. June 12–26 - Smart Interface Design Patterns Video Course UX
9h-video + Live UX Training with Vitaly Friedman - Jump to all workshops →
5. Priority Hints And Improving LCP
Browsers usually determine a request’s priority by its type and position in the document markup. If you want to change this default priority, let’s say because the browser queues your Largest Contentful Paint (LCP) image, it might be a good idea to experiment with Priority Hints to reduce the waiting time. Kevin Farrugia wrote a great introduction to how Priority Hints work and what to watch out for.
In his post, Kevin shows in detail how to use fetchpriority to increase or decrease the priority of an element and, particularly, how to use it to load an LCP image faster. A fallback using preload prioritizes your LCP image in Firefox where fetchpriority isn’t supported yet. (cm)
6. Low-Hanging Web Performance Fruits
When you want to improve the performance of a site or app, it’s easy to go down the rabbit hole as there’s always something else you could optimize. Luckily, there are also some low-hanging web performance fruits, things that can be done relatively easily but have a meaningful impact on performance.
Artem Perchyk wrote a cheat sheet for optimizations that don’t require you to mess with the existing code base aside from the configuration and a few imports. He describes five low-hanging fruits in detail: optimizing your assets, caching your assets, splitting your code, optimizing your bundle, and managing third-party scripts. While some of these things might sound basic and obvious, they are often forgotten in actual projects. A great reminder.
If you want to dive a bit deeper into optimizing for Core Web Vitals, the Chrome DevRel team summarized the most effective ways and best practices to improve performance for your users. The collection only features recommendations that have the largest real-world impact, are relevant and applicable to most sites, and realistic for most developers to implement. (cm)
7. Fast Is Good, Instant Is Better
Due to its nature of being a request/response medium, there is an inherent delay to web browsing, no matter how fast we make our pages. So how much can we reduce this natural delay? Can we give our users an experience where the load is not just acceptable but completely unnoticeable? As Barry Pollard shows, there are a couple of technologies that make the seemingly impossible possible.
In his post “Fast Is Good, Instant Is Better,” Barry describes three technologies that have the potential for drastically improving the user experience of the web. As he points out, being aware of them and ensuring your websites can use them is crucial to not waste any performance gains you can get for free. A must-read that prevents you from making your performance endeavors needlessly tough. (cm)
8. Getting Started With React DevTools
So you’ve built a shiny new React app and notice that some components are rendering slowly. It could be a large list or a dropdown, for example. React Developer Tools is a powerful browser extension that helps you identify the root cause of performance issues like these. Available for Chrome and Firefox, it provides a detailed analysis of each component’s performance and rendering times.
If you want to dive deeper into how React DevTools works, Piero Borrelli looks at the debugging tools in more detail. He summarizes everything you need to know to get started and demonstrates the tools’ functionalities through an example app. A handy little helper to uncover and fix performance bottlenecks. (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.