The real world costs of an heavy website
November 30th 2009
You often read about why you should keep your web pages as light as possible to be quick to load. While all of this is true, there’s also a very important reason why you should keep your web pages as light as possible and that’s regarding bandwidth costs.
We often take for granted unlimited bandwidth and that all of this is free, but it’s not and a change as small as an additional image in your page can have a big impact. at the end of your month.
It’s true that the bandwidth cost is quickly coming down, but when building websites for your clients (or yourself) you should always try to keep your pages as light as possible.
Disclaimer: I didn’t (obviously) take caching into consideration.
What about numbers
To demonstrate what I mean, I’ll use my current hosting as an example. I currently have 250 gigs of bandwidth a month and I get about 100k pageviews a month. With an average pagesize of 175k that mean I approximately use 16gig out of my 250 available. Nothing to be scared of, look like I won’t need to upgrade anytime soon. Also note that exclude all my projects download, which cost me another 15 gigs a month.
So as you can see, I could get a lot more views and my page could be a lot heavier and this wouldn’t be a problem. But still, add 75kb to my average page size and this suck around 7 gigs of bandwidth which at some point might save me from upgrading my servers.
It’ll take me a long time until I need to upgrade my hosting. I’d need around 1.5 million views to break the 250 gigs a month. But then again, my website is fairly small and if I ever reach that number I’ll be more than happy.
What about the big boys?
You know the kind of website where users click around like crazy, the kind of websites that get around 100k views a day (3millions/month) and when you start playing with those kind of numbers you really gotta start considering optimizing your page size not for the end user but for the person paying the bills.
As you can see a change as small as 25k can make a pretty big difference in the end. 70+ gigs is not a small number and that can mean a service upgrade if the bandwidth is not available.
What about Google?
Just for fun now! According to alexa.com, Google gets about 620 millions visits a day. That’s quite a lot of hits. I built the graph using their homepage size.
As you can see a tiny kilobyte can cost them 600 gigs of bandwidth, for a single day. I often hear people complaining about how their homepage is so plain. I think these numbers alone can explain why Google don’t use much images in their design.
Bottom line
When building a website, might it be for me, friends or clients, I always try to keep that in mind. Big players made some moves recently to cut down on bandwidth. You might remember MySpace disabling the auto play on their music player, not only did they save big on wasted bandwidth they also saved us from going crazy trying to find where that frigging music was coming from. Vimeo also did something similar by disabling the auto play on their video player.
Remember that you can nearly always save some kilobytes here and there and they are easier to find that you might think.
New website launched!
November 28th 2009
I’ve just launched my new website design. I want to say a big thank you to my friend Marie-Anne (http://turkoise.ca/) who took the shitty design I tried to make and made it pretty.
I completely change the way I display the information on the website and my plugins are now an integral part of the website instead of looking like another website.
I’ve been working on it for the past 3 weeks so that explains the lack of updates on the plugins. Don’t worry I’ll get working on them as soon as I feel like my website is solid enough.
I finally made prettySociable the official sharing tool on the website. Just hover the post thumbnail and you’ll be able to share it in all the main social websites. Head over prettySociable projet page if you want to use it!
Since I redid pretty much everything, you might see some bugs/glitch here and there, feel free to report them!
How do you guys like it?
prettySociable
November 17th 2009
prettySociable is a jQuery plugin that tries to make sharing fun while being easy to use. It was inspired by the sharing on mashable.com.
While ShareThis and AddThis provides a very useful piece code that allow users to share basically anything everywhere, their solution is not the prettiest nor the easiest to use. prettySociable simply asks the user to drag the items he wants to share onto the website he wants to send it to.
The code is fully customizable, either from the CSS, or through custom settings you can set upon initialization.
prettyPhoto
November 17th 2009
prettyPhoto is a jQuery based lightbox clone. Not only does it support images, it also add support for videos, flash, YouTube, iFrames. It’s a full blown media lightbox. The setup is easy and quick, plus the script is compatible in every major browser.
It comes with useful APIs so prettyPhoto can be launched from nearly anywhere (yes, that includes Flash)!
prettyMobile
November 17th 2009
It’s no secret anymore, everyone wants an iPhone/iTouch compatible website. While pretty much every website works on those devices without any code modification being needed, that doesn’t mean it’s the best it can be.
prettyMobile is an iPhone/iTouch website development toolkit. It provide you will all the basics you need to make a mobile version of your website. It makes extensive use of CSS transformations making sure the animations will be as smooth as they can be. Plus, it’s only 13kb gzipped and minified.
It’s packaged with a CSS to give you the look and feel of a native iPhone/iTouch application but by loading your own CSS file you can really give it the look and feel you want.
prettyPopin
November 17th 2009
prettyPopin is a jQuery plugin that serves as a modal box. It is easily customizable and proved a lightweight solution to quickly and easily display content in context. It provides a nice way to display simple content or simple forms.
prettyCheckboxes
November 17th 2009
prettyCheckboxes is a jQuery plugin that replaces the boring and plain default browser checkboxes with custom checkboxes. It is lightweight and highly customizable so you can get it to look exactly like you want it to.
Plus you won’t loose any of the default behavior, this way you ensure you site remain accessible.
prettyGallery
November 17th 2009
prettyGallery is a nice an lightweight slider for jQuery. It just takes standard list items and slide them with a nice paging.
The goal is for you to skin the list the way you want it to be display, then apply prettyGallery on it so it takes care of all the javascript needed to slide the content.
prettyComments
November 17th 2009
prettyComments is the solution to textareas that are always the wrong height.
As the user enters content, le textarea expand so all the content is visible at all time. This way you ensure you comment box look pretty upon page load and that your users will be happy as they enter content in it.
Give it a try, it’s worth it!
This tweet got me thinking.
November 16th 2009
Today James Padolsey posted something quite interesting on his Twitter account that got me thinking:
Wondering what the client-side would be like if there were multiple languages, not just JavaScript…
Not only it got me thinking, but it also scared me. The way it works now is, you download a browser, you deal with what technologies comes bundled with it. It may be CSS3, ECMAScript 5, HTML5, every browser support the standards they want to a certain extent. Some does it well, some suck at it (don’t think I need to drop names!).
If you take a look at the “back-end” side. Depending on the technologies you want to use, you just need to install the proper libraries on your server in order to feed it properly to the web browser. YOU decided what you feed and how you feed it. Every time a new programming language emerge, you can start using it and be sure that everyone coming to your website will be able to see it as long as your webserver is setup properly.
And that’s what so “complicated” with front-end. You just don’t know who will come on your website and what they’ll be using. You totally depend on browser penetration.
Why I got scared?
Remember netscape 4, the <layer> tag, IE6 just to name a few?
In the current state of things I don’t think it’d be a good thing to add another language.
In the past, and even today, we’ve often been held back by older browser. Not because they suck, I think they were perfectly fine for their time, but because people were slow to upgrade. It can be the IT department that don’t want to go through the pain of updating all the employees computers or the users that are not aware enough, the end result is still the same, we need to support them until they die.
However, I think that sometime soon browser vendors AND users will be saavy enough to understand it is important to keep their browser up-to-date. Then we’d be able to take advantage of a new emerging client-side programming language since the adoption would be fast and widespread enough for us to use it.
But until then…I’ll be scared
What’s your view on the subject?