Smashing Magazine - #347: Web Performance

On Core Web Vitals, 3rd-Party-Scripts, B/F Cache, Priority Hints and responsive images preloading. Issue #347: Web Performance Apr 5, 2022 View in the browser 💨

Smashing Newsletter

Dear Smashing Friends,

It’s difficult to keep track of everything happening in web performance these days, isn’t it? In this newsletter, we decided to do just that — look into all the shiny new features available today or coming in shortly, as well as tools and strategies to boost performance in 2022.

We also have been updating the Front-End Performance Checklist over the years. And if you prefer a video recording of the 2.5h workshop around some of these techniques, you can still get it, with all proceeds still donated to humanitarian aid in Ukraine, with over 18,000 EUR donated so far 💙💛.

In the meantime, let’s look into how to optimize LCP, how to optimize for performance, priority hints, Back/Forward cache, cache-control, image sizes and a few useful tools along the way. If you’d love to dive deeper, take a look at the incredible Web Performance Masterclass by Harry Roberts that we will be running in May 2022. There are still some early-birds left.

Introduction to Working With Shopify Themes

Of course, we have plenty of other workshops coming up as well, including Designing For Complex UIs and Deep Dive on Accessibility Testing starting this week. Plus, our dear friend Liam from Shopify will be running a free 1.5h-session on Working With Shopify Themes — all around Shopify’s themes and Liquid templating languages. Definitely worth a visit. As usual, we hope to see you there.

Stay kind and absolutely smashing, everyone!

— Vitaly (@smashingmag)


1. Optimizing Largest Contentful Paint

Largest Contentful Paint (LCP) measures the render time of the largest image or text block visible within the viewport, relative to when the page first started loading. It’s the Core Web Vital that is the easiest to optimize, yet, according to the Chrome UX Report, only half of origins in the dataset had a good LCP. Let’s do better.

Optimizing Largest Contentful Paint

In his article “Optimising Largest Contentful Paint”, Harry Roberts dives deep into LCP, sharing some interesting tricks and optimizations, as well as pitfalls and bugs. The main takeaways: Text-based LCPs are the fastest. Of the image-based LCP types, <img /> and poster are the fastest, while <image>s defined in <svg> are slow because they are hidden from the preload scanner. As Harry suggests, there are two things you should avoid entirely: Don’t lazy-load your LCP candidate and don’t build your LCP in JS. Gold! (cm)


2. Performance Optimization Strategy

A lot of little things add up to improving a site’s performance. However, keeping track of all of them can be quite tricky. Our very own Vitaly Friedman compiled a practical Performance Optimization Strategy with things you might want to consider.

Performance Optimization Strategy

The list covers everything you need to keep in mind when improving performance, divided up into six parts — from getting a bigger picture of the state of things and cleaning up and reordering the <head> to managing critical CSS and CSS loading, improving web font loading, optimizing the rendering for LCPs, and deferring/delaying JavaScript and third parties. Keep it in your bookmarks for reference or cherry-pick the things that are relevant for your needs and create a custom performance optimization checklist. (cm)


3. Request Map Generator

Trawling through initiators, referers, and redirect headers in WebPageTest to find out where the third-party requests on a site are coming from is a tedious task. Simon Hearne’s Request Map Generator is here to change that.

Request Map Generator

All you need to do to find the third parties on your site is enter a URL, and the Request Map Generator identifies the third parties that are in use, where your transmitted bytes are coming from, and how slow your domains are. Every request is visualized as a node in the request map — the bigger the node, the more bytes are transmitted. A good start if you want to analyze the users of your site and how they got there. (cm)


4. Upcoming Front-End & UX 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. Optimizing Resource Loading

When a browser parses a web page, it assigns resources such as images, scripts, and CSS a fetch priority in an attempt to download the resources in an optimal order. And while this often works well, it might not be optimal in all cases. If you want to optimize resource loading on your site, Leena Sohoni, Addy Osmani, and Patrick Meenan summarized how priority hints can help you enable optimal loading and improve Core Web Vitals along the way.

Optimizing Resource Loading With Priority Hints

Priority hints comes in particularly handy to boost the priority of the LCP image, increase the priority of async snippets, or decrease the priority of late-body scripts to allow for better sequencing with images. Please note that they are only available in Chromium-based browsers at the moment, though. Other browsers will ignore the attribute and use their default prioritization heuristics. (cm)


From our sponsor

Best-In-Class Membership Software Used By The Biggest Creators On The Web

Best-In-Class Membership Software Used By The Biggest Creators On The Web
Memberful is built by developers for developers. Give your client complete control and ownership of all things related to their brand, their audience, and their membership, by seamlessly integrating Memberful with the tools they already use like Mailchimp, WordPress, and Discord. Check out Memberful for free today.


6. Back/Forward Cache

We all know those situations: You visited a website and clicked a link to go to another page only to realize that it’s not what you expected, so you click the Back button. In moments like these, back/forward cache (bfcache) can make a siginificant difference in how fast the previous page loads.

Back/Forward Cache

Contrary to HTTP cache, bfcache stores a complete snapshot of a page (including JavaScript) as the user is navigating away. So if they decide to return, the browser can instantly restore the entire page from memory. If you want to dive deeper into how it works and how you can optimize your pages for bfcache across all browsers, Philip Walton summarized everything you need to know. (cm)


7. 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 and effective ways to manage the caching of your assets, and goes on to explore its directives and their optimum use cases in detail. 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)


8. Preloading Responsive Images

Browsers usually request images after critical resources like stylesheets and fonts. But did you know that you can change this order even for responsive images with sizes and srcset attributes? Stefan Judis explains how it works.

Preloading Responsive Images<

As it turns out, you can include <link rel="preload"> in your document’s head and use imagesrcset and imagesizes to give browsers the information of high-priority images. imagesrcset and imagesizes follow the same rules as srcset and sizes, so you can reuse the same attribute values you use for the image itself. The feature is supported in all browsers except for Safari where it’s still in the “Experimental features” section. (cm)


9. Website Technology Lookup

If you need to analyze websites at scale but don’t have time to configure, host, debug, and maintain your own infrastructure, Wappalyzer offers a convenient solution. It instantly reveals the technology stack of any website.

Wappalyzer

The technology lookup gives you information on CMS, e-commerce platform and payment processor, programming languages, frameworks and libraries, web servers, analytics, advertising, security protocols, and more for any URL. The pro version also includes company and contact information. A free trial version is available. (cm)


10. New On Smashing Job Board


11. 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

Key phrases

Older messages

#346: UX and Interface Design

Tuesday, March 29, 2022

How to prevent errors, measure usability, dive into internationalization and User Research Report 2022. Issue #346 • Mar 29, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing Friends, A

#345: Little Front-End Utilities

Tuesday, March 22, 2022

With a resource hints validator, VS Code extensions, hidden npm packages, tools for third-parties, user testing and useful round-ups. Issue #345 • Mar 22, 2022 • View in the browser 💨 Smashing

#344: Front-End Accessibility

Tuesday, March 15, 2022

With accessible focus indicators, accessible charts, toggles and how to document accessibility in your projects. Issue #344 • Mar 15, 2022 • View in the browser 💨 Smashing Newsletter Dziękuję Smashing

#343: New Front-End Techniques

Tuesday, March 8, 2022

With CSS cascade layers, SVG stress test, handling text over images, third-party JavaScript and performance optimization. Issue #343 • Mar 8, 2022 • View in the browser 💨 Smashing Newsletter Dobryden

342: Interface Design & UX

Tuesday, March 1, 2022

With design patterns, interface design techniques and pointers to useful UX resources. Issue #342 • Mar 1, 2022 • View in the browser 💨 Smashing Newsletter Dobryden' Smashing Friends, I was born

Alabama lawmakers pass harshest anti-trans bill in the US

Friday, April 8, 2022

Plus, political uncertainty in Pakistan. Alabama lawmakers vote to make gender-affirming health care for trans youth a felony; Pakistan's prime minister is in danger of being ousted. Tonight's

Net Losses 🥅

Friday, April 8, 2022

Networking tech you probably can't use because it's so obscure. Here's a version for your browser. Hunting for the end of the long tail • April 08, 2022 Today in Tedium: If you're using

Apple blocked the FlickType Watch keyboard then announced a clone of it — and Bespoke Synth 1.0 – open-source software modular synthesizer

Wednesday, September 15, 2021

Issue #527 — Top 20 stories of September 16, 2021 Issue #527 — September 16, 2021 You receive this email because you are subscribed to Hacker News Digest. You can open it in the browser if you prefer.

The Washington Post design system

Tuesday, May 24, 2022

Hi Reader, these are my design and frontend picks this week. Highlights of the week There's a smarter way to map user journeys - That's why we built Flows in Zeplin. Easily connect published

Trends are Dead, Instagram Sans, Instagram Brand, Underused CSS, Interpolation Calculator

Tuesday, May 24, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 24 2022 Trends are dead vox.com Coastal grandmother, night

Accessibility Weekly #293: WCAG 2.2. and WCAG 3 Status Updates

Tuesday, May 24, 2022

Sponsored by Automattic. They're hiring. May 23, 2022 • Issue #293 View this issue online or browse the full issue archive. Featured: WCAG 2.2. and WCAG 3 status updates “We expect WCAG 2.2 to be

Lessons from PM & UXR collaboration

Monday, May 23, 2022

Part 2: What we learned from working on a new product project together ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

🤩 Magnificent Landing Page Designs + 🏆 Challenge Updates

Monday, May 23, 2022

Your Freshest UpLabs Design News Is Here! 🙌 First off, congratulations to Arjun Makwana, the winner of our latest 🛒 Ebay Website Redesign Challenge! Next off, remember that the second week to vote in

Step Inside Ken Fulk’s Cinematic Universe

Monday, May 23, 2022

Plus, 6 new glass collections to know View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Confectionery, Food, Sweets, and Plant GLASS IS RED-HOT: HERE

An Op-Art Loft in Los Angeles

Monday, May 23, 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: Lane Barden Architect, critic,

Into the Archive: California Dreaming

Monday, May 23, 2022

Plus, everything you need to know about designing an ADU (image) Architectural Digest AD PRO Logo Into the Archive: California Dreaming The June 2022 issue of AD is all about families. But from cover

Button Component, Line Length, Design Thinking, Glenn Davis, Keyboard Accordion

Monday, May 23, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 23 2022 Building a button component web.dev A foundational

✏ Exciting New Tools for Designers May 2022, and more…

Sunday, May 22, 2022

Your Inbox Needs This Clever Business Newsletter [ad] MORNINGBREW.COM Exciting New Tools for Designers, May 2022 WEBDESIGNERDEPOT.COM COMMENTS HTMLrev - 50 Beautiful HTML Landing Page Templates Library