September 9, 2025 Smashing Newsletter: Issue #524
This newsletter issue was sent out to 185,216 subscribers on Tuesday, September 9, 2025.
Editorial
Today, we are running our annual SmashingConf in our lovely hometown, Freiburg, Germany, with plenty of sessions and workshops around accessibility, CSS, JavaScript, design systems, and good ol’ front-end. Also, balloons everywhere! 🎈
We’ll be running more SmashingConf events soon, and we also have a few front-end & UX online workshops which we run in the very same smashing spirit:
- SmashingConf NYC 🇺🇸 (Front-End & UX, Oct 6–9)
- SmashingConf Amsterdam 🇳🇱 (Design & UX, Apr 13–16, 2026)
- Smashing Meets Music (online, Oct 22)
- Open Up with Brad Frost (online, Sep 24)
We head to New York 🇺🇸 for SmashingConf NYC 2025 next month with sessions on design systems, AI, accessibility and UX research. There are some lovely workshops as well. We can’t wait to see you there! Jump to details and workshops.
1. Context-Aware Web Performance
Let’s say a user has a critically low battery, data saver mode enabled, or a weak connection. Wouldn’t it be cool if you could adapt the experience for them? For example, by serving lower-resolution media, forgoing web fonts, or disabling auto-playing videos? Harry Roberts built a handy little tool to help you do exactly that: Obs.js.
Obs.js uses the Navigator and Battery APIs to get contextual information about your user’s connection strength, battery status, and device capability. It exposes those signals as CSS classes on the <html> element and as properties on window.obs, so you can adapt delivery accordingly. Harry created an interactive demo page to show how it works in action.
By the way, you don’t need to use Obs.js to adapt the experience: If your RUM or analytics provider accepts window.obs-style data, you can also use the data that Obs.js gathered to learn more about your audience. (cm)
2. Optimizing Third-Party Scripts
Third-party scripts are invaluable for powering analytics, personalization, ads, chat widgets, and many other features that are hard to build from scratch. However, when they are large or synchronous, you risk that they block the main thread and slow down your site. So, how can you optimize your third-party scripts to prevent them from harming performance? Web workers are here to help, and Jakub Andrzejewski wrote a practical guide on how to use them.
Web workers allow you to move third parties off the main thread and onto a background thread so that they don’t compete with your app. By doing so, the main thread is less busy, which means that rendering and handling user input can happen faster.
In his guide, Jakub not only explains in detail how web workers work, he also shares a practical workflow that layers performance optimization strategies gradually to keep your site fast while still benefiting from third-party services. (cm)
3. Speculation Rules On Complex Sites
The Speculation Rules API is a handy little helper to boost performance by either prefetching or prerendering future page navigations to give quicker or even instant page navigations. If you haven’t gotten around to wrapping your head around it yet, Barry Pollard wrote an introduction to the API in which he explains how to implement it and what complex sites need to consider before doing so to avoid issues down the line.
For a real-world use case of the Speculation Rules API, also be sure to check out Harry Roberts’ layered approach. On his personal site, he uses Speculation Rules to immediately pay the TTFB cost for all internal links on the page and to pay the LCP cost for any other internal links on hover. In his blog post, he not only shares insights into how it works but also how he adapted the approach to match the needs of a more complex site with lots of traffic and a non-trivial back-end infrastructure. (cm)
4. Performance Annotations With Gemini
Perhaps you’ve already discovered the feature while tinkering with Chrome DevTools, if not, be sure to give it a try: You can now ask Gemini to explain performance traces in DevTools.
As Addy Osmani explains, you can double-click an event in the Main track, then click “Generate label” next to the input field, and Gemini suggests a label based on the stack trace and context. A small tip, but one that will certainly become a game-changer in your performance optimization workflow. (cm)
5. 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:
- Dataviz Accessibility Workshop Dev
with Sarah L. Fossheim. Sep 22 – Oct 6 - Designing Websites That Convert UX
with Paul Boag. Sep 30 – Oct 9 - Advanced Design Systems Workflow
with Brad Frost. Oct 1–10 - Live UX Training + video course UX
with Vitaly Friedman. Oct 17 – Nov 17 - Designing Better Products Masterclass UX UX
with Stéphanie Walter. Oct 21 – Nov 4 - Design Patterns For AI Interfaces UX UX
with Vitaly Friedman. Oct 30 – Nov 13 - How To Measure UX and Design Impact UX
with Vitaly Friedman. Video course + live UX training - Jump to all workshops →
6. Guide To Long Animation Frames
Ideally, we want the browser to be able to paint at 60 frames per second, i.e., a frame every 16.66ms, to ensure a smooth experience. A long animation frame takes longer than 50ms. The Long Animation Frames (LoAF) API finally gives us a way to understand what’s consuming the browser’s processing time. If you want to dive deeper into how you can make the best use of it, Andy Davies wrote a comprehensive guide.
The guide covers why animation frame rate matters, the key milestones within a Long Animation Frame, script attribution, and how to match script data to Interaction to Next Paint, as well as how to capture LoAF entries. A must-read if you want to better understand how scripts and other tasks affect both hard and soft navigations and interactions. (cm)
7. How To Break Up Long Tasks
“Don’t block the main thread” and “Break up your long tasks” are the two pieces of advice you commonly get for keeping JavaScript apps fast. But what does that mean, and what work is involved?
Jeremy Wagner and Brendan Kenny’s guide to optimizing long tasks looks into task management strategies that help you ensure your site responds quickly to user interactions. It takes you through breaking up work into smaller functions, manually deferring code execution, yielding to the main thread, and breaking up long-running work with scheduler.yield().
Another great read on the topic comes from Rick Viscomi. He wrote a helpful guide to breaking up long tasks in which he shares how he learned to group loops and wield the yield to optimize interaction responsiveness, total processing time, and smoothness. (cm)
8. Meet Accessible UX Research, A Brand-New Smashing Book 📚
In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. For our newest book, we have teamed up with Dr. Michele A. Williams: Meet “Accessible UX Research.”
“Accessible UX Research” is your practical guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. Print edition shipping Fall 2025. eBook also available for download in Fall 2025. Pre-order the book, and save off the full price.
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 Geoff Graham (gg), 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.