Shopify Optimisation

How long the page takes to load has been shown to affect conversion rate, and it’s easy to see if a customer is waiting for a page to load for too long, they’ll simply tap the back button and try the next site.

Beyond that, Google also uses page speed as a ranking metric, and will promote faster sites over those that are slower.

Having an enormous image that is going to be shown on a small mobile screen is needlessly adding page load time, but then you would want that larger image on a high resolution desktop screen. Fortunately, web browsers have long been able to be given a range of images and they select the one that best fits the device’s screen. So this means as long as we select a sensible range of different sizes, all you need to do is upload a single large image, and, if coded correctly, the theme can then automatically generate all of the required sizes from that with no extra effort.

We can do more with images too though–there’s no point in the user waiting for an image to download that they’ll never see. Nearly all modern browsers now have a system built in that enables us to tell the browser that an image can be delayed and only needs to be loaded when it’s about to be scrolled into view. On a product listing page with dozens of product images, that means the initial page load is significantly faster.

We can also now do the reverse and tell the browser about any critical images. You may have come across terms like “Core Web Vitals” and “Largest Contentful Paint (LCP)” if you’ve been looking into making your site faster, and while there’s a lot of jargon around it, there are some simple principles. The metric mentioned there - the LCP - is basically the single item on the page that takes the longest for the browser to ‘draw’ onto your screen. We want that time to be as small as possible, and one way to do that is to start drawing it as soon as possible. So once we’ve identified which element that is, we can now tell the browser to prioritise that using the new fetchpriority attribute. And if you need help identifying these sorts of things, we’d be more than happy to create a performance report for you that will identify these sorts of things and offer solutions to help in getting your site faster.

One last thing to mention before we move on from images is the actual file format. The same image at the same size but saved with a different file type can have very different file sizes. You’ve probably come across jpg and png image files for example, and jpg files can be nice and small, but there’s a newer format called webp and that is really good at reducing the file size without losing any of the image quality. And the good news - Shopify automatically converts your image to a webp version regardless of the file you upload, so again, you get the benefit without any extra work.

The trick here is to consider what the video is doing - if it’s an informational item that needs to be focussed on, then don’t load it until the user is ready for it. Then it’s not affecting the page load time (if it’s embedded with performance in mind).

However if it’s a decorative element that’s setting the mood or showcasing products and you’d like it to play automatically then just keeping it short will help. There’s no point in creating a beautiful 2 minute long video if the customer only sees the first 20 seconds before moving on to the next page.

Keep to a smaller, looping video and you’ll get the impact without hitting your page speed too much.

If every image and video and script that was on the same server as the main page, the server would be asked for the page itself, and while it’s trying to get that back, it’s also starting to be asked for the images and other content so it’s got to find those as well, and that can slow responses down. If the main server just replies with the page, and then another server is asked for the assets, things can go much more smoothly. And especially so when those additional servers are optimised for the sorts of files that they’re looking after.

Setting up CDNs can be a complicated process, often needing a system like CloudFlare to handle it all. However, Shopify has CDNs already built in, and they’re all backed up by CloudFlare. Also, because these are replicated around the globe, your customers can get the files from a more local server and not have to wait for a server overseas to respond. We’re talking very small amounts of time, but it does all add up.

When these sorts of files are created, they’re created to be readable by the developers working on your site, and have lots of spaces and comments included to explain what the code is doing. But the browser doesn’t need any of those to use the script, so there’s no point in all of that being downloaded.

Again, Shopify just takes care of that for us, and any scripts or styles automatically have comments removed, and any unnecessary spaces taken out. It doesn’t sound like much, but it can reduce a file by a significant percentage, and having it done automatically means we are freed up to look at other aspects of speeding your site up for you.

You’ve probably seen a site where a small jpg image has been uploaded and then stretched to fill the screen, it starts to look blocky and poor quality, whereas vector graphics are always sharp at whatever size they’re shown at. Not all imagery will work as a vector graphic, but logos in particular often will, and it’s always worth having your brand identity displayed crisply on your site.

Good news here is that SVGs are also typically very small in size, as they’re essentially just text files. Not all Shopify themes will work with SVG images though, but we can always extend your theme and allow these to be used.

For example - the basket icon and social media icons. But to cater for all eventualities, these libraries often have hundreds of icons in, and as ever, there’s no point your customer downloading all of those just for the 6 you’re using on the site.xt left

We like a system called Icomoon where we hand pick just the few icons that are used and wrap them up nicely in a single font file. It’s a manual process, but the difference in file sizes is considerable and well worth doing.

There’s a few things we can do here - the first is very much following the theme of this article, and is to only load what’s actually used. A lot of fonts come with a whole variety of weights and styles, but if your site never uses the ‘extra bold italic’ version, then we shouldn’t be downloading it. The other aspect is a little more subtle though - what happens while the font is downloading? If the site doesn’t show any text until the font has loaded it can feel really slow, even if it actually might not be.

Staring at big blocks of white space makes it look like nothing’s happening, so it might be better to show the text but using a font that is built into the device and then replace it when the font has loaded.

This way your customer can start reading the text immediately. Now, this needs to be done carefully, if the custom font is significantly different in size to the default font, when it’s replaced large areas of text could suddenly increase or decrease in size. So if your customer has started reading, and then suddenly the font loads and the text jumps, they might lose where they’d got to. We can add hints about relative sizes, but there’s no single solution here - it’s a matter of understanding the site, the content, and the customer’s needs and coming up with a solution that works optimally for your unique site.

If you’d like us to review your Shopify site, please get in touch and we’d be delighted to look it over and provide some recommendations to help get your site loading faster.

Get in touch with us and discover how Shopify can work for your business.