Published at
Updated at
Reading time
4min

Following my three-year-old tradition, I spent the last few days reading and summarizing HTTP Archive's yearly Web Almanac on Twitter. As usual, the folks behind it put together a comprehensive report on the state of the web, backed by real data analyzed by trusted web experts.

It's a fantastic resource to understand the current web technology landscape and discover new web platform features.

If you're curious, here are the previous summaries:

2022 Web Almanac highlights

I won't summarize the entire mega-thread here, so head over to Twitter to read it entirely if you're curious.

Tweet: .@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...

But let me share the highlights' highlights. ๐Ÿ™ˆ

Interesting facts

The largest found stylesheet was a whooping 62MB heavy, and the site with the most included stylesheets loaded 1387 CSS files. Both facts are quite an accomplishment โ€” respect! ๐Ÿ™ˆ

Surprisingly, 71% of sites define their font sizes in px. ๐Ÿ˜ฒ

Pixel lengths remain the most popular at 71%, the same percentage as in 2021. The spread of usage remains roughly the same too.

Almost nobody uses accent-color yet...

The accent-color property lets you add your brand color as an accent color to notoriously hard-to-style elements such as checkboxes, radio buttons and range sliders. Perhaps due to the fact it has only been available in all engines since March this year, it shows less than 0.3% usage.

But on the other hand, 34% of sites include reduced motion handling! That's way more than I expected!

Used media query features with "prefers-reduced-motion" at 34%.

No surprise if you've read the previous reports, but jQuery was and still is the most popular frontend lib, with roughly 80% of sites using it.

Adoptions of libraries showing that 81% of sites sill use jQuery

WebP and Avif usage are still fairly low.

Graph showing the adoption of webp at 8.9%.

Google's web presence is just absurd. With the following list of embedded third-party resources, there are probably very few sites out there that aren't loading Google scripts, sheets, fonts...

Distribution of Google APIs.

Over a quarter of the web traffic is bad bot-driven. ๐Ÿ˜ข

The internet today is filled with bots, and hance there is a constant rise in bad bot attacks. According to 2022 Bad Bot Report by Imperva, 27.7% of all internet traffic was by bad bots. Bots are the ones which try to scrape data and exploit it. According to the report, the end of 2021 saw a surge in bad bot attacks probably because of the log4j vulnerability which is exploitable by bots.

And these are the highlights of the highlights! But I learned some new things on the way, too!

Learnings from the Web Almanac

I've forgotten that if a script includes an async and defer attribute, async overrides defer.

As noted last year, using both async and defer is an antipattern that should be avoided as the defer part is ignored and async takes precedence.

The ascent-override and descent-override CSS properties allow you to "fiddle" with a font's rendering and display. ๐Ÿ˜ฒ I didn't play around with it yet, so I can't tell you more about it this time.

I knew about the system-ui font-family, but it's news to me that there's also ui-monospace, ui-sans-serif, ui-serif, and ui-rounded.

Did you know there are several other generic families. There is ui-monospace, ui-sans-serif, ui-serif, and ui-rounded as well, if you want to use an operating system font, but have slightly more specific needs.

I was aware of the special endpoints in the /.well-known/* URL path. E.g. you can provide instructions for password managers on changing a password under /.well-known/change-password. But I thought there were only a handful of these URLs.

Thanks to Arnd Issler, I learned that there are plenty of "well known" endpoints. I doubt that they're that well known, though.

Summary

And this is this year's quick summary. If you have the time, I highly recommend reading the Web Almanac yourself or checking all my other highlights on Twitter. It'll take a while to make it through everything, but I'm sure you'll learn something new!

A big thanks goes to all the people involved in this years Web Alamanac. It was, as always, stellar work! ๐Ÿ™‡โ€โ™‚๏ธ

Was this post helpful?
Yes? Cool! You might want to check out Web Weekly for more web development articles. The last edition went out 1 days ago.

Related Topics

Related Articles

About the author

Stefan standing in the park in front of a green background

Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.