Video of a presentation looking into average page weights of the modern web. Text version here. I loved watching this and it has inspired me to look at stripping some weight from some recent projects that I have worked on.

The Website Obesity Crisis

Apparently, there is a website obesity crisis (video here) and the average mostly-text site is now 2-3MB in size. To be honest, I can’t say that I’m shocked. Disregarding the advertising and surveillance bloat, which is the main culprit for the ever increasing page sizes, I think the proliferation of modern CSS and JavaScript frameworks have to take some of the blame.

I work with a lot of CSS and JavaScript frameworks and they are all pretty hefty. I would imagine that Twitter’s Bootstrap is probably one of main culprits of the current obesity crisis, and I’m as guilty as the next web designer for using it. The problem is, when you’re faced with a large workload and short deadlines it’s just too damn convenient.

I started using Bootstrap when I started at my current position. The project which I used it on was a replacement to a decaying Intranet. At the time, I figured page weight was irrelevant as the Intranet was served over our local network. To be fair, this is still the case and it’s nice that I don’t have to worry about how big the page sizes are, but the project is an edge case.

The problem is, once you start using a framework like Bootstrap and investing time into it, it is difficult to resist using it for other projects. More so when you apply the external pressures of deadlines and clients. To be honest, I’m pretty sure the client’s don’t care, they’re ignorant about such matters, but I care. So, I’m going to revisit some of the projects where I have used Bootstrap and attempt to remove it.

One site that I won’t have to revisit is this one, because I wrote all the CSS and JavaScript myself. I tested a random page on this site using Chrome’s inspector and it came in at 216KB, which I’m pretty happy with.