Highlights of the Web Almanac 2021
- Published at
- Updated at
- Reading time
It's a very interesting (and also massive!) read written by very smart people. I highly recommend checking it out yourself. I learned quite a bit with the
Below you find my Web Almanac highlight summary from a Twitter mega-thread. 🙈
The median webpage loads 70kb CSS. The "top scoring site" loaded over 60mb of CSS. 😲😆 60!
Haha, I love that! There's also a new high score for the number of loaded external stylesheets: 2368!
I didn't realize that Font Awesome is still so popular. Over 30% of the scanned sites include
fa- classes in stylesheets.
Oh wow, the majority of length declarations use px. I barely use pixels for anything.
font-size declarations are in pixels. 😲
Hex is the primary way to define colors with
rgba on the third place.
Side note: if you use rgba you can drop the
a these days. 🙈
The site with the most loaded images loaded 300mb+ worth of images via CSS.
I just love these stats! 💙
I guess reduced motion is included in modern CSS libs? And dark mode is not as common as I thought then? 🤔
Haha, what's CSS Ruby? 🤔
Here we go; only 3% of pages use CSS-in-JS.
Nothing to see here – just the normal statistic showing that we all ship a lot of JS. 🙈 It's 420kb+ per page at the 50th percentile.
👇 this is transferred bytes, so the amount of JS is way higher after decompressing...
Only 4% ship
type="module" for scripts. :/
Fun fact: Angular dropped IE11 support last month.
Wait what? There's a SourceMap HTTP header?
Ready for the "boring is beautiful" and "the web is not as cutting edge as it always seems" screenshot?
Here we go. 👇
If you don't define it, let's fix that. ;)
Haha, I haven't seen this friend for a loooooong time. 🙈
The median count for different HTML elements is 31! 🎉 That's way higher than I expected.
Huh, 10% of pages ship
Fun fact: 0% use
<button type="text"> :D 😆
Big numbers first: almost all sites out there include 3rd party resources. This is not surprising because it includes tracking, libs from a CDN, video players and all these things.
I would have expected "tracking" to be way higher. 3rd party resources are mainly used for ads, "unknown" and library serving from CDNs.
That's a big one. Google's everywhere basically...
If YouTube resources are embedded, they lead to a median blocking time of 1.6 seconds. That's quite something. 😲
TIL: there's a
timing-allow-origin header. 😲 It enables the Resource Timing API for 3rd party requests.
A robots.txt is no requirement (if it's not there, all pages are free to index), and 16% of sites don't ship a robots.txt (my site doesn't 🙈).
Huh, there's a file limit for robots.txt files. 🙈
On the topic of not accessible links. "click here!" is not a great link and 16% of pages include these. :/
Speaking of HTML fundamentals: 33% of input fields have no accessible name provided by e.g. a label.
What's surprising is that
placeholder is on the list? It doesn't make an input field more accessible, or?
Almost 30% of pages include a
role="button" somewhere. 😲 This is super high!
It would be so great if there would be an HTML element for that, right?
Here's the major player in all web almanac statistics. Wordpress powers 33% of all scanned sites. That's huge!
It's probably affecting the jquery usage, TTFB and web vitals metrics, everything...
22% of sites ship with HSTS (HTTP Strict Transport Security)? Wow! HSTS tells browsers always to use HTTPS.
More sites use CSP (Content Security Policy)! 👏 With all this 3rd party code running in the sites, this is important to not mine crypto because an npm package was hacked. 🙈
And that's the end of the Twitter thread. 🙈 If you like this information, I send a weekly newsletter, too!