June 13, 2023 Smashing Newsletter: Issue #409
This newsletter issue was sent out to 212,603 subscribers on Tuesday, June 13, 2023.
Editorial
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.
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.
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.”
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.
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.
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)
4. Get Your <head> In Order
How you order elements in the <head> 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 <head> of your document.
The script, Capo.js, logs two info groups to the console: the actual order of the <head> 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 <head> element and its weight as well as a reference to the actual or sorted <head> 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.
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.
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)
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.
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.
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)
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 →
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).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.