Client-side Interception of Third Party JavaScript for Performance and Reliability

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 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!
3
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
Streaming to 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 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.
5
(No Transcript)
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, 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).
7
(No Transcript)
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
Visit our Blog to know more