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.
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
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)
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)
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
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)
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.
- Next.js Boilerplates and Guides
- CSS Global Resets, Gradients and Transitions
- Interface Design Patterns
- Web Performance Optimization
- Designing and Building Dark Mode
- CSS Tools, CSS Data Charts and Fluid Typography
- Front-End Accessibility
- Color Palettes Generators and Tools
- Front-End Boilerplates and Starter Kits
- VS Code Extensions
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.