Question

I’m working on a web application right now and it is very slow. After looking at the network monitor in Chrome, I saw that it loaded dozens of styles and scripts (possibly over 150). This is ridiculous, so I coded a PHP class to minify my scripts and styles and to cache them. It’s working right now and the speed is much better!

I was just wondering, what is the best way to serve the minified JS? Is it better to print all the JS between <script> tags (and css between <style> tags) or I should put everything in a file, say js_loader.php in which I would print it and set the headers to be javascript?

What is the fastest for both the end user?

Thanks!

Answer 1

If you can serve them minified and merged into a single file, do it.
More script/link tags means more HTTP requests and thus slower loading. Specially when it’s about JS.

Read the topics in Web Performance Best Practices and Rules @ http://developer.yahoo.com/yslow/

Specially the topics #1 Minimize HTTP Requests, #5 Gzip Components and #11 Minify JavaScript and CSS.
As for more awesomeness in load times, read #6 Put StyleSheets at the Top and #7 Put Scripts at the Bottom.

From the #7:

The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won’t start any other downloads, even on different hostnames.