#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 Workshops]( 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. [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? - [Understanding Privacy]( by Heather Burns - [Touch Design for Mobile Interfaces]( by Steven Hoober - [Image Optimization]( by Addy Osmani - [Check out all books →]( [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 - [Event Calendars For Web Made Easy With These Commercial Options]( - [Success At Scale: Last Chance For Pre-Sale Price]( - [Modern CSS Tooltips And Speech Bubbles (Part 2)]( - [The End Of My Gatsby Journey]( --------------------------------------------------------------- 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]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](