Asynchronous Javascript

The Akamai Front End Optimization (FEO) suite of optimizations has many optimizations. One of the most powerful optimizations is the ability to make JavaScripts asynchronous, which has the effect of speeding up the rendering of the basepage.

Pages that rely on scripts for beacons and widget content, often have their loading blocked by the download and execution of these scripts. This is an issue because these scripts often have very little impact on the actual rendering of the page. Sometimes, third party scripts and services have the impact of blocking/delaying the rest of the page from loading while it retrieves content, which is unfortunate as you have no access to their code, other than to include it. The Asynchronous Javascript feature delays the loading/execution of these scripts to allow the rest of the page to load. It’s also important to note that you have the ability to control when these scripts are delayed until after the base html document has been parsed or to the onload event.

If your page is loaded solely through JavaScript, it may not be a candidate for this optimization, at which point EdgeStart or the HTML5 optimization sets may be a better set of optimization candidates.

How Does It Work?

Once FEO is enabled in the Akamai portal, an FEO policy is created by Akamai or by our customers, that contains URL match criteria and a set of optimizations that are applied to those match criteria. An offline process analyses a page and produces transformation rules to be applied for a period of time. Those transformations are applied at the Akamai edge as content is served to the end users.

You can identify optimized Asynchronous Javascript via the blzscript script type change, i.e your inline and external scripts will appear like the following:

<script type="text/blzscript"..>

FAQ

Won’t Asynchronous JavaScripts break my scripts?

  • The FEO framework maintains the order of the scripts for download and execution. Generally this is not an issue. Problem scripts can also be excluded by URL or regular expression.

How do I test it to make sure the code I’m working on right now works?

  • See testing considerations

How do I get access to try Asynchronous JavaScripts?

  • Talk to your Akamai project or account manager to discuss enabling FEO in your environment. There are also tools like “suggest a policy” in the Akamai portal that may find that Asynchronous JavaScript optimization provides benefit to your pages.

Testing considerations

Disabling FEO on a request

If you want to compare the behavior of a page with and without FEO, this can be done by modifying the query string. All you need to do is add the query string parameter akamai-feo=off to your request, and the un-optimized, original page will be returned. For example, http://www.example.com/products/item.html?akamai-feo=off or http://www.example.com/products/item.html?exampleparam=somevalue&akamai-feo=off Just be sure to add it prior to any anchors, as denoted by # in the url.

An additional suggestion is to have two tabs open, one with FEO and one without so that the user experience can be compared..

How to debug

The first step is to functionally compare an optimized page against an unoptimized path in the browser. Use the browser tools to examine console messages. If you need to examine when a function triggers, as compared to another, you can add breakpoints in your browser developer tools to do this. You will note, when looking in the call tree, that the FEO framework will appear in the call list.

Testing New Code

The main testing paradigm is to enable Front End Optimization on your production, and either a staging or QA environment. This allows FEO to be tested prior to code deployments on production. An additional strategy is to create a test policy for testing optimizations. For example if you create a policy that matches on http://www.example.com/testasync.html, which has Asynchronous JavaScripts turned on, you can put whatever you want on that page, at the time of need, and test optimizations against that page. This is extremely useful for prototyping. Please note that you may need to perform an FEO purge, prior to testing, if you are doing additional optimizations like JavaScript, CSS or Image based optimizations. Purging FEO will force the offline analysis process to occur which will allow any new content to potentially be optimized. The Akamai contact within your organization can assist with this.