Analytics.js 2.0: Good Data Meets Fast Performance

This post has been updated on July 20, 2021 to include a mention of the new batching functionality that’s been enabled in Analytics.js 2.0.

First impressions are important, and so is page performance. So what do the two have in common? Whether you are a consumer, customer, or business – how your website performs represents your brand. After all, you only have a few moments to make an impression in today’s competitive, digital world. 

According to Aberdeen Group research, 25% of users will abandon a website after just three seconds of delay. That could be 25% of lost sales, or 25% of your business that takes a chance on a competitor…only to be whisked away forever.

This is why page performance is essential in unlocking digital experiences.

Historically, engineering teams have faced an impossible choice – prioritizing page performance above all else or helping business teams instrument the tools they need.  With every additional SDK, pixel, or client-side widget that you load on your site, performance is often sacrificed. 

At Segment, our priority is that good data meets fast performance. In 2012, we launched Analytics.js on Hacker News. Since then, Analytics.js has been widely used across the web because it simplifies collecting customer data and sending it to many different tools – all with a single, unified API.

Today, we are excited to announce the General Availability of Analytics.js 2.0.  Analytics.js 2.0 is a fully backward-compatible and lighter-weight implementation of Analytics.js. Simply put, the Analytics.js you know and love just got even faster with a more extensible architecture. Getting started is as easy as flipping a switch!

Since launching our Public Beta, we have had over 300 customers participate, and collected over 100 million events. Some customers experienced an improvement to their Lighthouse score by 10+ points! Let’s dig into some of the key benefits of Analytics.js 2.0.

Improved performance and reliable delivery of analytics data

Most customers that upgrade to Analytics.js 2.0 will experience reduced page load times, improved site performance, and improved SEO. Analytics.js 2.0 is significantly lighter-weight, ~70%* smaller than Analytics.js, and takes advantage of contingent loading and call buffering to ensure your page loads are blazing fast. *70% reduction in bundle size (16kb) represents the initial bundle size under ideal conditions. Customers may see extra bundles depending on their implementation.

Here are some of the performance optimizations we’re introducing with Analytics.js 2.0:

• Efficient Javascript bundling and caching: With Analytics.js 2.0, we split the code into multiple bundles that are loaded dynamically. Bundle splitting reduces the initial download size, resulting in downloading only what is needed. Additionally, each component of Analytics.js 2.0 can be cached independently and infinitely until it needs to be updated.

• Scheduling analytics work: Analytics.js 2.0 has a built-in scheduler that receives events and schedules delivery as single tasks with a lower priority than the core application. This ensures that your analytics workloads never interrupt the main rendering flow of your application, and never get in the way of your customers interacting with your application. Every analytics event is backed up and scheduled in a separate lower priority task. This means your customers will get a browsing experience that is uninterrupted by analytics workflows, while ensuring your analytics data will still be delivered in the background using modern browser scheduling APIs.

• Delivery: Analytics.js 2.0 bundles have been configured to dynamically be compressed based on the protocol supported by the user's browser including Brotli and GZip.

• Batching: Analytics.js 2.0 can now send events (via the Tracking API) in a batched fashion. Batching events improves performance, requires fewer API calls by delivering multiple events per call, and creates less noise when errors occur with batched event retries.

• Dynamic Polyfills: Analytics.js 2.0 is fully backward-compatible, which means it still supports legacy browsers such as Internet Explorer. However, legacy support for browsers is loaded on demand, when Analytics.js 2.0 detects that one of your visitors is using Internet Explorer. This means we’re saving precious kilobytes of bandwidth for most of your customers on modern browsers.

When combined, these optimizations add up to significant performance gains. In a performance study we ran during our beta period, a leading B2C marketplace experienced a reduction in total blocking time by 66% and reduced page load time by 500ms!

Developer experience

Analytics.js 2.0 introduces a new Event Timeline concept that provides a more extensible architecture. Teams will be able to write plugins that execute at different points in the timeline.

Filter, enrich, and transform data with new hooks.

A few examples of these types of client-side plugins are:

• New privacy and consent controls before an event occurs

• Enriching events with additional customer or page context in-flight with middlewares 

• Collecting better metrics around deliverability after messages are sent

This new architecture will enable you to move more of your workloads to the cloud. For example, an analytics tool that requires measuring sessions client-side can collect sessions on the client, while continuing to receive events in cloud mode.

In the coming months, we will be launching a host of features that take advantage of this new architecture that will help you migrate to a more cloud-first analytics implementation.

Analytics.js 2.0 Rollout

Analytics.js 2.0 is officially available to all customers today. If you are an existing Analytics.js customer, you will be upgraded over the coming months. To see when your sources will be upgraded, please see our Upgrade Guide. Analytics.js 2.0 is fully backward-compatible and will not require any code changes for most implementations.    

For customers ready to upgrade to Analytics.js 2.0 now, check out our technical documentation to get started.

New to Segment? Sign up for a demo to learn how Segment can help you better understand your customers and engage with them effectively.