September 29, 2026
How Baseline Can Help Ship Less JavaScript

How Baseline Can Help Ship Less JavaScript

The modern web development landscape is undergoing a significant structural shift as browser vendors unify their efforts to standardize the "Baseline" of the web platform. For years, developers have relied on extensive third-party libraries to bridge the gap between what browsers could do natively and what complex applications required. However, recent data suggests that a typical mid-sized JavaScript application may currently carry between 60KB and 90KB of redundant dependencies—minified and gzipped—that the platform can now handle natively. This evolution, spearheaded by the WebDX Community Group, marks a turning point in how engineering teams audit their tech stacks and optimize performance for the end-user.

The Emergence of the Baseline Initiative

The "Baseline" project is a strategic effort from the WebDX Community Group, which includes representatives from major browser engines: Google (Chrome/Edge), Apple (Safari), and Mozilla (Firefox). Launched to provide clarity amidst the rapid release cycles of modern "evergreen" browsers, Baseline categorizes web features into three distinct stages: Limited Availability, Newly Available, and Widely Available.

A feature is designated as "Newly Available" when it is supported by all major browser engines. It moves to the "Widely Available" status after a 30-month window, a duration intended to account for the "long tail" of users on slightly older device versions. This 30-month benchmark has become a critical metric for enterprise-level dependency auditing. According to the WebDX Community Group, this clear signaling helps developers move away from the "install and forget" mentality that has historically bloated JavaScript bundles.

Chronology of Platform Advancements

The transition from library-reliance to platform-reliance has accelerated over the last five years. In the early 2010s, libraries like jQuery were essential for basic DOM manipulation. By the mid-2010s, utility libraries like Lodash and Moment.js became industry standards for handling data structures and dates.

The timeline of the platform’s recent counter-offensive is notable:

  • 2022: The <dialog> element reached broad cross-browser support, offering a native solution for modals.
  • March 2024: Object.groupBy and Map.groupBy became Newly Available, targeting a core use case of utility libraries.
  • January 2025: The Popover API reached universal support, simplifying the creation of tooltips and menus.
  • March 2025: Intl.DurationFormat landed in all major engines, addressing the final major gap in internationalization.
  • January 2026: CSS Anchor Positioning reached the Newly Available milestone, providing a native alternative to positioning engines like Popper.js.

Auditing the Internationalization Cluster

One of the most immediate opportunities for bundle reduction lies in the Intl (Internationalization) namespace. Historically, developers imported libraries like timeago.js, numeral, or pluralize to handle localized strings. These libraries, while small individually, collectively contribute to significant main-thread blocking time.

How Baseline Can Help You Ship Less JavaScript — Smashing Magazine

The Intl.RelativeTimeFormat API is now Widely Available and can replace libraries dedicated to "time ago" formatting. By utilizing the numeric: "auto" option, the browser can natively return strings like "yesterday" or "last month" based on the user’s locale. Furthermore, Intl.NumberFormat has evolved to handle currency, percentages, and compact notation (e.g., "1.2M"), rendering many dedicated math and formatting utilities obsolete.

Industry analysts note that replacing a full internationalization suite with native Intl APIs can save approximately 14KB gzipped. While this may seem minor, the secondary benefit is the reduction in "Total Blocking Time" (TBT), as the browser executes highly optimized C++ code for these operations rather than parsing and executing large blocks of third-party JavaScript.

The Shift in HTTP Communication: Fetch vs. Axios

The debate between using the native fetch API and the popular axios library (which weighs roughly 17KB gzipped) has reached a new phase. For several years, axios held the advantage due to its built-in support for request timeouts and interceptors. However, the introduction and stabilization of AbortController and AbortSignal.timeout() have closed this gap.

A factual analysis of modern HTTP requirements shows that most applications use axios for basic JSON fetching and simple error handling. Native fetch now supports these requirements with minimal boilerplate. While axios still offers benefits such as automatic JSON transformation and advanced interceptors, many teams are finding that a thin, 1KB wrapper around fetch is sufficient for their needs.

However, industry experts caution against a blind migration. The "Question 3" of the audit framework—Does the platform feature cover my real use case?—is vital here. If an application relies heavily on axios upload progress monitoring or complex request-retry logic, the cost of reimplementing those features in native JavaScript may outweigh the 17KB bundle saving.

UI Primitives and the "Top Layer" Advantage

Perhaps the most significant advancement in web platform capabilities is the introduction of the "Top Layer" and native UI primitives. For years, creating a modal required "focus traps," "scroll locks," and complex z-index management. The <dialog> element now automates these behaviors.

When a developer calls showModal() on a native dialog element, the browser automatically:

How Baseline Can Help You Ship Less JavaScript — Smashing Magazine
  1. Moves the element to the Top Layer (above all other content, regardless of z-index).
  2. Traps keyboard focus within the dialog.
  3. Renders the rest of the page "inert" to screen readers.
  4. Handles the "Escape" key to close the window.

Replacing libraries like a11y-dialog, focus-trap, and body-scroll-lock with the native <dialog> element and the CSS :has(dialog:modal) selector can remove upwards of 10KB of JavaScript while simultaneously improving accessibility compliance.

The recent addition of the Popover API and Anchor Positioning further expands this. Tooltip libraries like tippy.js (which often bundles the Popper positioning engine) can exceed 14KB. By utilizing CSS-based anchor positioning, developers can pin floating elements to triggers with zero JavaScript execution, a move that significantly improves the "Interaction to Next Paint" (INP) metric—a core component of Google’s Core Web Vitals.

Lodash and the Modern Utility Landscape

Lodash remains one of the most downloaded packages on npm, yet many of its flagship features have been absorbed by the ECMAScript standard. The introduction of structuredClone for deep copying objects, Array.prototype.at() for index access, and the new Set methods (union, intersection, difference) have eliminated the need for many standalone utility imports.

In June 2024, native Set operations reached Newly Available status. This allowed developers to perform complex logic—such as finding common items between two arrays—without importing 5-8KB of utility code. While debounce and throttle remain missing from the native platform, the recommendation from performance advocates is to move toward "cherry-picking" specific functions or using the platform equivalents wherever possible.

Case Study: The Temporal API and the Importance of Timing

A critical part of any dependency audit is knowing when not to switch. The Temporal API is the modern replacement for the notoriously difficult Date object in JavaScript. While it is part of the ES2026 specification and has been shipped in Chrome and Firefox as of early 2026, it is not yet "Baseline."

Currently, using Temporal in a cross-browser environment requires a polyfill. The official polyfill weighs approximately 44KB gzipped. In contrast, a popular library like dayjs weighs only 3KB. In this instance, moving to the "modern" platform solution actually increases the bundle size by 41KB. This serves as a factual case study in the necessity of the 30-month Baseline window. Until Temporal is Widely Available, maintaining a lightweight library like dayjs remains the more performant choice for public-facing websites.

Implications for Engineering Teams and Performance

The broader impact of these platform changes extends beyond just "shipping less code." It changes the maintenance profile of modern applications. Every dependency removed is one less security vulnerability to track via npm audit and one less potential breaking change during a version upgrade.

How Baseline Can Help You Ship Less JavaScript — Smashing Magazine

From a performance standpoint, the implications are measurable. A reduction of 90KB of gzipped JavaScript often translates to 200-300KB of uncompressed code that the browser no longer has to parse and compile. On low-end mobile devices, this can reduce the "Time to Interactive" (TTI) by several hundred milliseconds.

Developer reactions to these changes have been largely positive, though they highlight a growing "knowledge gap." As browser vendors ship features faster, the documentation and tutorials available online often lag behind, leading developers to continue reaching for libraries out of habit.

Conclusion: A Systematic Approach to Dependency Auditing

To capitalize on these advancements, engineering teams are encouraged to adopt a quarterly audit process. This involves listing production dependencies using tools like npm ls --omit=dev, measuring their actual cost via bundle analyzers, and cross-referencing them against the Baseline status on platforms like webstatus.dev or MDN.

The goal is not to eliminate all libraries, but to ensure that every kilobyte shipped is providing value that the browser cannot provide itself. As the gap between "you need a library for this" and "the browser does this" continues to close, the most efficient applications will be those that lean most heavily on the platform beneath them. By handing these responsibilities back to the browser, developers can focus on building unique features rather than reinventing the primitives of the web.

Leave a Reply

Your email address will not be published. Required fields are marked *