Shopify has gotten to be one of the most well-known eCommerce solutions for various online retailers, and customers have come to anticipate amazingly fast load times that make smooth and simple shopping experiences.
When everything is running immaculately, you won’t listen to anything from online buyers, but in case your site is running slowly, it’s likely that you just simply will. In addition, since customers require speedy load times, in case your site isn’t optimized they are likely to see somewhere else for their products.
In case your Shopify site load times are less than ideal, you want to speed things up. There are three simple things you will be able to do to induce up to speed. To start with, though, you'd like to get it why fast load times are so important.
In case you've got any type of site, optimization is vital, but indeed more so for eCommerce sites, since it can specifically influence deals. In reality, in a Kissmetrics report, it was found that as many as 40 percent of online customers will leave a website that takes longer than three seconds to load. It was also found that the acceptable wait time for a page to load in 2 seconds. Anything longer than that, and customers describe it as a negative experience.
It’s a great thought to test your pages to see how quickly they load. Improving load time, even by one second, can make a colossal difference to your customers’ experiences and your sales conversions.
AMP is another project of Google with which you'll significantly improve page loading speed on mobile devices. The essential thought of AMP is to serve the web pages in a standard format predefined by Google to reduce the page size and loading time.
Shopify doesn’t offer an AMP version of the stores by default. This is a significant drawback of Shopify regarding SEO.
The least demanding way to induce an AMP version of your store is by employing a Shopify app. These apps will make an AMP version of your product pages and will meet up with Google so that your pages rank on Google search.
Do you know how much of your traffic comes from mobile devices? In case you don’t know, however, just go to your Google Analytics and check the Audience > Mobile >
Overview report and don’t be surprised in case you see more than 50% of your traffic comes from mobile devices. Typically the reason Google has come up with a Mobile first-indexing strategy for ranking websites. Agreeing to this strategy, Google’s calculations will in the long run primarily utilize the mobile version of a site’s content to rank pages from that site.
This is often the reason you wish to focus on your Shopify site’s performance on mobile devices now or you may lose it to your competitors.
Though this is a quick and easy solution, there is one drawback. Once your AMP pages get indexed on Google, you become dependent on the app’s service. If you stop using the app, the indexed links will start giving 404 errors...
To optimize your store, first, you need to check the current page speed score of your Shopify store pages and note the scores in an Excel sheet so that you can compare before and after optimization.
Now to check the scores, first identify the store pages where most (more than 90%) of your visitors land. You will easily find the data in your Google Analytics’ Behavior >Site Content > Landing Pages report as shown below.
For most of the Shopify stores, it will be the home page and collection pages where most of the visitors land. Identify these landing pages for your store and put their URLs on an Excel sheet.
This will help you focus only on the important pages of your store.
Once you have the list of the pages, start testing with the Google Page Speed Insight tool or any other tools that you prefer using.
At HulkApps, we believe in a few Shopify Apps to optimize the speed of our site as well as our client’s site. Here’s a list of the top Shopify page speed optimization apps
For each of the URL of your landing pages, you will get the Page Speed scores for the desktop as well as for mobile devices as shown below:
As marked in the screenshot above, the Pagespeed score for the mobile device is 61. Similarly, check the Desktop tab for the Pagespeed score on Desktop.
Now you need to put these scores on your Excel sheet as shown below. This will help you to use these scores as the reference when you test the scores again after optimization.
Not only the scores, but Google Pagespeed tools also point out possible areas of improvement.
Possible Optimizations suggested by Google PageSpeed insight tool.
There are many other tools to analyze page speed factors but one of our favorites is Pingdom. This tool shows you the factors affecting your page speed along with their priority and your score.
Once you put an URL in Pingdom and analyze, you get a result page similar to this:
The factors with the least score and highest priorities will be on the top. These are the factors you need to focus on.
Now, you don’t have control over all of these factors as Shopify is a hosted solution and you don’t have access to the servers and all the codes. There are few things you can take care of yourself and for others, you need professional help until you are a seasoned developer.
Some of these low hanging fruits are,
Images are the most important content for any e-commerce store. There's no way you'll compromise with the quality of the images but you moreover need to limit the sizes of the pages.
To reduce the image sizes without affecting the quality, you need to utilize lossless compression. It’s continuously good to compress the images before uploading them. There are many tools like JPEGmini or Kraken.io which you'll be able to utilize to compress the images before uploading to your store.
But don’t worry if you already have too many images uploaded. There are many Shopify apps for image compression which you can use to compress the images of your Shopify store.
Below are our favorite image optimization apps for Shopify, and a quick way to improve your performance on your whole site.
The size of the images depends on two things, the dimension and the quality of the image. That’s why you should always use images of the exact dimension needed for the page. For example: If your home page’s banner dimension is 1500 x 500 px then use this dimension only, not bigger than that.
For product images, Shopify suggests using 2048 x 2048 px images so that the quality of the images doesn’t get compromised if you are using the image zoom feature. But it can significantly increase the memory sizes of the images and may dramatically slow down your website when you use multiple such images on a page. Until you don’t need to a pixel-perfect image to show up every minute detail, 800 x 800px images will do just fine on your product page
Also, wherever you can, especially on the Home page and on your collection pages, reduce the no. of images.
When you are running your store on Shopify, there is no way you can go without using third-party apps. But, many of the apps run scripts on your pages which reduces the page loading speed. Here are a few measures you can take to minimize the effects on apps.
Delete all the apps you are not using.
There may be a few apps that you are using but can do just fine without those apps. Test the page speed with or without these apps installed to measure how they are affecting the page speed.
You may be using some apps which add new elements to your store pages. Try to restrict those elements to only the pages where you actually need them. For instance, maybe you are using some floating trust badges throughout your store, while you only need them on your product pages.
Furthermore, I’ve also listed 5 ways to speed up your Shopify site that are the low hanging fruits you should try first.
Till now we have discussed the things you can manage to do yourself. But there are few page issues that you can’t fix until you are a seasoned Shopify developer.
Here are the few things for which you may need professional help:
This is one common issue found in any JavaScript/CSS heavy website. These JavaScripts and CSS codes can increase your site’s page load time, and they can also block rendering of the page.
A user’s browser will have to load those scripts and CSS before loading the rest of the HTML on the page. This means that users on a slower connection will have to wait longer to see the page. These scripts and stylesheets are referred to as render-blocking JavaScript and CSS. The fix for this is to load the priority of the script-wise.
Every website loads a lot of files containing HTML, CSS, and JavaScripts. And most of the files include a lot of space, comments, Block delimiters, etc. So, significantly it takes extra time to load properly. Compacting HTML code, including any inline JavaScript and CSS contained in it, can save many bytes of data and speed up the loading of the pages. This is also one thing for which you will need professional help.
Page speed optimization is a continuous process. You need to regularly check the page's speed scores and note them to keep track of your page’s performance. Get your hands dirty with the low hanging fruits first and then focus on other issues. If you need any professional help, you can always look for Shopify Speed Optimization Service
Please note, comments must be approved before they are published.
Your cart is currently empty.
Please share a few essential pieces of information that'll help our support members work quickly on your project
As soon as we review your idea, we'll give you an update. Please notice that any access to the product(s) or service offered by HulkApps does not count for a refund. However, should you experience problems with your order, we urge you to reach out to our dedicated support team.
Rising to serve you better, we are delighted to announce that PlanetX has been acquired by HulkApps, a Chicago-based leading Shopify agency. The combination of HulkApps Shopify services and PlanetX's strong capabilities in the eCommerce industry will lead to continued growth for both companies.