Stefan Judis Profile picture
Sep 27, 2022 49 tweets 19 min read Read on X
.@HTTPArchive's annual state of the web report — the Web Almanac — is out!

As every year, I'll give it a read and share interesting facts below...
@HTTPArchive I love these "fun facts".

Shipping a 62MB stylesheet (that's transferred size) is quite an accomplishment. 🙈 The desktop page with the g...
@HTTPArchive This one is also good. The more stylesheets the better — I guess! 🤔 Last year the record was br...
@HTTPArchive Even though everything feels always cutting edge, the most used class names show that Font Awesome and Wordpress are still on top of their game. Most popular class names: a...
@HTTPArchive 71% of font-size declarations are in px? 😲 I haven't used pixel font sizes in years. Pixel lengths remain the mo...
Haha as an #rrggbb person, I feel seen here. :D Bar chart showing the color...
Shoutout to the HTTP Archive folks. Every graph comes with an inclusive description. 👏 A bar chart graph with an o...
I'm just here for the fun facts. 🤣

Poor `mediumspringgreen` is the least popular CSS color. Bar chart showing the named...
Only 0.3% of pages use accent-color? 😲 The accent-color property l...
5% of animations are wobble animations. 🤣 Bar chart showing the anima...
Nice!

34% of the pages include reduced motion handling! 💪 Bar chart showing the media...
11% of mobile pages include a mystery `-archetype` CSS property? Bar chart showing the prope...
That was the CSS section: almanac.httparchive.org/en/2022/css

Thanks, @rachelandrew for putting this together!
@rachelandrew Gotta get some work done and continue later tonight. 🙈
@rachelandrew Next on stage... 🥁 JavaScript. 🔥

almanac.httparchive.org/en/2022/javasc…
@rachelandrew More is always better. 🙈 As was the case last year, ...
@rachelandrew I wonder how many 3rd party, ad and tracking scripts are in there.

If it's a large side there will be most likely tons of these... 🤔 Bar chart showing the 10, 2...
@rachelandrew Only 4% of pages use `module` scripts? I'd expected this to be way higher because it's supported for quite a while now. Percentage of pages using a...caniuse support table showi...
@rachelandrew Hah, that's a nice fun fact I've forgotten! As noted last year, using b...
@rachelandrew Ufff... 77% of mobile pages that ha...
@rachelandrew Kudos to @malchata! 💯 This chapter doesn't include only stats but also many hints, tips and tricks! 👏
@rachelandrew @malchata This is very interesting. The number of 1st and 3rd party scripts is somewhat equal across the board, but the 3rd parties are much heavier. 😲 Bar chart showing the 10, 2...Bar chart showing the 10, 2...
@rachelandrew @malchata And here's the graph everybody waited for.
Congratulations jQuery you'll be always in our hearts! Bar chart showing the perce...
As always, nobody uses custom elements, but I somehow feel like that'll change this year.

I saw many new frameworks betting on them.

Let's hope! 🤞 2% of desktop pages that us...
That was an excellent chapter. Thanks @malchata! 👏
Next up after a little break: Markup. Let's see how bad the semantic HTML state is. 🙈

almanac.httparchive.org/en/2022/markup
Haha, fun fact: I recently validated the HTML of my site and I had the doctype wrong on all pages (it was `<!doctype html>` in lowercase).

Validate your HTML friends. :D Let’s start with doctypes—w...
Transferred HTML is also on the rise. I wonder if this is due to inline JSON payloads and maybe Tailwind? 🤔 Column chart showing the tr...
☝️ We ship more elements though. Of course it's not a single reason, but websites include more HTML.

Side note: I like the term "div pandemic". 🙈 The median is currently at ...
Holy, there's this wordpress slider plugin — Slider revolution — that uses custom elements and is found on 2% of the pages. 😲 That’s impressive—but gives...
Next up: fonts!

almanac.httparchive.org/en/2022/fonts

(absolutely not my topic, but let's see)
If you're loading your fonts from Google Fonts and friends, it might be time to start self-hosting. In general, it is a mixture...
Oh wow – TIL! These properties are news to me. Browser support isn't too bad either. 😲

It's surprising that Safari is missing though, because minimizing the reflow of a font kicking is feels like right down their alley.  The CSS ascent-override, d...Browser support of ascent-o...
Haha, I'm not the only person not knowing about these CSS properties. 🙈 Column chart showing ascent...
TIL – I knew about `system-ui` but `ui-monospace`, `ui-sans-serif`, `ui-serif`, and `ui-rounded` are news to me! 😲 Did you know there are seve...
Just glancing over all this nerdy fonts stuff. Next up: Media.

almanac.httparchive.org/en/2022/media
I would have hoped for webp being more adopted. AVIF is so small it's not even labeled in the graph. 🙈 A pie chart breaking down e...
One in ten LCP / hero images is lazy loaded. :/

Get the above the fold content down as quickly as possible, friend. 😉 Lazy-loading LCP elements m...
Responsive images are very hard and it shows in usage.

Only a third of pages use `srcset` and `sizes` is often incorrect and/or plain wrong. 34%  of pages using the src...A bar chart showing the dis...
28% of images elements have both height and width attributes set to avoid layout shifts. This seems very low, but I looked up last year's report and it was only 7.5%.

So this is a major uptick! 💪 28%  of <img> elements on m...
This was a very extensive and detailed read. Thanks @etportis and @rakshay. 🙇‍♂️💯
@etportis @rakshay I'll call it a day for now and might continue tmrw.

The Web Almanac is as always a fantastic resource. Big thanks to all the people involved! 💯🙇‍♂️
Good morning.

Correction time — the uptick of images with defined width/height is not that high.

Thanks @etportis for pointing this out. 🙇‍♂️

@etportis And also, <!doctype HTML> is valid HTML. The validator I used tricked me here. 🙈

The top 1k websites include 43–53 3rd party resources. 😲 This seems quite high, but for massive sites you'll end up there very quickly. :/ Bar chart showing the media...
I think it was the same last year, but this Google dominance is massive. Bar chart showing the usage...
Yeah, it'd be great if more 3rd party providers could set this header. You can't access resource timing information in your JS without it. :/ 25%  of third-party request...
Guess when google announced that CWV will influence ranking?

I'd have expected a higher bump, but still, it's good that the web gets faster and more usable.

(We're not there yet though) 🙈 A timeseries chart showing ...
I'm still surprised that rel="ugc" (user generated content) is a thing these days.

stefanjudis.com/today-i-learne…

But not enough people know about it. 🙈 three links with rel="...A column chart comparing re...

• • •

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

Dec 3, 2021
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
Read 52 tweets
Nov 23, 2021
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
Jan 13, 2020
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
Dec 1, 2019
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

Don't want to be a Premium member but still want to support us?

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!

:(