After launching my first project at Clearleft, I revisited the site to see how I could improve its performance. This week I’m sharing some quick wins that I have learnt and used to shed a significant number of bytes and HTTP requests on silverbackapp.com.
The average web page weight is still increasing and was recently reported at just under 2MB, with over half of this being images. It’s not news that we need to take care of how we treat images online. As a result of this exercise I reduced the size of silverbackapp.com from 544kb and 17 requests, to 395kb and 10 requests. Losing around 40% of requests and almost 30% of it’s original size.
Image compression
The site uses several PNG files for transparency. While PNG is a lossless format retaining a high level of detail, the trade off is file size. To compensate for this I ran the images through ImageAlpha, which reduces file sizes by applying lossy compression and converting them to a PNG8 format. The tool provides a useful preview window of the image as you reduce the number of colours. This made a huge difference to the images on silverbackapp.com. Most of the images were reduced by over 50% of their original sizes without compromising on quality.
It didn’t stop there. I reduced the image sizes further using ImageOptim . This is another extremely useful app providing compression optimisation and removing unnecessary data. One of the great things about these apps is that they do the job with minimal time and effort. They are free to download and work simply by dragging and dropping images into their windows.
Data URIs
While silverbackapp.com was enjoying the benefits of SVGs and newly compressed PNG files, each image was linking to an external file and therefore creating separate HTTP requests. Multiple requests isn’t ideal, so I found the solution in data URIs. They provide a more efficient method of including images by embedding data directly into the document. This removes the need for the browser to fetch external resources. It’s very simple to implement. Data URI generators create the code from an uploaded file. Then the code goes in place of the image source. I managed to drop seven HTTP requests using data URIs — 40% of the original number.
Further considerations:
- Data URIs are supported in IE8 but not below.
- Data URIs don’t have to be images, they can be any resource.
- The size of the embedded code is around a third bigger than the resource itself, which can be offset by including GZip compression.
Useful tip!
The Chrome extension for PageSpeed Insights provides really useful tools for checking page weight. If you’re checking the number of requests in Networks tab, be sure to hide data URLs also. Otherwise the result displayed will not consider data URIs. To do this, click the filter icon at the top left and check the box ‘Hide data URLs’.
This isn’t the end of the page weight diet for silverbackapp.com. I have a list of improvement ideas to tackle during my next period of down time and I’m sure more will come up in the future. For example, the h1 is the only element that requires one particular font-family. This font-family makes up almost 20% of the overall page size. To me it seems like overkill to include an entire font for just one word. Since it’s not possible to choose specific letters in this case, we have been thinking of alternatives. Perhaps I could create an SVG image including alt text for the h1 instead. On the other hand, there are trade offs to adding an image in place of the title text. I feel like there is always more to consider. Reducing the weight of web pages is rather addictive!