Smashing Newsletter: Issue #489

Editorial

Web performance never loses its significance. So, we thought we’d start off the year 2025 by looking into some of the new techniques, tools, features, and resources that you might find helpful to boost your web performance this year, from speculation rules to compression dictionaries to breaking up long tasks and debugging INP.

If you’d like to dive deeper into the state of front-end in 2025, take a look at New Front-End Adventures in 2025 which will go into all the fine details of web performance, accessibility, CSS, JavaScript tooling, and design systems. Kicking off on January 27 with yours truly.

We also have a few more friendly online workshops and in-person conferences coming this year:

The Power of Storytelling with Chiara Aliotta,
Design Patterns For AI Interfaces with yours truly,
Accessible Typography for Web & UI Design Masterclass with Oliver Schöndorfer,
SmashingConf Freiburg 2025 (Sept 8–11, 2025),
SmashingConf NYC 2025 (Oct 6–9, 2025).
How To Measure UX and Design Impact ⏳ (a video course with Vitaly Friedman)

We all sincerely wish you a wonderful start to the year and a fantastic 2025, full of positive surprises, enthusiasm, and optimistic energy — all the best to you and your loved ones! ❤️

— Vitaly

1. Web Almanac 2024

Looking back, what was the state of the web in 2024? The Web Almanac combines the raw stats and trends of the HTTP Archive with the expertise of the web community. The results are backed up by accurate data taken from 86 people who have volunteered countless hours in the planning, research, writing, and production phases.

With 16.9M websites tested, the 2024 edition is comprised of 19 chapters spanning aspects of page content, UX, publishing, and distribution. An insightful look into the state of performance is included, too. A massive Thank You to all of the contributors for their time and dedication! (il)

2. Instant Navigation

When a page loads for the first time, its perceived performance is directly impacted by server response time, network latency, and blocking resources. However, it changes for subsequent visits and page views — and we can achieve almost instant navigation (+ video) by using speculation rules and supporting back/forward cache.

We can use Harry Roberts’ layered approach for Speculation Rules API (currently supported in Chrome, Edge and Opera) to prefetch and prerender pages, scripts or images way ahead of time depending on the defined data-attributes — and hence reduce LCP and TTFB costs dramatically. We can choose to opt in or out from eager prefetching as well. You can debug speculative rules as well.

And rather than reloading a previous page when the user navigates back, we can prompt a browser to instead rely on Back/Forward cache, so it can be restored instantly. Bring both techniques together, and you shouldn’t be surprised how much faster a page will be perceived by users — instantly! (vf)

3. Getting Real Small With Compression Dictionaries

Isn’t it strange that every time we change our CSS, JavaScript, fonts, or anything else, users have to download entire files over and over again — even though the changes might have been very small and almost negligible? Wouldn’t it be better to send just a delta between the two files over the wire?

Well, compression dictionaries do just that today. As Patrick Meenan explains, it’s a relatively new HTTP feature that allows for the improvement of the compression of HTTP responses with 60-90% improvements in size.

It works by using existing HTTP responses as dictionaries to compress future requests and then send delta updates to the user. A website owner configures a dictionary. The server then compresses responses using it and sends them over to the browser.

The browser then stores it, and when a website is visited again, a server sends a shortened version using references to the stored dictionary. Finally, the browser “translates” that shorthand back to full content. Done! Can we use it today? We sure can; it’s currently available since Chrome 130. (vf)

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.

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 a quick overview:

Hybrid Apps with Web and Native Technologies dev
with Átila Fassina. Jan 9–17
The Power of Storytelling ux
with Chiara Aliotta. Jan 20 – Feb 3
Design Patterns for AI Interfaces ux
with Vitaly Friedman. Jan 22 – Feb 5
New Front-End Adventures, 2025 Edition ux
with Vitaly Friedman. Jan 27 – Feb 10
Accessible Typography for Web & UI Design Masterclass design
with Oliver Schöndorfer. Feb 10–18
Building Modern HTML Emails dev
with Rémi Parmentier. Mar 3–11
Jump to all workshops →

5. Breaking Down Long Tasks

Many performance challenges come from heavy and bulky JavaScript in our applications. We all have heard about breaking down long tasks — tasks that last longer than 50ms and block the main thread, but how do we do that exactly?

In his article on Breaking Up With Long Tasks, Rick Viscomi goes into all the fine details on how to group loops, yield within loops using scheduler.yield(), implement batching and use for..of loops instead of forEach or map for asynchronous processing. A detailed deep-dive to break down long tasks and boost performance! (vf)

6. New Performance Features In DevTools

When we need to debug performance issues, we often turn our attention to DevTools to find bottlenecks and understand where issues are coming from. (Chrome DevTools is one of those tools that is very often used.) In a recent article, Umar Hansa highlights some of the new performance features in Chrome DevTools.

The new Performance Panel shows lab and field data for Core Web Vitals but also has a detailed breakdown for loading phases (e.g., LCP Requests Discovery for LCP). You can navigate directly to DOM tree nodes for the LCP and INP target elements. The article has a video showing how to use these and other features and track down bottlenecks faster.

And if you’re looking for more DevTools tips, Patrick Brosset has got you covered with DevToolsTips.org — a rich repository of DevTools for all browsers, neatly organized and regularly maintained. (vf)

7. Recently Published Books 📚

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.

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. Have you checked them out already?

Success at Scale by Addy Osmani
Understanding Privacy by Heather Burns
Touch Design for Mobile Interfaces by Steven Hoober
Check out all books →

Meet our newest book: Success At Scale by Addy Osmani. Get the book or browse the complete library.

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).

January 7, 2025 Smashing Newsletter: Issue #489

Previous Issues