Is your Shopify site slower than you'd like? Here are 6 ways to speed it up!
Why is site speed important?
Site speed is important on two fronts. First, it affects the user experience. A slow-loading website will frustrate users and make them more likely to leave. We’ve all been there, the spinning wheel is a super buzzkill and it sends the wrong message about your brand. Second, site speed can impact your search engine ranking. Google and other search engines take site speed into account when ranking websites, so faster sites rank higher in search results. Remember the higher your site’s rank, the less you pay for ads, that’s a nice benefit all by itself.
Before you add any app to your site you should check your site speed. If it’s slow, fix that first. Many of the top websites around the world have surprisingly bad site speed scores, but if you’re a big fish you can get away more than if you’re a little fish. Regardless of what size fish you are there are compelling reasons to make site speed a priority.
How to check your site’s speed
So first things first, here’s how you check your site speed. Open a web browser and go to https://pagespeed.web.dev/. Type in your site’s URL and hit the Analyze button. Go ahead and do that right now, I’ll wait.
So now you know your site’s speed and if you are over 80, well done! If you are between 50 and 80, you can improve it with these tips, but it doesn’t have to be the first thing you do right now. If you are between 25 and 50, make it a top priority. If you are under 25—stop, drop, and roll!
Does Your Site Do This?
It can with Stylaquin! Stylaquin is the easy to add Shopify app that transforms your website. Stylaquin makes shopping faster, more engaging, and more fun. Stylaquin shoppers stay longer, view over 85% more products, come back more often, and buy more when they do. Find us in the Shopify App Store.
Optimize your images
Images are one of the biggest contributors to slow loading times. The goal is to optimize your images by reducing their file size without sacrificing quality. The biggest gains are made by choosing the right image format. Jpeg files are significantly smaller than png files. I asked my adorable dog Pudge to give me a hand with this. The jpg of this handsome fellow at 1200×1600 with high quality output is a mere 748 KB. The same size png is a brutal is 4 MB.
If we dumb them down to low quality, the jpg is only 260 KB while the png is still a whopping 1.2 MB.
But before you start hating on jpgs we need to look at the difference between a photo and an illustration. When it comes to illustrations and type, the png has a slight edge coming in a 2KB rather than the 9 KB of the jpg.
So how do you choose? The first thing to ask is do you need a transparent background? If the answer is yes, you can only use a png. Jpegs do not support transparency. If you don’t need transparency, go with a jpg for photos. When it comes to Illustrations pngs are a better choice, not just because they are a tiny bit smaller, but they’ll have sharper, crisper edges. So image files for typography, symbols, or illustrations are better as pngs.
You can use tools like Adobe Photoshop, TinyPNG.com or Kraken.io to compress your images. If you are working in Canva the default is Png so be sure to change the output settings before you download.
Delay popups
Popups are a great way to collect visitor emails and promote products with special savings and offers, they can also be a significant drag on your load time. When search engines measure your site speed, there is something called time to first paint, which is just a fancy way of saying how long it takes before a visitor can see the site. Some things are super quick to load, like Stylaquin, but apps that have to call and display large amounts of data, can take seconds, which is way too long in online time. The easy way around this is just to have the popup load after the site speed has been measured. A short delay of 15 seconds should do it.
Lazy load your images
Lazy load tells browsers not to load images that are not going to be visible until they’re needed. Remember how I said that search engines are measuring time to first paint? If you have lots of images below the fold the browser is going to load all of them before it tells the search engine that it’s done. Lazy load tells the browser to stop loading the images that aren’t being shown, so the time to first paint is much faster. There is a bit of a delay when visitors scroll down but it’s usually imperceptible. Lazy load is a feature of most Shopify themes so check with your theme provider about where that setting is.
Remove unused apps
Apps can slow down your store, so remove any apps that you’re not using. Apps like Stylaquin are super lightweight. Some apps are not so well behaved. If you’re concerned that an app is slowing down your site, the first thing to do is measure your site speed with the app on, and then again with the app off. Be sure to measure 4 to 6 times with the app on and the same number of times with it off. Site speed tests are affected by internet traffic, server speed and the vagaries of the web. It’s likely that you will get a range of results and testing multiple times keeps you from jumping to conclusions. I’ve seen results that make it look like an app is speeding up a site, but the next test showed it slowing down the site. To be confident you need to run the same test multiple times and preferably at different times. You can check your admin panel to see which apps are installed on your store.
Update your theme
This one is something that often gets filed under “Things to do when I have time”. Because of all the good things that come from having a fast site, you may want to move it up in the to-do list. Older themes may not be as optimized for speed as newer themes. It’s always a good idea to keep your theme up to date for security reasons as well.
Make sure your theme uses a CDN
This one is for nerds and developers. A CDN (content delivery network) can help to improve the speed of your store by caching your website’s content on servers that are closer to your customers. That way a customer from France gets the same load time as one from the US. All the free Shopify themes use the Shopify CDN by default, so you’re all set if you are using a free Shopify theme. If you paid for your theme, and you have done all the easy things we already covered, it’s worth checking. Using a CDN is especially important for stores that sell worldwide or across a wide geographic area.
The easiest way to determine if your non-Shopify theme is using a CDN is to email your theme developer and ask.
If you’d like to see this content as a video Click here. If you’d like to see a lightning fast Shopify app that increases the number of items viewed by 180%, increases time on site by 70% and just makes online shopping more fun and engaging, click here for quick demo of Stylaquin.