What is the perfect page size for fast loading web pages?
When looking at web performance one of the most common tips is reducing your page size. If you’re not sure what page size is, then it refers to the collective sum of all of your scripts, styles, media, images and HTML put together.
What should my ideal page size be?
The recommended target size is around 200k total page weight. But, and it is a huge but, this doesn’t work for all. First of all it’s not just about the page size but also how you load it and how much you load. If for example you load CSS or JavaScript which is less critical or is further down the page then this isn’t great for performance as you should be loading the critical CSS first. If you’re loading images that are at the bottom and are not lazy loading them it’s again bad performance as the user may never see those images so why load them at all?
The summary of this section is that your page weight should be as small as possible but don’t loose focus on other performance techniques as they can be more valuable.
How can I see what my page size is?
Apart from getting out the calculator out and totting it all up there are a few ways to do it. First is you can use the browser developer tools to see the page size for each file as well as the total. The second is using Web Page Test which is free to use and gives you plenty of information on your website. In that online tool you can also set conditions like location, device type, compare yourself against other websites and much more.
Educate others on performance
Remember that although you may be all clued up on making websites fast and the benefit it has to the user experience your colleagues might not have this understanding. What you often see is that you deliver a website which is super fast but then as soon as advertising, analytics and tracking scripts come along the website dramatically slows down. You need to make sure that everyone has the same understanding and knows the benefits of keeping a low page size.
Further reading
- WebPageTest Obscure Features for Performance Testing
- Scroll to text fragment: How to link & highlight any text on a web page
- How to validate your CSS using W3C
Written by
Senior Interaction Designer and Co-Author to Tiny CSS Projects