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