CSS Wizardry
1,000 FOLLOWERS
Articles on CSS, OOCSS, front-end architecture, scalability and performance. This blog is authored by Harry Roberts, an award-winning Consultant Web Performance Engineer, designer, developer, writer, and speaker from the UK.
CSS Wizardry
2M ago
If you’ve ever run a Lighthouse test before, there’s a high chance you’ve seen the audit Avoid document.write():
For users on slow connections, external scripts dynamically injected via `document.write()` can delay page load by tens of seconds.
You may have also seen that there’s very little explanation as to why document.write() is so harmful. Well, the short answer is:
From a purely performance-facing point of view, document.write() itself isn’t that special or unique. In fact, all it does is surfaces potential behaviours already present in any synchronous script—the only main difference is ..read more
CSS Wizardry
5M ago
If you’ve been a web developer for any reasonable amount of time, you’ve more likely than not come across an async snippet before. At its simplest, it looks a little like this:
<script>
var script = document.createElement('script');
script.src = 'https://third-party.io/bundle.min.js';
document.head.appendChild(script);
</script>
Here, we…
create a <script> element…
whose src attribute is https://third-party.io/bundle.min.js…
and append it to the <head>.
The first thing I find most surprising is that the majority of developers I encounter do not know how this ..read more
CSS Wizardry
7M ago
I have long held very strong opinions about the Critical CSS pattern. In theory, in a perfect world, with all things being equal, it’s demonstrably a Good Idea™. However, in practice, in the real world, it often falls short as a fragile and expensive technique to implement, which seldom provides the benefits that many developers expect.
Let’s look at why.
N.B. Critical CSS when defined as ‘the styles need to render the initial viewport’.
Critical CSS Is Difficult to Implement
…particularly when we talk about retrofitting it. Reliably extracting the relevant ‘critical’ styles is based, first an ..read more
CSS Wizardry
7M ago
A thing I see developers do time and time again is make performance-facing changes to their sites and apps, but mistakes in how they measure them often lead to incorrect conclusions about the effectiveness of that work. This can go either way: under- or overestimating the efficacy of those changes. Naturally, neither is great.
Problems When Measuring Performance
As I see it, there are two main issues when it comes to measuring performance changes (note, not improvements, but changes) in the lab:
Site-speed is nondeterministic1. I can reload the exact same page under the exact same network con ..read more
CSS Wizardry
1y ago
Largest Contentful Paint (LCP) is my favourite Core Web Vital. It’s the easiest to optimise, and it’s the only one of the three that works the exact same in the lab as it does in the field (don’t even get me started on this…). Yet, surprisingly, it’s the least optimised CWV in CrUX—at the time of writing, only half of origins in the dataset had a Good LCP:
Once more, we saw an increase in the number of origins having good Core Web Vitals (CWV) driven by improved good CLS.
52.7% of origins had good LCP
94.9% of origins had good FID
70.6% of origins had good CLS
39.0% of origins had good LCP ..read more
CSS Wizardry
2y ago
So far this year, all but one of my clients have been concerned about Google’s upcoming Web Vitals update. The client who’s bucking the trend is great, not least because it’s given me something a little different to focus on—they’re more interested in how their site fares on iOS. What makes this particularly fun for me is that iOS Safari is a completely different ballgame to Chrome, and not something many people tend to focus on. So, I’m going to share with you a handful of tips to make it a little easier should you need to do the same—and you should do the same.
Why iOS Gets Overlooked
Google ..read more
CSS Wizardry
2y ago
A couple of years ago, my first few days on a new web performance project were always slow going. So many false starts, tedious workflows, and a complete lack of efficiency really made it difficult for me to find momentum. All through no fault of the client or the project, but through huge flaws in my own approach. In a bid to address this, I introduced a new tool into my arsenal so that I could hit the ground running much faster, and get answers to my clients much sooner.
When first working on a new site-speed engagement, you need to work out quickly where the slowdowns, blindspots, and ineff ..read more
CSS Wizardry
3y ago
For the most part, web fonts nowadays are faster than ever. With more standardised FOUT/FOIT behaviour from browser vendors, to the newer font-display specification, performance—and therefore the user—seems to have been finally been put front-and-centre.
It’s widely accepted that self-hosted fonts are the fastest option: same origin means reduced network negotiation, predictable URLs mean we can preload, self-hosted means we can set our own cache-control directives, and full ownership mitigates the risks that come with leaving static assets on third-party origins.
That said, the convenience of ..read more
CSS Wizardry
3y ago
One of the more fundamental rules of building fast websites is to optimise your assets, and where text content such as HTML, CSS, and JS are concerned, we’re talking about compression.
The de facto text-compression of the web is Gzip, with around 80% of compressed responses favouring that algorithm, and the remaining 20% use the much newer Brotli.
Of course, this total of 100% only measures compressible responses that actually were compressed—there are still many millions of resources that could or should have been compressed but were not. For a more detailed breakdown of the numbers, see the ..read more
CSS Wizardry
3y ago
When it comes to network performance, there are two main limiting factors that
will slow you down: bandwidth and latency.
Bandwidth is defined as…
…the maximum rate of data transfer across a given path.
Generally speaking, increased bandwidth is only particularly useful when you’re
transferring or downloading large files. If you’re streaming video, the
difference between a 2Mb1 connection and a 20Mb connection will surely be
appreciated. If you’re browsing the web—with most pages constructed of much
smaller files—then the same change in bandwidth may not be felt quite as much.
Latency ..read more