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