As you know we've recently launched our new responsive website. One of the aims of the new website was to improve our speed which is a major factor that google take into account in their Page rank algorithm.

After the development on our new website we where shocked to find that our mobile score was in the low 30s and the desktop not faring much better.

We spent the next couple of days working through the google recommendations.

Minify CSS, JS

We we're already doing this step and had set this up during the development of the website. We combined the sites CSS and JS into single files and minified the output. The tool we used to do this was Laravel Elixir.

Optimise Images

Our new website was designed to be quite image heavy. Reducing the overall size of the pages whilst keeping the quality of the images was a big concern. Having tried many solutions we settled on a tool called ImageOptim for the Mac. ImageOptim allowed us to process and optimise images before putting them into the website via our CMS.

Leverage Browser Caching

Larvel Elixr to the rescue again. We had put off caching our JS and CSS files for longer than a couple hours to a day as the website was still in flux. We were making changes on a rapid basis adding new work / sections and tweaking css choices that didn't quite fit when we added our latest content. We now cache JS and CSS for 1 year thanks to the versioning features of Laravel Elixir.

Minify HTML

We looked around for a PHP Library that would automatically minify the output of our pages. We tried a couple of solutions and after reading around we came across a method that members of the Laravel community recommended highly.

The solution was to minify the pre-compiled cached Laravel views. To achieve this we wrote our own Laravel Elixir Extension / Gulp Task that put each of the cache files through the Node.js library htmlmin. To automate this process we setup a cron job on our server that would check for new templates and minify them for us on an hourly basis.

Reduce Page Blocking JS & CSS

This was the hardest recommendation to put into place. Our initial tactic was to include CDN versions of jQuery and Bootstrap as we felt this would improve the load time over hosting ourselves. After comparing performance we took the decision to include jQuery and Bootstrap in our CSS and JS minify task. We were left with 2 blocking javascript files an 3 blocking css files this is where the fun really began.

The blocking Java Script files included our own all.js file and the Google Maps API script tag. I looked around at different methods for making these scripts non blocking. The options included writing some inline JavaScript that would create script elements and load in our code on page load or adding the keyword defer to the script tags which would defer loading of the scripts until the page had rendered. We decided to go with the defer method as the code looks much cleaner and achieves the same results. That left us with 0 blocking Javascript files.

The 3 blocking CSS files included various google fonts used throughout the design and our own all.css. We also found a mystery Roboto Google Font appear that was being included automatically via Google Maps. To remove this unwanted font we added the following code into our JavaScript Codebase which simply prevented the font being linked to.

We tried to a couple of things to remove the remaining blocking CSS files only to run out of time and needed to move on. This is an area of the website we will be revisiting very soon to get our score higher. Currently we stand at 70 / 100 Mobile and 85 / 100 Desktop not a bad improvement for a couple of hours work.