Tuesday, May 7, 2024
HomeJavaScriptNet Almanac Highlights 2022 | Stefan Judis Net Improvement

Net Almanac Highlights 2022 | Stefan Judis Net Improvement


Following my three-year-old custom, I spent the previous couple of days studying and summarizing HTTP Archive’s yearly Net Almanac on Twitter. As typical, the oldsters behind it put collectively a complete report on the state of the online, backed by actual knowledge analyzed by trusted internet consultants.

It is a unbelievable useful resource to know the present internet know-how panorama and uncover new internet platform options.

For those who’re curious, listed here are the earlier summaries:

2022 Net Almanac highlights

I will not summarize all the mega-thread right here, so head over to Twitter to learn it totally should you’re curious.

.@HTTPArchive‘s annual state of the online report — the Net Almanac — is out!

As yearly, I am going to give it a learn and share fascinating information beneath…

45 retweets 106 likes Tweeted Open Tweet

However let me share the highlights’ highlights. 🙈

Fascinating information

The most important discovered stylesheet was a whooping 62MB heavy, and the positioning with probably the most included stylesheets loaded 1387 CSS recordsdata. Each information are fairly an accomplishment — respect! 🙈

Surprisingly, 71% of web sites outline their font sizes in px. 😲

@HTTPArchive 71% of font-size declarations are in px? 😲 I have not 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 16 likes Tweeted Open Tweet

Virtually no one makes use of accent-color but…

Solely 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 10 likes Tweeted Open Tweet

However then again, 34% of web sites embrace decreased movement dealing with! That is far more than I anticipated!

Good!

34% of the pages embrace decreased movement dealing with! 💪 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 shock should you’ve learn the earlier experiences, however jQuery was and nonetheless is the preferred frontend lib, with roughly 80% of web sites utilizing it.

@rachelandrew @malchata And this is the graph all people waited for.
Congratulations jQuery you may be at all times 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 15 likes Tweeted Open Tweet

WebP and Avif utilization are nonetheless pretty low.

I might have hoped for webp being extra adopted. AVIF is so small it is not even labeled within 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.

2 retweets 10 likes Tweeted Open Tweet

Google’s internet presence is simply absurd. With the next checklist of embedded third-party sources, there are in all probability only a few websites on the market that are not loading Google scripts, sheets, fonts…

I feel it was the identical final 12 months, however this Google dominance is huge. 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.

Over 1 / 4 of the online visitors is dangerous bot-driven. 😢

“27.7% of all web visitors was by dangerous 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.

And these are the highlights of the highlights! However I discovered some new issues on the best way, too!

Learnings from the Net Almanac

I’ve forgotten that if a script consists of an async and defer attribute, async overrides defer.

@rachelandrew Hah, that is a pleasant enjoyable truth 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.

The ascent-override and descent-override CSS properties assist you to “fiddle” with a font’s rendering and show. 😲 I did not mess around with it but, so I am unable to inform you extra about it this time.

I knew in regards to the system-ui font-family, nevertheless it’s information to me that there is additionally ui-monospace, ui-sans-serif, ui-serif, and ui-rounded.

TIL – I knew about `system-ui` however `ui-monospace`, `ui-sans-serif`, `ui-serif`, and `ui-rounded` are information 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 11 likes Tweeted Open Tweet

I used to be conscious of the particular endpoints within the /.well-known/* URL path. E.g. you possibly can present directions for password managers on altering a password underneath /.well-known/change-password. However I believed there have been solely a handful of those URLs.

Because of Arnd Issler, I discovered that there are many “well-known” endpoints. I doubt that they are that well-known, although.

@stefanjudis There’s a lot extra. en.m.wikipedia.org/wiki/Effectively-know…

From most of them one may not have heard, however mta-sts.txt and the autoconfig/mail are fairly helpful and might be discovered usually on mailservers.

And that is this 12 months’s fast abstract. When you have the time, I extremely suggest studying the Net Almanac your self or checking all my different highlights on Twitter. It’s going to take some time to make it via all the things, however I am positive you may study one thing new!

A giant thanks goes to all of the folks concerned on this years Net Alamanac. It was, as at all times, stellar work! 🙇‍♂️



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments