DEV Community

Cover image for Introducing RudderStack's New, High-performance JavaScript SDK
Team RudderStack for RudderStack

Posted on • Originally published at rudderstack.com

Introducing RudderStack's New, High-performance JavaScript SDK

Most businesses spend a large amount of time and money developing their websites and there is a good reason for this. Websites are the way modern consumers and buyers interact with and build relationships with businesses. As a result, engineering teams are under high pressure to ensure that their websites are always performing at their best. To help out with page speed and general page performance, we're excited to announce the latest version of our RudderStack JavaScript SDK.

The new RudderStack JavaScript SDK

The first impression that any company has on potential customers is page speed. Immediately after that first impression, website performance metrics take center stage in forming customers' opinions including time to render, time to interact, DNS lookup speed and more. In the past, engineers have faced the difficult choice of prioritizing page performance above everything else or implementing tools on their site to help with business needs.

RudderStack's newest version of our JavaScript SDK solves that problem, making both fast performance and collecting customer data for various tools possible. Our JavaScript SDK leverages the rudder-analytics.js library to track and send user events from your website to RudderStack without compromising site performance. You can then further transform and route this event data to the destination platforms of your choice.

Don't just take my word for it. Let's dive into the metrics. Our benchmarking showed almost 3x performance improvement with a variety of optimizations. We reduced the package size by 70% and the load time by 60%. Testing also showed 10-30 point improvements in Lighthouse performance scores, reducing JavaScript penalties by ⅔ in many cases.

Performance is increased, but the icing on the cake is that the SDK still routes this data in real time to tools like Snowflake, Amazon S3, Salesforce, Slack, Google Analytics, Customer.io, and more. With this data, all of our core business functions, from sales and marketing to recruiting and customer support, are able to access the data they need in order to better serve our customers and growing business.

Developer experience

Our JavaScript SDK makes it incredibly simple for engineering teams to send event data to any destination without having to implement a new API every single time. We support a variety of JavaScript SDK APIs including Load, Identify, Page, Track, Alias, Group, and Reset.

We also allow developers to filter selective destinations to send event data. You can send your event data only to a few intended destinations by filtering out the rest. You can do so by passing an integrations object in the options parameter of the identify(), page(), and track() methods. We support over 150 destinations from Salesforce and Slack to Redshift and BigQuery.

Context and traits in RudderStack

RudderStack gives developers the option to automatically capture certain event-specific and user-specific data, based on the type of the event. The context and trait dictionaries can be included within the options argument which is included in the identify(), page(), and track() methods. A context is a dictionary of additional information about a particular data, such as a user's IP address. A trait is an optional dictionary included within context, which specifies the unique traits of the user. This is a very useful field for linking information of a user from a previously made identify() call to a track() or page() event.

Detecting ad-blocked pages

RudderStack's new JavaScript SDK also provides a way to send a page view containing relevant markers on whether a page is ad-blocked. You can analyze this data to find what percent of your site's page views are affected by ad-blockers.

Sign up for free and install our JavaScript SDK on your site

To integrate the RudderStack JavaScript SDK with your website, you can place either the minified or non-minified version of the code snippet in the

section of your website. Additionally, we have a NPM model to package RudderStack directly into your product. For more information, you can view our version migration guide.

Get started with RudderStack today by signing up for our free trial.

Top comments (0)