This year's Web Almanac report is almost complete. 🎉 ("Media" & "Caching" are missing)
almanac.httparchive.org/en/2021/
Let's see what's interesting. 👇
The median webpage loads 70kb CSS. Alright, and the "top scoring site loaded over 60mb of CSS. 😲😆 60!
Haha, 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 includes `fa-` classes in stylesheets.
Oh wow, majority of length declarations uses `px`. I barely use pixels for anything.
70% of `font-size` declarations are in pixels. 😲
almanac.httparchive.org/en/2021/css#le…
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. 🙈
stefanjudis.com/today-i-learne…
The site with the most loaded images loaded 300mb+ worth of images from CSS.
I just love these stats! 💙
almanac.httparchive.org/en/2021/css#we…
Huh, substantially more sites use `prefers-reduced-motion` than `prefers-color-scheme`.
I guess reduced motion is included in modern CSS libs?
And dark mode is not as common as I thought then? 🤔
almanac.httparchive.org/en/2021/css#me…
Haha, what's CSS Ruby? 🤔
almanac.httparchive.org/en/2021/css#ru…
Here we go, only 3% of pages use CSS-in-JS.
almanac.httparchive.org/en/2021/css#cs…
14% of pages ship `webkit-transition` instead of `-webkit-transition`. :D
almanac.httparchive.org/en/2021/css#no…
Alright, quick break. I just love all this!
Big thanks to @meyerweb and @shuvam360 for this detailed CSS analysis. 💙
Next up, after a coffee: JavaScript. 🔥
Nothing to see here – just the normal statistic showing that we all ship a lot of JS. 🙈 420kb+ per page at the 50th percentile.
👇 this is transferred bytes, so the amount of JS is way higher after decompressing...
almanac.httparchive.org/en/2021/javasc…
Only 4% ship type="module" for scripts. :/
Fun fact: Angular dropped IE11 support last month.
github.com/angular/angula…
Wait what? There's a SourceMap HTTP header?
almanac.httparchive.org/en/2021/javasc…
Ready for the "boring is beautiful" and "the web is not as cutting edge as it always seems" screenshot?
Here we go. 👇
84% use jQuery and 8% are built with React.
almanac.httparchive.org/en/2021/javasc…
That's pretty much it about JS. 🙈
Big thanks to @TheNishuGoel for putting all this together.
Next up – Markup.
~20% of sites don't define the `lang` attribute. :/
If you don't define it, let's fix that. ;)
almanac.httparchive.org/en/2021/markup…
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.
almanac.httparchive.org/en/2021/markup…
Huh, 10% of pages ship <base>? 😲
almanac.httparchive.org/en/2021/markup…
So, wix bets on web-components, @DanShappir? 👏🎉
@DanShappir Huh, only 2% of pages define all this social/meta shizzle? I thought that'd be way higher.
@DanShappir Fun fact: 0% use <button type="text"> :D 😆
Oh hey @avolakatos. 👋 Thanks for your great work on this!
Next up – "structured data". Let's see. 🤓
Okay, I'm confused...
In the previous section only 2% included open graph meta elements but the overall usage is 57%?
Looks like I misunderstood something in the way. 🤔
Also have to read more about RDFa. 🙈
Okay, I have to admit I don't know enough about all the things described in the structured data chapter. 🙈
almanac.httparchive.org/en/2021/struct…
Moving on to WebAssembly (oh boy... no clue about that either) :D
There's almost no adoption of WebAssembly. That makes sense (I guess), because there are only few valid use cases to adopt it.
almanac.httparchive.org/en/2021/webass…
Yeah, well... I spent no time with WebAssembly, so there's not much to share from this chapter. :D
Let's move on! I'm sure there's good stuff in "third parties"!
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.
almanac.httparchive.org/en/2021/third-…
I would have expected "tracking" to be way higher.
3rd party resources are mainly used for ads, "unknown" and library serving from CDNs.
almanac.httparchive.org/en/2021/third-…
That's a big one. Google's everywhere basically...
almanac.httparchive.org/en/2021/third-…
If YouTube resource are embedded they lead to a median blocking time of 1.6 seconds. That's quite something. 😲
almanac.httparchive.org/en/2021/third-…
TIL: there's a `timing-allow-origin` header. 😲 It enables the Resource Timing API for 3rd party request.
almanac.httparchive.org/en/2021/third-…
That was a great chapter! Big thanks to @tunetheweb! 👏
almanac.httparchive.org/en/2021/third-…
Next up – SEO!
@tunetheweb Haha I thought I can read this year's almanac with my morning coffee in bed, but it's 24 (!) chapters this year.
Putting all this info together is a huge effort! Super impressive work!
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 🙈).
almanac.httparchive.org/en/2021/seo#ro…
Huh, there's a file limit for robots.txt files. 🙈
The image loading section looks mixed up. 🤔
The graph is not matching the conclusion?
almanac.httparchive.org/en/2021/seo#im…
cc. @patrickstox @TomekRudzki @ianlurie
Only 65% of pages include an h1. 😲
almanac.httparchive.org/en/2021/seo#h-…
On the topic of not accessible links. "click here!" is not a great link and 16% of pages include these. :/
almanac.httparchive.org/en/2021/seo#li…
Let's enter the #a11y chapter. Let's look at the sad state of the web...
We're not getting better at shipping sites with less detectable contrast issues. :/
almanac.httparchive.org/en/2021/access…
Ja well, no news but speaking of HTML fundamentals: 33% of input fields have no accessible name provided by e.g. a label.
almanac.httparchive.org/en/2021/access…
What's surprising is that `placeholder` is in the list? It doesn't make an input field more accessible, or?
Accessible video/audio is pretty much not existing. :/
almanac.httparchive.org/en/2021/access…
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?
#justUseAButton 🙈
almanac.httparchive.org/en/2021/access…
The accessibility chapter was massive! Great work @at_fresh_dev, @scottdavis99, @oluoluoxenfree, Gary Wilhelm and Katriel Paige. 👏
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...
almanac.httparchive.org/en/2021/perfor…
Oh boy, in 2021 641 million emails, 428 million passwords and 149 million phone numbers were involved in data breaches. 😲
almanac.httparchive.org/en/2021/privac…
22% of sites ship with HSTS (HTTP Strict Transport Security)? Wow!
HSTS tells browsers to always use HTTPS.
almanac.httparchive.org/en/2021/securi…
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. 🙈
almanac.httparchive.org/en/2021/securi…
Alright, friends. :)
Thanks for reading along, here's the wrap up:
stefanjudis.com/blog/highlight…
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.