Why Page Weight Still Matters

The dark and mysterious Internet overlords decreed a commandment at the dawn of the Web. All of us followed the rule: thou shalt not create web pages that exceed 50kB in size.

This was understandable back in those unenlightened times. The majority of Internet users had dial-up modems and broadband was an unobtainable dream. Few developers dared go above 100kB, even when fast connections became a reality.

We rarely worry about page weight today. We may use CSS sprites and compressed JavaScript libraries, but only when they’re practical (indeed, do they really make a difference when we fill our pages with 57 Flash adverts?).

But should we care? I recently had the opportunity to work away without a laptop or reliable wifi coverage. Fortunately, I had my trusty Nokia with E/GPRS to help me stay in touch. It’s not 3G, but I didn’t mind waiting for what I thought would be a few extra seconds for pages to load.

fat-laden web pagesBoy, was I wrong. Although email remained usable, accessing the majority of websites was painful. Many pages approached an obese 1MB in size and took a minute or two to appear. I even began to understand why Apple banned Flash — anything that can slim down pages will improve browsing speeds. Perhaps they even considered blocking CSS and JavaScript.

Approximately 10% of Internet users still use dial-up services in the west. That figure is unlikely to drop rapidly; many will be light users or unwilling to pay for a fast connection. There’s also a percentage of users who are unable to access broadband because they live in a remote area.

There’s little need to worry about that 10%, because it’s unlikely to consist of users who are shopping online or using web applications. However, there are two sectors of the community that will experience exponential growth during the next few years:

  1. Internet users from Asia and Africa. Dial-up access and slow broadband will remain prevalent until telecom infrastructures receive a boost.
  2. Those using mobile devices to access the Internet. Connections are improving, but 3G is typically slower than broadband speeds. Besides, the majority of mobile users are either paying per byte or using devices without 3G.

Internet demographics are changing. Although PC/broadband still dominates, the real growth areas are smaller devices with limited processing power and slower connectivity. In the US, mobile data now exceeds voice traffic and Google is predicting that the days of desktop computing are numbered.

It is possible to create a low-bandwidth or mobile version of your website. It may sometimes be impractical or cost more to do, but there are few excuses for not trimming the excess fat from your pages. Reducing page weight makes your application faster and saves hosting costs.

What do you think? Should developers still be concerned about page weight? Should we strive to save every byte? Or are fast connections so ubiquitous there’s little need to care about it?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.mesmerlab.com/ MesmerLab

    Bandwidth = server cycles = power.
    Lower page weight = greener computing.

  • madr

    Some of my employe’s client are in the News section. Some of the sites I work with have about 3-4MB of data to download before finishing the homepage.

    Luckily, they are offering mobile versions as well. But a mobile version is not forgiving the fact that their site is a fat pig.

  • http://www.tyssendesign.com.au Tyssen

    I still go to some efforts to make sure images are optimised (including using sprites), included files minified, CSS optimised, markup minimised and other methods as recommended by the experts in the field (e.g. Yahoo Developers Network), so no, I don’t think fast connections are so ubiquitous as to obviate the use of these techniques. As you point out mobile users’ experience should be of concern, though I will admit that for most of the work I do, the rise of Internet growth in Africa & Asia doesn’t affect me.

  • http://pixopoint.com/ ryanhellyer

    50 kB is kinda small, but I’d have thought keeping it under 150 kB would still be a good goal for all web developers. My own home page is up to something like 400 kB now which is grossly oversized. Shrinking it is on my every growing todo list!

  • http://www.optimalworks.net/ Craig Buckler

    @madr
    3-4MB? Wow. The Firefox download isn’t much more than that! Do you know why it’s so large? Adverts? Multiple JS libraries?

    @Tyssen
    Keep an open mind to trading in Asia and Africa. The market potential is huge. If you could sell a 10c widget to a billion Chinese users you’d never need to work again!

    @ryanhellyer
    50KB is tight and, even 10 years ago, most home pages were double that. But external files are cached so your images, CSS and JS should not need to be reloaded again during a visitor’s session (although that’s not always the case on mobile devices).

  • http://www.tyssendesign.com.au Tyssen

    If you could sell a 10c widget to a billion Chinese users you’d never need to work again!

    Most of my clients are local small businesses selling services, not products, and have no interest in targetting business outside the state, let alone overseas. But I’m not saying I’d ignore those markets if the opportunity ever arose; it’s just not the way things are going for me at the moment.

  • human abuse

    Unless human start understanding the value of resources, the behavior would not change. Not all users are smart to see possible size of site, it should become mandatory to show page size certificate before a website (just like security browser preferences). So if user chooses uptown 500kb data per page, it’s uptown website owner how much content to show.

  • http://www.weboffspring.com nliokal

    An optimized site, either in page size, code formating or architecture never goes out of style. The faster connections had the same impact to web sites as the faster processors had to desktop applications. Why optimize when you have the proccessing power or the bandwidth to handle messy code or huge images, flash all over the place and 10 javascript libraries at the same time?

    I think mobile browsing will put things under perspective… cause it is a pain to load a 2MB homepage on the go… and the percentages of mobile surfers keep rising… so if we want to keep them… we will need to make things a little bit better… and faster and page sizes a lot smaller.

  • ANON

    Don’t forget about your client either. Heavy pages incur storage costs and count against bandwidth limits. For small companies, that’s a real consideration.

    And why should bloated pages be acceptable under any circumstances? If we want a speedy web, it’s at least partially up to us.

  • Justen

    Yeah I’ve had the misfortune of being stuck with a dialup connection for the last 6 months while living out in the country (satellite internet is a scam, long story). I’ve found that most of the web is unusable in those conditions, or at least extremely frustrating to use. Even in broadband page weight can matter, though – I don’t know about you, but I am much more pleased when a page loads instantly than when I am stuck waiting a few seconds (what am I paying for 27mb bandwidth for if you soak it all up and give me a dialup experience?) Granted much of the delay these days is felt due to the server and not the pipe, but writing efficient, lightweight code and using cleaner, saner design still helps in that capacity.

  • Anonymous

    I think page weight matters. For the Sitepoint audience, this may be “preaching to the choir”.

    I suspect a large percentage of web page publishers may not know more than the framework or rapid application development environment they were given. In which case, why learn more?

    “Why should I CSS? I just click, highlight, and click.” Ie. it’s cheaper not to learn more.

    With respect to fat pages, aside from bandwidth, I believe the lack of concern for page weight is a symptom.

    Sometimes it’s necessary, but not always.

    For my personal use, I have shifted most writing tasks to an HTML format and/or a text editor, Komodo Edit or Wordpad. Oddly, I find skinny pages more portable, reusable, and cheaper to maintain.

    I think it’s more than fast connections. Content and purpose sometimes read better with a “less is more” approach. Like the icing on a cake.

    Good topic. Thanks.

    Have a nice day.
    Brian

  • EvilDog

    Even if a person has a high speed cable connection, this doesn’t mean that your webpage is privy to 100% of that bandwidth. Other things in the background are just as likely sharing the user’s connection (torrents, rapidshare, email, streaming video, other webpages, games, etc…) It is a mistake that you can count on your sites pages loading quickly just because most people have high speed internet.

    With this in mind, the equation “faster loading pages = higher visitor retention” still applies.

  • Oriel

    as a user and abuser of the internet who lives in a remote area I protest this statement “There’s also a percentage of users who are unable to access broadband because they live in a remote area.

    There’s little need to worry about that 10%, because it’s unlikely to consist of users who are shopping online or using web applications.

    Simply because I live in a remote area my internet connection is a vitally important part of my life – and shopping online is not the least of my worries. Im also IT support for a couple of websites. The internet reduces the tyranny of distance for those of us who have chosen to live out our lives “far from the maddening crowd”. Unfortunately we are not yet seen as an important market because now more people live in cities. As fuel prices rise and local (remote area)stores put up prices to uneconomical levels for normal residents AND as the population of internet users age “Online shopping” is going to become the way of the future. Developing a method of keeping a web page as light and as interesting as possible is STILL very important. The fact that we do have more time does not mean that we enjoy the nail biting, stomach ulcerating experience of watching an image heavy “Designers Delight” slowly unroll and flicker into life in front of us. We pass on to other things if it takes too long. That item that might have been bought from a flashy site; if we could access it; is bought from the simpler outlet a little further on.

  • madr

    @Craig Buckler
    Most of the size cost is increased by the flash ads, sometimes there is about 70 of them.

    In Sweden it is also common to get third party ads from a common source, which tend to be quite big sometimes (the biggest I known of was 1.1MB).

    A movement about education in the ads sections in the media houses have begun though – finally. There are a lot of work to do for us, but the end users will be much more pleased.

  • ronroush

    When I started my current job, the internal web site was painfully slow. Page loads often took 20 or more seconds. The company was in the process of purchasing a new 8-core server (about $100K) as the current 8-core server was running at 95% busy. We reworked the HTML, making sensible use of CSS and were able to get page times under 2 seconds, provide more features, and reduced server load to 40% and saved $100K in the process. Efficient pages save measurable money.

  • Oblongpeg

    In Australia, as soon as you are out of the central hub of major cities your wireless is down to dialup speeds.

    These people do use the internet for shopping, information and such.

    Unless they have a sattelite option, they tend to steer away from online shops that cannot give them a reasonable load rate. I therefore try to keep my page sizes down by using less image dependent layouts, compressing thumbs, using lightbox for improved product image blow-ups, not using flash and restricting the amount of items on a page.

  • http://www.webbuild.co.nz fisherboy

    Finally, someone makes sense on this issue. There is nothing like roaming the world and using your Smartphone, only to find the page you’re visiting is 400KB at $30/MB.

    I know a large New Zealand farm supply company, most of their users are on dial-up or the creakiest form of broadband and their home page is over 800KB.

    We should automatically minimise page sizes because we don’t really know who is visiting!

  • Chris Hansen

    I’d like to contest one statement in the article:

    There’s little need to worry about that 10%, because it’s unlikely to consist of users who are shopping online or using web applications.

    In my experience with rural users (most of whom are on dial up) they use web applications and shopping online as their primary use of the computer, even over email. Applications for Facebook, banking, government services, etc. and shopping allow the rural and remote user to save a LOT of time and money in transportation and provide a far greater selection.

    Catering to that 10% will provide a better application for the other 90%.

  • http://www.lbrbsolutions.com Dorsey

    Thank you all for saving those precious resources for me to use. That said, none of our online registration pages exceed 50Kb, probably because we don’t publish ads or use flashy graphics.

  • http://www.ita.com.au minutes2memories

    i’ve worked on the net since australia had just a 2mbps link to the rest of the internet so i’m continually having to retrain myself to think in sizes a magnitude larger than our old modem-based net and 486 pcs would allow. but still and all i think weight still matters. in my broadband world, be that desktop or mobile device, i now expect pages to load almost instantaneously, or at least seemingly so. there’s typically no reason why this can’t be the case for any given site or page. checking out the source code of sites in need of jenny craig usually shows a dependence on bloated development tools and quite often a lack of understanding of the craft itself…..

  • http://www.mikehealy.com.au cranial-bore

    Page weight certainly matters. When browsing with Firefox I’d dread opening a Smashing Magazine page, which are usually over 1MB and would slow everything down. With a 1.5mbit connection I still feel the weight of heavy pages, and I bet there are many people with connections slower than that.

  • Steven Clark

    We need to appreciate that mobile and small devices are our market audience (if we’re in business)…

    Every dollar you let slip to your competitors because “they get it” and you “don’t get it” means a potential nail in your business’ coffin in several years time. Your competitors are capitalising on your inability to respond to the external environment changes.

    Also, consider taking it a step further. Knowing you have the ability to access and influence and interact with people in context (using their handheld devices) – what is your strategy to turn that into an income? Seriously. You don’t want to be they people who only make websites for desktop computers and keyboards, right?

  • Tim

    That burger looks nasty! There should be a DI% (daily intake) rating for web pages listing their “fat” content comparative to your connection speed :) I’m sorry, this page is 97% of your connection fat intake and is liable to induce callouses on your fingers from drumming on the table while waiting for it to load.

  • http://gainingaccess.net hunterpaw

    I agree that many web sites are memory hogs. But while some companies can afford to develop for mobile devices, in this economy it is too expensive and time consuming for many businesses to try to make the company web site fit the multitude of devices that exist today.

    “Google is predicting that the days of desktop computing are numbered.” Only in their dreams of world information domination.

    Most businesses are not about to get rid of the desktop computer anytime soon. The internet is not safe enough, it is not reliable enough, it is not fast enough, Google apps cannot begin to approach the quality and power of desktop apps, laptops cost more than desktop computers, and they are too easily lost or stolen.

  • OsakaWebbie

    One more reason that it matters, which may not have been mentioned, is the bottleneck at the servers. Some of us have to develop on a budget, using shared hosting services. Most such hosters squeeze zillions of users on one server, at the same time offering unlimited or almost unlimited disk space which encourages users to not worry about how bloated their sites are. The worse that situation gets, the more important it is for me to keep my pages slim in order to squeeze through the bottleneck. (Of course, if everyone else on my server also learned this principle, it would be a beautiful thing!)

  • CmdrDick

    What’s wrong with having a mini version of your pages that will be sensible on a cellphone. Only the young have enough eye-power to try to do any real business staring at a 3″ screen. Maybe a new URL spec could be written where mysite.com becomes mysite.mb for mobile use. The programmers should also get real about what it’s like for the over 40 crowd to try to decipher the itty bitty screens. Try reading your screen from a full arms length away and remember that you will fill our shoes sooner than you think.

  • thejackel

    I’ve always considered the page size when developing websites and try to stay around 100kb. It’s more important today than ever before to keep page size down due to the multitude of smart phones available and the amount of people connecting to websites over 3G.

    I think the rapid growth in Javascript frameworks has added to the average page size over the last few years. This is why I like to develop my own Javascript code so I can include only what is needed in my site and keep the page size down.

    Well done on brining this subject up, I think over the last few years many developers have cared less about checking the final size of their pages and consider it not to be an issue any more.

  • Integralist

    What annoys me is that we are graced with all these useful CSS2/3 selectors, but yet if we use them we are told that browser performance is affected.

    What’s the point of having selectors that locate all types of elements/attributes if we’re told it is best to use the plain jane #id & .classes to help speed up performance (I don’t want to have to add a .class to the first paragraph of the main content area – just so I can style up the intro paragraph of text – when you can just as well use “#id-of-content-area p:first-child”).

    Very frustrating as it’s not 100% clear whether CSS selector performance is actually an issue worth worrying about or not.

  • http://www.optimalworks.net/ Craig Buckler

    @everyone who commented about the “there’s little need to worry about that 10%”.

    I was referring to the proportion of people who are unlikely use broadband because they’re light Internet users and cannot justify the cost. I’ve heard developers argue against supporting dial-up users because they’ll never use the applications they’re creating.

    However, it’s another issue for someone living in a rural area with no/slow broadband. Those people are in the same situation as mobile users and trimming web page fat will help them immensely.

  • Stevie D

    @hunterpaw:

    I agree that many web sites are memory hogs. But while some companies can afford to develop for mobile devices, in this economy it is too expensive and time consuming for many businesses to try to make the company web site fit the multitude of devices that exist today.

    No-one is suggesting you should develop a specific site for mobile devices. What matters is that you ensure your website is as accessible and usable as possible. If you’re willing to sacrifice most of your potential customers who are using mobiles or slow connections, and you’re happy to put up with the higher costs of hosting and serving heavy pages, rather than spend a little bit of time and effort slimming down your pages so that they use the best practice that they should be using anyway, that’s a pretty odd set of priorities.

  • http://www.optimalworks.net/ Craig Buckler

    @Integralist
    With regard to CSS3, it would save time, effort and bandwidth if we could use some of the more advanced selectors. There’s nothing to stop you using them, but they won’t work in IE. If IE’s important, you need to start applying classes to ensure the styles work.

    That’s annoying, but I really don’t think it’s a major culprit for page weight. I’d be amazed if it added 5Kb.

  • http://www.brothercake.com/ brothercake

    Absolutely – being restricted to CSS1 selectors does end up making stylesheets bigger than they would be with more advanced selectors. To give a simple example, this:

    ul > li { margin-left:10px; }

    Is obviously less code than this:

    ul li { margin-left:10px; }
    ul li li { margin-left:0; }

    But who is it who’s saying that CSS2 selectors affect browser performance? I’ve never heard that said, and it sounds highly dubious to me.

  • XLCowBoy

    Excuse me western people, but in the “emerging markets”, they’re already rolling out >8mbps ADSL, and even 100mbps fibre optic connections.

    The slowest “emerging market” connections I’ve seen are around 120+kbps. On a mobile-based connection.

  • dsi

    @Craig Buckler

    I even began to understand why Apple banned Flash — anything that can slim down pages will improve browsing speeds.

    I hate to beat a dead horse here but…

    Apple banning flash for reasons of file size is ridiculous. They might as well ban large images too (see http://images.apple.com/home/images/ipad_hero_20100403.png on apple.com – 372.1KB right there…and they update the main image on there homepage frequently).

    I would not blame blame flash in and of itself for file size issues with pages. It is the person building the site and their poor decisions that lead to the bloat. You can optimize flash just like you would optimize images, css, and javascript for low bandwidth operations. Singling it out is extremely unfair and shows a lack of evaluation/understanding of that technology’s capabilities especially when you also mentioned nothing about image optimization which is probably where a lot of bloat is coming from in the first place.

    I understand and agree that there is a lot of bad flash stuff out there that it is programmed very poorly and that it my upset a lot of people, but it isn’t necessarily the tools that are the problem here, it is the people using them. People can misuse all sorts of things, flash just happens to be one of them.

    Just for thought: An example for you is if I load a website on my iPod Touch and it takes forever, do I say that my iPod is the problem, or should I say it’s the website I loaded. All fingers should be pointed back to the developer, not the medium. And in a lot of cases the developer chose the medium too.

  • http://www.optimalworks.net/ Craig Buckler

    @dsi
    I’ve nothing against Flash and do think Apple should permit it on their devices. However, stopping Flash blocks many adverts, can drastically reduce page weight, makes downloading quicker, and makes Apple’s devices appear to run faster.

  • dsi

    @Craig

    All true statements Craig. It is a shame that flash has been so embraced by advertisers over other mediums. But cutting ads out in general would also help in reducing bloat. However, you would also be cutting out a revenue stream. You are just more likely to catch ads by removing flash because, as you said, many are created with it. So by Apple cutting them out from being loaded, Apple is potentially cutting out revenue to people’s sites (depending on their tracking and reporting of their ads). This is still an area where I feel flash is neutral to the bloat. You could just as easily have a animated .gif that is just as annoying, with fewer colors and isn’t able to reuse any of it’s assets over multiple frames making the .gif less efficient then flash in a lot of cases.

    After rereading your initial statement in light of your response, I apologies for my comments being directed at you and not stated in a more general way. I just don’t feel that bloat is an area in which flash in particular is at fault. Has Apple cut it out? Sure. Is the a page with less content smaller in file size? Usually.

  • ricktheartist

    I do everything I reasonably can to reduce page weight – a faster site leads to more happy users, no matter what speed they are connected with. I optimize all my images, and try to find ways to use css instead of images where possible.

    I also optimize my css by removing any unneeded characters – technically it becomes less readable, but I have been doing ti so long, I am used to it now. (Example, when I write this css rule: #task-list > li > a { font-weight: bold; } I write it as #task-list>li>a{font-weight:bold}, which eliminates 9 bytes. That really adds up with multiple hundreds of css rules.

    Overall speed is on my mind all the time at work, and page weight is a big factor.

  • http://www.optimalworks.net/ Craig Buckler

    @dsi
    Flash technology isn’t the problem — it’s the applications it’s used for. You’re right that animated GIFs could also be used for adverts, but they seem to have fallen out of favor — probably because of their limited palettes and (often) larger file sizes.

    But you’re right about Apple — they are potentially cutting people’s revenue streams. Will we see advertisers switching back to static images and GIFs as their devices become more popular?

  • Domus

    Faster websites also can have better ranking in Google (new this week).

    The majority of websites are location specific. If I were developing websites in Africa then I would make them quite different than I do here in California.

    Apple doesn’t support Flash because they are trying to strong arm people into using Quicktime. Reminds me of another company trying to force users to use IE. thing is, Quicktime is too tightly licensed to ever be really useful. Maybe Apple should make something Open Source (yeah right!).

    As bandwidth increases Flash will become more prevalent. If not that then Silverlight will fill that niche.