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.
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:
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.
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!
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.