Re-building the Yoomee website

by Amy Benson
Posted on 13 February 2015
read time:

It's a bit of a truism in the web development world that your own website is the one you devote the least care and attention to. While this doesn't entirely hold true for the Yoomee website, it's a nicely designed site with good UX, there were some elements that clearly needed improvement.

As part of my interview for the job I had to critique the site. Which I did (Quite a lot. Perhaps a bit excessively. But they still gave me the job, so that's ok. Phew). A couple of months later when I started work at the company I was given a project to rebuild the Yoomee site in Rails 4 and incorporate our inhouse CMS. This would give me an opportunity to start to learn Rails, but also to put my money where my mouth was and fix the issues I'd raised in my interview.

The main focus of my critique had been front-end performance. Running Google PageSpeed Insights showed poor performance, especially on mobile, so my primary aim was to improve this by improving the CSS and Javascript used on the site.


Reducing the bloat

The CSS on the old site was pretty bloated, weighing in at 313kb. Running an analysis tool* on it showed several indicators of poorly organised, inefficient code: there were 2647 CSS rules, 161 unique colours, 31 media queries and 694 !importants.

Looking through the code it quickly became clear that the main culprits were Bootstrap and jQuery UI, both of which were included in their entirety. Quick improvements were got from removing these and re-including only the parts of them that were necessary.

I also took the opportunity to restructure the CSS and try to remove some of the 'divitus' that can be caused by prototyping in Bootstrap. I did this by:

  • Using BEM to structure classes (and to help me think of names for them)
  • Splitting the view templates into smaller partials
  • Splitting the Sass into smaller partials and structuring the sass folder to match the view folder
  • Adding variables for colours, font-sizes and z-index - having these defined in separate files makes it much easier to keep track of how many you're adding and keeping them consistent
  • Adding some helper mixins, e.g. for font-size (rem with a px fallback)
  • Added auto-prefixer

The results of this were good:

  • stylesheet file size reduced from 313kb to 73kb
  • number of CSS rules reduced from 2647 to 1275
  • number of unique colours reduced from 161 to 38
  • number of media queries reduced from 31 to 4

and, my personal favourite:

  • there are now 0 uses of !important

There's still more that could be done, I'd particularly like to look into inlining the critical-path css and loading the css asynchronously, perhaps with the Filament Group's LoadCSS.

Untangling the Javascript

There was a lot of javascript, in one big blocking file in the head. Unfortunately, due to the dependencies of the CMS I couldn't get the file size down but I have moved it to load at the end of the file so it no longer blocks the rendering of the content.

I also restructured the JS so instead of a single file with all the custom JS in, it's split into individual files per piece of functionality, each of which is written in a simple module pattern. This will make it easier to change an debug in future.

The results

The PageSpeed scores are greatly improved, from 57 to 89 on mobile and from 79 to 95 on desktop. This should result in the site loading faster for users, especially on their first visit.


* https://github.com/katiefenn/parker/

Posted on 13 February 2015 - By Amy Benson
Share this post
blog comments powered by Disqus