Peter Keating

Developer from the New Forest in the South of England.

Speedy Gonzalez!


Just settling down ready to watch one of the best races of the Formula 1 season at Monaco. It really is the most exciting race even though it features the least amount of overtakes. The speed and precision the cars go around the narrow streets is so impressive. This week has all been about speed for me as I have started cycling to work. Obviously no where near the speeds of a Formula 1 car but I have thoroughly enjoyed cycling to work using my boss, Dan's bike. I am quite a competitive person and I have been using Endomondo, a free GPS tracking app to time my commute. Over the week I have enjoyed trying to beat my personal bests from & to work, and have successfully managed to shave off 6 minutes over the week. I have enjoyed cycling this week and going to continue to do so and look into getting my own bike. If you have any suggestions on a good bike to get then please tweet me.

At work this week my focus has also been on speed, specifically page load speed as I was tasked with optimizing the Moov2 homepage. We took the current state of the home page, which on first visit (no cache) would yield around 50 requests of around 675k. My task was to improve the load speed, the key to doing this would be to reduce the number of requests and decrease the total request size. The 50 requests are for resources such as style sheets, JavaScript files, images and AJAX requests. So what I had to do was to compress the CSS, JavaScript and images as much as possible and load it all in as fewer requests as possible.

Both the CSS & JavaScript can be concatenated into separate minified files which will reduce the size of the files and the number of requests to retrieve it. I used the build script that I created for dotnet-mvc-boilerplate that is heavily influenced by the ant build script from h5bp. So that was all I could really do with the CSS & JavaScript so the focus moved onto the images which took up the majority of the requests.

In the ant-build-script project on h5bp they use optipng & jpegtran to shave KBs off the images. I added these tools to the build script for the Moov2 homepage, however the decrease in size didn't really have much of an impact on the size of the images. My focus turned to trying to reduce the size of the largest images, which made up the client showcase. Dan suggested converting the images from PNG to JPG which dramatically reduced the size of the image without loss of the quality. Optimising the images however wouldn't reduce the number of requests. Sprite sheets can be used to hold multiple images in a single image and then use CSS to in order to manage what is visible on the page. You may think it could be a bit of a pain to create a sprite sheet, but thankfully there is a great online tool that not only gives you a sprite sheet of your uploaded images but also the required CSS. I decided not to use sprite sheets for all the images on the website due to maintenance could become a nightmare in the future when changes occur as the CSS needs to be pixel perfect in order to show the correct section of the sprite sheet. I am planning on writing a blog post about the process of implementing sprite sheets into your website. Another reason I didn't use a sprite sheet for all the images is because a some of the images are responsive and need to scale down for smaller screen sizes.

For some of the smaller icons I use data URIs in order to load images with the document, which decreases the number of HTTP requests. The reason I only chose the smaller images was because I didn't want the size of the base64 string to have a dramatic effect on the size of the CSS file. There is an online tool that allows you to upload an image and will output the base64 string that needs to be added to the CSS or img tag. Although in Chrome the data URIs are still considered as a request, the speed of the request is 0ms.

To assist me with the task of optimising the Moov2 website I relied heavily on the brilliant PageSpeed developer tool by Google. PageSpeed analysis the URL input to give guidance on which areas can be improved broken down from high to low priority. Also a score is given to the URL out of 100, it is said that it is impossible to get a score of 100 unless you have a blank document. When running the Moov2 website through PageSpeed it highlighted some high priorities related to leveraging cache, gzip inflation and image optimisations. Leveraging cache was a simple task of changing the website configuration so the static resources are cached for 30 days using max-age. Enabling gzip inflation was simple thanks to IIS and Scott Hanselmans excellent blog post on enabling Gzip compression. It is definitely worth putting your website through PageSpeed just to see what it suggests as page speed is as important as ever with the ever increasing use of mobile to browse the web.

Unfortunately we are doing some changes to Moov2 home page so these changes aren't live at the moment but hopefully won't be too long till you can see the result. I will spoil it for you now though! The update will reduce the number of HTTP requests to 27 and the total size of the request 295k with a page load time of 1.43 seconds (was 3.6 seconds). Big congratulations to Mark Webber who won the Monaco Grand Prix by a narrower margin that the new load time of the Moov2 website.

Back to Posts

-->