Is your website loading too slow? Are you loosing traffic to your site? Loosing some sales? Before reducing the number of requests to your servers, reducing JPEG sizes or enlisting your services to a content delivery network vendor, stop for a minute and check those JavaScript’s and CSS files you are using in your site.
According to a recent recommendation from Steve Souders, Google guru who specializes in web site performance analysis and optimization, steps like those, which are aimed at optimizing the web server, makes only a tiny impact. So who is the culprit? Who is the main suspect, who is reducing the performance of your websites.
The vast majority of the delay or performance issues are result of code executing inside the we b browser, Souders said on a talk on Tuesday at Microsoft Corp.’s TechEd conference at Los Angeles. Only 10% to 20% of the time it took a web site to load completely could be attributed to the web server.
In today’s AJAX heavy websites, the offending code is usually JavaScript. This is not because the files are very large, but because of the way web browsers treat JavaScript.
“The first generation of Web browsers decided that because they had to execute all of the JavaScript files in order, we might as well execute one while stopping all other downloads — and preventing any other code from being executed or rendered”
, he said.
That might have made sense a decade ago, but in today’s era of PCs powered by dual- and quad-core CPUs, it doesn’t. And the cost of the delays created can be high.
Google has found that a 500-millisecond delay results in a 20% decrease in Web traffic, while Amazon.com Inc. has seen a 100-millisecond delay cutting its sales by 1%, Souders said.
Better browsers, Better performance : New and upcoming Web browsers will be able to download JavaScript files while executing them. Internet Explorer 8, released last month, has that capability, Souders said, as do the upcoming Firefox 3.5 from Mozilla Corp. and Chrome 2.0 from Google.
Barring an overhaul of the JavaScript, the boost will stay small, Souders said.
To fix the problem, Souders first recommends a free tool he created called Yslow, which analyzes and then grades how well a Web page is designed for maximum speed. Originally developed for IE, Yslow 2.0 is an add-on for Firefox integrated with the Firebug Web development tool. It can be downloaded on the Yahoo Developer Network.
With Yslow, users can see how much JavaScript is being loaded in the beginning and determine whether it’s creating a bottleneck. They can then split the JavaScript files, loading only the necessary JavaScript at the start and leaving the rest until the end, after the words and images are up, he said.
Doing that helped one Google site that Souders declined to name speed up its initial page rendering by 60%.
Cascading Style Sheets (CSS) can also drag down site performance. CSS files, which describe a Web page’s look and feel, have become more elaborate in recent years. CSS files are a problem in part because users tend to stay on certain CSS-heavy sites, such as Web mail portals, all day. These sites will re-render constantly throughout the day, producing a delay attributable to overelaborate CSS files each time, Souders said.
