The first step is to find out exactly what requests a page requires. Clear your browser cache, then load up the page. Using Firebug for Firefox or a proxy like Charles you can see exactly what HTTP requests are being made. Here are some common sources of multiple requests.
Problem 1: too many jQuery plugins. Solution: combine JS files!
Here's how to do this in Windows.
TYPE displays a text file, and the
>> operator appends the file to the target. Create a file called
TYPE jquery-1.3.min.js >> jquery.and.plugins.js TYPE jquery.validate.min.js >> jquery.and.plugins.js TYPE jquery.timeago.js >> jquery.and.plugins.js TYPE jquery.scrollTo-min.js >> jquery.and.plugins.js TYPE jquery.annotate.js >> jquery.and.plugins.js TYPE jquery-ui-1.7.custom.min.js >> jquery.and.plugins.js TYPE jquery.lightbox-0.5.min.js >> jquery.and.plugins.js
Here's how to accomplish the same task with bash on Linux:
- cat jquery-1.3.min.js >> jquery.and.plugins.js
- cat jquery.validate.min.js >> jquery.and.plugins.js
- cat jquery.timeago.js >> jquery.and.plugins.js
- cat jquery.scrollTo-min.js >> jquery.and.plugins.js
- cat jquery.annotate.js >> jquery.and.plugins.js
- cat jquery-ui-1.7.custom.min.js >> jquery.and.plugins.js
- cat jquery.lightbox-0.5.min.js >> jquery.and.plugins.js
Now we can replace all our script tags with:
An alternative is to combine the files dynamically, perhaps using a PHP script. If you choose this method, you'll need to ensure the
Content-type of the response is set to
Problem 2: too many images. Solution: CSS sprites!
Although each image may be small, multiple small images can really slow down your site. One solution is CSS sprites. This is a technique which combines related images into a single large image. By carefully setting the
background-position attribute in CSS, you can show exactly the part of the large image that you need. Here's the original A List Apart article which introduced CSS sprites.
Problem 3: same file requested multiple times. Solution: Add an Expires HTTP header!
Navigate to a few pages on your site. Are you seeing requests for the same CSS or JS files repeatedly? If so, you need to check the HTTP headers being sent with these files. If the browser receives an
Expires header like this:
Expires: Sat, 17 Apr 2010 12:00:00 GMT
then it knows not to request this resource again for one year. How to configure this depends on your server, a quick Google search will provide the information you need.
But what if you actually DO want to change the file later? The simplest way is to add a querystring containing a version number, like this
- <link rel="stylesheet" href="/css/corporatestyle.css?v=1" type="text/css"
- media="screen, projection" />
If the corporate style changes to require, say, purple headlines, then a quick change to
- <link rel="stylesheet" href="/css/corporatestyle.css?v=2" type="text/css"
- media="screen, projection" />
will ensure that the browsers download a new copy of the file on the next visit. Combine this with a
Expires date in the far future and you have the best of both worlds.
For more on this topic and further suggestions, visit the Yahoo Developer Network's best Practices for Speeding Up Your Web Site