Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Development Tools Introduction to Front End Performance Optimization Planning for Performance Setting a Performance Budget

Juan García
Juan García
10,721 Points

Is there a standard weight limit for a website, or individual images or other assets?

For example, the whole website should not weight more than 15mb, if it's a static website, an image should not weight more than 100kb, etc...

2 Answers

Your weight it going to be proportional to the type of content you are serving. An image gallery is going to be heavier than a blog post that has no images. Try to think of it in terms of serving the best quality while gaining as much performance as possible.

A website should take 1 second or less to load, once you get to 3 seconds or higher, people start to get really irritated and around 8 seconds they will most likely abandon the site. If you can shoot for around 1MB or less in terms of size, shoot for that, but sometimes that isn't always possible or practical because you'd be sacrificing quality. This is where certain tools like lazy loading, critical css loading, caching, and CDN's come into play.

Hope that helps!

It depends, you might need to show hi-res images, then you need to use lazyloading or other techniques to reduce the impact. but its an ideal, not a rule that needs to be implemented without considering the context. they are a bunch of techniques to address each of the elements that can harm page loading. they are mentioned in the other comments, CDNs, image compression, minified files - combined JS and CSS files, use of vectors SVG, lazyloading, ajax requests after page has loaded main assets, use of sprites, hosting video on large video platforms like ytube or vimeo and not your hosting service.