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.
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.
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 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.