Salut Smashing Friends,

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

Dark mode coming to SmashingMag soon. It's already available on SmashingConf though (just don't look at CSS yet! ;-))

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)

---

From our sponsor

TLDR Newsletter: Byte-Sized News For Busy Techies

TLDR is a free daily newsletter for developers with links and TLDRs of the most interesting stories in tech, science, and coding. Sign up today!

---

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.

Front-end and design can sometimes feel like you’re riding some pretty wild waves! We’ve got your back with personal and inclusive events.

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)

---

From our sponsor

Tune In To The Now What? Podcast: Shanna Tellerman On AI, VR And Interior Design

Now What?, a podcast by Wix, explores how technology is changing, well, just about everything. This week, Shanna Tellerman, founder of the interior design startup Modsy, shares how VR, AI and 3D imaging are shaping the future of interior design and transforming the way we shop online. Listen now →

---

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)

---

From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Earn your master’s degree online.

---

8. New On Smashing Job Board

• Product Designer
  at Latch Bio (San Francisco, CA)
• Senior Manager – Digital Experience
  at Dallas College (Dallas, TX)
• Senior Software Developer Cloud Backend
  at LANCOM Systems GmbH (Germany)

---

9. Recent Smashing Articles

• Using HSL Colors In CSS
• How To Choose A Headless CMS
• Refactoring CSS: Introduction (Part 1)
• Making A Strong Case For Accessibility
• How To Migrate From jQuery To Next.js
• An Introduction To Figma Interactive Components
• Tools & Practices To Speed Up The Vue.js Dev. Process

---

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