Shopify Optimisation

Shopify is rapid out of the box. They’ve put a lot of effort into ensuring it’s fast, and helping site owners see how well their site is performing. On the Online Store page in the Admin, the live theme is given a speed score, and from that a graph of the site’s page speed can be seen over time, making it easier to spot where improvements - or detrimental changes - have taken place.

Why does it matter?

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.

SO WHAT CAN WE DO?

Shopify is a Software as a Service (SaaS), so a lot of the infrastructure, the server and a lot of the core code is handled by them.

Because Shopify has made performance a priority, this is a good thing - those servers and the site assets on them have already had that optimisation work carried out. However, we can make sure that any assets we add in during the process of bespoking your Shopify site are optimised. Let's take a look at some of those...

SHOPIFY IMAGE OPTMISATION.

One of the biggest factors in slowing a site down is image size.

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.

SHOPIFY VIDEO.

Similarly to static images, video content can play a large part in a page’s loading time. But the right video content can be highly engaging, so it’s well worth considering.

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.

CDN.

A CDN - or Content Delivery Network - is a way of taking load away from a server so it can focus on getting the core bits of the page sent quickly without getting bogged down.

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.

MINIFYING SCRIPTS.

Modern websites use a lot of scripting to layer in functionality to make things easier and faster for customers to engage with the site.

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.

Conservatory-Archives-Full-Width-Image-1

SVG.

Scalable Vector Graphics (SVGs) are a way of saving artwork so that it can be redrawn by the browser at any size without losing any quality.

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.

ICON FONTS.

If you’re using a Shopify theme, it will try to do everything for everyone and probably has some sort of icon library built in so that you can choose which icons you need for your site.

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.

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.

FONT LOADING STRATEGIES.

And while we’re talking about fonts, let’s quickly talk about the fonts used for the text on your site. There’s no doubt that the right font adds a lot to how the site looks and feels, but that does require additional files to be downloaded.

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.

NEXT STEPS.

Hopefully that’s given you a bit of an overview of the performance benefits built into Shopify, but also given you a few areas that might need to be looked at.

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.

Contact us