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?
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.
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.
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).
Hi. Nice post.
Just to complement there’s also another excellent tool to check page site and loading time:
Cool, thanks for the link Richie.
Same problem with http://www.octagate.com/service/SiteTimer/ by the way.
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
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.
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.