Grow your CSS skills. Land your dream job.

What is the Ideal Page Size for Quick Loading Pages?

Published by Chris Coyier

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).

Comments

  1. Permalink to comment#

    Hi. Nice post.

    Just to complement there’s also another excellent tool to check page site and loading time:

    http://www.octagate.com/service/SiteTimer/

    Cheers,
    Richie

  2. Cool, thanks for the link Richie.

  3. Permalink to comment#

    The “Web Page Speed Report” site (http://www.websiteoptimization.com/services/analyze/) isn’t great, e.g. if you let it check google.be, it will report a very small size, and say there are no images. I first thought the images would be base 64 encoded, but that wouldn’t account for the small size. So I checked – turns out it loads the images using Javascript, which the report doesn’t detect.

    IMHO it’s best to use one of the firefox addons which give a detailed analysis of page sizes / load time, etc, as such an addon will render images loaded using javascript.

  4. Permalink to comment#
  5. chidge
    Permalink to comment#

    firebug is great for checking the total page load – timing and weight of load and seperate sections for html, css, images, ,js, flash

    firebug is basically the best thing I have seen, used and almost eaten (as it looks so tasty) since sliced toast

  6. Hi Chris !

    Great article. But, I’ve been wondering: what about today ? Your article has been written in 2007. It’s been 6 years and practices and bandwidths have evolved. Do you have idea of what would be a good page size today ?

    Thanks for your answer.

    Olivier

  7. There is another great tool i use for checking page speed and size http://tools.pingdom.com/ .

    2 months ago, after first checking the size of my webesite http://www.decafact.com, i am was quite surprised to see the size amove 1.5mb. But then by rigorous compressions and optimizations i have been able to bring down the size to less than 1mb since i cant remove images from the page.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".