It is also undeniable that in this modern world, quick and reliable online experiences are expected from nearly every website. If you make the customers wait too long for your website to load, they are likely to leave your web immediately. According to Andrea Wahbe’s article about E-commerce site improvement published on Shopify.com, about 47% of customers expect websites to load in less than or equal two seconds. She also stated that more than 60% of mobile users expect web pages to load in no more than four seconds. As the importance of impressive site speed is clear, HappyPoints will list out below for you several tips for Shopify site speed optimisation.
1. Identify factors that affect your web speed.
Before reaching the step where you can optimise your web performance, you need to know what factors have a strong impact on your site speed. Recognizing these might allow you to come up with more detailed solutions and better strategies. Basically, there are three main elements that significantly affect a Shopify site speed.
According to Mrs Hong Ta, CPO of HappyPoints with a long-time experience on web development, the larger the images on your website, the slower your site speed. The number and the size of your images will strongly impact your web performance. As you include a huge number of pictures with large sizes on your website, it is likely to take customers lots of time to load. Images with high quality or 3-D pictures and gifs also cause your platform to run slowly. Besides, the format of your photos will affect the speed of your site as well. Regarding this topic, Mrs Hong said that it is ideal for you to JPEG, rather than JPG and PNG. They are more likely to slow down your Shopify site speed.
CSS (Cascading Style Sheets)
CSS is basically a style sheet language for describing the presentation of documents written by HTML and XHTML languages. Its function which allows for separation between the presentation and content is very useful for reducing the complexity of a website. However, Mrs Hong also said that if used improperly, it will be a heavy obstacle for your web performance. If there are so many HTTP requests involved in your external CSS file, your site speed is likely to be reduced. Therefore, your primary goal here is to minimize the number of requests as much as possible. In addition, CSS files are often bigger than they need to be. Minifying these will also be of great importance for your Shopify site speed improvement.
2. Optimize images for your website
As mentioned above, images play an important role in your site speed optimization. The larger the images, the slower your web can be loaded. Therefore, it is crucial for you to use pictures that are safe for your site. There are two most vital things to consider regarding this topic, which are photo format and type of compression. According to Mrs Hong, by choosing the right format for your pictures and the suitable compression type can you reduce the size of your images by nearly 5 times.
Choose the right image format
It is necessary for you to choose the ideal type of image for your website to optimise the Shopify site speed. There are three common types you can use.
- PNG: It is suitable for icons, flat areas and logos. PNG can also support alpha channel transparency (more advanced than that of GIF). This format does not discard information and can produce high-quality pictures. However, it comes with big size and not widely supported.
- JPEG: It is supported by all operating system with good size and quality ratio. This is considered the most suitable type of format for websites, although JPEG does not support transparency and animation.
- GIF: This format used best to create animation, but it supports only 256 colours.
There is a more diverse type of formats. However, it is not widely supported and not very common, such as JPEG XR and WebP. It is ideal for you to choose the JPEG format for colourful images and PNG for simple pictures.
Choose a suitable type of compression
It is necessary for you to choose the ideal type of picture for your website to optimize the site speed. There are three common types you can use.
- JPEG Optimizer
JPEG Optimizer is a simple online tool that allows you to upload and compress images. However, this tool only supports JPEG format. The “Compression Level” makes it less difficult for you to adjust photo sizes to the level that you prefer. The image sizes can also be reduced thanks to the function “Resize photo”. By using this useful tool, optimizing photos on your website is not a headache anymore.
TinyPNG is one of the most popular free online tools that help you to compress and resize pictures easily. Although its name is TinyPNG, it allows both PNG and JPEG formats for compression. Using TinyPNG will save you lots of time as you can compress up to 20 images simultaneously, or up to 100 images per month. After you finish compressing photos, you can save them immediately to your computer or save them for later use in Dropbox.
- Online Image Optimizer
This free, online tool supports all kinds of image formats, ranging from GIF, JPEG to PNG. This is a product of Dynamic Drive. You can also convert one photo format to another using this tool. For example, you want your photos to be converted from PNG to JPEG, Online Image Optimizer will do it for you instantly. This tool allows you to upload only one image at a time and the maximum file size is 2.86 MB.
3. Minify CSS
As CSS files are often larger than they need to be, it is necessary for you to minimise the CSS files to improve your web performance. You can use CSS minifier to adjust your CSS files.
For sites that are not really important to you, it will be more time-saving if you use online services to minify your CSS files. There are various online tools for CSS files minification, namely CSS Minifier or CSS Compressor. Meanwhile, with sites that are important and need update regularly, you need to use more professional tools, such as CSSO and UNCSS.
CSSO can help you to minify CSS files by eliminating redundancies like white space, bringing forward shorter forms and rearranging your CSS. You can use CSSO online version in case you do not want to install it.
UNCSS is a unique CSS minification tool with only one purpose is to get rid of unused CSS from your stylesheets.
If you need support from experts regarding Shopify site speed optimisation, you can refer to HappyPoints’ Shopify free speed optimisation.