The 2022 Web Almanac - JavaScript, Third Parties and Interop 2022

For the second year running, I have contributed to the latest edition of the HTTP Archive’s Web Almanac. This year I did not author any chapters, but I was involved as an analyst and reviewer on three chapters:

• JavaScript
• Third Parties
• Interoperability

The Web Almanac brings together many experts from different fields and it is a humbling and incredible learning experience to collaborate on this initiative. While working on these chapters, we uncovered data that we did not expect or that was previously undocumented, confirmed initial hypotheses, and learned more about the current state of the web.

Interoperability

Interoperability is a new addition to the Web Almanac and complements the Interop 2022 initiative that aims to bring the major browser vendors together to resolve compatibility issues and improve the developer experience in some key areas.

One of these key areas is cascade layers a new feature recently added to CSS. Cascade layers allow authors to avoid specificity conflicts that arise in CSS, especially when working with third parties. Using the @layer at-rule, we can establish our layers and specificity will only apply within each layer.

@layer site {
  .my-single_class {
    color: rebeccapurple;
  }
}

As this feature is still very new, only 0.003% of pages in the dataset contained an @layer ruleset, but hopefully, the work of the Interop 2022 initiative pays off and we see greater adoption soon.

JavaScript

The amount of JavaScript being downloaded on mobile devices has increased by 8% year on year, making it clear that we need to pay attention to both the quantity and the quality of the JavaScript we are shipping.

Pages using Babel grouped by rank

For the first time, we are parsing source maps to better understand how the JavaScript we are shipping is built, with webpack bundling 17% of the top 1,000 sites and Babel transpiling 40% of the top 1,000 websites and 26% of the entire dataset. With such widespread adoption, new features and improvements to these tools would have a significant impact on the JavaScript we consume.

In addition to how we are compiling and serving JavaScript, the JavaScript we write could also require some attention, with 67% of pages shipping legacy JavaScript, 18% using the unfavorable document.write, and 2.5% still using synchronous XHR. While newer and more performant methods, such as the Scheduler API only see 0.002% adoption so far.

As the web platform matures, we hope to see increased adoption of these modern APIs and an improved and faster user experience.

Third Parties

Third parties blocking the main thread

Looking at the performance impact of third parties, YouTube blocks the main thread on 90% of mobile websites tested, with a median main thread blocking time of 1,721ms. On the other hand, third parties do a good job at minifying and compressing resources, with 88.4% of scripts and 95.9% of CSS compressed with either GZip or Brotli.

All data and queries are publicly available and feedback is highly encouraged.

Thank you and have a good one!