Speed and the time it takes to load your website is of significant importance, especially for ecommerce websites and the all important Google ranking. In our never ending research and development work to improve our software we spend a lot of time perfecting the code we create and we are implementing a number of new features into your websites to improve speed including Image Optimization and Code Optimization. But what does this actually mean and how can you improve the speed of your website?
Google Speed Ranking Vs Other Tools
Google had a Speed Insight Tool which will rank your website for both Mobile and Desktop speed. The tool can be found here: https://developers.google.com/speed/pagespeed/insights/ The rankings are based on a number of factors including:
- Speed of Server
- Caching (scripts, images etc)
- Script Minification & Size
- How the code of the website is structured
- Image size and optimization
- Number of assets needed to download IE images, files, scripts etc
But the exact weighting for each of the factors is not fully known and this tool doesn't actually tell you how fast a site will actually load only a score out of 100 and a colour code of Red, Orange & Green The other tool, we use and recommend is GTMetrix: https://www.gtmetrix.com Gtmetrix uses much of the same factors as the Google Insight Tool, but gives a percentage score for Page Speed and a percentage speed score for how slow the site loads. And GTMetrix gives a blow by blow account of each image and script and other factor that can be changed to improve the website.
What does our research suggest is the biggest impact?
We have however done some testing to try and work out what factors you should concentrate for the biggest impact for speed increase and Google Speed Insight increase and in order of importance the factors are:
- Image Optimization
- Code & Script Minification
- Deferral of scripts loading
But overall the biggest impact we have found is from Image optimization.
What is image optimization?
An image is really just a file with a whole lot of data embedded in it and he higher the quality of the image or the large the image size the larger the image filesize. The larger the filesize the more time it will take someone to download the image and thus the slower your website will be. Multiply this by every image on your webpage and you can start to get an idea of the big ticket items that can slow down your site. Image Optimsiation is when extra data is removed from the image itself, this could be in terms of the quality of the image, the number of colours used or other compression techniques. Optimising an image may reduce the filesize up to 50% in some cases, take a look at these two images. The first is the original banner of 88kb size The second is the optimized banner of 62Kb size saving 30% in filesize. We have recently integrated a new feature to allow you to optimize your product and other website images and review the change before saving it. And we have integrated an automatic image optimization to all your product and other images on the site when they are uploaded. You can also use one of the many free tools online to optimize an image before uploading it such as: http://kraken.io http://tinypng.com From our tests you can get a significant speed improvement by optimizing your images!
What else can be done?
We also mentioned two other important factors for speed optimization:
- Script Minification
- Deferral of Scripts
Essentially minification means removing all the whitespace from a script, which is some cases can save a huge amount of file size. Script Deferral means stopping a script from loading and running on the website until the visual parts of the page have loaded. However there are issues with deferring scripts as this can stop parts of your site from working. There is however a very fine line between optimizing the site to satisfy Google's whims and making a functional site that people can use. Analyzing top websites such as Apple, Amazon etc the Google Speed Insights only receive a mid 60 rating which is only in the orange zone. The challenge is that in a modern world where websites are incredibly powerful and feature packed it's difficult to balance the concept of deferring a script that makes the website work with the suggestion by google to do so. The same applies to image optimization, you need to balance the quality of the image with the time taken to download it. In the future as web browsers become even more capable I am sure we will routinely send images and other web elements based not just on the size of the screen but also the speed of the internet connection as well. To recap have a read about the improvements in Flower Store In a Box our software to improve speed including Image Optimization and Code Optimization.