Ann Arbor, MI (PRWEB) May 09, 2012
Website Optimization is announcing its new “speed tweak” article illustrating how to speed up your web pages and save bandwidth by eliminating, deferring or converting your JavaScript behavior into CSS.
With the proliferation of content management systems there has been 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. JavaScript usage is increasing at an alarming clip (see Figure 1 at http://www.websiteoptimization.com/speed/tweak/blocking-javascript/ ). 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 can be used to eliminate the use of JavaScript on a website, including deactivating 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.
Reducing HTTP Requests
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. Tools like modconcat (Apache) can be used for this or can be done manually. Compressing and minifying can also help reduce JavaScript footprint on a website.
Simulating Elimination of JavaScript with Web Page Test
JavaScript can be eliminated from web 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 at http://www.websiteoptimization.com/speed/tweak/blocking-javascript/ ).
Using Alexa.com as an example, yields the following results (see Figures 3 and 4 at http://www.websiteoptimization.com/speed/tweak/blocking-javascript/ ). 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 at http://www.websiteoptimization.com/speed/tweak/blocking-javascript/ ).
Alexa.com Waterfall Chart
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 at http://www.websiteoptimization.com/speed/tweak/blocking-javascript/ ).
Blocking JavaScript in Web Page Test Advanced Tabs
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 at http://www.websiteoptimization.com/speed/tweak/blocking-javascript/ ). This simulates eliminating all JavaScript from the page. This technique can also be used 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.
Conclusion
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.
About Website Optimization:
Website Optimization provides services and techniques to improve web site performance: boosting search engine visibility for more traffic, increasing conversion rates to maximize leads and profits, revving up site speed to retain users.
Andy Kings new book titled Website Optimization: Speed, Search Engine & Conversion Rate Secrets offers a comprehensive set of techniques you can use to improve web site performance including boosting search engine visibility for more traffic, and increasing website conversion rates to maximize sales, leads and profits. http://www.WebSiteOptimization.com/
Find More WordPress Plugin Press Releases
Website Optimization Speed Tweak - Blocking JavaScript with Web Page Test
