Why is my Shopify store slow?
The images you create in programs such as image editing software can look amazing but often the file sizes are very large. This is because the images are made in a format which makes them easier to manipulate in different ways.
With file sizes upwards of a couple of megabytes per image, if you put these files on your website it would be very slow to load. Imagine a user on a 3G connection using a mobile, having to download a 5MB image this can add up to 1 ½ seconds onto the web page load.
Optimizing your images for the web means saving or compiling your images in a web friendly format depending on what the image contains. Saving these in next gen formats like JPEG 2000 or JPEG XR will help dramatically decrease the size of your image, but you will need to provide a back-up for older browsers.
Serve scaled images
Serving appropriately-sized images can help to save many bytes of data and improve the performance of your webpage, especially on low-powered (e.g. mobile) devices. It can be tempting to serve high-resolution images to all users when catering for displays of varying pixel density.
For example, you may have a 20×20 small version of a larger 200×200 image, rather than forcing the user to download two separate files, you use mark-up to resize the smaller thumbnail version. This makes sense if the actual image size matches at least one – the largest – of the instances in the page, in this case 200×250 pixels. However, if you serve an image that is larger than the dimensions used in all the mark-up instances, you are sending unnecessary bytes over the wire.
Most people don’t realise that this happening when they click on a link, until it takes longer than about 3 seconds. The reason that pages don’t load up as soon as the HTML for the page is loaded is usually due to render-blocking resources.
The defer method
An example of what this would look like would be:
<script defer src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
What the ‘defer’ attribute does is to tell the web browser not to load it until the HTML has finished loading
Minification is the process of minimizing code and mark-up in your web pages & script files. It’s one of the main methods used to reduce load times and bandwidth usage on websites. Minification dramatically improves site speed and accessibility, directly translating into a better user experience.
To minify JS, CSS and HTML files, comments and extra spaces need to be removed, as well as crunch variable names to minimize code and reduce file size. The minified file version provides the same functionality while reducing the bandwidth of network requests.