Skip to content
Web Development and Design

How Baseline Can Help Ship Less JavaScript and Optimize Web Performance

The rapid evolution of the modern web platform has fundamentally shifted the relationship between developers and their dependency trees. For years, the default strategy for managing complex functionality in JavaScript applications has been to install a library or framework to bridge the gap between browser capabilities and developer requirements. However, the emergence of the Baseline project, an initiative by the WebDX Community Group, has begun to systematically close the distance between what is required by developers and what is natively supported by major browsers. By auditing dependencies against the current capabilities of the web platform, development teams can significantly reduce their bundle sizes, enhance application security, and improve overall performance without sacrificing critical features.

The Shift in Browser Capabilities

The history of web development has often been defined by the struggle to overcome inconsistent browser support. In the early 2010s, developers relied heavily on libraries like jQuery for DOM manipulation or specialized packages for basic tasks such as date formatting, array manipulation, and HTTP request management. These libraries were essential at the time, providing a consistent API across fragmented browser versions.

However, the landscape has changed dramatically. Modern browser engines—Chrome, Edge, Firefox, and Safari—have accelerated their release cycles, leading to a high degree of interoperability. The Baseline initiative was created to provide a clear signal to the developer community regarding when a feature is safe to use in production. A feature reaches "Baseline Widely Available" status after it has been supported by all major browsers for 30 months, while "Baseline Newly Available" indicates that it is currently supported across all major engines. This framework provides the objective evidence required for engineers to decide when a third-party dependency has become redundant.

Analyzing the Impact of Bloated Dependencies

In a typical mid-sized JavaScript application, developers often accumulate between 60KB and 90KB of minified and gzipped dependencies that now possess direct native counterparts. While 90KB may seem negligible in the context of high-speed fiber internet, it is a significant burden for users on low-end devices in emerging markets or those navigating unstable mobile networks.

How Baseline Can Help You Ship Less JavaScript — Smashing Magazine

A critical component of this bloat is the "set it and forget it" mentality. Once a library is added to a package.json file, it is rarely re-evaluated for necessity. Industry audits suggest that developers frequently check for security vulnerabilities using tools like npm audit, yet they rarely perform "functional audits" to determine if a library’s purpose has been superseded by new browser APIs. This oversight leads to unnecessary technical debt and increased payload sizes, which directly correlate with higher Time to Interactive (TTI) metrics and slower First Contentful Paint (FCP) times.

Cluster 1: Internationalization and Formatting

One of the most immediate areas for optimization is the internationalization (i18n) cluster. Libraries that were once essential for handling relative dates, localized number formatting, and array joining are now largely obsolete due to the expanded Intl namespace in JavaScript.

For instance, Intl.RelativeTimeFormat provides a native, highly performant way to display time durations such as "3 hours ago" or "yesterday." Similarly, Intl.NumberFormat and Intl.ListFormat handle complex formatting requirements, including currency localization and grammatical list joining, with minimal code overhead. The transition from external libraries to native Intl APIs can reduce a bundle by approximately 14KB gzipped. While newer features like Intl.DurationFormat are currently in the "Newly Available" stage, they represent a clear path toward eliminating the need for heavy external utilities in the near future.

Cluster 2: HTTP Clients and Network Logic

The use of heavy HTTP clients like axios or superagent remains a point of contention in modern architecture. These libraries often account for 17KB to 20KB of gzipped code. While these clients provide convenience features like interceptors and automatic JSON parsing, the native fetch API, combined with AbortController, now covers the vast majority of standard use cases.

The industry consensus has begun to shift: rather than relying on a full-featured library, many teams are now building thin, custom wrappers around the native fetch API. This approach allows developers to implement only the specific interceptors or retry logic they require, effectively trimming thousands of bytes from their initial load. The key, however, is to evaluate the specific usage of the library before replacing it. If a project relies heavily on complex features like global request cancellation or specific transformer configurations, a direct swap may not be immediately viable without significant refactoring.

How Baseline Can Help You Ship Less JavaScript — Smashing Magazine

Cluster 3: UI Primitives and Native Accessibility

Perhaps the most transformative shift is occurring in UI development. Historically, developers installed heavy libraries for modals, tooltips, and focus management to ensure accessibility. Today, the native <dialog> element and the Popover API provide robust, accessible, and performant alternatives.

The <dialog> element, in particular, handles complex accessibility requirements such as focus trapping, inert background states, and keyboard event handling (like the Escape key) automatically. When paired with the modern CSS :has() selector, developers can manage complex UI states—such as locking page scroll when a modal is active—with a single line of CSS. This evolution enables the removal of several UI-specific libraries, including focus-trap and body-scroll-lock, collectively saving upwards of 24KB gzipped. Furthermore, these native elements are generally more accessible than hand-rolled solutions because they are integrated into the browser’s accessibility tree and rendering layer by default.

The Decision Framework: A Three-Step Audit

To effectively manage this transition, development teams should adopt a rigorous three-question framework before removing any dependency:

  1. Is the native replacement Baseline-safe? For internal tools or modern applications, "Newly Available" features are often acceptable. For public-facing sites with a global, legacy-device audience, developers must check their analytics and browserslist configuration to ensure that the transition will not alienate users on older browser versions.
  2. What is the true cost of the swap? Developers must be wary of "polyfill bloat." In cases where a native feature is not yet fully supported, adding a large polyfill to bridge the gap can result in a larger bundle than the original library. If the polyfill exceeds the size of the library it replaces, the change is counterproductive.
  3. Does the platform feature cover the actual use case? It is essential to distinguish between the core functionality of a library and its fringe features. If a library is used for a single purpose that the browser now handles, the swap is easy. If the library is used for advanced features that the browser lacks, the team must decide if the maintenance of a custom implementation is more costly than the continued use of the library.

Future Implications and The Temporal Case Study

Not every library is ready for retirement. The Temporal API, which is set to replace the long-standing and often criticized Date object, serves as a vital case study in patience. While Temporal offers superior immutable date handling and timezone support, it is not yet fully supported across all major browsers. Attempting to use a polyfill for Temporal today adds significant weight—often 19KB to 44KB—to the bundle. Consequently, the industry-standard advice is to continue utilizing established libraries like dayjs or date-fns until native support matures.

This underscores the broader implication for software maintenance: the goal is not to eliminate all libraries, but to ensure that the dependencies in a project are active, necessary, and justified. As the web platform continues to evolve, the distinction between a framework-reliant application and a platform-native application will continue to shrink.

How Baseline Can Help You Ship Less JavaScript — Smashing Magazine

Conclusion: A Quarterly Habit

The practice of auditing dependencies should be integrated into the standard development cycle, similar to security patching. By reviewing the package.json file on a quarterly basis, teams can stay informed about newly released Baseline features and identify opportunities to reclaim their performance budget.

The transition from "you need a library for this" to "the browser does this" is one of the most positive trends in modern web development. It fosters an environment where applications are faster, more resilient, and easier to maintain. As browser vendors continue to ship high-performance, native APIs, the most efficient code will increasingly be the code that developers do not have to write or maintain at all. By embracing the capabilities of the modern web platform, organizations can ensure they are delivering the best possible experience to their users, keeping their applications lean, and focusing their development efforts on the unique business logic that truly adds value.

Evan Lee Salim
Written by

Evan Lee Salim

Journalist and staff writer covering the technology and future shaping our world.

Leave a Reply

Join the discussion. Keep comments respectful and constructive.

Blog News Tweets
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.