Smashing Newsletter: Issue #447

Editorial

Remember when performance metrics were all about how much time it takes for a page to fully load? You might plop the URL of some websites into WebPageTest to see how fast it took to establish an initial connection when the first byte was received and the time it takes to fully load the page.

And if something wasn’t up to snuff, there’s a list of all the assets the page downloaded to pick out the slow pokes like looking down a line of criminal suspects. Things sure are a lot smarter these days. We test on different types of data culled from reports culled from different sources, from simulated data and the Chrome User Experience Report to monitoring users in real-time.

We also have Core Web Vitals that help put performance in better context. So, instead of obsessing over something like the time to the first byte, we can look at the impact on user experience. Take the Cumulative Layout Shift metric as an example.

When assets are blocked by an abundance of activity on the main thread, they tend to load in and render at different times which — depending on the intrinsic size of them — can jump a user all over the page as new assets make their way in.

As of today, as in Tuesday, March 12, we get a new kid on the Core Web Vitals block called Interaction to Next Paint, or simply INP for short. It takes the place of the existing First Input Delay (FID) metric by measuring not only the time it takes a user’s input to respond to the first available interaction on the page but also how long it takes for the UI to respond to that input.

And it looks at all interactions on the page, coming up with the biggest offender. It’s a more holistic view of how users can interact with the page, providing better clues for improving user experience by way of improved performance.

We have the tools to effectively monitor and evaluate performance. We have the metrics we need to improve performance where it directly affects users the most. We also have web APIs we can use to measure these things on the fly. What a wild and awesome time to be working with performance.

P.S. Join me this Thursday for a Smashing Hour with Nathan Curtis. This community event is free for all — I’d love to see you there!

— Geoff

1. Yellow Lab Tools

A quick and easy tool to test the performance of a web page comes from Gaël Métais: Yellow Lab Tools. All you need to do is enter a URL and choose the simulated device (phone, tablet, desktop, or HD desktop), and Yellow Lab Tools will analyze the page for you, detecting performance and front-end code quality issues.

Yellow Lab Tools relies on Phantomas to collect the metrics and statistics, which are then categorized and transformed into scores. To make fixing the detected performance issues straightforward, it also provides in-depth details on how to improve the speed of your site.

Yellow Lab Tools is free and open source. You can run the online tool or, if you want to test a localhost, install your own private instance. (cm)

2. Tailwind Vs. Semantic CSS

Take two websites with a similar design. One uses a commercial Tailwind template, and the other is built with semantic CSS. That’s the setup of an experiment that Tero Piirainen ran to find out which of the two has better performance. The result: The semantic version is several times smaller, renders faster, and requires no extra CSS tooling.

As Tero found out, the Tailwind version requires significantly more HTML and a seven times larger CSS to render the same design as the semantic version. One of the main differences is that while Tailwind styles elements inline, directly on the markup, the semantic version uses external stylesheets.

This not only makes it easier to change the design of the semantic version as structure and styling are only loosely coupled, but it also contributes to better First Contentful Paint (FCP) and Largest Contentful Paint (LCP) metrics. A great reminder that even though it might be challenging to learn how to truly master CSS, the effort pays off. (cm)

3. Web Font Analyzer

Today, over 83% of websites use custom web fonts. And while they are often preferred from a design perspective, they can easily become a performance bottleneck. Particularly when a large amount of fonts is loaded as a high-priority resource. Font subsetting can help mitigate the effect of custom web fonts on performance.

In his post “Identifying Font Subsetting Opportunities with Web Font Analyzer,” Paul Calvano dives deeper into the potential issues around font loading and the performance benefits that font subsetting can bring along. Because, as Paul found out, even the smallest unoptimized web font package still contains 2–3× the number of glyphs needed to render the HTML, adding unnecessary bulk to a page.

To help developers assess the potential that font subsetting can have on their project, Paul also created the Web Font Analyzer. It uses results from a WebPageTest measurement to create a summary of the fonts that are loaded on a site, how many glyphs are supported by each font, how many are rendered in the HTML, and when the fonts are loading to find out if they are competing with other resources for bandwidth. A handy little helper. (cm)

4. The Psychology Of Site Speed And Human Happiness

In the fourteen years that she has been working in the web performance industry, Tammy Everts has done a lot of research, writing, and speaking about the psychology of page speed — in other words, why we crave fast, seamless online experiences. She shared some of her favorite research at Beyond Tellerand last year (watch the video) and also summarized her findings in a blog post.

Tammy’s post “The psychology of site speed and human happiness” dives deep into why time is a crucial (and often neglected) usability factor and how we perceive wait times. You’ll learn more about how fast we expect pages to be (and why), how delays hurt our productivity, and how slowness affects our entire perception of a brand. Interesting insights into the human brain and what we can learn from it to design better user experiences. (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.

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:

Design System Planning and Process Workflow
with Nathan Curtis. April 18–26
Typography Masterclass Design
with Elliot Jay Stocks. May 1–15
Behavioral Design Workshop UX
with Susan and Guthrie Weinschenk. May 6–20
Scalable CSS Masterclass Dev
with Andy Bell. May 9–23
Accessibility for Designers UX
with Stéphanie Walter. June 3–12
Smart Interface Design Patterns Video Course UX
10h-video + Live UX Training with Vitaly Friedman
Jump to all workshops →

6. Offloading JavaScript With Custom Properties

Sometimes, it takes solving a real-world problem to truly appreciate the value of a technique that has already been around for a while. When Heydon Pickering needed to create a scroll-driven animation, he opted for a small IntersectionObserver script first but then decided to offload JavaScript with custom properties as a leaner and developer-friendlier solution to the problem.

As Heydon explains in his blog post, by storing the intersection ratio directly in a custom property, he not only reduced the amount of CSS needed for the scroll-driven animation but also made the animation easier to maintain. A great example of how custom properties and their ability to send dynamic values make CSS more powerful than ever. (cm)

7. A Faster Web In 2024

According to Google’s Web Vitals, the web today is faster than ever: As of September 2023, 42.5% of websites passed the Core Web Vitals assessment. So, how can we carry this momentum forward and continue making the web even faster this year? Rick Viscomi takes a closer look.

As Rick points out in his post “A faster web in 2024,” the new Interaction to Next Paint (INP) metric will lead to a drop in pass rates compared to the old First Input Delay (FID), as INP is much more effective at catching instances of poor responsiveness. However, this doesn’t mean that the web is getting slower; rather, we need to turn to new tools and techniques to optimize performance.

Rick shares tips for how this can be achieved to carry the momentum forward and make the web faster in the process. He also reminds us that even though INP is new and shiny, we shouldn’t forget to improve the weakest link in the Core Web Vitals assessment: Largest Contentful Paint (LCP). A fantastic overview of the current state of web performance and where it’s heading. (cm)

8. Performance Beginners Course

Are you new to web performance? Then the free, self-paced Learn Performance course by web.dev is for you. Designed for beginners, it takes you through the key concepts and techniques for optimizing performance to help you deliver speedier, better user experiences.

The course introduces you to web performance in 14 lessons. You’ll learn more about the role performance plays in the user experience, general HTML performance considerations such as caching, parser blocking, and render blocking, and how different resources affect a page’s load time. Once you’re familiar with the basics, you’ll dive deeper into resource hints, image and video performance, and how to optimize your web fonts. Code-splitting JavaScript, lazy loading, prefetching, prerendering, service workers, and web workers are also covered. The perfect opportunity to give your performance optimization ambitions a head-start. (cm)

9. News From The Smashing Library 📚

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?

Understanding Privacy by Heather Burns
Touch Design for Mobile Interfaces by Steven Hoober
Image Optimization by Addy Osmani
Check out all books →

Also meet our newest Smashing Book: Success At Scale. Print shipping in mid-March, eBook now available. Pre-order your copy 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).

March 12, 2024 Smashing Newsletter: Issue #447

Previous Issues