Dear Friend,

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)

---

Table of Contents

1.	The Web Almanac 2020
3.	Building The DOM Faster
4.	New Front-End & UX Workshops
5.	The Case Against Anti-Flicker Snippets
6.	Generate A Request Map Of Your Site
7.	Let’s Tweak Our JavaScript Bundles!
8.	New On Smashing Job Board
9.	Our Current Most Popular Articles

---

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)

---

From our sponsor

Flatfile’s State of Data Onboarding Report

Ever run into serious frustration trying to migrate customer data into an application? If so, you’re not alone. Flatfile surveyed more than 100+ companies to learn more about how today’s organizations import data. The result is the first ever State of Data Onboarding report. Download your copy today.

---

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.

Live and interactive 2.5h-sessions with your favorite space cat!

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)

---

From our sponsor

The Major Web Design Trends of 2021

The digital design industry is changing, fast. Explore the major themes that will dominate web design this coming year with Editor X's interactive report. Discover more →

---

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)

---

From our sponsor

The Easiest Way To Ask Website Visitors Questions

Collecting feedback from your users, visitors, and customers is key to success. Yet, it’s shockingly tedious to actually implement surveys on your websites. We now introduce you to Preflect: the tool to add surveys to your websites for free in five minutes or less.

---

8. New On Smashing Job Board

• Principal Software Engineer, Senior Software Engineer, and Developer (React/AWS)
  at Venture Industries Online (Anywhere)
• E-Commerce UX Auditor
  at Baymard Institute (Anywhere)
• Digital Advertising and Partnerships Coordinator
  at Smashing Media AG (Anywhere)

---

9. Our Current Most Popular Articles

• How To Design A Simple UI When You Have A Complex Solution
• Making Websites Easier To Talk To
• Ethical Considerations In UX Research: The Need For Training And Review

---

This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf), Rachel Andrew (ra) 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

---