July 13, 2021 Smashing Newsletter: Issue #309
This newsletter issue was sent out to 178,741 subscribers on Tuesday, July 13, 2021.
Editorial
It was the first week of June this year when we realized that something is a bit off. After months and months of work around performance, accessibility, content updates and SEO, with Google’s June 2021 Core Update that rolled out that week, we unexpectedly lost quite a bit of search traffic at Smashing, and that despite the fact that we were scoring green and high for Core Web Vitals on mobile and on desktop.
The disappointment was high, but then over 15 years of Smashing’s existence these search traffic ups and down happened all the time, so we kept working on improving the site (after an initial period of sad sighs).
And finally last week we’ve rolled out a new Smashing update with a new, simplified layout for better reading experience. We’ve separated the ads and the content a bit more clearly, updated the syntax highlighting and cleaned up (some) CSS. We’ve also designed a dark mode theme (rolling out soon!).
As a result, the performance of article pages was improved by a whopping 900ms Start Render time, along with accessibility refinements (thanks for the heads up, Sara!). We are testing the new layout at the moment, so if you spot any issues or mistakes, please let us know on Twitter.
For now though, in this email newsletter, we’ll look into some of the important facets of web performance — third-party scripts, partial hydration, taming CSS in React apps with styled components, system fonts and a bit of image upscaling without quality loss. We hope you’ll find them useful in your work, too.
Happy optimizing, everyone!
— Vitaly (@smashingmag)
1. The Impact Of Third-Party Scripts
Analytics, advertising, reviews, recommendations — third-party tags are everywhere. However, it’s no secret that they impact site speed significantly. To help you find a balance between the value they bring and the performance cost they impose, Andy Davies shares valuable tips for reducing the impact that third-party tags have on UX. A practical “pick-and-mix approach” that you can adopt to your project’s needs.
If you want to dive deeper into the topic, Patrick Hulce’s project 3P Web is for you. Its goal is to quantify the impact of third-party scripts on the web and identify the scripts that have the greatest performance cost so that developers can make informed decisions about which third parties to include on their sites and which to avoid. The visualizations that Patrick uses to achieve that make the decision a lot more straightforward. (cm)
2. The Case Of Partial Hydration With Next And Preact
If your website is mostly static, and perhaps contains only a few interactive components, sending the entire JavaScript bundle that hydrates the entire page every time is unnecessary. To prevent overhead, Lukas Bombach and his team came up with a solution when they built the German news media website welt.de: partial hydration with Next and Preact.
To keep bundle size low, the approach lets you choose the components you want to send and hydrate to the client. The rest of the page remains static with multiple render roots. If you want to dive deeper into how they implemented each step, Lukas shares a detailed case study, or you can take a look at the work-in-progress GitHub repo. (cm)
3. Creating Websites With prefers-reduced-data
A page that weighs 2MB might not be an issue for people on a fast and unlimited Gigabit connection, but for someone who has a monthly data plan with a 1GB cap, it means that they can only visit 16 average-sized pages a day. The media query prefers-reduced-data helps keep your site accessible for users who want to use as little data as possible.
On the Polypane blog, Kilian Valkhof takes a closer look at the new media query, available alternatives, strategies for implementing it, and what you can do to actually save data. Browser support for prefers-reduced-data is still lacking these days, but you can emulate it in Chromium browsers if you enable the right flag to future-proof your web pages. A great overview of what’s to come and what you can already do today. (cm)
4. Upcoming Smashing Online Workshops
Web performance is pretty much at the heart of the online workshops that we run — be it around accessibility, design or front-end. The interface has to load and respond quickly, and that affects all facets of users experience.
There’s still plenty of time to save your spot for the next upcoming workshop — we couldn’t be more excited for Paul’s Designing Websites That Convert. We also have plenty of other topics to choose from. As always, here’s an overview of our upcoming front-end & design workshops.
- The TypeScript Masterclass Dev
with Stefan Baumgartner. August 5–19. - Getting Web Forms Right UX
with Vitaly Friedman. August 18–20. - Architecting Design Systems Workflow
Nathan Curtis. Sept. 2–10. - Jump to all online workshops →
5. Get More Out Of styled-components
We need to tame CSS growth for performance, but it can be quite difficult in large applications. styled-components is a fantastic tool to manage CSS in React apps and keep your codebase clean and modular. However, as Josh W Comeau points out, a lot of developers never fully embrace styled-components and miss out on some of the best parts of the tool. Time to change that!
To help you get the most out of styled-components, Josh distilled years of experimentation and practice into a few practical tips and techniques. And apart from things that you can apply to your work right away, you’ll also get a chance to extend the mindset for your CSS to gain new superpowers. A great read! (cm)
6. A Performant And Environmentally-Friendly Approach To Fonts
Using system fonts like Arial or Times New Roman instead of web fonts might seem as if someone has stuck with the easiest option at first glance. However, it might have been be a conscious decision. As Iain Bean points out, using system fonts cuts down on HTTP requests, reducing the amount of data transferred and, ultimately, CO2 emissions. In his blog post “System fonts don’t have to be ugly”, he presents five of his favorite system font stacks that are anything but boring.
But are web fonts really that bad performance-wise? As Iain explains in his post, they aren’t the biggest source of bloat on a site. In fact, of course JavaScript is usually more expensive for the browser to process than an equivalently-sized web font. If you’re struggling to decide which route to choose, Iain’s approach is worth to be considered: He uses system fonts first and only reaches for web fonts if they really add something. (cm)
7. Upscale Images Without Quality Loss
We’ve all experienced the situation when we needed to upscale an image but the result was, well, disappointing. Luckily, technology has made a giant leap forward and AI is now available to help us increase image resolution without quality loss. Let’s Enhance, for example, is a tool that does just that.
Based on a neural network that is trained on a huge dataset of images, Let’s Enhance learns typical features of physical objects — bricks on a wall, hair, or skin, for example. After the network recognizes those features on an image, it is able to add extra details based on its general knowledge of the world and, thus, upscale the image up to 16× without losing quality. And if you need an alternative, Ojoy is a great option to consider as well. Promising! (cm)
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 week!
This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.