With the proliferation of content management systems we're seeing an increase in the use of JavaScript. Wordpress, Movable Type, Joomla, Drupal all employ JavaScript to add enhanced functionality to their sites. Plugins abound promising Web 2.0 features, higher interactivity, and increased user engagement. The problem with this trend is that JavaScript usage is inceasing at an alarming clip (see Figure 1). The HTTArchive shows the average page uses 14 external JavaScript and 190K of code.
This is an average, so many sites out there well exceed these figures (some on the order of 50 external JavaScripts and over 500K of code, compressed). There are a number of techniques that you can use to eliminate the use of JavaScript on your site, including desctivating unused modules in Wordpress or Joomla (some use the same libraries as well, like jQuery), converting JavaScript behavior to CSS (drop-down menus, and tabs for example), and deferred loading of uncalled JavaScript (Pagespeed is a good tool to find uncalled JavaScript before the onload event). See the article Speed Optimizing Google Analytics for an example.
With an average of 14 external JavaScripts, the start render time of the average web page can suffer. If all of these scripts are in the HEAD of your HTML document, your start render time will increase. One technique is to combine JavaScript files together to reduce HTTP requests and object overhead. You can use a tool like modconcat (Apache) or do this manually. Compressing and minifying can also help reduce your JavaScript footprint.
You can simulate the elimination of JavaScript from your pages using Web Page Test. Web Page Test is a flexible performance testing tool originally created from code open sourced by AOL and Dave Artz. Web Page Test provides download times at various stages of the loading of a web paga, and waterfall graphs (see Figure 2).
Using Alexa.com as an example, yields the following results (see Figures 3 and 4). Note that the home page of Alexa.com does not need to use all the JavaScript that is referenced.
Alexa.com has 11 JavaScript files contributing 74.6K, and 4 stylesheet files contributing 36.1K. The page loads in 4.4 seconds on a DSL modem, with a time to first byte of 0.23 seonds, start render of 2.28 seconds, and load time of 4.43 seconds (see Figure 5).
The waterfall chart shows the progression of files that load to make up this page. The green vertical line is the start render time, the blue the page load time. Notice that there are 17 external JavaScript and CSS files that must load before the visible body content appears (see Figure 6).
You can block the loading of JavaScript by clicking on Block in the Advanced Settings and entering the file string you want to block ".js" (see Figure 7). This simulates eliminating all JavaScript from the page. You can use this technique to approximate how converting to CSS behavior and eliminating all but 0 or 1 external JavaScripts would behave.
The result of blocking all the external JavaScripts on the page is a start render time of 1.2 seconds (1 second faster), and a load time of 2.75 seconds (1.65 seconds faster). Eliminating JavaScript gives a savings of 1 to 1.6 seconds off of start render time and load time respectively (see Figure 8). Note that the Alexa developers could approach but not reach this, because the referenced JavaScript behavior (of which there is 20.3% referenced before the onload event, accoring to PageSpeed 1.12) would need to be converted to CSS which would increase the CSS footprint somewhat, or split the JavaScript payload to defer the nearly 80% of JavaScript that is not referenced before the onload event.
You can simulate the elimination of JavaScript on web pages with Web Page Test. By blocking the loading of JavaScript you can approximate the effect of removing or deferring all of the JavaScript on the page or replacing it with CSS behavior on start render times. Start render and page load times can be increased significantly by combining or eliminating JavaScript files, and replacing them with CSS equivalents.
By website optimization on 28 Apr 2012 PM
Increased speeds by 30-90% with our analysis and optimization services.
Increase conversions with adaptive multivariate testing to squeeze more leads out of your exiating traffic. Quickly boost your ROI.
Improve your site's look, usability and accessibility for a more credible and successful website.
