What is the Ideal Page Size for Quick Loading Pages?

Avatar of Chris Coyier
Chris Coyier on

First of all, what is “Page Size”?

Page size refers to the sum of all the elements it takes to render your page. That includes the HTML file, the CSS files, the images, the scripts, the multimedia…everything. Generally speaking, you should target 200k for your total Page Size. Also important is the total number of objects (or total http-requests). A page that is only 100k but has 92 http-requests is probably worse off than a 200k page with only 21 http-requests.

How can I find out what my Page Size is?

websiteoptimization.gif

You could always just look at the file size of every single element your page is using and add them up. Thankfully there is a much easier way. Just use the Web Page Speed Report, which is a very nice and free service. This service not only tells you your total Page Size, but also gives you your download times for various internet connection speeds and tips/warnings about particular areas of your page you could improve on. My favorite feature is that it lists all the objects in your page in order of largest to biggest, so you can see quickly what the biggest size culprits are on your page and address them first.

How do different pages stack up?

CSS-Tricks comes in at a relatively healthy 217k today. I feel OK about it being a little on the heavy side since a lot of my audience is fairly tech saavy and likely to be visiting on a fast connection.

css-tricks-size.jpg

A great example of hardcore optimization is BBC.com. Their page looks just as big, flashy, and full of content as any other major website, but they weight in at a super trim 141k.

bbc-size.jpg

Digg.com isn’t a site you would expect to be very heavy, since they really don’t use many images. Well this is a great example of how it’s not just images you have to watch out for. The top 14 largest page elements on digg.com are not images. Digg uses both JQuery and Prototype javascript libraries and those are by far the biggest culprits at 85k and 71k respectively. Does it matter for Digg? Does their page load slowly? Well, no. They are on such uber-fast servers that even though the bottle-neck is on the users side, it makes up for the difference.

digg-size.jpg

Remember that Page Size changes, especially on your blog.

On blogs, your page size will fluctuate quite a bit, since some posts will be larger and contain more images than others. Every time you include an image in a post, consider how well optimized it is. Even a relatively small (dimensionally) JPG file saved at it’s highest quality can be ~100k. That is half the ideal size in that one image alone! For more about image optimization, I have an article about when to use different image formats. Disclaimer: since I have written that article I have started to embrace the PNG-8 image format a lot more. It’s pretty great and can do most of what GIF can do, only better and at lower file sizes.

It’s not always Page Sizes fault.

Sometimes the Page Size isn’t the only thing that can make a page load slowly. If the page is dynamic, it could be the database that is slow, unoptimized, or there is just a whole lot of database calls. The code of the dynamic language can be a culprit as well. If the page has to do quite a bit of computation and analysis to figure out what to display, you can experience delays. In these cases, I have an example of how to create a CSS Page Loader (example here).