Speed is vital for any website, much more a Shopify store.
The faster the loading time is, the lower your bounce rate is. This then allows you to rank higher on Google, which is essential for any online store.
To help you optimize your site loading time, you first need to download a backup for your Shopify theme. You can do this by going to the Admin page and clicking Themes > Actions > Download Theme File.
After this, you can check for speed by using third party speed testing tools for desktop and mobile. Good examples include Google PageSpeed Insights and GT Matrix.
If you want your page to sell and dominate the search engine, make sure to follow these steps on how to speed up your Shopify site.
Step #1: Compress Images
Images are useful for selling, but too big a size can affect site speed. Because of this, you need to take steps on image optimization.
For one, you can use Shopify apps to compress each image from your store.
Another program you could use is TinyPNG, where you upload the big image directly to the website. After TinyPNG does its magic, you can download the compressed image and upload it to your Shopify site.
Whenever you load images to your Shopify store, remember not to add multiple photos on a page. Even if you use a compressed image, it will all be for naught if you upload several of them.
Step #2: Limit Requests
If your Shopify store has poor load times, HTTP requests might be to blame. You can check this through tools such as the HTTP requests checker. Once you have done so, you can limit such requests by:
- Combining and inlining CSS and JavaScript code
- Spriting CSS images
- Converting images to Base64 code
- Minimizing the use of functional and design photos
- Reducing the number of social share buttons
Step#3: Remove Unused Shopify Apps
Shopify has an app available for every purpose.
Unfortunately, too much of these can make Shopify stores perform poorly. After all, they add several more CSS or JavaScript files to your site. As previously mentioned, these requests can affect your site speed. You need to perform an assessment and keep only the essential Apps like a Wheel of Fortune App or a Shopify pop-up App that engage visitors into playing a fun game, where one can win a discount coupon code in exchange for their email address, and shop for products on your site. This helps in retaining customers, without affecting your website’s performance.
To make your home page perform quicker than usual, do a quick audit of your apps. Remove those you don’t use much, and you’ll be gifted with a better load speed.
Step #4: Implement Lazy Loading
Lazy loading is all about delaying the loading of an image that is not seen on the page outright. This provides interactivity and a quick page speed — necessary factors for a seamless user experience.
Through lazy loading, your Shopify store downloads a low-quality image as a placeholder. But as users scroll down and approach the viewport, they will get to see a better, high-quality image.
Apart from enabling this feature, you must design the experience as well. You can accomplish this by using the image’s dominant color and applying a blur effect. Other options include using your Shopify store logo or a spinning wheel GIF.
Step #5: Preload Web Fonts
While custom web fonts are used in many Shopify sites, some cannot load them properly. This often results in a delay in page load time.
That said, it’s best if you pre-load web fonts on your site. Think of it as something similar to using a content delivery network. This helps speed up your website since it doesn’t have to waste time downloading the font.
Step #6: Preload JavaScript and CSS files
Apart from preloading your fonts, it would help if you preloaded your CSS and JS code as well.
This will result in immediate browser caching and downloading, which web pages need to improve performance.
Step #7: Use Google Tag Manager
Google Tag Manager is the one place where you can manage all tags without editing code. But more than just making your ‘tag life’ a whole lot easier, this free tool can boost page load times as well.
For one, it can pause tags that are not being used. Instead of deleting or removing this as you did before, you can pause them in just a few clicks.
Google Tag Manager can also help delay tags with Timer or Scroll Depth triggers. With these, your page gets optimal performance by loading the essentials first.
Step #8: Update Your Shopify Theme
Your old Shopify theme may be mobile-friendly, but its old JavaScript files may result in render-blocking. Add to that, it may have outdated libraries that can easily be replaced by lightweight ones.
So while it may be cumbersome to update or download the latest theme, it’s a must if you want excellent website performance.
Step #9: Disable Quick Shop
While this allows mobile and desktop users to shop quickly, it can make your site slower in actuality. That’s because this program loads more images and JavaScript, too.
As such, it may help your store’s performance if you disable Quick Shop for the time being.