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.
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)
From our sponsor
Set Up Core Web Vitals Tracking In Minutes
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 <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.
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. 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)
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.
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)
From our sponsor
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?
… 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
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
