PDA

View Full Version : Minimizing http requests to speed page loads



the goat
09-09-2008, 02:20 AM
I was watching a video of Steve Souders of Yahoo giving a lecture called 14 Rules For Faster Pages. It is a very interesting video, but I have to admit most of it was over my head.

#1 was reducing the amount of http requests a page makes when it loads. What I am wondering is, do in site navigation links count as http requests?

vangogh
09-09-2008, 01:53 PM
Not quite. Basically an http request is any request for any file on any server.

I'll use an example to illustrate http requests and use the home page (http://www.vanseodesign.com/) of my site as an example.

When you want to visit my home page by typing the URL into your address bar or clicking a link to the page your browser makes a request for a file. That will naturally be the html or php or asp or whatever page. That's one request.

The file itself usually makes requests for other files. My home page actually makes quite a few requests for other files which you can see in this speed report (http://www.websiteoptimization.com/services/analyze/wso.php?url=http://www.vanseodesign.com/). Look down for the section marked Page Objects to see all the requests. I probably should be requesting less files on the page.

The page requests some external css style sheet. One for the basic page and a couple for specific plugins I have installed. I also have an ie-specific css file that should only get loaded if you're accessing the page using Internet Explorer.

Most of the requests you'll see are for images. Each image counts as one http request.

The page also calls some scripts from other sites. There's on from Google Analytics, one from MyBlogLog, and one from Woopra.

If this page were linking to a javascript file on my site that would also be another request.

The size of the file is often what slows things down more, but grabbing scripts from other sites can also be slow since you have to wait on the other server to send the file. More often than not if you see a page start to load and then appear to hang it's waiting for a file from another server.

While you have to load all those files to see my home page for the first time, most will then be stored in your browser cache. So if you click from the home page to the Design tab you won't need to load the css file again. You have it stored locally after visiting the home page so there's not another htpp request.

One reason you see recommendations for external stylesheets and javascript is because they'll get loaded once and not need an http request on subsequent pages. (If you clear your browser cache you will need to make another http request). If all that code were located on the specific pages instead of being in an external file your browser would have to reload the code for every page you visit. It wouldn't create an extra http request, but it does increase the file weight of each page.

The file wieght or size is usually the determining factor in how fast a page loads, though more htpp requests do slow things up since it requires communication between browser and server.

Look back at the speed report above. If you click the analyze link in the breadcrumbs you can enter any site you want and see what requests the page is making.

Here's a direct link (http://www.websiteoptimization.com/services/analyze/index.html)

Lots of things contribute to the speed at which a site loads, but for the most part it really is the file sizes that dominate. Images and Flash are often the biggest culrpits of a slow site, though large JavaScript files can also slow things down.

If you see me arguing for clean code one reason is to increase load times. One of my first clients had me recode her site to make it faster and just by changing from a table layout to a css layout, reducing the size and amount of images used, and a few other simiar things the pages of her site went from taking 90 seconds to download to about 12 seconds to download. Same site, new code.

the goat
09-09-2008, 03:34 PM
Thanks for explaining that, I was thinking my pages were slow because I have so much navigation. I am glad that is not the case. That is a great tool you linked to also.

If you say you have too many requests on your landing page, I think I have some work to do on reducing the 48 request on this one (http://www.websiteoptimization.com/services/analyze/wso.php?url=http://www.eastcoastboarders.com).

Here's a link to the video I referenced (http://video.yahoo.com/watch/1040890/3880720), it has lots of good info. Now I just need to start hunting around for how to's on implementing some of these techniques and speed my sites up.

Sometimes I feel like the more I learn the less I know.

billbenson
09-09-2008, 03:42 PM
Also, db requests can take some time. Say you have a cms sort of application. What I do is select the page and all the stuff including the db info, and save it to a local file. When the page is loaded the next time, it is only loading local information (caching the page). You can set some practical limit on the time the cache lives for. Most db's are local and fast, but in some cases databases are on remote servers so you have network latency.

I'm not sure, but I believe some of the popular cms's have the ability to cache in a db or in a db. I think they are referring to caching other info, not the entire web page. I've really only looked at some of the commercial cms's casually so I'm really not sure if any of them would cache an entire page. In the same caching process, save any images you get from other sources locally. They will load faster that way. there could be some copyright issues on the image thing though, depending on what you are doing.

vangogh
09-09-2008, 07:32 PM
The link to your speed report wasn't working. It's for a blank page. If you let me know what page you were checking I'll fix the link.

Much of what I learned about speeding up sites came from the site behind the reports. Their book was one of the first I read when learning to develop sites.

Some tips:

Optimize all your images. I use Photoshop and usually save images for the web at a medium quality. That alone can cut your image sizes in half or a third. When you're creating an image use 72ppi. Anything larger is a waste online. It just makes the file bigger.

Look for ways to reduce the physical size of images. Crop things as tight as you can. Also look to see which images you really need. People create images to display a giant block of solid color. That's a complete waste since you can do the same thing with a line of code.

Images are often the biggest offender in site speed.

Good point Bill. I meant to mention databases and then forgot by the time I got to the end of my earlier post.

the goat
09-09-2008, 09:07 PM
Does it work if I just copy and paste in in the text like this:

http://www.websiteoptimization.com/services/analyze/wso.php?url=http://www.eastcoastboarders.com

This can't be good either I suppose?

Connection Rate Download Time
14.4K 390.57 seconds
28.8K 200.08 seconds
33.6K 172.87 seconds
56K 107.56 seconds
ISDN 128K 39.60 seconds
T1 1.44Mbps 12.20 seconds


On a related note to the image files, in the video Steve says how they turn their images into one big file and then use <div> commands to call for only the exact section they need. This way it is only one http request, and apparently the sum of the parts is less than the whole when combined. Way beyond my expertise, but so is most of what he talks about in the video.

vangogh
09-10-2008, 01:00 AM
This link is working. The first one didn't have the url= paramter pointing to your site. I'll fixt it after posting this.

I see what you mean by all the requests. Ideally you should get the 56k under 8 seconds. I know 56k is ancient, but I still think it's a good goal. It's probably not realistic (my own site is over), but I try to get as close to that as possible. You should definitely be under 8 seconds for the ISDN speed.

The one thing about creating one big image file is that your image size might ended up being larger than using several smaller images. I think it could also be difficult to work with depending on your skill coding css.

Here's a few things you can do. You're using images behind each of the headings on the left and right. It's too images now because they're each different widths. I'd use a small slice say 10px width of either and then use it as a repeating background image so it could be any width you want. That reduces the number of images by one.

The image behind the header is for both the gradient behind the logo and the solid blue behind the menu. There's no reason the image needs to be used for the solid blue part. I'd crop it to be just behind the top section and use a background color behind the navigation. That will reduce the size of the image a bit.

Run your images through Photoshop or some other image editing software. You're using this image of a snowboarder (http://eastcoastboarders.com/wp-content/uploads/2008/09/snowboarding.jpg) that's showing a files size of 84 MB. That's too big. I downloaded the image and saved it for the web like I described above. My copy is now 16 MB.

If you did nothing but that with your images you'd probably cut down the load time of the page in half or more.

Beyond that you have some large script that are probably coming from plugins. You're not going to cut those down, but you could hold off on letting them download until you're actually using them. It'll take a little php/wordpress knowledge, but you can hold off calling scripts on the pages that don't use them. It won't speed up every page, but it does speed up some.

Reducing whitespace in files is another way to save some files size and speed. All those extra spaces add to the size of a file. And easy thing to do is change the style of css files.

Instead of

body {
width: 780px;
padding: 10px;
margin: 20px;
background-color: blue;
}

You could write the same like:

body {width: 780px; padding: 10px; margin: 20px; background-color: blue;}

Across an entire css file that actually saves some page weight and it's really just as easy to read. If you cut out whitespace across all your files you can shave a few seconds of download time.

Always start with the biggest offenders which will likely be the file size of your images. I wouldn't start removing whitespace unless after doing other things you still wanted to shave more time off the download times.

The http requests do slow things up, but on all honestly there are usually several other things that slow down the page more. With your site I the biggest offenders are the file sizes of the images. Reduce them by running them through Photoshop's (or any image editing program) save for the web feature. Until you do that it doesn't make sense to put your efforts into other things.

It's the equivalent of an elephant and a mouse sitting on top of you. Combined they're very heavy. True, if the mouse gets off it does make the total weight on top of you less, but until the elephant gets off it really doesn't matter what the mouse does.

the goat
09-10-2008, 04:31 AM
Wow, that is some great information, and I think I may even be able to pull a few of those things off. I will start with the images and see where that gets me. Then maybe I'll try a few of those other techniques. Thank you for all the info!

vangogh
09-10-2008, 11:26 AM
Glad to help. I'll plug the book from the Website Optimization site again. It was one of the first I read when learning to develop sites and I've been using most of the ideas in it ever since.