10 Drastic Ways to Avoid Website Obesity

Contributing Editor
This entry is part 4 of 4 in the series Reducing Page Weight

Reducing Page Weight

Webpage weight-loss diets are tough. You can implement some quick fixes. Perhaps you’ve taken tougher action such as optimizing your CSS and JavaScript. But all your great work is thrown out as soon as your boss/client demands yet another shiny new widget, frivolous social networking button or wacky font.

Unfortunately, diets often have limited benefits. Drastic lifestyle changes, on the other hand, can ensure your site never becomes obese. Several of the suggestions below are controversial and won’t be for everyone but, at the very least, I hope these make you more aware of page weight issues…

1. Never trust third-party code

Would you grant an unknown developer unfettered access to your website code? If not, why are you trusting third-party code? It’s easy to add useful widgets to your page and it’s rare they’ll compromise security. That said, always check what resources they’re pulling in. For example, social network buttons can add half a megabyte of content, making your pages slower; can you do without them?

2. One JavaScript library is more than enough

Perhaps you’re using jQuery. That’s fine — stick with it. But don’t then browse the Prototype or YUI plug-in libraries looking for cool widgets and effects.

You should also consider more extreme options:

  1. Can you obtain a custom build if you’re not using all features provided in a library?
  2. Are there lightweight alternatives, such as Zepto.js or Minified.js which provide API-parity with core jQuery methods?
  3. Is a library required? If it’s primarily being used to smooth over browser inconsistencies, perhaps those issues no longer exist. Are you using a library because it’s familiar and comforting?

3. Beware of CMS templates

Few Content Management Systems generate overweight pages … but then you start adding stuff.

A free or commercial template can make financial sense. Why employ a developer when off-the-shelf code does everything you need for a few dollars? They can be ideal for simple brochure sites, but there’s a hidden cost. Generic templates must sell hundreds, if not thousands of copies to recoup the development effort. To attract buyers, developers bundle every feature they can; you may only use a fraction of them but they still exist in page code.

Perhaps I’ve been unlucky, but the WordPress themes I’ve experienced often weigh in at more than 2Mb. I’m sure there are lightweight options, but finding one is another matter.

4. Cut the framework fat

Boilerplate frameworks such as Bootstrap and Foundation are useful for prototyping or as a starting point for a new project. Unfortunately, like generic templates, they come with CSS, JavaScript and other resources you’ll never need. The HTML also tends to be fairly verbose and littered with unsemantic class names.

Personally, I prefer the lego-like modular approach in web development (that’s classic lego blocks rather than the packs that limit you to building one specific thing). You start with nothing and add required components. Frameworks are more like sculpturing in marble; you chip away at the parts you don’t need until the site’s complete. That’s what should happen — but it’s easier to leave stuff in.

I’m won’t say “don’t use frameworks”, but be aware of the additional bulk they carry. A tool such as grunt-uncss can help remove unnecessary code but never adding the framework code in the first place may be preferable.

5. Embrace progressive enhancement

The term progressive enhancement has fallen from favor, but that’s essentially what you’re doing in a mobile-first responsive website. In essence, you’re creating a basic usable experience with enhancements as the browser supports or requires it. A simple example: you can reference a large image in CSS when a desktop screen media query is triggered — most modern mobile browsers will not request the file. You may be able to enhance this further using conditional JavaScript loaders and the Network API.

Progressive enhancement rarely incurs significant additional effort; it’s a development approach rather than a technology.

6. Adopt a build process

You should ensure you’ve done everything to reduce image, CSS and JavaScript files prior to deployment. This can be a manual process but automation tools like Grunt.js and Gulp.js can make it reasonably painless.

7. Know thy code

CSS and JavaScript preprocessors such as Sass, LESS, Stylus, CoffeeScript, TypeScript and Dart may have revolutionized your productivity and workflow. However, the source is abstracted from the final generated code. Preprocessor output is only as good as the input and it’s possible to programmatically add thousands of superfluous lines unintentionally. Therefore, always check to ensure the output is efficient.

8. Consider the offline AppCache

Web applications have the ability to work offline using the the HTML AppCache. It’s possible to use the AppCache to supplement or enhance browser caching of regularly-used assets.

9. Simplify your site

During the past few years, web sites and applications have eschewed complexity to provide a streamlined, customer-focused experience. But not everyone got that memo and, admittedly, simplification can be tougher than it sounds. Many clients are wannabe software designers and add frivolous features because they:

  1. mistakenly think more functionality attracts more customers,
  2. consider they’re getting better value for money from their developer, and
  3. they don’t know any better.

Fortunately, a little user testing can help you identify never-used options which can be ripped out of the product or replaced with sleeker, lightweight alternatives.

10. Change your development lifestyle

Who’s to blame for the average webpage reaching 1.7Mb? Developers. It doesn’t matter how or why a website became obese; a developer let it happen.

Of course, development speed and cost-cutting is important — but not if the result is a slow, clunky product that’s never used. Your client/boss may not understand the technical issues but, if you don’t highlight potential pitfalls in layman’s terms, you’ll never become a conscientious coder earning the respect and rewards you deserve.

Lightweight pages are a direct result of efficient coding practices and should be an important consideration for any project. Unfortunately, accomplishing this is often pushed into the “do it later” bin along with content, SEO, and usability testing. My suggestions:

  1. It’s easy to forget bandwidth issues when you’re sitting on a fast 50Mbps connection. Limit connectivity or try loading your site in an area with poor 3G reception or on a busy hotel wifi network. Your frustration could be experienced by thousands of users every day.
  2. Consider page weight in every project and question every asset added to the page. Is that font necessary? Can you reduce background image dimensions? Could CSS3 animations replace that JavaScript library? etc.
  3. Change your attitude. Webpage obesity is an epidemic but it’s evident few developers care. Creating slimline pages is a valuable skill that will help you stand out from the crowd.

I hope you found this series useful. Best of luck with your new weight-loss regime!

Reducing Page Weight

<< 10 of the Best Web Page Weight Analysis Tools

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.sovainfotech.com/ Sova Infotech

    Hello Craig, found this article incredibly useful but can you please tell me what is the ideal weight of a website?

    • HenriHelvetica

      Sadly, I don’t think there IS an ideal site weight. Most will simply say: as light as possible. I too struggle with this as sometimes, you want to make a burger w/ cheese, bacon AND a rich dressing. But you have to figure out when you absolutely need and go from there… But there are interesting times. I just made a micro site that came in semi – but it had to be media rich.

      • http://www.sovainfotech.com/ Sova Infotech

        @HenriHelvetica:disqus agreed! Most websites point out that sites need to be made as light as possible but we are seldom acquainted about the ideal weight.

    • LouisLazaris

      @SovaInfotech:disqus I agree with @HenriHelvetica:disqus to some degree. You might also find this post helpful:

      http://css-tricks.com/poll-results-ideal-page-size/

      Which shows that many people thing about 500KB is a good size.

      • http://www.sovainfotech.com/ Sova Infotech

        @LouisLazaris:disqus Thank you so much LouisLazaris for the link. It was really helpful

    • Craig Buckler

      I agree you should make it as light and fast as possible. To some extent, it also depends on your target audience; even 500KB could be clunky on a slower mobile connection.

      • http://www.sovainfotech.com/ Sova Infotech

        @Craig Buckler Thank you so much for illuminating on the ideal weight.

  • http://sonnha123.blogspot.com/ sonnha

    very useful article

  • omid

    we may don’t need some technologies if we can do it manually such as jquery(for some effects),fat frameworks!
    we are developers and we can do something as good as these web technologies :)

  • Mario Strada

    I can build very lean and very quick sites and templates. However, I have to use CMS and templates that are poorly optimized and add widgets and gadgets etc. for some very simple reasons: My clients want their toys on their sites and have a limited budget.

    If I were to write everything from scratch, build every app on my own and pretty much follow the advice therein (which I am more than capable of doing) each and every one of my site would double in price and would take me much longer to develop. Plus, as far as 90% of my clients would be concerned, there would be no difference, no advantage for them (of course, we know better, but explaining it alone would take me an hour or more that no one is going to pay me for).

    If I am developing in WP and I find a perfect widget to do a task, it takes me 15 minutes to install it and configure it. While to write it may take me at least an hour and often more.
    Then I find another widget written with a different framework. Of course I would rather have a single framework,. but I also know that my client is not made of money and he is not going to pay me for the extra hour it may take me to either find the widget or write it.

    And when everything is said and done, unless I comment every single line of code, I will deliver something only I can work on. Should I be hit by a meteorite, my client will find that anyone else he is going to hire will have to spend several hours reverse engineering what I did. While when using established frameworks, be it CSS, Joomla, WP my client can easily find affordable, competent people to work on their sites should something happen to me or even just if they don’t like me.

    I work for my clients, not for some idealized concept of what a website should be or because I can die happy knowing my code was a clean and light as a whistle.

    I appreciate good code as much as the next guy, but we all have to cut corners in order to accomplish what we need to do. If that wasn’t the case, we would all be driving Ferraris and Lambos, but we buy Toyotas because that’s what we can reasonably afford.

    Likewise, many of my clients can only reasonably afford websites that are built upon third party code, bloated frameworks and so forth.

    • Craig Buckler

      To summarize your comment: it’s OK to do a half-arsed job for clients who don’t have a reasonable budget. Fair enough. Many cut & paste coders make money doing just that.

      Personally, it’s not for me. I want to do a great job and charge accordingly. If the client can’t afford it, I can either scale back their requirements or suggest they look elsewhere. I don’t need to prostitute my professional integrity!

      Remember we’re not talking about creating everything from scratch — just a little care and attention. You don’t need to build a new CMS, but you also don’t need to use a bloated theme or widget.

      You are baking cakes using packet mix. They won’t stand out from others and will never look or taste as good as those lovingly crafted by a master baker. Will you still want to eat corner-cutting cake next year? What about in ten years?

  • Mehile Orloff

    “sculpturing”? Oh, bless your heart :) My father-in-law is blind, so his education was a little atypical. As a result, there are more than enough “Mike-isms” to fill a dictionary or two … in two languages :) Of all his “customized” words, “sculpturing” is by and far the one that sticks with me the most. Any article that amuses me is a good article! Keep up the good work.