Artboard 16light, inspiration, solution, idea, innovation,ionicons-v5_logosGoogle Sheets iconSwift icon
Published at
Updated at
Reading time
3min

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.

Stefan Judis avatar
Stefan Judis @stefanjudis
.@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...
60 retweets 132 likes Tweeted Open Tweet

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. 😲

Stefan Judis avatar
Stefan Judis @stefanjudis
@HTTPArchive 71% of font-size declarations are in px? 😲 I haven't used pixel font sizes in years. Pixel lengths remain the most popular at 71%, the same percentage as in 2021. The spread of usage remains roughly the same too.

Font size distribution: px 71%, number 2%, em 15%, % 5%, rem 6%, pt 2%
3 retweets 20 likes Tweeted Open Tweet

Almost nobody uses accent-color yet...

Stefan Judis avatar
Stefan Judis @stefanjudis
Only 0.3% of pages use accent-color? 😲 The accent-color property lets you add your brand color as an accent color to notoriously hard-to-style form 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 still shows less than 0.3% usage.
0 retweets 12 likes Tweeted Open Tweet

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

Stefan Judis avatar
Stefan Judis @stefanjudis
Nice!

34% of the pages include reduced motion handling! 💪 Bar chart showing the media query features used on the most pages. The most popular feature is max-width on 83% of pages, followed by min-width 79%, -webkit-min-device-pixel-ratio 35%, prefers-reduced-motion 34%.
4 retweets 13 likes Tweeted Open Tweet

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.

Stefan Judis avatar
Stefan Judis @stefanjudis
@rachelandrew @malchata And here's the graph everybody waited for.
Congratulations jQuery you'll be always in our hearts! Bar chart showing the percent of pages that use the top JavaScript libraries and frameworks. Starting with the most popular, jQuery is used by 81% of mobile pages, followed by core-js on 41%, jQuery Migrate on 34%, jQuery UI on 23%, Modernizr on 13%, Lodash, LazySizes, and OWL Carousel on 9%, React, FancyBox, Slick, and GSAP on 8%, Isotope on 7%, and Underscore.js and Lightbox on 6%. Desktop adoption is very similar.
4 retweets 17 likes Tweeted Open Tweet

WebP and Avif usage are still fairly low.

Stefan Judis avatar
Stefan Judis @stefanjudis
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 each format’s share of the web’s images. JPEG comes in first, at 40.3%. Next, we have PNG, at 28.2%, GIF, at 15.9%, WebP at 8.9%, SVG, at 4.7%, and ICO, at 1.6%. A couple of tiny slivers of the pie are left unlabeled.
3 retweets 10 likes Tweeted Open Tweet

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...

Stefan Judis avatar
Stefan Judis @stefanjudis
I think it was the same last year, but this Google dominance is massive. Bar chart showing the usage of top 10 most popular third parties. fonts.googleapis.com is used on 63% of mobile pages, google-analytics.com on 51%, accounts.google.com on 49%, adservice.google.com on 47%, and googletagmanager.com on 46%. The rest, i.e. ajax.googleapis.com, facebook.com, cdnjs.cloudflare.com, youtube.com and maps.google.com are used on less than 30% of mobile pages. Desktop and mobile percentage is similar for all third parties.
1 retweets 3 likes Tweeted Open Tweet

Over a quarter of the web traffic is bad bot-driven. 😢

Stefan Judis avatar
Stefan Judis @stefanjudis
"27.7% of all internet traffic was by bad bots." 🤦‍♂️ The internet today is filled with bots, and hence 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. Bad 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.
0 retweets 2 likes Tweeted Open Tweet

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.

Stefan Judis avatar
Stefan Judis @stefanjudis
@rachelandrew Hah, that's a nice fun fact I've forgotten! 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.
0 retweets 6 likes Tweeted Open Tweet

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.

Stefan Judis avatar
Stefan Judis @stefanjudis
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 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.
0 retweets 10 likes Tweeted Open Tweet

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.

Arnd Issler avatar
Arnd Issler @arndissler
@stefanjudis There's plenty more. en.m.wikipedia.org/wiki/Well-know…

From most of them one might not have heard, but mta-sts.txt and the autoconfig/mail are quite useful and can be found often on mailservers.
0 retweets 1 likes Tweeted Open Tweet

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 7 days ago.

Related Topics

Related Articles