January 1, 0001 Smashing Newsletter: Issue #565
This newsletter issue was sent out to 175,812 subscribers on Tuesday, June 30, 2026.
Editorial
So what’s new in web performance? In this newsletter, we explore new features on the web platform, with useful tools and guides to boost performance — for video embeds, animation, caching, and containment.
We are also getting ready for our next adventures in 2026: SmashingConf Freiburg 2026 ⛵ in our lovely hometown Freiburg, Germany — and plenty of online workshops to choose from:
- Config Recap: What’s New in Figma Free Free
with Christine Vallaure. July 2 - Designing Complex UIs in the Age of AI Free Free
with Vitaly Friedman. July 9 - Spotting Accessibility Issues Early Free
with Stéphanie Walter. Sep 1 - Design Patterns For Complex UIs & Enterprise UX UX with Vitaly Friedman. Sep 2–3
- Naming Design Systems DS
with Samantha Gordashko. Sep 8–22 - Smart Interface Design Patterns Live UX Training + video course UX with Vitaly Friedman. Sep 11 – Oct 12
- Accessibility For Designers UX
with Stéphanie Walter. Sep 21–29 - Jump to all workshops →
Until then, let’s make the web a bit more accessible, everyone!
— Vitaly
1. Containertiming
Maybe you’ve already heard of the elementtiming attribute, which makes it possible to track paint timings of image and text nodes. The new containertiming takes things to the next level, allowing you to track paint timings of divs, data tables, forms, iframes, and even cookie notices. containertiming is currently in experimental mode in Chrome, and Mozilla’s position is positive as well.
2. CSS Vs. JavaScript Animations
For optimal performance, should you always strive to use CSS transitions for your animations, or is it OK to use JavaScript libraries? As Josh W. Comeau shows in his “CSS vs. JavaScript” guide, there’s more nuance to the question than one might think. To help you make the right choice for your project, Josh explores the performance implications of different animation strategies.
3. Caching Query Parameters
Traditional cache behavior treats every variation of a page as a separate resource. With the new No-Vary-Search HTTP response header, it is finally possible to define which query parameters (e.g., for tracking, filtering, or pagination) should be ignored when matching cache entries. Jakub Andrzejewski summarized in detail how it works, what problems it solves, and when you should avoid it.
4. Optimizing Video Embeds
Lazy-loading videos on interaction, without any JavaScript, even above the fold, and using only native HTML and CSS? It’s possible, as Stefan Bauer shows. Whether you want to embed a YouTube or Vimeo video, a CodePen, or even a map, the solution works with any heavy embed, delivering faster initial load and a clean user experience.
5. Context-Aware Web Performance
A struggling connection, a weaker device, or a low battery — all of these affect site speed. To help you adapt your front-end code to your user conditions, Harry Roberts created Obs.js, a tiny library that gives you insights into your user context. You can use this information to make small adjustments for a faster experience — for example, by serving lower-resolution images or holding back a web font.
6. CSS Containment
Every time something changes on a page — whether in a drawer, widget, or panel — the browser needs to decide how much of that page it has to rethink. If it can’t be sure that a change is local, it behaves as if almost anything might have moved. CSS containment lets you set boundaries, helping the browser avoid unnecessary calculations. Harry Roberts provides a comprehensive guide on how it works.
7. Accessible UX Research, Now Shipping 📚
We’ve got exciting news! Our newest Smashing book, Accessible UX Research by Michele A. Williams, is finally shipping worldwide! Get the book right away or order the eBook for instant download.
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. Download a free sample (PDF, 2.3MB) or get the book right away.
8. 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:
- Config Recap: What’s New in Figma Free Free
with Christine Vallaure. July 2 - Designing Complex UIs in the Age of AI Free Free
with Vitaly Friedman. July 9 - Spotting Accessibility Issues Early Free
with Stéphanie Walter. Sep 1 - Design Patterns For Complex UIs & Enterprise UX UX with Vitaly Friedman. Sep 2–3
- Naming Design Systems DS
with Samantha Gordashko. Sep 8–22 - Smart Interface Design Patterns Live UX Training + video course UX with Vitaly Friedman. Sep 11 – Oct 12
- Accessibility For Designers UX
with Stéphanie Walter. Sep 21–29 - Jump to all workshops →
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.