Smashing Magazine - #360: Web Performance

On priority hints, third-parties, speculative prerendering, dealing with LCP and preload scanner. Issue #360 July 5, 2022 View in the browser 💨

Smashing Newsletter

Namastē Smashing Friends,

Sometimes it might feel like we have it all figured out. With Core Web Vitals, we’ve learned the important metrics to optimize for, and have also discovered strategies on how to optimize our code base for performance. Of course, green scores aren’t easy to achieve, but there are some useful ideas of how to get there. Yet there are plenty more things to explore: from priority hints to back/forward cache.

In this newsletter, we look at some of the uncharted territories of web performance. From priority hints and third parties to speculative prerendering, preload scanner and dealing with LCP, we hope that you’ll find some useful gems in here. Happy optimizing!

Crash Course to Jamstack with Next.js and Storyblok

In our Smashing news, we have a new free workshop Crash Course on Jamstack with Next.js and Storyblok coming up this Wednesday, kindly powered by Storyblok, who is equally great in headless CMS and in being a kind friend of Smashing over the years. We hope to see you there!

And of course, we have a few SmashingConfs coming up later this year, and there are plenty of online workshops and a video course to take a look at as well. Lots of stuff is happening, and we have some exciting updates coming up soon, this time around for our printed stuff! In the meantime, stay tuned, and take good care of yourself and of your family!

Vitaly (@smashingmag)


1. Priority Hints And Early Hints

Loading critical assets as fast as possible is vital for improving web performance and user experience. And while browsers can make educated guesses about which assets are critical, each site and application is different in setup and context. Priority Hints are here to give you more control over asset prioritization — to signal high-priority images, priority of asynchronous scripts, or priority of Fetch API calls, for example. Karolina Szczur explains when to use Priority Hints and how to implement them.

Priority Hints: Influence How Browsers Fetch Resources

But what about server latency that delays rendering of a page? With websites having become more sophisticated over time, it’s not unusual that a server needs to perform non-trivial work to produce the HTML for the requested page — to access databases or CDNs accessing the origin server, for example. Well, as it turns out, we can employ this latency to our advantage.

The Chrome team recently presented a solution to make use of this “server think-time”: Early Hints. To speed up page loads, the browser can use those hints to do some work in advance, such as warming up connections and requesting sub-resources while waiting for the main resources. Kenji Baheux summarized everything you need to know about Early Hints. (cm)


2. Don’t Fight The Preload Scanner

Apart from all the performance optimization techniques and strategies, there’s an aspect often overlooked when we talk about optimizing page speed: browsers. Browsers make certain optimizations to improve performance that developers can’t. Jeremy Wagner takes a closer look at one of them: the browser preload scanner.

Don’t fight the browser preload scanner

In his post “Don’t fight the browser preload scanner”, Jeremy explores how the preload scanner works and, more importantly, how you can avoid getting in its way. To help your pages load faster, the preload scanner scans raw markup to find resources to opportunistically fetch before the primary HTML parser would otherwise discover them. As Jeremy points out, harmful practices that can defeat the scanner include injecting resources into the DOM with JavaScript, lazy-loading above-the-fold images or iframes using a JavaScript solution, or rendering markup on the client that may contain references to document sub-resources using JavaScript. Good to know! (cm)


3. Dealing With Third-Party Scripts

Third-party scripts are everywhere. They deliver JavaScript framework libraries, custom fonts, advertising content, analytics trackers, and more. And, well, your website may be using more third-party services than you may realize. But how do you quantify the impact that third-party requests have on your site’s performance? And how do you manage and mitigate that impact? In his article, “Don’t Sink your Website With Third Parties”, Ken Harker explains what third-party scripts really are and which optimization strategies can help reduce their impact on the user experience.

Don’t Sink Your Website With Third Parties

Another solution to eliminate website bloat caused by third parties is Partytown. Partytown is a lightweight, open-source solution that offloads third-party scripts to web workers which run in background threads to reduce execution delays. Steve Sewell wrote a great introduction to Partytown. Speaking of third-party scripts: If you want to get a better idea of how big a script’s impact is compared to others, 3Pweb will come in handy. The tool visualizes and compares the average cost, total impact, and popularity of common third parties. (cm)


4. Upcoming Online Workshops

You might have heard it: we run online workshops around frontend and design, be it accessibility, performance, navigation, or landing pages. 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 Events
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 an overview of our upcoming workshops:


5. Speculative Prerendering

To cater for a speedier user experience, resource hints help the browser figure out which resources the user will need in the near future. And while preconnect and preload are perfect for resources that will be required during the next load, prefetch and prerender are speculative hints that recommend that the browser should fetch a certain resource because there’s a high chance that it might be required.

Bringing instant page-loads to the browser through speculative prerendering

If you want to learn more about speculative prerendering in the browser, Leena Sohoni and Addy Osmani have got you covered. In their article on web.dev, they dive deep into how speculative prefetching and prerendering are used, the drawbacks of the current implementations, and popular external libraries that implement sophisticated speculation. A great solution to shorten waiting times and cater for instant page-loads. (cm)


6. Smart Interface Design Patterns

We’ve just added a few new videos to “Smart Interface Design Patterns”, a 7h-video course with Vitaly Friedman, focused on fine little details that make for smarter interface design — from complex navigation to filters, tables and web forms. Check the free preview.

Smart Interface Design Patterns

The course is created specifically for interface designers, UI engineers and developers who’d love to be prepared for complex UI/UX challenges. There is a live UX training that with UX certification that happens twice a year. Ah, there are just a few early-bird-tickets left! Jump to the details.


7. Free Performance Analyzers

There are quite a lot of potential performance pitfalls that stay unnoticed easily. Code duplicates or inline images, for example. DebugBear offers some quick and easy tools that help you uncover common performance bottlenecks like these.

Chrome Extension Performance Lookup

One of the tools is the HTML Size Analyzer. You can paste your HTML code or enter a URL, and the analyzer will analyze the HTML size to catch bloat like inline images, large React hydration state, or code duplication. The Browser Resource Hint Validator checks if your resource hints are working correctly and if there are unused hints that you might want to consider removing.

If you are experiencing a slow site, the problem might not always be the site, though. Browser extensions can have a negative impact on performance, too. The Chrome Extension Performance Lookup shows you the impact that the top 1,000 Chrome extensions have when loading a website. Three useful tools that you might want to keep close. (cm)


From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Prepare For Today’s Communication Roles Northwestern’s MS In Information Design
Prepare for today’s communication roles Northwestern’s MS in Information Design.


8. Optimizing LCP

Largest Contentful Paint (LCP) represents the time from when a user starts loading a web page until the moment when the largest image or text block within the viewport finishes rendering. Google recommends that developers should aim for an LCP time of 2.5 seconds max, for at least 75% of page visits. However, only a bit more than half of sites meet that threshold, making LCP the Core Web Vitals metric that developers struggle with most. But why? And how can we do better?

A deep dive into optimizing LCP

In his GoogleIO talk, Philip Walton explores what makes LCP so hard to optimize. He offers concrete strategies to break this complex metric down into a few simple parts, making it much easier to reason about and, ultimately, improve the experience for all users. A comprehensive deep-dive into LCP that every developer should see. (cm)


9. New On Smashing Job Board


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

unsubscribe update preferences view in your browser

Older messages

#359: A Mixed Bag of Goodies

Tuesday, June 28, 2022

From book covers and machine learning to accessibility and moodboards. A mix of goodies for everyone! Issue #359• June 28, 2022 • View in the browser 💨 Smashing Newsletter Hyvää päivää Smashing Friends

#358: Design Tools and Advice

Tuesday, June 21, 2022

With tips on colors in design systems, comparing design tools and taking a closer look at how emotional design works. Issue #358• June 21, 2022 • View in the browser 💨 Smashing Newsletter Ahoy Smashing

#357: The Web is Fun!

Tuesday, June 14, 2022

With exciting and obscure websites — some of them not necessarily useful but remind us why we love the web so much in the first place. Issue #357• June 14, 2022 • View in the browser 💨 Smashing

#356: Useful Front-End Tools

Tuesday, June 7, 2022

With clamp() calculator, SVG techniques, Arraybuilder, text cleaner, font subsetting and Illustrator Figma plugin. Issue #356• June 7, 2022 • View in the browser 💨 Smashing Newsletter Howdy Smashing

#355: Multi-Language UX

Tuesday, May 31, 2022

How to design a better language selector, localization case studies, internationalization in React and UX across cultures. Issue #355• May 31, 2022 • View in the browser 💨 Smashing Newsletter Góðan

These Colors Will Rule Interiors in 2023

Tuesday, August 9, 2022

Plus, 7 underrated houseplants, according to professional green thumbs View in your browser | Update your preferences Architectural Digest AD PRO Logo bedroom painted in Sherwin-Williams THESE COLORS

NL #365: Design Systems

Tuesday, August 9, 2022

On motion and accessibility in design systems, naming conventions, and design systems in enterprise settings. Issue #365• August 9, 2022 • View in the browser 💨 Smashing Newsletter Howdy Smashing

Design system from AWS

Tuesday, August 9, 2022

Hi Reader, these are my design and frontend picks this week. Highlights of the week Scale design process with component-driven prototyping - Import interactive components from top design libraries to

Command Menu, Ghibli Design, Gyroscope V5, Graphis Archives, Mega-Heat Maps

Tuesday, August 9, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar August 9 2022 ⌘K cmdk.paco.me Fast, composable, unstyled

Accessibility Weekly #304: Keyboard Shortcuts Need Modifier Keys

Tuesday, August 9, 2022

Sponsored by Automattic. They're hiring. August 8, 2022 • Issue #304 View this issue online or browse the full issue archive. I need your help readers. Thanks to many of you who responded to this

New Gmail, reCAPTCHA, Genderless Design, Better Presentations, BlenderBot 3

Monday, August 8, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar August 8 2022 There's a new Gmail. But can it ever really

123 / Create art with AI, a new way to find jobs, free design resources & inspiration

Monday, August 8, 2022

Product Disrupt Logo Product Disrupt Half-Monthly Aug 2022 • Part 1 View in browser Image Midjourney – Art from AI I created the above artwork using AI by just describing it in words. Can you believe

Raf Simons and Kvadrat’s New Launch Goes Beyond Fabric

Monday, August 8, 2022

Plus, 15 interiors every design lover must see in person View in your browser | Update your preferences Architectural Digest AD PRO Logo RAF SIMONS AND KVADRAT'S NEW SHAKER-INSPIRED LAUNCH GOES

Before and After in Bed-Stuy

Monday, August 8, 2022

Design editor Wendy Goodman takes you inside the city's most exciting homes and design studios. Design Hunting A visual diary by Design Editor Wendy Goodman Photo: Nick Glimenakis Laura Higby and

🧐 Intriguing Landing Page Designs + 🏆 Challenge Updates

Monday, August 8, 2022

Unwrap This Week's Designer Digest 🎁 First off, we'd like to congratulate Arjun Makwana, the winner of our latest 🛒 Grocery List App Challenge! Next off, here's a friendly reminder that the