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.
Table of Contents
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.
Images
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.
JavaScript
The effect that JavaScript has on web loading time is really huge. JavaScript code is considered the second greatest attributor to how fast your web can be downloaded, only behind images. Besides, once downloaded, your browser will need time to run the script, which can impede the rendering time of other features on your website. Actually, its effect on your website will be even stronger than that of images. Pictures only affect your site during the downloading process. Meanwhile, JavaScript code takes you several seconds to run even after it has been downloaded. Moreover, jQuery is the most common type of JavaScript and it is also a very large file (about 100KB). If your web is only 10KB, then jQuery will be the main culprit for the slow speed.
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
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
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
UNCSS is a unique CSS minification tool with only one purpose is to get rid of unused CSS from your stylesheets.
4. Minify JavaScript
Because JavaScript is one of the most important influencers behind a website performance, it needs to be treated properly. By minifying JavaScript can your website’s speed be faster. In order to minify JavaScript, there are also several online tools for you to use, such as JavaScript Minifier and JSCompress. Besides, you can install tools like UglifyJS2, Closure Compiler or YUI Compressor.
UglifyJS2
UglifyJS2 is a famous tool for minifying JavaScript with debugging settings. It allows you to minify and optimise your JavaScript quickly. It also has the feature: “Uglify Fast Minify Mode” that helps to minify your code faster by whitespace elimination and symbol reduction.
Closure Compiler
Closure Compiler is a tool that allows you to make JavaScript download and run faster. It analyzes your JavaScript code, removes redundancies, recreates and minimizes what’s left. It also has your syntax, preferences and types checked. The Closure Compiler reduces the size of JavaScript, making it more efficient for your website to load and run. It also updates you constantly on illegal JavaScript and potentially dangerous operations.
YUI Compressor
As YUI Compressor can minify both CSS and JavaScript, it is a really wonderful tool. It allows your web loading speed to save on average an additional 20%. Because it is created to ensure 100% safe, it can compress your JavaScript and CSS codes without mistake.
Because site speed is crucial for creating a better customer experience and generating revenues for businesses, it is your responsibility to pay careful attention to it. There are several factors that you need to consider when it comes to the site speed improvement, such as images, CSS and JavaScript codes. Once you have identified clearly what factors influence your site speed, it is time for you to come up with solutions to optimise these elements.
If you need support from experts regarding Shopify site speed optimisation, you can contact HappyPoints.
