My new course, Setting up DevTools for Performance Testing, is live! Twelve videos demonstrating power features, secret experiments, and workflow tips (and lots more). Get it now: csswizardry.gumroad.com/l/perfect-devt
Pinned Tweet
Follow
Click to Follow csswizardry
Harry Roberts
@csswizardry
Harry Roberts’s Tweets
Note kiloBITS, not kiloBYTES.
read image description
ALT
4
Show this thread
‘All of our users are on wifi.’
The wifi:
read image description
ALT
2
2
24
Show this thread
🇩🇪 On 16 April, I’ll be debuting a brand new workshop at Düsseldorf! A hyper-practical focus on finding and fixing the REAL issues your customers come up against:
1
5
Quote Tweet
Being fast is more important than ever. But despite being the easiest metric to monitor, debug, and optimise, LCP is still the one that most websites struggle with. Get ready to ask for a pay rise, after @csswizardry's #perfnow talk: youtube.com/watch?v=JhTR2f
1:15
2.4K views
3
12
32
Being fast is more important than ever. But despite being the easiest metric to monitor, debug, and optimise, LCP is still the one that most websites struggle with. Get ready to ask for a pay rise, after 's #perfnow talk: youtube.com/watch?v=JhTR2f
1:15
2.4K views
18
61
Removing optional tags and quotes was worth just 2ms to me. Please DO NOT dedicate any time to this exercise.
read image description
ALT
3
9
Show this thread
I whipped these out of my site last night for absolutely no good reason. That said, I would always recommend adding <html lang=xx> in your server-generated HTML.
2
1
8
Show this thread
Browsers add them at runtime and they can still be accessed and manipulated as part of the DOM:
read image description
ALT
1
1
7
Show this thread
Silly little micro-optimisation, but this is a fully valid, functional HTML document—html/head/body tags are all optional, saving 39 bytes!
<!DOCTYPE html>
<title>Hello, world!</title>
<h1>Hello, world!</h1>
<script>
document.body.classList.add('foobar')
</script>
11
5
56
Show this thread
Why use an href when you can use JS and a load-page attribute?
9
1
24
Show this thread
Fun fact: Harry's articles from around 2014-2016 were the main driving force for creating projectwallace.com!
Quote Tweet
If you need to get a handle on your CSS, you need @projectwallace.
Show this thread
1
8
1
3
13
Show this thread
Pretty sweet gig, actually: a web-perf project whose key focus is their 2MB monolithic stylesheet. Two of my favourite things!
Quote Tweet
I first wrote about this SEVEN years ago, but I’m currently helping a client refactor a huge, huge CSS project: @extend in Sass is almost always an anti-pattern. The simple way around is 5× smaller.
Show this thread
2
23
Show this thread
And if you’d like to, y’know, be able to actually read the code…
1
3
Show this thread
I first wrote about this SEVEN years ago, but I’m currently helping a client refactor a huge, huge CSS project: @extend in Sass is almost always an anti-pattern. The simple way around is 5× smaller.
8
8
63
Show this thread
Why use 1 <p> and a <strong> when you could use 9 <div>s, 4 <spans>, and a <strong>?
read image description
ALT
35
33
391
Show this thread
That’s 345ms for one selector that wasn’t even used 😢
3
14
Show this thread
Browsers do a lot of genuinely intelligent comp sci wizardry to optimise things as much as they can, but developers need to meet them in the middle.
1
4
24
Show this thread
Everyone’s favourite CSS framework’s homepage. That’s 125ms for one selector across 6455 DOM nodes 😬
6
7
59
Show this thread
Write nicer CSS.</🧵>
1
4
24
Show this thread
To anyone who says that selector performance is never important, here we have an example of it adding approx. 0.25s of latency to user input. That’s bad.
1
18
Show this thread
All of these selectors are inherently slow, and can’t take advantage of in-build optimisations that browsers use to do this faster.
1
11
Show this thread
If we look at the kinds of selectors we’re dealing with, they’re all pretty gross: incredibly broad Key Selectors (e.g. * or :not([hidden])); substring selectors (e.g. [class*="icss-"]); counters (e.g. div:nth-child(3)); complex combinators (e.g. ~); and descendants.
2
12
Show this thread
This leads to a half-second Recalc Style! Roughly half of Recalc Style is spent on selector matching, so about 250ms is spent just working over selectors. We spent almost 1.4ms just matching ::before!
1
16
Show this thread
This page has 5,000 DOM nodes, but the Recalc Style event is only scoped to 1,984 of them. When a user opens the hamburger nav, a class is added to the BODY. This causes a style invalidation, and the whole CSS is reapplied against the page (well, in our case, 1,984 DOM nodes).
read image description
ALT
4
1
40
Show this thread
<🧵> CSS Selector Performance. It’s something that most people tell you not to worry about. But sufficiently bad selectors on a sufficiently large DOM can have a real impact on the user experience, and even on INP.
7
85
346
Show this thread
head,
script[async][defer],
script[async][defer]::before {
display: block;
}
script[async][defer]::before {
content: attr(src);
background-color: white;
color: red;
padding: 10px;
border: 10px solid;
}
1
16
Show this thread
Add this snippet to a diagnostic stylesheet; go ahead and delete all `async` attributes:
read image description
ALT
read image description
ALT
2
4
63
Show this thread
This seems odd. Client has 8.4K URLs in the ‘Needs Improvement’ category, yet the only two URLs CrUX has data on are well in the green. cc.
6
1
11
📖 Why Not document.write()? I’ve written up everything I currently know about what exactly makes document.write() *so* bad for performance:
2
10
21
In this demo, we actually see that document.write() performs the EXACT SAME as a synchronous script tag:
6
Show this thread
Odd that the GIF didn’t work the first time…
GIF
1
3
Show this thread
tl;dr: It really does depend. Both of these demos use document.write() to inject a script into the HEAD, but one is almost 1.3s faster than the other.
2
2
Show this thread
One of my favourite outcomes from workshops is when an attendee asks a question so good that I end up writing a whole article to answer it. Today: document.write() – why IS it so bad?
2
21
Show this thread
Although a fairly specific example, the advice here is limitless. Lean on (web) the platform, let the user decide. lessonsofacto.com/videos/020-sto
1
1
15
It’s the same for DOMContentLoaded (blog post incoming…). Internal browser events exist for a reason, and although they might not represent the user experience, neither does e.g. TTFB, yet we still happily track that. Internal events; internal significance.
1
4
Show this thread
While Load isn’t a useful user-centric metric, there’s nothing to say that we shouldn’t be capturing non-user-facing data, especially if it marks an important milestone for our own application logic.
1
1
Show this thread