Optimisation

03.06.2014


Chris Alwin James

So the site's been running for about two months now.. Wow it's funny how time goes. Learnt a few interesting things along the way thanks to some turn of events.

One day, about a month ago, I randomly started getting emails from my server host that my output bandwidth was quite high, a lot higher than I had set as my standard. Was quite worried and started jumping on to see what was going on. I then realised that one of my friends (who's 21st birthday I captured) shared her event page from my site on Facebook.

This resulted in about 800 people jumping on my website in about half an hour, all viewing images from her 21st, as well as other events I had shot. That's when it started to hit me, I needed to improve performance.. badly. And boy, was that the start of an obsessive ride! At the time:

  • the images took a while to load. Hence the web experience was slow for people.. (and still many people decieded to wait it out! I was quite surprised.)
  • my server took quite the hit trying to serve all these images out.

So I started working towards improving server code performance, image storage and serving mechanisms (the cache is your friend!), as well as better client side browser rendering.. The last one was particularly important in my case as I was building a site heavy with images. (Image resizing is an fps killer...).

All the while, I'd also been looking at ways of re-writing some of my JS, to make some modules a smoother experience for the users. I've always enjoyed the parallaxing feel on sites, and so implemented one of my own, but with the inital amount of "jank" I had, I could hardly say it was as smooth experience as it's meant to be. Took a lot of learning about JS DOM manipulations and their respective costs, and also neat tweaks to tap into 3D acceleration. :P Oh translateZ() you magical thing.

I've realised that a lot of the bottlenecks come from the DOM querying.. so I've minimised those as much as possible. Also CSS animations using Transforms rather than modifying the padding or margins. This proved quite effective. :) Another day, another lesson. :)