Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

How much should a site "weight"?

I was listening to the Boagworld podcast and they were talking about how a certain website had an amazing design but weighted 84MB when loading. so it got me thinking how much is acceptable for a normal site, like a wordpress site for example. I just backed up my site and it amounts to 32MB. This is my backup only. I imagine this isn't what my visitors see, some might only see a post here and there, the banner for example will load only once.. etc.. but overall how do you control the weight of your site?

5 Answers

Adam Moore
Adam Moore
15,825 Points

Weight of a site has more to do with what's being transferred over http page to page. If you look at your network tab in chrome dev tools and refresh your page you'll begin to see the weight of your page. More requests = slower loading. Bigger/heavier files and images = slower loading.

There's no magic number.. but if you're targeting mobile you want it to be as low as possible.

The answer is: It depends. It should be as quick as possible while still providing all of the content you need to provide. Yes, that's intentionally vague. ;)

Load times are determined not by the overall size of your site (i.e. the size of your whole domain directory) but by what gets loaded when a page is loaded. Think of it as your browser grabbing, reading and displaying lots of stuff from different locations. Everything adds milliseconds: Scripts, external files (e.g. stylesheets), includes, images, text, even blank lines in your code.

Supposedly, you're meant to keep your load times under 2 seconds to keep users engaged.

Google Page Speed is a really useful tool for measuring and optimizing your load times.

Look into programming concepts like DRY ("Don't Repeat Yourself") and processes like minify too. These will help you create faster websites.

Sean T. Unwin
Sean T. Unwin
28,660 Points

To expand a little upon what Adam and Sharon have said, look into:

  • caching (on the server, within your CMS if you use one, and checking client side (for example, check if jQuery is available before loading it from a CDN)

  • concatenating your client-side scripts where applicable, as well as minifying and gzipping them

  • Optimize your images and use appropriate formats

  • Use sprites (put images, like social media icons or button states, all in one image) then use CSS to display them properly

Two goals for page loads should be to reduce server interactions and to reduce the amount of bandwidth within those interactions as much as possible.

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

Check out this site, it will show you the exact file size and download speed of each file you load: http://tools.pingdom.com/fpt/

Thank you everyone! This answers my question!