Shopify Loading Speed Optimization

Having a store that loads in more than 3 seconds is a huge problem a lot of dropshippers don’t even pay attention to. Yet it’s a thing that’ll make or break all your learning. It will even leave you full of anxiety, and doubt everything you learned.
The problem with websites that load in more than 3 seconds is the fact that they have a bounce rate of more than 70%. Which means people have better things to do than waiting for your content to load, especially if your traffic is not buyer intent traffic.
To make things clear, the bounce rate is the percentage of people that visited a certain page of your store, but left before the page loads 100%.

Loading speed doesn’t affect User Experience only, it also affects SEO since Google has declared that the loading speed is considered as a Ranking Factor. So if you have a slow website, you’re not only losing traffic, but you’re risking a decent ranking on Google’s first page, and risking all the SEO optimization you may have been implementing on your store.
Let’s now dive into the problems that are slowing your website down, and that can be manually fixed, without having to hire any one.

Image Optimization:

The fact that images are most of the time the heaviest element on almost every landing page is something I should point, it can even have a bigger size than Java Scripts if not optimized.
In most of the landing pages with more than 6 images, the size of images can be over 40% of the total size of the whole page, it can even be bigger than the size of all the JS, CSS, and HTML codes combined.
To speed up your pages, the first thing you should consider doing as soon as possible is compressing the size of each and every image on your landing pages.
For this purpose, I use PhotoShop. I’m no PhotoShop expert, but believe me, it’s just a matter of importing the image you like, then export it as a JPG with the dimensions and quality that are more likely to provide lossless compression.
If you’re not into this kind of techy stuff, you may consider visiting TinyPng, or install some Shopify app like Crush.pics. But I highly recommend using PhotoShop as you can easily use it to turn a 50kb image into an 8kb image in a matter of seconds.
Another thing related to images that would slow up your pages is using PNG and GIF files, you can use 1 or 2, but the more you add, the more your page’s size grows, which affects your speed score.

Cloudflare:

According to Wikipedia, Cloudflare, Inc. is a U.S. company that provides content delivery network services, DDoS Migration, Internet Security and distributed Domain Names Server services. Cloudflare’s services sit between the visitor and the Cloudflare user’s hosting provider, acting as a reverse proxy for websites. Cloudflare’s headquarters are inSan Fransisco, California, with additional offices in London, Singapore, Champaign, Austin, Boston, and Washington D.C.
Cloudflare allows you to fix some security and speed issue, alongside other problems. The only thing you need to do is to change the nameservers from your domain names provider with the ones provided by Cloudflare, then you can get access to their backend, and hopefully fix some of the issues you have on your Shopify store. They have a free plan that includes:

  • Minify JavaScript, CSS, and HTML: This actually helps to reduce the file size of your source code without having to modify it on you Shopify backend, so browsers won’t be loading your original code, but the optimized one. This solves “Minify JavaScript” “Minify CSS” “Minify HTML” from Google’s PageSpeed Insights.
  • Brotli compression: Allows you to compress certain elements on your page including text. It solves the “Enable Compression” issue on GTMetrix PageSpeed.
  • RocketLoaderâ„¢: Enhances the performance of the pages that include JavaScript codes by loading them faster. RocketLoaderâ„¢ solves “Reduce JavaScript Parsing Time” on Google PageSpeed Insights.

The 3 services listed up above will not actually solve all your problems, but they’ll reduce the loading speed of your website for absolutely no cost, so consider implementing them on your store.
Cloudflare offer 2 other speed related products fr as low as $20, these products are:

  • Polish: Solves all your image related issues by serving images on you store in nextgen formats like WebP.
  • Mirage: Will boost your loading speed on mobile devices that are connected using low network connections, so your bounce rate can get a little bit lower, and hopefully increase your sales.

You don’t need Polish and Mirage if you’re just starting out, so you might just stick to the free plan until you start scaling, and then you’ll have better options that are paid solutions, but will have a huge effect on your store. I will make sure to include these options in the next part.
There’s a product in Cloudflare’s business plan ($200) that’s called “Prefetching URLs From HTTP Headers“, but you can actually implement it for free if you insert this code at the bottom of your source code’s header:

<!-- Prefetch DNS for external assets -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link rel="dns-prefetch" href="//www.google-analytics.com"> 
<link rel="dns-prefetch" href="//cdn.shopify.com">
<link rel="dns-prefetch" href="//fonts.shopifycdn.com">
<link rel="dns-prefetch" href="//cdn.getshogun.com">
<link rel="dns-prefetch" href="//storage.googleapis.com">
<link rel="dns-prefetch" href="//connect.facebook.net">

Make sure to only include URLs that are being pre-fetched on your store, for my case, I use Shogun, so it’s included in there, if you’re not using it, replace it with a URL that’s being pre-fetched instead.

More Tips To Reduce Your Store’s Loading Speed:

1- Shopify Plus:

As soon as you start making a 5 figure income, you should upgrade your plan to Shopify plus, as if you do so, you’ll notice that your Shopify store is loading faster.
Shopify is limiting the ability of stores with basic plan, but you shouldn’t be mad at them as a dropshipper because you’re already selling or trying to sell something that you don’t even have in your hands. Business will be Business, no hard feelings.

2- Use Less Apps:

Every time you install an app that has access to your Online Store, it adds codes to your source code, which adds extra size to your source code size, and adds domains to your DNS lookups. This affects your loading speed and increases it drastically.
So if you’re using many useless apps that have access to your Online Store, delete them as soon as possible. But don’t just delete the apps and expect the codes to remove themselves, you’ll need to email the owners of these apps an tell them to remove the code, then they’ll send you a request to be added to your store as a staff collaborators with access to your source code only, after you grant them access, they’ll delete the codes, and then you’re good to go.
Speaking about myself, the only app I need to make sales is Shogun Page Builder. Don’t need any reviews apps, no countdown timers, or anything else, the only thing I need is a landing pages builder, and I’m good to go!
If you want to learn how to create high converting landing pages that load fast, you should read this valuable piece of content.

3- AMP:

AMP is an abbreviation of Accelerated Mobile Pages. Google has been recommending websites of all kinds to serve their content to mobile users via AMP, if you wanna know what I believe: AMP is the future.
If you did your speed tests on Google’s PageSpeed Insights, you’d notice that it’s nearly impossible to have your mobile score over than 80, even if your desktop score is 100. Well, struggle no more my friend, AMP apps will turn your 50 score into 95 with a couple of clicks.
AMP apps limit the amount and sort of Scripts and CSS in your mobile pages to make your user experience as smooth as possible. In fact, after installing an AMP app, over 80% of your landing pages will load on mobile devices in less than 1 second, which is UNBELIEVABLE!
So I highly recommend that you go to the App store, type in AMP, and choose an app to see how AMP can increase your sales.

4- Hire A Professional To Speed Up Your Store:

Big companies are paying tons of money to developers that can get their score on Google PageSpeed Insights as near as possible to 100/100 for both Desktops and Mobile devices. These companies know the perks of pleasing Google, because the more your content loads fast, the higher you get on search engines.
That’s just 1 reason you should hire a professional that knows how to get you near to that 100/100 level, one other powerful reason you should do that is the fact that you’ll be able to serve your product to as many people as possible and benefit from your ad spent the way you should by reducing your bounce rate to as low as 20%.
You can hire someone from upwork to do it for $75 an hour, and you can hire one of my team members at ecommerceprophet.agency to get it done for less than that… You should be aware that this task is very hard and time-consuming, you can end up paying over $300 to someone on upwork.
So, you have many options to consider, check them out, and decide for yourself.

I know there’s a lot of content out there in google that doesn’t really tell you step by step what to do, I was there too, and I was very confused… I didn’t know how to reduce DNS lookups, I didn’t know that in Shopify you can’t leverage browser cache, I didn’t know a lot of thing.
But after years of learning and testing, I’m wrote the ultimate solution to people that are in the same situation I was in back in 2017. So if you really liked the content of this article, I’d appreciate a nice comment down below.
Keep learning guys, because learning never stops.

1 thought on “Shopify Loading Speed Optimization”

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top