Your Website is Too Damn Big

According to HTTP Archive, websites are approaching an average of 2MB per page. That's nearly double the average from just two years ago. I have some ideas why and how you can fix it.

Aug 2012 vs. Aug 2014

Type20122014Change
HTML48K58K+21%
JavaScript217K295K+35%
CSS39K54K+38%
Images694K1176K+69%
Other *18K131K+627%
Total1,105K1,855K+68%

* Custom fonts and vector icons seem to be most of "Other"

But what's to blame?

The three bigges are:

  • Images: most likely due to retina displays, web developers are under more pressure than ever to keep the eye candy pretty at an additional average cost of nearly 500K per page since 2012.

  • Custom fonts & vector icons: also due to retina displays (and to a lesser extent mobile devices), these techniques (e.g. icoMoon and SVG glyphs) are super cool but come at an additional cost of over 100K per page.

  • JavaScript: making things fly around and generally look cool is awesome, but the cost has risen another 80K per page on average since 2012.

The common trend here is to make websites super cool; not a shocker, really. That desire isn't ever going to trend downward.

Are we better off today than 2012? Like 100% better?

My question is: are the big websites you visit every day faster, more fluid and more interesting than in 2012? What about your website? If you're like me, the answer would be "um, maybe?"

3 Ways to Cut the Bloat

Reduce image sizes

Consider not having a carousel or any other giant "slice of life" billboard image taking up half the screen. Maybe replace it with simplified illustrations and clever CSS-based layers.

  • CSS Tricks have a nice tutorial on using SVG graphics and layering them with CSS to cover a lot of space (even for retina displays) with smaller image sizes.

  • If you need convincing or want help convincing others, check out Should I Use a Carousel (hint: "no, not ever").

Slim down custom fonts and vector icons

Do you need the entire unicode set for that font? Are you only using a dozen icons from that 900+ free icon font you threw up on the server?

  • Parallax have an excellent tutorial in their blog for reducing font glyph count by hand and with automation

Look past the page load speed

Load metrics don't tell the whole story. You might be getting the same score as you did two years ago, but what about all that content you're now loading asynchronously?

Sure, it keeps your initial load time low, but you aren't fooling any users who are trying to scroll through your page, only to have it mysteriously adjust their scroll position as new content loads in.

  • Maybe an infinite scroll isn't the way to go. Maybe your page doesn't need rotating banner ads. Executed badly, it's a frustrating "when will this damn page finish loading" experience for users.

  • If you're using jQuery, you owe it to you and your company to look into more modern and slimmer approaches. And no, I'm not thinking of Bootstrap or any other jQuery-based framework. Hell, your website might not even need a JavaScript framework at all.

Question

Is your website too big? What's your favorite way to fight web bloat? What would you rather download for 2MB?

Endorse davebalmer on Coderwall submit to reddit
comments powered by Disqus