Smashing Magazine - #447: Web Performance

Interaction To Next Paint, web font analyzer, web performance course, and Tailwind vs. Semantic CSS. Issue #447 Mar 12, 2024 View in the browser

Smashing Newsletter

Konbanwa Smashing Friends,

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

INP

We also have Core Web Vitals that help put performance in better context. So, instead of obsessing over something like the time to first byte, we can look at the impact to 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 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, 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

Yellow Lab Tools relies on Phantomas to collect the metrics and statistics, which then are 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, 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.

Tailwind vs. Semantic CSS

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.

Identifying Font Subsetting Opportunities with Web Font Analyzer

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)


From our sponsor

Codux Designer Launch

Codux Designer Launch
Meet Codux—the all-in-one visual development environment Designers, embrace the code. You can now edit CSS and style React components visually directly on the source code. Experience full design control and create pixel-perfect UI the way it was intended, all within web standards. Skill up your design game and see what you can create with Codux. Try it out today.


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.

The Psychology Of Site Speed And Human Happiness

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:


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.

Offloading JavaScript With Custom Properties

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.

A faster web in 2024

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)


From our sponsor

Discover The Trends Shaping The Future Of The User Research Industry

Maze Design
With data from 1,200+ product professionals, Maze's report—The Future of User Research—explores how product teams conduct research to inform decision-making and build successful products. Learn about the top three trends defining the user research landscape in 2024 and beyond. Get the report.


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.

Learn Performance

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?

Success At Scale
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.


10. Recent Smashing Articles


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


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#446: Onboarding UX Playbook

Tuesday, March 5, 2024

Choosing onboarding methods (Figma kit), guidelines, best practices, ways of working and how to onboard users on mobile devices. Issue #446 • Mar 5, 2024 • View in the browser Smashing Newsletter Bună

#445: Web Accessibility

Tuesday, February 27, 2024

WCAG 2.2, colorblindness, accessibility research, accessible numbers, design systems and designing for mental health. Issue #445 • Feb 27, 2024 • View in the browser Smashing Newsletter Konbanwa

#444: UX Writing

Tuesday, February 20, 2024

Voice and tone, content design process, plain language guidelines and UX writing in design systems. Issue #444 • Feb 20, 2024 • View in the browser Smashing Newsletter Howdy Smashing Friends, Words

#443: UX Research

Tuesday, February 13, 2024

A complete guide to user interviews, UX research launch pad and how to build up UX research from scratch. Issue #443 • Feb 13, 2024 • View in the browser 💨 Smashing Newsletter Tere õhtust Smashing

#442: Sustainable Front-End and UX

Tuesday, February 6, 2024

Product design guidelines for sustainable UX, podcasts, books, newsletter, checklists, UX patterns and front-end optimizations. Issue #442 • Feb 6, 2024 • View in the browser Smashing Newsletter

You Might Also Like

The Color Secrets Pros Swear By

Thursday, July 11, 2024

View in your browser | Update your preferences ADPro Keeping Up With Color It seems there's a new hot topic in color every week. This year alone, we've seen the “unexpected red” theory take

What’s Behind a Microtrend?

Tuesday, July 9, 2024

View in your browser | Update your preferences ADPro If you've ever wondered about the next big decor moment or debated dipping a toe into TikTok, AD's Senior Digital Design Editor Sydney Gore

#464: Friendly Little Helpers

Tuesday, July 9, 2024

Radio time machine, reverse dictionary, micropedia and templates on how to say No and Goodbye with grace. Issue #464 • July 9, 2024 • View in the browser Smashing Newsletter Gamarjoba Smashing Friends,

Accessibility Weekly #404: Overlays Misunderstand Accessibility

Monday, July 8, 2024

July 8, 2024 • Issue #404 View this issue online or browse the full issue archive. Featured: Overlays misunderstand accessibility "Accessibility overlays are a peculiar approach to accessibility

Reflections from Config

Sunday, July 7, 2024

Issue 202: Thoughts from the annual Figma conference ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Athena Calderone and Young Huh’s Savviest Social Media Advice

Tuesday, July 2, 2024

View in your browser | Update your preferences ADPro As we head into the July 4th holiday, we're revisiting some of our most popular business tips. Among our faves: This conversation on social

#463: Data Visualization

Tuesday, July 2, 2024

Data visualization in design systems, visual data visualization vocabulary, decision trees, color scales and accessible charts. Issue #463 • July 2, 2024 • View in the browser Smashing Newsletter Hello

Accessibility Weekly #403: In Detail - 1.4.11 Non-Text Contrast

Monday, July 1, 2024

June 24, 2024 • Issue #403 View this issue online or browse the full issue archive. Featured: In detail: 1.4.11 Non-Text Contrast (User Interface Components) "The Web Content Accessibility

Spotlight: Kate Syuma

Sunday, June 30, 2024

Issue 201: A conversation on scaling at Miro, Growthmates, and advising ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Inside Balsamiq: our new approach to internal product training

Thursday, June 27, 2024

Streamlining our team's product knowledge ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏