Grow your CSS skills. Land your dream job.

Poll Results: Ideal Page Size

Published by Chris Coyier

Over 14,000 people responded to this poll in which I asked "What do you think is reasonable page size to try and stay under for a modern web design?"

Here's my simple attempt to make the results visual:

The most popular opinion was that 500k is a good size to stay under with 22% of the vote. Very few people responded saying over 1 MB. The heaviest three weights offered (1.5MB, 2MB, and over 2MB) combined only garnered 13% of the vote.

Another way to say it: 87% of people think websites page size should be 1MB or under.

For the record, CSS-Tricks (at the time of this writing, v9) is about 750k on a fresh load (average 3 seconds), and about 100k on cached reloads (average 1.5 seconds). Times based on my pretty average broadband connection. I'm fairly happy with that. Although I think it's heavy for mobile and if I had more time I'd find ways to optimize that.

It goes without saying that the lower the page size, the better, as that's less information that needs to travel the networks and your page will load faster. But of course how fast your page loads has many more factors than page size alone. Number of requests matter greatly, like reader basitian said:

I dont think its only a question about page weight. From the technical perspective you should at least take the weight AND number of requests into account.

How quickly your server can serve them and how fast the internet connection of your user of course matters too. Remember to think about how your personal internet speed rates compared to others worldwide (assuming worldwide is your audience, which is probably is if it's a website). Jan-Marten de Boer says:

In most country areas in my country, a DSL speed of only 500kb/s is the norm

Earlier in this article I wrote that my broadband was "pretty average". In running a quick speed test, I'm getting 21MB down and 6MB up. That's 40 times faster than Jan-Marten. That's an eye opener, eh?

How the page loads is another consideration. Read this comment by Mike Hopley in which he lays out four scenarios of how a 10 second page load might go down. There are good and bad ways, the best of which is where after the first second passes, the text content of the page is ready to consume, and further loading of the page doesn't scramble things around. Jake Archibold puts it another way: "The time it takes for the page to load isn’t the real issue, it’s the time it take the page to deliver what the user wants."

Lara Swanson of Dyn shares the same sentiment. She thinks 200k is a more reasonable goal and also that the document complete time is more important than the complete page.

I don’t really care about async code that renders after the document completes and I also won’t care about assets that don’t block a user from being able to read and use a page.

I'd say the best practice is just to do the best you can on all fronts and try to make them better any chance you get. Reduce the page size. Combine or reduce requests. Juice up your server and use a CDN. Make sure your loading process is clean without too much reflow. Lazy or asynchronously load as much as you can.

To wrap up, there are some interesting averages compile by Sreeram Ramachandran of Google in 2010 (4.2 billion sites analyzed):

44 requests per page
7 scripts
3 stylesheets
29 images
320k total page size

Full, real time results for this poll and all post polls are in the polls archive.

Comments

  1. Permalink to comment#

    There is more to a pages speed than just assets as well. In addition to slower browsers, there are also slower computers and phones that take longer to sort through all the CSS styles and Javascript code.

    I still think that 100kB or less is ideal. Just because us “web designers” taking this poll have nice computers with fast connections – doesn’t mean our audiences do.

  2. Permalink to comment#

    @Xeoncross – 100KB is completely unreasonable. If you are designing something there’s simply no way to keep it that low – unless you want to throw images out the window.

    @Chriscoyier – remember for the speed test that megabits [Mb] (which the speed test results give you) are smaller than megabytes [MB]. 21Mb = 2.625Mb. I think Jan-Marten de Boer was referring to the speeds he actually sees when he’s downloading things.

    • Rob
      Permalink to comment#

      Nonsense. One can design beautiful websites with NO images, if one was so inclined. Weighing your pages down with images doesn’t make you a better web designer. Good design is invisible, and if images are increasing page load times, then that is just plain bad design.

      I am a graphic designer by education, and I use images very sparingly in my web design work, and will continue to do so until bandwidth is not an accessibility concern. My pages very rarely exceed 100KB, and one would be hard pressed to say that they aren’t well designed.

    • Vivek
      Permalink to comment#

      I agree with rob..you can discard many image if you use css powerfully as used by chris..Very nice job chris..This poll has given interesting results..

    • Permalink to comment#

      @Rob – I’m not saying it’s impossible, I’m saying it’s unreasonable.

    • Freddie B
      Permalink to comment#

      Sorry, I can’t agree with you on this. I ALWAYS keep my pages below 100Kb (in fact, I try for 50 Kb usually), AND I’ll have 6 to 8 images on a page. I haven’t changed my page building technique since the days of dialup connections.

      My Internet speed is the fastest I can possibly get, 3.9Mbps and that is faster than most of rural Australia, where most of my clients are and where most of their customers are.

      On my connection I don’t bother to wait around for a page that is slow to load

      People on fast connections get a bonus when loading my sites, they are almost instantaneous and I’m sure it’s appreciated.

  3. Kyle
    Permalink to comment#

    In my opinion slow loading sites are annoying. Optimization should always play an important role when it comes to the design.
    What good is a great design if your audience isn’t going to stick around to watch it load?

  4. Thank you very much for this survey. I find the results very interesting. I believe that, in addition to “reasonable page size,” you should have asked survey respondents the speed of their own Internet connection. (I personally get about 700kb/s down on my home cable connection and 1.5kb/s down on my 3G phone.) I suspect that there’s a strong correlation between what one considers to be a “reasonable page size” and the bandwidth that he/she has available.

  5. Permalink to comment#

    500KB! It wasn’t long ago when you when the standard was supposed to be 1/10th of that.

    • Permalink to comment#

      Yeah, but the web uses lots of more and heavier code now :) And the expected computer specs are a lot higher.

    • cnwtx
      Permalink to comment#

      I have 650 kbps down / 320 kbps up. The only other option where I live is 26 kbps (dial up).

  6. Permalink to comment#

    @TheDoc your site contains only 54kB yet is still well designed. My site contains no backend code at all (entirely Javascript based) yet it’s only 92.7 kB with jQuery. 100kB is perfectly attainable with light image use and sprites. Only heavy Javascript applications or photography sites need to go above a few hundred kB.

    The other 95% of sites that all all content-based are fine with 50-300kB of assets.

  7. Permalink to comment#

    How do you manage to make your pages so *incredibly* fast? It’s really well done, crew! CSS-Tricks runs very smooth on my 1.8 GHz, 1.25 GB ram iMac G5 with an farily bad internet connection. Very impressive!

  8. Permalink to comment#

    I wrote an article about the importance of HTTP requests, ( http://wp.me/p1SZlG-3c ) might make another good informative poll to see people’s thoughts on them.
    Personally, I’d rather have an extra 500 kb size than an extra 15 HTTP requests.

  9. I know it’s not exactly on topic, but here in Australia I, and many others have a down of 150kb/s and up of like 50kb/s.. So yeah when you said average that’s what I expected!

    • I thought only we, in India, get such poor speeds and still call it BroadBand :)

      The top speed that I get here, one of the most modern cities, is 2Mb (real download speed around 200 kbps). My site loads in 2 sec if tested using tools based in the US. However, google page speed shows an average time of 100 sec (!!) because most of the traffic comes from people using slow connection, even dial-ups.

      So the internet speed at the end user’s machine matters a lot. Keep optimizing…

  10. If we say under 100k pages are impossible, it’s because we’re putting ourselves first (i.e. making design the priority). If we put users first (i.e. ease of access to content is the priority) then under 100k pages are easily possible.

    • Permalink to comment#

      This is true, but I would also argue that most people do appreciate a nice website. And most people relate better to images, and images take up a lot of space.
      Websites used to be just text, which worked for that (brief) time period, but nowadays people want more, and more means bigger. Think of all the image intensive websites like Flickr, where their home page alone has 300k of images. It’s just no longer ideal to make such ‘text alone’ websites.

  11. Permalink to comment#

    If you’re using Google Analytics, include this in your tracking code:

    _gaq.push(['_trackPageLoadTime']);

    …and you’ll have a sampling of your page load time in the Analytics dashboard. Every 20 requests or so a sample is made, it is really powerful to see page load times across geographic areas.

  12. Over 2MB? It’s not a serious suggestion by 7%? I would say 200-300KB are good for users (desktop and mobile). But except widgets! ;o)

  13. Permalink to comment#

    21Mbps down is certainly not average. ;-) The most common broadband speeds in Canada are 10Mbps down (cable) and 6Mbps down (ADSL). Speeds faster than that are definitely available, but the average household doesn’t subscribe to them.

    Me, I have a 10Mbps down theoretical connection that speed tests seem to indicate is more typically 6-ish Mbps. Yuk. ;-)

    I love how your polls always seem to generate more discussion than conclusions. ;-) No sooner are the results out than somebody points out that heavier pages that are optimized might still load more quickly than small pages that are not! Of course it’s too hard to create a poll that can cover everyone’s cases (“what is an acceptable page load time” would still run into the “according to what standards in whose country?” confusion).

    “How many HTTP requests on a page is acceptable?” then gets turned upside down by asynchronous vs. synchronous requests, using CDN for certain resources, etc etc.

    Ah, performance…

    I do think this was a good poll, though. No matter what, and no matter how many HTTP requests, surely we all have a threshold for size above which we start to feel uncomfortable. Thanks for sharing the poll and results. ;-)

  14. Permalink to comment#

    This is useful information. Then it is also very important to take several steps to the site loads quickly. I’m interested about this, and I enjoy it. You can look at my site, i wrote the first manual. It is written in Czech, but I hope it is not a problem. You can get it through Google translate. Let’s make web faster :).

  15. Zsolt
    Permalink to comment#

    Your internet connection at worldwide is pretty good. In my country, the average is about 5 Mb/s (=125 kbps). The best connection you can get here is 25 mb/s. (double-dsl) All of my family and most of my frends uses 5 Mb/s lines.

    Mobile internet is even worse, it has a docs with 7 Mb/s speed, but if you make a speedtest it’s about 2Mb/s. We often use mobile internet at homes too, becaouse the wired one is much more expensive.

    And it’s near to our cuntry’s biggest city. A stat company says that in our country, the 80% of internet connections is below 2Mb/s.
    Of course in the city centre there are better lines (even 120Mb/s) but for most peoples there aren’t any better than DSL.

    So, do you even think, that 750kb is not much?

  16. Have to agree with the majority, 500k seems to be the sweet spot. Especially since most viewers want the information as quickly as possible while looking nice, which can be achieved with a decent broadband connection.

  17. Permalink to comment#

    I think I’m one of those who voted for over 1MB: what is the purpose of the site?
    If you are running a photography website it would be next to impossible to achieve <500k per page (no, smush-it is not an option in my view as the output looks botched to me).

  18. The discussion is pretty good!
    @Ferdy : thanks for that line of code!

    I agree with the results but as Matteo suggested, some websites with heavy contents like photography sites, galleries are almost impossible to create below 500k.

    And, I’m glad that all of you guys have higher Internet Bandwidth than in my area. Lately, some ISPs have started providing Optical Fiber that provides max 5-6Mbps down but the most common in practice in my country is 256Kbps. I use 1Mbps speed internet line!

  19. @Pk_ld
    Permalink to comment#

    Thx for these POST and comments.
    I just wanted to mention one more thing about “loading time”. Brandwidth is money costing for Google. So, the more it takes to load the pages (more than 2sec), the less Google will crawl them and refresh the results in Google Search. A good loading HOME page for example, is one of the best practice to put in the #SEO safe kit.

  20. I wish I would read this article before. Does page load speed affect SEO??

  21. Does page rendering affect SEO? Of course. This has been known since the 1990s. See Jakob Nielsen

    http://www.useit.com/alertbox/9703a.html.

    But rendering time, as has been mentioned by others, is more than simply page weight. HTTP calls (javascripts, @font-face, pre-loading videos) often delay page rendering far more than the page-weight.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".