CLIENT-SIDE INTERCEPTION OF THIRD PARTY

JAVASCRIPTFOR PERFORMANCE AND

RELIABILITY
BY ASHOK ANAND

INTRODUCTION
Third party JavaScript is becoming
increasingly popular. Almost every web page
today includes third party JavaScript code
whether its for visitor statistics, performance
monitoring, advertising, promoted content or
mashups (e.g., Google analytics, New Relic,
and Optimizely).

As reported by httparchive, the amount of JavaScript content used by Alexa top 100 sites has tripled in the last year, with 40 percent
of these JavaScript requests being for third party content. While these third party assets are essential for websites, they come with
the burden of extra DNS lookups, TCP and HTTPS connections and network delays, and can substantially slow down your website.
Even worse, if the third party site goes down, your website can be broken!

At Instart Logic, we address this challenge by intercepting third party JavaScript via our unique
Software-Defined Application Delivery (SDAD) service. With our JavaScript Interception solution announced today, third party
JavaScript will now appear as coming directly via our customers domain and thus avoid the need for extra DNS lookups or
initiating new TCP and HTTP/HTTPS connections. Further, they will be cached on our SDAD service and will get reliability as
well as performance benefits from the core caching capabilities of our service, and globally distributed points of presence and
network proximity.
With JavaScript Interception, we are now extending the benefits of JavaScript Streamingto third party code. Using these
techniques, we get appreciable performance gains across different performance metrics, such as, start render, speed index
and load time, and overall increased reliability and availability.

JAVASCRIPT INTERCEPTION
We achieve this third party JavaScript interception capability with our presence on the client-side (Nanovisor technology)
where we transform the source of third party JavaScript assets to be routed via our service. Unlike server-side traditional
Front End Optimization (FEO) approaches, we offload the transformation task to the client device. At the same time, the
transformation is safer as it is performed on the browser and does not need to deal with the complexities of how different
browsers parse HTML.

Leveraging our unique virtualization frameworks, we can handle an applications dynamic behavior on the client. More
specifically, we can: a) manage redirecting third party JavaScript elements that are dynamically added to the DOM; and b)
ensure that the functional correctness of the application is maintained by presenting back the original URL to the application,
whenever it reads the corresponding values. In other words, although from the browsers point of view the URL of these third
party JavaScripts has changed, from the applications perspective nothing has changed!
Traditional FEO approaches today cannot consider such dynamic behaviors because they are applied to static content on the
server during page generation. In contrast our technology is applied to the dynamic behavior on the client and at runtime in
the end user's browser.

HOW DOES CLIENT-SIDE INTERCEPTION WORK?

Instart Logics client-side Nanovisor technology intercepts web page content before it is presented to the browser. Various
elements (chunks) of the web page are first processed by a set of interceptors, which review the elements of interest and
transform their attributes (e.g., src attributes for third party JavaScript elements) as necessary. The transformed elements are
then presented to the browser, and finally the browser renders the page accordingly.

CLIENT-SIDE WEB APPLICATION INTERCEPTION

We have designed an extensible architecture for client-side web application interception (as shown in the figure above),
where different interceptors can be easily plugged in as APIs. For third party JavaScript, we have added a third party
JavaScript interceptor, which detects third party JavaScript assets and changes the URL to be routed via our service. In
the transformed URL, we encode the original URL so that the content can be downloaded from the original third party site by
the cloud portion of our application delivery service when needed, i.e., for the very first request or after the third party asset
expires.

BENEFITS OF JAVASCRIPT INTERCEPTION

Next, lets look at how JavaScript Interception adds to performance gains. In the waterfall graph below, we show the additional
network cost that is introduced due to third party JavaScript (from cdn.optimizely.com).

As shown here, DNS lookup cost of this third

party JavaScript is 157 ms, initial connection
cost is 32 ms and SSL/TLS negotiation cost
is 74 ms. Note that these costs can vary
depending on the location and here we are
considering one such case.
Now, consider the case when we apply
JavaScript Interception, as shown in the
waterfall graph below.

In this example, the third party JavaScript is intercepted and delivered via our cloud service. The original third party
JavaScript is encoded in the transformed URL. As we can see here, there is no DNS lookup, initial connection or HTTPS
negotiation cost, thus giving a performance boost.
However, there could be potential loss of domain sharding and network concurrency if every third party script comes directly
through the same customer domain. We address this challenge by appropriately sharding and maintaining concurrency
whenever needed. Furthermore, in an HTTP 2.0 world, this is less of an issue.
In our experiments, we find substantial performance improvements across different performance metrics (e.g., start render,
load time, speed index) depending on the number of third party JavaScript assets present in the website.

CONCLUSION
We built the JavaScript Interception feature leveraging our Software-Defined Application Delivery platform and cloud-client
architecture, which as discussed earlier, gives us unique capabilities as compared to traditional FEO approaches. More
importantly, we believe that our novel approach to client-side web application interception will open up new directions for
optimizations, such as, intercepting other third party resources including CSS, fonts and images.

Visit our Blog to know more