19

When I say size I'm talking about bytes not pixels.

I'm curious if there is any consensus on what the maximum size should be for various categories. Specifically:

  1. Broadband connections
  2. Dialup connections
  3. Mobile connections
Abe Miessler
  • 82,532
  • 99
  • 305
  • 486
  • 5
    This is highly subjective, one size won't fit all. I'm trying to keep web pages under 5kB (including markup, excluding external css and images) with around 2-4kB of css, script-free, and flash-free. Another 20-40kB max for images. This is kind of unrelated to the user's internet connection, because a) you can only put so and so much sensible information in to a page, even if the user had a 10G connection, you couldn't send him more and b) nothing sucks more than web pages that take forever to load. – Damon Jun 21 '11 at 18:50
  • @Abe, are you concerned with something in particular or asking out of curiosity? I don't think it's anything to worry about in practice. If you're output is really monstrous, there's definitely something wrong. Users on dialup are used to waiting :) Also, web pages are usually tiny compared to the other things we download like applications, images, video, etc. – Wesley Murch Jun 21 '11 at 18:58
  • The issue is that I have a navigation system that could potentially have thousands of nodes (each node is a div with a little text). Only 10 or so would be displayed at a time, but all are rendered onto the page with most being hidden. I'm trying to figure out if this is an OK approach or if I should be using AJAX or something to pull in navigation items as needed. – Abe Miessler Jun 21 '11 at 19:05
  • @Abe Miessler: If you have 2 different approaches and want to know which is more performant, run a test :) – Ryan Doherty Jul 01 '11 at 01:25
  • Yet another question that can't be migrated to [the correct SE site](http://webmasters.stackexchange.com/) because of a bounty :( – Ben Voigt Jul 01 '11 at 01:36
  • @Ryan, yes I could do that but it would require me to write two very different applications. In addition, when I ran them it would show me how quickly it runs on my blazing fast work connection. – Abe Miessler Jul 01 '11 at 16:14
  • @Abe: I'm pretty sure you could whip up prototypes for both approaches. Also, there are apps and tools to limit your internet connection speed. – Ryan Doherty Jul 04 '11 at 19:36
  • @Abe, Ajax sounds like a practical solution. You could lazy load the nodes like the tree in [Ext JS](http://dev.sencha.com/deploy/ext-4.0.2a/examples/tree/reorder.html). – David Jul 07 '11 at 08:14
  • [This very similar question has already been answered.](http://webmasters.stackexchange.com/questions/568/if-a-page-takes-too-long-to-load-after-how-long-will-a-user-give-up-and-re-load) – Ben Voigt Jul 01 '11 at 01:42

6 Answers6

17

Size isn't everything. What matters is performance. Better even: perceived performance. There are many ways to make a website feel faster than it really is. Some of these techniques can even increase your absolute page size in bytes (e.g. adding more javascript logic to it).

Test your websites with a tool like Yahoo! YSlow and stop focussing on page size. That's just one factor of website performance and not even the most important one.

Sander Marechal
  • 22,978
  • 13
  • 65
  • 96
6

Depending on the connection you want the page loading in as less time as possible. Less than 4 seconds is optimal.

"A study conducted by leading web traffic controller Akamai Technologies revealed that a poorly designed website loses a full 30 percent of its customers within a few seconds. The same study also found that if a site takes longer than four seconds to load, 75 percent of viewers won’t bother to return to it." http://www.ianbrodie.com/get-clients-online/lose-website-visitors-in-5-minutes/

More important than size is following some simple rules and best practices.
Best Practices for Up Your Web Site
http://developer.yahoo.com/performance/rules.html

So a rough estimate would be 

Broadband connections   ~200K
Dialup connections      ~50k
Mobile connections      ~100K
rqmedes
  • 540
  • 2
  • 14
4

limit 10 TCP packets (~14 kb)

Due to how TCP estimates the capacity of a connection (i.e. TCP Slow Start), a new TCP connection cannot immediately use the full available bandwidth between the client and the server. Because of this, the server can send up to 10 TCP packets on a new connection (~14KB) in first roundtrip, and then it must wait for client to acknowledge this data before it can grow its congestion window and proceed to deliver more data.

Due to this TCP behavior, it is important to optimize your content to minimize the number of roundtrips required to deliver the necessary data to perform the first render of the page. Ideally, the ATF content should fit under 14KB - this allows the browser to paint the page after just one roundtrip. Also, it is important to note that the 10 packet (IW10) limit is a recent update to the TCP standard: you should ensure that your server is upgraded to latest version to take advantage of this change. Otherwise, the limit will likely be 3-4 packets!

https://developers.google.com/speed/docs/insights/mobile

Community
  • 1
  • 1
Fatih Hayrioğlu
  • 3,458
  • 1
  • 26
  • 46
1

Depends on the page really. If your page is an informative one, you'll have lots of HTML (text) content. But if your page is more graphical (like a store department page showing images of products), you'll have lots of images.
Images are much heavier than text (a single image could be 50K, which is like 10 pages of text).
You also need to consider the size of CSS files, javascripts, etc. But they're cached so they only matter for the initial 'load'.
Having said that, you could set a target of 100-200k (mixed text/images) max per page. More than that and slower connections will take a while to load.
Most probably you don't know who's going to visit your page (mobile, broadband or dialup), so you should try to reach a common ground (or design different pages for different targets, but this is a pain to maintain in the long run as your site expands). I think 100-200k is ok for most cases.
If you have pages that are necessarily big, you can still achieve this, there are several tricks you can use, like image compression (using 90% quality JPGs), javascript/ajax to load content on demand, minifying the files (CSS, javascript), using site compression (gzip), etc.

Rodolfo
  • 4,155
  • 23
  • 38
0

Your 'maximum' size really depends on a lot.

Your audience:

  • What type of connection do they have
  • What load time are they expecting
  • What content are they expecting

Your content

  • What content are you trying to present

The functionality

  • How does your site load the content
  • Do users need to move through the site and fetch multiple pages regularly or are there large pauses before they move

For any site though, keep your page as small as possible. Good design is about taking things away until you're left with what you need. The base HTML should be a few kb, the CSS a few kb, and if you're loading scripts and images load them last.

With a smaller page, your site loads faster, which means your users feel more engaged and your page gets indexed better.

Response times for users: http://www.useit.com/alertbox/response-times.html

Response times for google: http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html

djlumley
  • 2,955
  • 2
  • 24
  • 30
-1

Generally, simply go with common sense.

For example, you might want to embed some information so that the client isn't overburdened.

iliaden
  • 3,791
  • 8
  • 38
  • 50
  • You cannot determine the connection that the user is using. thus, you generally assume the worst. You have to rely on common sense to guess the acceptable amount of time a page should load. – iliaden Jun 21 '11 at 18:48
  • 1
    I think OP is not talking about external resources, but the size of the page itself, but I could be mistaken. – Wesley Murch Jun 21 '11 at 18:50
  • the only factor that is affected is the load time of the page. Thus you assume the worst case scenario (depending on the target customer, something between dsl and 56k) - and evaluate the maximum page to be loaded within a reasonable amount of time (I would recommend ~15-30 seconds maximum) – iliaden Jun 21 '11 at 18:52