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! Not every page was so constrained: the page with the greatesGraph showing the CSS transfer size with 66-71kb median valu
Haha, love that! There's also a new high score for the number of loaded external stylesheets: 2368! 2368 – The largest number of external stylesheets loaded b
I didn't realize that Font Awesome is still so popular. Over 30% of the scanned sites includes `fa-` classes in stylesheets. Most popular classnames with `fa-` at 32%.
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… 70% of length units are using px.
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… Graph showing that #rrggbb and #rgb are the most popular col
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… 314,386 – The heaviest total weight of images loaded via C
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… 7% of sites use `prefers-color-scheme`
Haha, what's CSS Ruby? 🤔

almanac.httparchive.org/en/2021/css#ru… In addition to directionality and logical features, CSS also
Here we go, only 3% of pages use CSS-in-JS.

almanac.httparchive.org/en/2021/css#cs… While the topic of “CSS in JS” is good for at least a Tw
14% of pages ship `webkit-transition` instead of `-webkit-transition`. :D

almanac.httparchive.org/en/2021/css#no… Most popular unknown CSS properties:  14% – webkit-transit
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… Loaded JS bytes distribution 427kb at the 50th percentile.
Only 4% ship type="module" for scripts. :/

Fun fact: Angular dropped IE11 support last month.

github.com/angular/angula… 4% of pages load scripts via `type="module"`.
Wait what? There's a SourceMap HTTP header?

almanac.httparchive.org/en/2021/javasc… 0.1% of mobile pages use the SourceMap header.
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… Adoption of the top libraries – jQuery 84% and React at 8%
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… Out of the pages scanned, 19.6% on desktop, and 18.6% on mob
Haha, I haven't seen this friend for a loooooong time. 🙈 <!--[if IE 8]>    <p>This renders in Internet Explorer 8 onl
The median count for different HTML elements is 31! 🎉

That's way higher than I expected.

almanac.httparchive.org/en/2021/markup… Element distribution:  10th percentile: 21 50th percentile:
Huh, 10% of pages ship <base>? 😲

almanac.httparchive.org/en/2021/markup… From looking at the desktop pages, base is a popular element
So, wix bets on web-components, @DanShappir? 👏🎉 Web-components distribution. First three: rs-module-wrap (2%
@DanShappir Huh, only 2% of pages define all this social/meta shizzle? I thought that'd be way higher. Social meta nodes usage showing that only 2% include e.g. og
@DanShappir Fun fact: 0% use <button type="text"> :D 😆 distribution of <button> types with 0% of type="text&qu
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. 🙈

Structured data usage: - RDFa 60% - Open Graph 57% - Twitter
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… We got 3854 confirmed WebAssembly requests on desktop and 31
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-… 94% of mobile sites use at least one third-party resource.
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-… Third-party requests by type:  25% ads 19% unknown 15% cdn 1
That's a big one. Google's everywhere basically...

almanac.httparchive.org/en/2021/third-… Google takes 8 of the top 15 most-used third parties—incluTop 3 3rd parties: Google Analytics, Google Fonts, Google Ad
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-… YouTube's impact on the main thread.  50 percentile: 1.6s bl
TIL: there's a `timing-allow-origin` header. 😲 It enables the Resource Timing API for 3rd party request.

almanac.httparchive.org/en/2021/third-… Last year we looked at the prevalence of the timing-allow-or
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… robots.txt status codes:  200 – 81% 404 – 16%
Huh, there's a file limit for robots.txt files. 🙈 Most robots.txt files are fairly small, weighing between 0-1
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 Graph showing that 83% don't define a `loading` attribute fo
Only 65% of pages include an h1. 😲

almanac.httparchive.org/en/2021/seo#h-… Distribution and usage of `h` elements: h1 65% h2 71% h3 61%
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… 16% of pages use non-descriptive link texts.
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… Only 22% of pages ship without detectable contrast issues ov
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? Where inputs get their accessible names from:  - no accessib
Accessible video/audio is pretty much not existing. :/

almanac.httparchive.org/en/2021/access… 0.02% of desktop websites with an <audio> element have at le0.5% of desktop websites with a <video> element have at leas
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… Top 10 most common ARIA roles  - button 29% - navigation 22%
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… Top 5 CMS by rank:  Wordpress: 33% Joomla: 1.9% Drupal: 1.8%
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… Top 10 breached data classes: - Emails 641 million - Passwor
22% of sites ship with HSTS (HTTP Strict Transport Security)? Wow!

HSTS tells browsers to always use HTTPS.

almanac.httparchive.org/en/2021/securi… 22.2% percent of requests have HSTS header on mobile.
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… We see more and more websites starting to use CSP with 9.3%
Alright, friends. :)

Thanks for reading along, here's the wrap up:

stefanjudis.com/blog/highlight…

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Stefan Judis

Stefan Judis Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @stefanjudis

23 Nov
I somehow ended up the @MozDevNet page for CSS pseudo classes and holy moly... There's a bunch of them! 🤯

Let's look at the interesting ones (and that I maybe knew about but forgot). 🙈
@MozDevNet :autofill

> The :autofill CSS pseudo-class matches when an <input> element has its value autofilled by the browser. The class stops matching if the user edits the field.

developer.mozilla.org/en-US/docs/Web…
:default

That's a fancy one. :D It matches e.g. the checked radio in a group.

> The :default CSS pseudo-class selects form elements that are the default in a group of related elements.

developer.mozilla.org/en-US/docs/Web…
Read 8 tweets
13 Jan 20
May I introduce: @tinyhelpersdevtiny-helpers.dev.

Because I never find the proper tools when I need them I started collecting useful single-purpose online tools that are useful for web devs & I'll keep adding tools. 😊🙈

I share my favorite ones below in a thread. 🧵 Screenshot of tiny-helpers.dev
@tinyhelpersdev astexplorer.net – the go-to tool when you're dealing with abstract syntax trees! Highly recommended! Screenshot of https://astexplorer.net/
@tinyhelpersdev bennettfeely.com/clippy/ – a tool to generate CSS clip-paths, because this is nothing you want to do by hand. ;) Screenshot of https://bennettfeely.com/clippy/
Read 17 tweets
1 Dec 19
Spending my Sunday morning reading the Web Almanac sharing internet stats and analyzing HTTP Archive data for 2019.

almanac.httparchive.org/en/2019/

I'll share facts and stats that I think are interesting in a thread. 👇 :)
Only ~65% of sites compress their JavaScript files. 😲 Chart showing how many sites compress their JavaScript files using gzip (~65%) or brotli (~15%)
It always feels like React/Vue/Angular are all over the internet – they're not... jQuery still powers 85% of the crawled sites. 😲

almanac.httparchive.org/en/2019/javasc… Table showing the usage of libraries – jQuery is on first position with being included on 85% of the crawled sites
Read 29 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(