JavaScript in 2022

Episode Summary

Executive Summary: The episode analyzes the JavaScript chapter of the 2022 Web Almanac, showing that the modern web still ships a lot of JS, much of it unused, and relies heavily on legacy libraries and CMS ecosystems. Scott and Wes discuss surprising prevalence of jQuery, render-blocking scripts, outdated plugins, bundlers, and the rise of PWA and Jamstack-related tooling. They also compare framework and hosting trends, then close with sponsor spots and personal recommendations.

Main Topics: Overall JavaScript payload and waste: The hosts react to the amount of JavaScript shipped per page and the high share of unused code, arguing that code-splitting and on-demand loading remain major opportunities for performance improvements. Script loading behavior and blocking patterns: They discuss how scripts are requested via async/defer/module and are surprised that many sites still ship render-blocking scripts in the head, suggesting lots of legacy or CMS-generated markup. Bundlers, transpilers, and build tooling: Webpack, Parcel, Babel, and Vite are examined as signs of how build tooling varies by site size and complexity, with the hosts noting that modern tools reduce the need for older transpilation workflows. Library and framework usage on the real web: The episode emphasizes that the web is still dominated by jQuery, Core-JS, jQuery UI, and old UI libraries, while newer frameworks appear smaller than many developers assume. Jamstack, hosting, and CMS/page-builder ecosystems: The hosts explore how Jamstack is defined and measured, then compare hosting and CMS/page-builder usage, highlighting WordPress dominance, surprisingly large Joomla/Wix/Squarespace usage, and the power of Elementor/WP Bakery. Progressive Web App and newer platform features: Service workers, manifests, web components, Shadow DOM, and Fugu APIs are discussed as features that are present on a meaningful slice of the web, especially on larger properties. Security and operational tooling: They note that many sites load vulnerable JS packages and use the discussion to promote Auth0, while also mentioning Sentry for observability and FreshBooks for accounting.

Key Arguments: A huge share of the web still ships excessive JavaScript, and 35% is unused, so performance gains are still available through bundling discipline and lazy loading. Render-blocking scripts remain common; the hosts view 79% of pages with at least one blocking head script as evidence of legacy patterns and CMS defaults. Modern tooling is making Babel less necessary, because many browsers now support features natively and TypeScript/JSX workflows can transpile faster with newer tools. The real web is not dominated by trendy frameworks; jQuery and older libraries still power a large portion of sites, especially WordPress-driven sites. Jamstack and static-site trends are hard to define precisely, which makes measurement fuzzy and can overcount or undercount sites depending on caching and rendering behavior. Large web properties benefit more from advanced features like service workers, PWAs, and Fugu APIs than the average site, which explains why adoption is concentrated among top websites. Page builders and CMS ecosystems are a major hidden force on the web, often outweighing framework popularity in real usage data.

Data Points: Desktop JavaScript per page (50th percentile): 509 KB - Median amount of JavaScript loaded on desktop pages. Mobile JavaScript per page (50th percentile): 461 KB - Median amount of JavaScript loaded on mobile pages. Unused JavaScript: 35% - Share of JavaScript that is unused, slightly down from the previous year. JavaScript requests per page (desktop): 22 - Median number of JavaScript requests per page on desktop. JavaScript requests per page (mobile): 21 - Median number of JavaScript requests per page on mobile. Webpack usage on top 1,000 sites: 17% - Bundler usage among the most popular sites. Webpack usage across all sites: 5% - Bundler usage across the broader web. Parcel usage on top 1,000 sites: 1.3% - Parcel usage among the most popular sites. Babel usage on top 1,000 sites: 40% - Transpiler usage among high-traffic sites. Async script loading: 76% - Share of script requests using async. Defer script loading: 42% - Share of script requests using defer. Async and defer together: 28% - Share of script requests using both attributes. ES modules: 4% - Share of websites using module scripts. No module: 0% - Fallback script delivery for older browsers was not observed. Render-blocking head scripts on desktop: 79% - Pages with at least one blocking script in the head. Render-blocking head scripts on mobile: 77% - Pages with at least one blocking script in the head. Dynamic import usage: 0.3% - Observed on websites in the dataset. Web Workers usage: 12% - Observed on websites in the dataset. Source maps on mobile pages: 14% - Pages specifying source maps. jQuery usage: 81% - Very high prevalence across websites. Core-JS usage: 41% - Polyfill library usage across websites. jQuery Migrate usage: 34% - Legacy compatibility library usage. jQuery UI usage: 23% - Still common on the web despite age. Modernizr usage: 13% - Legacy feature-detection library usage. Owl Carousel usage: 9% - Carousel library usage, highlighted as surprisingly widespread. React usage: 8% - Framework/library usage on the wider web, used as a comparison point. GSAP usage: 8% - Animation library usage. Isotope usage: 7% - Masonry/layout library usage. Web components on desktop: 2% - Custom elements usage across desktop pages. Shadow DOM on mobile: 0.39% - Shadow DOM usage across mobile pages. Sites loading a vulnerable JavaScript package: 57% - Pages with at least one known security vulnerability in shipped JS. WordPress usage: 35% - Share of total websites built on WordPress. Joomla usage: 2% - Second-tier CMS usage among total websites. Wix usage: 2% - Major hosted site-builder platform usage. Drupal usage: 1% - CMS usage among total websites. Squarespace usage: 1% - Hosted site-builder platform usage. Elementor usage: 43% - Top page builder among CMS-driven sites. WP Bakery usage: 2nd place - One of the leading WordPress page builders. Service workers across all websites: 1.6% - PWA-related feature adoption. Manifest files across all websites: 8.4% - Web app manifest usage. Web Share API on desktop: 8.8% - Fugu API usage. Add to Home Screen on desktop: 8.6% - Fugu-related feature usage. Push API on desktop: 2% - Notification API usage. Push notification ignored on desktop: 70% - User behavior on desktop notifications. Push notification accepted on desktop: 6% - User behavior on desktop notifications.

Pivotal Quotes: "35% of all JavaScript is unused" — Wes Boss: Discussing wasted JavaScript and the need for better bundling and dynamic loading. "79% of pages with at least one render-blocking script in the head" — Scott Delinski: Reacting to how common blocking scripts still are across the web. "Owl Carousel, a carousel you may likely have never heard of, is used on more websites than React" — Wes Boss: Highlighting how misleading framework-centric perceptions of the web can be.

Implications: The web still runs on legacy code and old ecosystems, so performance, security, and modernization remain big opportunities. Developers should optimize delivery, reduce unused JS, and recognize that CMS/page-builder tooling powers much more of the web than trend reports suggest.