Why focus on website performance?
If you run an ecommerce website, page performance should be one of your top priority as realized by retail giants indicated in this blog
- Walmart found that:
- For every 1 second of improvement they experienced up to a 2% increase in conversions
- For every 100 ms of improvement, they grew incremental revenue by up to 1%
- Shopzilla speeded up average page load time from 6 seconds to 1.2 seconds, and increased revenue by 12% and page views by 25%.
- Amazon increased revenue by 1% for every 100ms of improvement (same as Walmart).
- Yahoo increased traffic by 9% for every 400ms of improvement.
- Finally, Mozilla got 60 million more Firefox downloads per year, by making their pages 2.2 seconds faster.
Now that we understand the importance of page performance lets look into some techniques we can use to improve it.
Eliminate Unnecessary Downloads
While this might seem an obvious item, it is a common occurrence for websites to contain unnecessary resources which either are not used or does not add enough value to justify their inclusion. This is more likely to occur with websites built overtime, as their design and layout evolves there might be leftover resources which it still downloads but doesn’t use any more.
It will be a good practice to periodically visit the content requested by your website, eliminate resources not used anymore and justify the place of existing resources specially ones with bigger download sizes
Optimize text based resources
After eliminating unnecessary downloads, the next best thing to do is to decrease the overall download size of the website by compressing resources. Due to the remarkable reduction in sizes you can get by compressing text based resource, your next step should be to minify and compress these resources
Compress text resources using GZIP
Now that you have minified your text based assets using context aware optimizers, next reduce their size further by compressing them using GZIP.
So far we have optimized the obvious and relatively easily optimizable candidates. Next we move on to optimizing resources which account for the most of downloaded bytes of modern websites: Images
Leverage CSS3 effects as alternative for Images
First and foremost you should consider eliminating certain images all together by using alternatives. For example instead of using images to depict gradients and shadows you could instead use CSS3 effects to depict the same. The added benefit of using CSS effects is that they will be resolution independent i.e they will look crisp and sharp at any resolution.
Use Vector Images where ever applicable
Next identify opportunities to replace raster images (pixel based image formats like PNG, JPEG etc) with vector images like SVG (Scalable Vector Graphics).
While raster images are usually huge blobs of binary data, a vector format like SVG is just plain old xml, which you can minify, compress and inline. In addition vectors are resolution independent allowing the browsers to render crisp images at any resolution/zoom level.
Unfortunately vectors can not be used for all image types. As a general rule if you have an image which is comprised of geometric shapes like logos, icons etc use vector, if you need to depict a complex scene like a photo use raster.
Optimize Raster images
For raster image optimization you can get significant gains by determining where you can effectively use a lossy image compression algorithm. As suggested by its name a lossy image compression algorithm will loss some pixel information causing a reduction in size but also degrading the quality. The good news is that human eyes may not be able to spot the differences caused by loss of certain pixel data. Therefore always experiment with lossy image compression algorithms (JPEG for example) to determine the right balance between quality and file size.
Deliver scaled images
This is a very simple and effective, yet often overlooked technique to reduce the download size of your website. The basic idea is that you do not want to deliver anymore image pixels than needed to display them in the real estate the current device has available.
For example if your website is being accessed on a mobile phone with small screen size (426dp x 320dp in android terms) you can deliver a smaller version of the image scaled for the specific screen size. In this case if you deliver a generic version of the image which is supposed to work on all screen sizes, you will be sending a lot of bytes which would never gets used (browsers would autoscale the image to fit smaller screens). You can use the img tag with srcset attribute to deliver scaled images for custom screen sizes
Optimize Web Fonts
If your website use web fonts (i.e downloads the fonts it needs) then note that they are also a resource which needs to be downloaded and hence a legitimate candidate for optimization.
First and foremost you should ensure that webfonts are being compressed optimally. Non compressed font formats like EOT and TTF can be compressed using GZIP. WOFF and WOFF2 formats has built in compression however its better to check if it is possible to pass them through additional compression filters to achieve more file size reductions.
In addition you can also the unicode range descriptor field with @font-face to specify what subset of the unicode font to use thus reducing the download size of the font file.
Leverage HTTP Caching
HTTP caching is the process of browsers storing resources locally so that additional requests for the same resource could be facilitated without network round trips as well downloading additional bytes. All modern browsers today supports caching thus all you need to do is to set a caching policy on the server specifying what resources should be cached and for how long.
Google’s documentation on this subject