December 15, 2020 Smashing Newsletter: Issue #279
This newsletter issue was sent out to 182,697 subscribers on Tuesday, December 15, 2020.
Editorial
We all know that performance matters. Yet in the chase for new rollouts and products, it’s not uncommon to see performance getting left behind as time passes by. That’s exactly what happened to SmashingMag this year. As we’ve been looking out for an alternative for our in-person conferences, we added new features and products and changed the code, and as a result, by the end of the year, the performance has been hurt.
The Largest Contentful Paint, as showing up in Google CrUX report.
So in November, we’ve been refactoring and rebuilding, optimizing our CSS and JavaScript delivery, and most importantly, optimizing for Core Web Vitals. We got almost to where we want to be, but we still need to do better. We are getting there.
As of now, I’m preparing a lil’ big update for the annual front-end performance checklist for 2021, and I’m also writing an article with everything we’ve done on the site to boost our performance. You’ll find all the insights published on SmashingMag in January. In the meantime, in this newsletter issue, we’ve collected a few web performance tools and resources that might help you identify issues and resolve them for good.
Ah, and please don’t forget to join us at our holiday special of Smashing Meets — our online meet-up, with very friendly people, a couple of fantastic speakers, and a festive atmosphere around the Smashing community that unites us all. I can’t wait to see you there!
Happy optimizing, everyone!
— Vitaly (@smashingmag)
- The Web Almanac 2020
- Reducing HTML Payloads With Service Workers
- Building The DOM Faster
- New Front-End & UX Workshops
- The Case Against Anti-Flicker Snippets
- Generate A Request Map Of Your Site
- Let’s Tweak Our JavaScript Bundles!
1. The Web Almanac 2020
Looking back at 2020, what’s the state of the web this year? The yearly Web Almanac gives in-depth answers to this question, combining the raw stats and trends of the HTTP Archive with the expertise of the web community. The results are backed up by real data taken from more than 7.5 million websites and trusted web experts.
22 chapters make up this years’ almanac. They are divided into four parts — content, experience, publishing, distribution —, and each one of them is explored from different angles. An insightful look into the state of performance is included, too, of course. (cm)
2. Reducing HTML Payloads With Service Workers
Most sites on the web have a lot of repetition in their payloads — the header, navigation, sidebars, footer, banners, for example. But despite this fact, the server usually needs to send a full HTML page with all these common elements to the client for every single page request. As Philip Walton shows, service workers provide a solution to this problem that can help reduce data load remarkably.
The idea: A service worker can request just the bare minimum of data it needs from the server — be it an HTML content partial, a Markdown file, JSON data, etc. — and programmatically transform the data into a full HTML document together with the rest of the HTML that has already been cached on the first visit. On Philip’s website, this led to 47.6% smaller network payloads and a First Contentful Paint that was 52.3% faster than page loads without a service worker. Promising! (cm)
3. Building The DOM Faster
Just a few keywords and mindful code structuring can result in big performance boosts, even if you’re not familiar with things like minification, asset optimization, caching, or CDNs yet. To help you understand what goes on inside a browser, Milica Mihajlija summarized how browsers interpret your code and how they help improve page load times.
Starting off with the basic building blocks of how the DOM works, Milica dives deeper into loading less important scripts asynchronously with defer and async to make sure they don’t block DOM construction and page rendering. But what about the resources that are critical to the user experience? <link rel=“preload”> helps you achieve just that. A great overview. (cm)
4. New Front-End & UX Workshops
Each and every workshop has been an incredible experience with wonderful folks from all over the world coming together to get better at what they do. Join in the fun and learning — without needing to leave your desk. Our Smashing Workshops are filled with practical examples, video recordings and friendly Q&A sessions.
We’ve just announced our new front-end & UX workshops on form design, SVG animation, design systems, HTML email and one on new adventures in front-end in 2021. There are still some early-birds left, with a lil’ friendly discount, so take a look and perhaps join us as well.
5. The Case Against Anti-Flicker Snippets
Anti-flicker snippets are often used to prevent visitors from seeing a page change during AB / MV tests. However, when a visitor has a slower device or network connection, the set timeout could expire before the experimentation script finishes execution. The effect: Visitors will see a blank screen for quite some time and then, potentially, the effect of the experiment it executes.
In his article “The Case Against Anti-Flicker Snippets”, Andy Davies dives deeper into the impact of anti-flicker snippets, and, as he found out along the way, an even bigger problem: testing tools finish their execution too late. Good to know! (cm)
6. Generate A Request Map Of Your Site
Where do all the transmitted bytes on your site come from? Analyzing third-party components in detail is a time-consuming task, but it’s already a good start to know which third parties are on your site — and how they got there.
Simon Hearne’s request map generator tool visualizes a node map of all the requests on a page for any given URL. The size of the nodes on the map is proportional to the percentage of total bytes, and, when you hover over a node, you’ll get information on its size, response and load times. No more bad surprises. (cm)
7. Let’s Tweak Our JavaScript Bundles!
Chances are high that with your JavaScript code being around for a while, your JavaScript bundles are a little bit outdated. You might have some outdated polyfills, or you might be using a slightly outdated JavaScript syntax. But now there is a little tool that helps you identify those bottlenecks and fix them for good.
EStimator calculates the size and performance improvement a site could achieve by switching to modern JavaScript syntax. It shows which bundles could be improved, and what impact this change would have on your overall performance. The source code is also available on GitHub. (vf)
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.