Client-side Interception of Third Party JavaScript for Perfo

1. CLIENT-SIDE INTERCEPTION OF THIRD PARTY JAVASCRIPT FOR PERFORMANCE AND RELIABILITY BY ASHOK ANAND

2. INTRODUCTION Third party JavaScript is becoming increasingly popular. Almost every web page today includes third party JavaScript code – whether it’s 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!

3. At Instart Logic, we address this challenge by intercepting third party JavaScript via our uniqueSoftware-Defined Application Delivery (SDAD) service. With our JavaScript Interception solution announced today, third party JavaScript will now appear as coming directly via our customer’s 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.

4. Leveraging our unique virtualization frameworks, we can handle an application’s 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 browser’s point of view the URL of these third party JavaScripts has changed, from the application’s 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 Logic’s client-sideNanovisortechnology 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.

6. 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, let’s 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).

8. 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.

9. 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.

10. Visitour Blog to know more