#409: Web Performance

Issue #409 • June 13, 2023 • [View in the browser]( [Smashing Newsletter]( Marhaba Smashing Friends, At what point do you start thinking about performance? Is it something you have a clear idea about going into a project? Or maybe it’s something you tackle at the very end of your work? That’s a funny thing about performance; it’s a big enough deal to the end user and the business bottom line that it requires attention pretty much at all points of a project. The point here is that performance is more than a single task and it is a consideration that takes place at every point in the process — from scaffolding a new project to deploying it to production. This newsletter takes a crack at helping you create a culture of performance on your team. You’ll find useful checklists and resources for establishing a performance budget before you write your first line of code, as well as tips you can integrate into your everyday work. And while we’re on the topic of performance, I’ll just sneak in that we have a [React Performance Masterclass]( led by Google Developer Expert [Ivan Akulov]( coming up on June 29. It’s a timely topic given [recent chatter]( about the performance of JavaScript frameworks. [The React Performance Masterclass]( Also, do join us next Tuesday, June 20 from [8 until 11 AM (PT)]( 🌍, where we’ll be talking to [four amazing speakers]( about the rapid development of AI (tools) and how that impacts your work — now and in the future. Tickets are free for everyone, so [get yours now](. [Smashing Meets AI]( Without further ado, let’s dig into some wild web performance. Happy learning and until next time, Geoff Graham ([Pssst, I’ve joined the Smashing Magazine family]( --------------------------------------------------------------- 1. CORS And Caching Visualized Access to fetched has been blocked by CORS policy. Seeing this error message in your console might be frustrating, but it’s a sign that CORS is doing a great job keeping your site secure. To dive deeper into what CORS is doing and why it’s actually your friend, Lydia Hallie wrote “[CS Visualized: CORS]( [CS Visualized: CORS]( Like CORS, caching is a topic that brings along quite some misunderstandings and confusion. Harry Roberts wanted to change that and wrote a [refresher on Cache-Control]( highlighting opportunities that we tend to miss because the caching practices involved are often unconsidered or overlooked completely. Simon Hearne also shares a [great post with key cache scenarios]( and valuable advice on how to ideally set your caching headers to tell browsers when they can reuse an asset they have already downloaded. (cm) --------------------------------------------------------------- 2. Resource Hint Validator With the help of resource hints, we can give the browser extra information about how content should be loaded to improve page performance. We can use preload to tell the browser to load content that’s required for the initial render, prefetch loads content that may be needed to render the next page, and preconnect establishes a server connection without loading a specific resource yet. [Browser Resource Hint Validator]( To help you check if your resource hints are working properly, DebugBear released a free [Browser Resource Hint Validator](. To start the check, enter a URL, and the tool will show you the different resource hints detected on the site, as well as their size, source, type, and whether they are working correctly. The tool also highlights hints that are safe to remove. One for the bookmarks. (cm) --------------------------------------------------------------- 3. Performance Strategy 2023 Everyone wants to cater for a speedy user experience, but with all the things you need to consider, optimizing performance can feel like a daunting undertaking. Vitaly put together a [practical checklist]( that will help you tackle performance optimization in 2023 and reach your performance goals one step at a time. [Performance Optimization Strategy in 2023]( Vitaly’s performance strategy takes you through the complete process of optimizing your site — from running tests to get a bigger picture of the status quo to managing critical CSS and CSS loading, improving web font loading, and deferring JavaScript and third parties. The checklist not only summarizes all the steps involved but also links to all the tools and resources you need, at the moment you need them. (cm) --------------------------------------------------------------- From our sponsor Set Up Core Web Vitals Tracking In Minutes [SpeedCurve]( As a Google search ranking factor for site speed and UX, Web Vitals are key metrics for you to track. [Measure Vitals on your website](. Quickly see what you need to fix. Set up continuous monitoring and alerts so you can track regressions and stay fast. --------------------------------------------------------------- 4. Get Your In Order How you order elements in the can impact the perceived performance of your page. Rick Viscomi shares a useful [script that identifies which elements are out of order]( to help you polish up the of your document. [Capo.js]( The script, [Capo.js]( logs two info groups to the console: the actual order of the and the optimal order. Different colors make it easy to see at a glance whether there are any high-impact elements out of order. Expanding the summary view leads you to a detailed view with an itemized list of each element and its weight as well as a reference to the actual or sorted element. A handy little helper. (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: - [Deep Dive On Accessibility Testing]( Dev with Manuel Matuzović. June 19 – July 3 - [The React Performance Masterclass]( Dev with Ivan Akulov. June 29 – July 13 - [Data Visualization Masterclass]( Dev with Amelia Wattenberger. July 4–18 - [Figma Workflow Masterclass]( UX with Christine Vallaure. July 20–28 - [Advanced JavaScript Masterclass]( Dev with Christophe Porteneuve. Aug 16–30 - [Interface Design Patterns UX Training]( UX with Vitaly Friedman. Sept 8–Oct 6 - [Accessible Components From Design To Development]( Dev with Carie Fisher. Sept 14–22 - [Universal Principles Of Typography Masterclass]( UX with Elliot Jay Stocks. Oct 16–Oct 30 - [Strategizing Products And Customer Experiences (SPACE)]( UX with Debbie Levitt. Oct 18–Oct 26 - [Jump to all workshops →]( --------------------------------------------------------------- 6. High-Performance Font Loading How to achieve the best possible Core Web Vitals when loading fonts? In his post “[More than you ever wanted to know about font loading on the web]( Malte Ubl dives deep into high-performance font loading and the challenges it brings along. [More than you ever wanted to know about font loading on the web]( To get your site in good shape with respect to Largest Contentful Paint and Cumulative Layout Shift, Malte recommends using font-display: optional together with self-hosting the CSS for your web fonts. He also explores what new web standards support for size-adjust means for using custom fonts and how a [tool]( he built helps you keep Cumulative Layout Shift minimal when using custom fonts. A comprehensive overview. (cm) --------------------------------------------------------------- From our sponsor Build Your Internal Tools At Lightning Speed Are you tired of spending countless hours on repetitive tasks? [ILLA Cloud]( can help you streamline your workflow and boost your productivity. Sign up today and start automating your processes with ease. Don’t waste any more time on manual work, [try ILLA Cloud today](. --------------------------------------------------------------- 7. How Browser Rendering Works How do browsers actually work? What happens from the moment when you type a URL into the address bar until the page gets displayed on your screen? That’s exactly what Arika O answers in her seven-part [article series on how web browsers work](. In each part, she dives deeper into one of the steps involved — from navigation to creating the render tree. [How web browsers work]( To help us better grasp what goes on inside modern web browsers, Mariko Kosaka also wrote a detailed [article series for the Chrome Developers blog](. As Mariko concludes, modern browsers invest in ways to provide a better web experience for users. Being nice to the browser by organizing your code, in turn, improves your user experience. A great reminder. (cm) --------------------------------------------------------------- 8. Performance Budgets And Plateaus So, you have followed performance optimization tips and done everything possible to get your site up to speed. Let’s be honest, one of the biggest challenges still lies ahead of you: How to keep your site fast to not risk regressions and waste all your efforts? Tammy Everts wrote a [complete guide to performance budgets]( and how they can help you fight regressions. [The Complete Guide To Performance Budgets]( While Tammy also covers which metrics to keep an eye on, there’s a new Core Web Vital on the horizon that businesses should particularly care about: Interaction to Next Paint (INP). About to replace First Input Delay (FID) next year, Cliff Crocker wrote a great [introduction to INP]( and how it correlates to actual business metrics like conversion rate. Page speed improvements don’t necessarily lead to business improvements, though. So if your user engagement metrics didn’t change despite your performance optimizations, or if you’re unsure about how fast your pages should be, [knowing your site’s performance plateau]( can help. (cm) --------------------------------------------------------------- From our sponsor Northwestern’s Online MS In Information Design And Strategy [Northwestern’s Online MS In Information Design And Strategy]( Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design. [Learn more →]( --------------------------------------------------------------- 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]( … and we’re currently working on a new book: [Success At Scale]( shipping in fall. [Pre-order your copy]( or [browse the complete library](. --------------------------------------------------------------- 10. Recent Smashing Articles - [Testing Sites And Apps With Blind Users: A Cheat Sheet]( - [Exploring Universal And Cognitive-Friendly UX Design Through Pivot Tables And Grids]( - [Primitive Objects In JavaScript: When To Use Them]( - [How To Enable Collaboration In A Multiparty Setting]( - [Read more on Smashing Magazine →]( --------------------------------------------------------------- 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](