maximum file size website

Question

I have a quick question and It might not be the right place the ask it but I hope someone can help me becuase im curious.

I'm creating a one-page website whit a lot of style (isnt designed webfriendly and uses a lot of images) this isnt a big problem because we believe we're aiming at a more design branche who most likely have kind of good pcs with a pretty ok connection to the internet and the site is sized down a lot of mobile.

But still I wonder what people recommend. my site is currently 2.2mb on loading (is there a website where you can check this btw? I just made a guess by calculating the file sizes of images etc.) I can still optimize a lot but I think going under 1mb is being a hard task. is this good enough or is there anyway who has experienced it isnt?

thanx in advance

Undesirable

It should be like 500kb. Optimise your images – Firearm

well thats not possible I think. There are over 50 images. and every page has a fullscreen background image. its one page so all the site content is loaded in 1 bunch. – Undesirable

You can have a look at the Net tab of Firebug, Chrome developer tools to see how many requests are being made, and the total size of the page. – Aubreir

Answer 1

You shouldn't worry about the size of your website (especially since you know your target audience) if the user experience doesn't suffer. However, you should optimize everything you can without sacrificing the design. Google's Page Speed might help you a lot. They even have the total size calculator you wanted. There are tons of similar tools available online as well.

Also, read this about last year's website size trends: http://www.theglobeandmail.com/technology/tech-news/bloated-web-pages-costly-for-smartphone-users/article9355125/

According to the website HTTP Archive, which regularly studies the top 10,000 most-visited sites online, the average web page now weighs in at about 1.3 megabytes, up about 35 per cent in the last year.

UPDATE

Inspired by @pwdst's comments, I'd like to add that if you want support for mobiles, tablets, etc... there's no need to sacrifice the look of the main site - you can use media queries and practically serve a different presenation to those users. Of course, you can go even further and make a different website for them (usually a subdomain).

Finecut

I find it extremely hard to accept "you shouldn't worry about the size of your website" regardless of the rider - are you excluding users on slower connections (such as Edge or 3G), mobile users (a surprising number of Americans only have access to the internet via their mobile) or in other markets. – Amok

@Amok I am not excluding anyone, but OP is. Read about the target audience in the question. – Finecut

I agree that this is a choice by the OP - this answer encourages rather than challenges that choice though. – Amok

@Amok That was my intention, though I said he should always optimize it as much as possible. If you're making/selling a product, you'll do your best to optimize it for your target audience and not compromise for the rest (of course, this doesn't make sense if you're targetting everyone, which is what your answer is about, and that's fine)... There's no such thing as a luxurious and affordable, sometimes you just need to make a choice and stick with it. – Finecut

well im indeed using media queries, I got lowres copies of every image and so on which will load on smaller screens – Undesirable

@Undesirable Then I'd safely assume that there's nothing to worry about. You should still probably test it with Page Speed or a similar tool, in case you overlooked something. – Finecut

Answer 2

If you use dev tools, for example in Chrome, you can see the number of requests and total transferred data under the "Network" tab. To accurately replicate the experience of your users, you should do this with an empty cache - "Incognito" or "Private" tabs can be a great way to do this in most browsers. It's also worth remembering that the experience when testing locally will be drastically different from that when the effects of latency and upstream bandwidth come into play.

Be extremely careful about assumptions regarding users if you want to maintain usability. "Good enough" is extremely contextual, it may be "good enough" for a user on a desktop, laptop or premium tablet on a solid DSL connection - but anything but on a Edge or 3G connection on a phone. Wherever possible assumptions should be backed up by analysis of user agent strings from server logs, or from analytics software such as Google Analytics. It's also worth remembering that you may have relatively few mobile or tablet requests, not because mobile or tablet users don't want to visit the website - or choose to visit using another device, but because it is difficult, slow or even impossible to use on their device of choice. This case study from an engineer at YouTube illustrates how customers were being completely excluded from the site.

In general the page should be as small as possible, and you may want to look at lazy loading in addition to optimisations, which will help initial rendering time - in fairness though your estimated size is not much larger than the internet archive average page weight of 1681kB as at January 15th this year. Don't forget that other resources can also use a lot of space - JavaScript makes up 274kB of that average - and it's not clear if you have factored that into your estimate. Aggressive use of caching will help return visitors and minimise the data transfer required in these circumstances.

I always try to consider if you can justify the page weight cost against functionality. What is the objective of visitors to your site? Does the added functionality or imagery help this sufficiently to justify the performance cost. Many performance orientated developers are now actively setting a page weight budget but this is harder for single page apps where you cannot be as granular with resources.

Amok

yeah thanx for the good advice! the website loaded on mobiles and teblates will wel way smaller. – Undesirable

@Undesirable I'm glad you found this answer useful - I've added some more information which may help you assess the impact of the page size. – Amok

Answer 3

I would recommend using Image Pre-loading which can help your page loading times, even when its large.

Eudocia

I slightly disagree. Preloading is used when you need to have images in memory that are not visible on the page (but will become so at some point). In fact, they eat additional bandwidth. – Finecut

Mobile users might hate you. ;o) If they have a limited network plan, you will blow their limit with images they will probably never see. – Fluidize