Technologies HTML 5, jQuery, LESS, CSS, animations, .NET MVC
Categories Development, SEO, Optimisation
During my time working at Capital on Tap I took on the task of reworking the company’s homepage which led to improved load times, a cleaner mobile experience, and an overall improvement to the user experience. It also provided Capital on Tap with an easily maintainable front-end code base.
It was also the project which allowed me to kick off the Capital on Tap internal CSS library.
The website was only a month or two old and had only just introduced the new company branding. Upon taking on this project I set myself a few goals:
- Reduce page load times
- Improve the mobile and overall user experience
- Structure the site to improve not only the SEO but the maintainability
After reviewing the code for the public site, I decided it would be best to write it from scratch. I started off by structuring the site based on the original content. Doing this allowed me to clean it up and remove a lot of the HTML, which was not required.
Once the base HTML was complete, I moved onto the styling. By using a ‘mobile first’ approach, I was able to prevent unnecessary code loading when on a mobile device. I had been developing a responsive LESS framework which used a variation of the ITCSS methodology (introduced by Harry Roberts) in my free time. The framework was ideal for this build.
Over the four days I spent working on this project, I managed to achieve the goals I had set myself. The site worked as expected across all screen sizes and orientations, and load times improved from 12 seconds to an impressive 300ms!
The re-working of the code made the site not only quicker but far more maintainable. The CSS file size reduced from 243kb to 57kb, this was due to optimisation of the CSS and removing repeated styles. This optimisation and ‘DRY’ mentality saw the CSS drop considerably to 1,007 from 2,342 rules!
These changes also improved the overall experience for users, which meant Capital on Tap saw fewer users leaving the site, an increase in application conversations and users were able to find the information they wanted quicker.
“Alan delivered us into the world of preprocessors (LESS/Sass) and started the cleanup of our webpages making them much smaller, much faster, and easier to maintain.” Julian Guppy, CTO Capital on Tap