Smashing Newsletter #297: Web Performance

With Lighthouse, debugging CLS, caching, web fonts subsetting and React performance. Issue #297 Tue, April 20, 2021 View in the browser 💨

Smashing Newsletter

Hola Smashing Friends,

Web performance. While we were getting ready for the page experience update in Google’s search index in May, we’ve just learned that the roll-out was pushed to mid-June 2021.

Indeed, we’ve been on the long journey to optimizing web performance for the last 6 months, and we’ve just managed to get into the green zone, just to be pushed down by amber scores on mobile. In this newsletter edition, we look into some of the perf resources we’ve found useful.

The request map for third-party scripts
That was quite a journey: heavily focusing on performance optimization in late 2020.

The issue is kindly powered by our dear friends at Storyblok, a friendly headless CMS with a visual editor, nested components and customizable content blocks for websites and apps. Great option when you look out for a headless CMS.

In Smashing news, we are getting ready to our free Smashing online meet-up on April 27 (please join in!), and we have a few online workshops starting this week — one by Harry Roberts on everything web performance, and one by yours truly on smart interface design patterns.

We’d love to welcome you there — or perhaps your friend or colleague would love to join this time around! With that in mind, off we go — let’s make our websites and apps faster!

— Vitaly (@smashingmag)

1. Cache-Control For Civilians

How is your knowledge of caching and cache-control headers? No worries if you feel you could know more or are rather clueless even, Harry Roberts’ article “Cache-Control for Civilians” helps you make sense of it all — for good.

Cache-Control for Civilians

Harry’s refresher starts off taking a look at the Cache-Control HTTP header which is one of the most common ways to manage the caching of your assets and goes on to explore its directives and their optimum use cases in detail — from public and private to max-age, no-store, no-cache, and no-transform.

At the end of the article, Harry also covers some real-world scenarios and the kinds of Cache-Control headers that suit them best. A great summary to ensure you don’t miss out on the powerful opportunities that caching brings along. (cm)

2. Web Font Subsetting

One of the low-hanging fruits for improving performance is optimizing web fonts. Very often, font files contain way too many characters that aren’t really needed. Font Subsetter is a little helpful tool that allows you to subset your fonts by selecting just the right glyphs — assuming that your font provider allows font subsetting in their EULAs of course.

For Smashing, we support Basic Latin, Latin-1 Supplement, Uppercase, Lowercase, Numerals, Basic Punctuation, Currency Symbols and a specific set of single characters to generate a small subset.

Web Font Subsetting

You can also take it to the next step with Peter Mueller’s Subfont or Zach Leatherman’s Glyphhanger. The tools allow you to subset your fonts dynamically based on the glyphs that are actually used on a page. You can even subset font files automatically with every deploy, whitelist characters and use a speider to gather URLs from links.

Sara Soueidan also provides a tutorial on how to set up GlyphHanger as well. Ah, and don’t forget about the importance of @font-face source order when used with preload to avoid duplicate downloads! (vf)

3. Not Every Lighthouse Is The Same

When it comes to performance, we tend to rely on our Lighthouse scores, but depending on where and under which conditions the Lighthouse audit is running from, we might be expecting slightly different results. In general, it’s a good idea to have a dedicated, clean browser performance profile for your Lighthouse browser tests, to ensure that your browser extensions don’t skew your results. Yet still, the performance will be heavily influenced by your machine, available memory and storage.

Not Every Lighthouse Is The Same

PageSpeed Insights runs a Lighthouse audit online, and Lighthouse Metrics runs the Lighthouse tests from multiple locations. Measure doesn’t just provide Lighthouse insights about your performance, but it also allows you to track your performance over time with a free account and arranges optimization suggestions based on their level of severity.

Additionally, Chrome UX Report allows you to track your core metrics over time based on the experience of Chrome users. Just plug in an URL, hit “Connect” and then hit “Create report” to get a report for your site. (vf)

4. Upcoming Smashing Online Workshops

Web performance is pretty much at the heart of the online workshops that we run — be it around accessibility, design or front-end. The interface has to load and respond quickly, and that affects all facets of users experience.

Smashing Online Events

As the next workshops, we have coming up:

From our dear sponsor

Headless CMS: Organize Your Content For The World

Headless CMS: Organize Your Content For The World

This newsletter has been kindly supported by our dear friends at Storyblok, a friendly headless CMS with a visual editor, nested components and customizable content blocks for websites and apps. If you need a CMS solution, we have collected some use cases and a friendly guide to choose just what you need for your project. (vf)

5. Debugging Layout Shifts

We’ve all been there before. As the page is loading, your layout changes due to incoming web fonts, ads, A/B tests or images that don’t have a width or height dimensions specified. This creates a quite jarring experience for your customers, so it’s not surprising that Cumulative Layout Shift is one of the Core Web Vitals. Getting CLS right is a challenge worth undertaking, but it’s not an easy one.

Debugging Layout Shifts

Layout Shift GIF Generator and CLS Debugger allows you to visually track what elements have shifted, and how heavily the page is loaded. Jess B Peck’s The Almost Complete Guide To CLS explains CLS in detail, how to measure it as well as common solutions for carousels, images, fonts, layouts, cookies and JavaScript.

Simon Hearne goes into the fine details of avoiding layout shifts caused by web fonts, and Barry Pollard has explained how to measure Core Web Vitals in general, including CLS. (vf)

6. Performance Optimization For Slow React Apps

A spinner appearing at 5.6 seconds after page load on desktop, the page content getting rendered at 6.2 seconds, 12.6 seconds even on a medium tier phone. These are the results of a WebPageTest audit for Notion’s app almost a year ago. And even though Notion shipped some tremendous speed enhancements in the meantime, digging a bit deeper into these performance issues is still an eye opener, as Ivan Akulov’s case study shows.

Case study: Analyzing Notion app performance

For the case study, Ivan reverse-engineered the Notion app to see how the performance of a slow React app can be optimized. Ivan looks into processing performance and JS execution and shows how a combination of code-splitting, executing fewer modules upfront, removing unused code, defering third parties, preloading API data, and some other optimization techniques can make the app load 30% faster. Practical takeaways guaranteed. (cm)

7. Performance Resources Delivered Right To Your Inbox

Staying on track of what’s happening in the world of web performance can be hard. That’s why Calibre’s Karolina, Ben and Michael curate the Performance Newsletter twice a month, delivering the latest news, tools, talks, and resources all about web performance right to your inbox.

Performance Newsletter

If the wait for the next issue is too long, feel free to browse the newsletter’s archive — 72 issues have already been sent out since the newsletter made its debut back in 2016. A gold mine of resources to make your web perf adventures even more fruitful. (cm)

8. New On Smashing Job Board

9. Our Current Most Popular Articles

That’s All, Folks!

Wow, you’ve made it this far! We hope you’ve found at least one useful, practical tidbit that will help you get better at what you do. As you see, there are so many talented folks out there working on so many brilliant projects, and we’d sincerely appreciate it if you could help spread the word and give them all the credit they deserve!

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

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

From Cats With Love: New Navigation, Guides and Workshops

Monday, April 19, 2021

From cats with love — new navigation, evergreen guides and online workshops around front-end and UX. From cats with love — new navigation, guides and online workshops. • View in the browser 💨 Smashing

Smashing Newsletter #296: Security and Privacy

Tuesday, April 13, 2021

With CAPTCHA, web security, spam prevention, security, vulnerabilities, tracking blocker and guide to better design.Issue #296 • Tue, April 13, 2021 • View in the browser 💨 Smashing Newsletter G'

Smashing Newsletter #295: Boosting Your Coding Workspace

Tuesday, April 6, 2021

With tools for a better command line, text editor, finding git commands and pets for your VS Code. Issue #295 • Tue, April 6, 2021 • View in the browser 💨 Smashing Newsletter Ahoj Smashing Friends,

Smashing Newsletter #294: SVG Generators and Tools

Wednesday, March 31, 2021

With SVG filters, cropping tools, SVG assets manager, tet warping generators, animation and SVG transformation. Issue #294 • Tue, March 30, 2021 • View in the browser 💨 Smashing Newsletter Ahoy

Smashing Newsletter #293: Jamstack, Headless, Static Site Generators

Tuesday, March 23, 2021

With static site generators, headless CMS, the state of Jamstack and how to choose if headless options are a good fit for your projects. Issue #293 • Tue, March 23, 2021 • View in the browser 💨

Bamboo, Blow-Ups, and 3 Other Trends from Milan Design Week 2021

Thursday, September 16, 2021

Plus, the new Laura Gonzalez-designed Saint James Hotel is a Parisian oasis (image) Architectural Digest AD PRO Logo Saint James Paris The New Laura Gonzalez-Designed Saint James Hotel Is a Parisian

✏ WordPress vs Blogger, Creative Hamburger Menus, CSS Mirror Editing in Edge, and more...

Thursday, September 16, 2021

WordPress Vs Blogger: Which is Better for your Website? KINSTA.COM COMMENTS 20 Extremely Creative Web Layouts AWWWARDS.COM COMMENTS 10 Creative Hamburger Menus + Tips & Tricks 1STWEBDESIGNER.COM

✏ Issue #504: Typography for Data, Google Search Redesign, 8 Freelance Project Management Apps, Doodle Ipsum, and more…

Thursday, September 16, 2021

View this newsletter online Unsubscribe NEWSLETTER ISSUE #504 SEPTEMBER 15, 2021 Typography for Data In this in-depth investigation of typography for design systems, Michael Yom breaks down the

Now Hiring: Senior Interior Designer at Morgan Harrison Home (and More!)

Thursday, September 16, 2021

Visit our job board to view more opportunities. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Photomicrography, Hoefler&Co & Monotype, Fintech Design, Cascade Layers, Doodle Ipsum

Thursday, September 16, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar September 16 2021 The Winners of the 2021 Small World

Running effective remote meetings

Wednesday, September 15, 2021

We're all dialling in, now what? ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

6 Timeless Alexander Girard Patterns Are Being Reintroduced

Wednesday, September 15, 2021

Plus, the unbelievable story behind this Elsie de Wolfe portrait (image) Architectural Digest AD PRO Logo The Mexidot pattern by Alexander Girard These 6 Timeless Alexander Girard Patterns Are Being

✏ 10 Iconography Rules, Core Web Vitals For WordPress, Why Creativity Matters, and more…

Wednesday, September 15, 2021

Say buh-bye to PAID page builders. Design Faster & Smarter with BeTheme's Live Builder & 600+ Pre-Built Sites [ad] MUFFINGROUP.COM 10 Iconography Rules to Follow in UI Design DRIBBBLE.COM

Issue 320

Wednesday, September 15, 2021

CSS mix-blend-mode and clip-path, the W3C design system, flexible components, and my job news! CSS Layout News Issue 320 By Rachel Andrew – 15 Sep 2021 – View online → I'll start this week with

Human-Computer Interactions, Jargon, Data Vis Dispatch, Bonsai, Jamstack Conf

Wednesday, September 15, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar September 15 2021 A comprehensive list of human-computer