JavaScript – the Web site performance killer, Google guru says

Nowadays, even regular Web surfers know some of the things to do when designing a Web site for fast performance. Cut the number of requests to the Web server. Shrink JPEG sizes. Enlist the services of a content delivery network vendor like Akamai Technologies Inc. or Limelight Networks Inc.

Problem is, according to Steve Souders, steps like those, which are aimed at optimizing the Web server, make only a tiny impact.

“We used to tear apart the Apache [Web server] code to figure out what Yahoo was doing,” said Souders, who was Yahoo Inc.'s chief performance engineer for several years before moving to Google Inc. in the same role.

But after performing a detailed analysis, Souders discovered something startling: Only 10% to 20% of the time it took to load a Web site could be attributed to the Web server.

The vast majority was the result of code executing inside the Web browser, said Souders at a talk at Microsoft Corp.'s Tech Ed conference in Los Angeles.

In today's AJAX-heavy Web sites, the offending code is usually JavaScript, Souders said. That's not because JavaScript files on a Web page are large, they aren't; it's because of the way Web browsers treat JavaScript, he said.

“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.

Besides JavaScript and CSS, Yslow analyzes 22 criteria in all. It is unsparing in its ranking. Popular Web sites such as Apple.com, ESPN.com and Wikipedia, received grades of C from Yslow. NYTimes.com, NBA.com and Computerworld.com all earned the even worse grade of E.

“When I look at it, I feel like the teacher who hands out very severe grades,” Souders said. Search engines with minimal content on the page, such as Google.com and Microsoft's Live.com, are among the rare sites that get an A from Yslow.

There are other tools besides Yslow for diagnosing performance bottlenecks. Microsoft offers Visual Roundtrip Organizer, and AOL developed a now-open-source tool called PageTest.

All of those tools judge Web site performance by a set of rules, though none of them matches Yslow's 22 criteria.