October 16, 2017 Syed Shah

10 things you can do to improve your website performance

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

Minify CSS and JavaScript

In most cases CSS and JavaScript source files comprise of nicely formatted code, whitespace and comments. While these are essential coding practices that make our code readable and maintainable for humans, web browsers could read the code as well even without all the nice decor. Therefore we can utilize context specific optimizers to reduce the size of CSS, JavaScript, HTML and other assets. There are tons of CSS and JavaScript minifiers available on the internet which you can integrate in your project as part of the build process

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.

GZIP is a popular compressor which performs best on text based assets like CSS, JavaScript and HTML. It can achieve compression rates of up to 70 – 90% on larger files. The reason I emphasize GZIP compression is because it is supported by all modern browsers. All you need to do is just enable GZIP compression on the server and then all the HTTP traffic would be compressed using GZIP.

Image Optimizations

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.

References

Google’s documentation on this subject

Share this...
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Tagged: , , ,

Leave a Reply

Your email address will not be published.

Contact Us

Get in touch to schedule your FREE consultation!