Yale Daily News Online

By: Robert Baskin (Online Director)

Last summer, I interned at Yahoo as Backend Engineer for Yahoo News, which was a fantastic experience. While I was there, Yahoo released a product called YSlow, which is a plug-in for Firebug — the most useful Firefox extension ever created. It analyzes Web pages, tells you why they’re slow and how to make them faster. It has inspired many Web developers, myself included, to start thinking more seriously about client-side performance. Server-side performance — MySQL queries, PHP page generation times, etc. — is important, but client-side performance is also very significant.

One of the first steps we took was to combine CSS and JavaScript files into one file for production. In development, we split up those files to make them easier to manage. But, in production, you want browsers to have to make as few connections as possible. Each HTTP request for a new file (HTML, CSS, JavaScript, image, Flash object, etc.) takes time to look up the domain name, connect successfully and download the file. Therefore, we combine our code into one CSS and one JS file.

You may notice two things about these files. First of all, we remove all white space and unnecessary characters — for example, the last semicolon in a CSS declaration isn’t actually needed. We run the Minify library on our files to format them to minimize their size. We also have Apache’s GZIP module enabled to zip the files as they go over the wire to minimize transfer time and bandwidth costs. GZIPing of CSS and JS files isn’t enabled by default, because older browsers could not handle it properly, but all modern Grade-A browsers accept it with no problem.

The second thing you may notice is the vXXXXX in the filenames (CSS and JS). We have Expires headers turned on for our CSS and JS files. That means that, when your browser requests them for the first time, we let it know that those files will not change for the next 10 years — forever, as far as the Web is concerned. The next time you load the page, your browser knows they haven’t changed, so it doesn’t request them again. But, of course, we do change those files whenever we update our CSS or JS, and the only way to make your browser request them is to change the filename. To avoid having to go through our code and change the filenames every place they’re included, we pass a “Last Updated” time stamp in the filename. Apache Rewrite Rules remove that from the request, so the Web server always serves ydn-min.css or ydn-min.js. All we have to do is update the time stamp whenever we change the CSS or JS.

Those are just some of the performance measures we’ve enacted. We’re hoping to do more, both on the server and client side, in the near future.