Yes, low performing eCommerce stores are simply suicidal. Why do you ask?
Studies have proven that a slow website pulls down the conversion rate drastically. If your website is on the slower side of performance, you only have two options left, either to fix all issues impeding loading speeds or kill the business for good. Because it is not going to sustain for very long. I might sound harsh, but that’s the reality and the numbers say it all.
As per the latest benchmarks put up by ThinkWithGoogle, any page that takes more than 3 seconds to load needs a fix. As per the study, mobile website loading speed vs conversion rates, they concluded the following:
- Probability of bounce increases by 32% when a mobile page loads in between 1 to 3 seconds
- Probability of bounce increases by 90% when a mobile page loads in between 3 to 5 seconds
- Probability of bounce increases by a whopping 123% when a mobile page takes more than 10 seconds to load
Note: As per Google, single-page website visits are termed as Bounce.
We can easily conclude from the above that fast and faster is not good enough to win in the game of running eCommerce businesses. Consistently striving to be the FASTEST is the way forward. Keep improving on page loading speeds.
It is well known that speed is vital to enhance conversions, and the best part is most website owners are realizing it. With more and more internet users going mobile, and with access to blazing mobile speeds, the user’s patience has gone southwards drastically…Because of this, anything below 3-4 seconds is a clear no-no if you are seeking online growth.
Let’s get into the business of improving page loading speeds of your Shopify store…Shall we?
Better page loading speeds bring to the table a wide range of benefits:
- Better user experience
- Higher points on search engines – Better rankings and higher traffic
- Higher conversions and sales
- Higher ROI
When such are the benefits, why wouldn’t you want to work on improving your Shopify store’s speed?
Here is the list of 25 techniques (from basic to advanced) to make your Shopify eCommerce store load faster and to transform it into a super conversion machine.
25 Techniques to Speed Up Your Shopify Website
1. Choose an Optimized Shopify Theme for Your Store
Shopify themes are essential to building Shopify stores. It is the Shopify theme that decides the overall styling, look and feel of your eCommerce store. In addition to your website’s structure, a theme also provides additional features that are necessary to define your website’s layout, user navigation, etc.
While choosing a Shopify theme we usually tend to overlook speed and performance as parameters, but blindly go with its aesthetics and features. Good Shopify theme vendors follow nuances and guidelines that are required for themes to perform as well. They follow coding standards, integrate plugin code with the theme (negating the need for additional plugins/apps reducing to-and-fro calls), include lazy loading features for images, automatically minify CSS and HTML, etc.
Our Top Picks – Shopify Themes That Offer Performance
2. Optimize your images
Images, GIFs, and videos make up for most of a page’s size. Increase the page loading speeds by reducing the size of the page. One important step towards achieving it is by compressing your media content. There is a wide range of tools and Shopify apps available for compressing/optimizing images for size without disrupting its clarity. Do check them out. Shopify App – Image Optimizer did the job for me.
3. Avoid too many Shopify apps
Yes, apps make it easier to include tons of features to your Shopify store without much hassle. But, too many can degrade your website’s loading speeds to a greater extent. Additionally, you have no visibility of how the app developer has coded, whether or not the necessary coding standards have been followed
One other important factor that should deter you from using unreliable Shopify apps is that it can cause your site to crash when integrated.
I am saying so not to deter you from using apps, but to keep a tab on their usage. For every app you add, its code gets integrated with that of your websites’ and you have no control over it.
So what to do? Look out for Shopify themes that come integrated with most apps that you may need. Such themes are reliable and faster in nature for the coding standards are the same and reduce to and fro calls between the app and the website.
Shopify Themes That Need Minimal No of Apps
4. Lazy Loading
Lazy Loading is a speed optimization technique where a section of a website is loaded or rendered only when you navigate to it. That means to say that instead of loading the entire page, the browser loads only what is needed.
This is one of the contemporary optimization techniques that are a must for your Shopify store and is easy to implement.
How to implement it? Some of the next generation Shopify themes have already included this feature in their theme coding. Here is the list of top Shopify themes with the Lazy loading feature.
5. Use Content Delivery Networks – CDN
CDN or Content Delivery Network is a website speed enhancement technique where a copy of your website is maintained across the network on different servers. As a result of this, the website loads faster across the globe irrespective of the location of your hosting data center.
Shopify offers modern CDN hosted by Fastly for all its users.
6. Use external hosting platforms
Hosting for your Shopify store comes with your subscription/plan. Although Shopify itself offers world-class, high-quality hosting, at times it may be not good enough for your requirements. You may want to move out to a better hosting setup that offers superior hosting experience.
This call should be taken only after you have run speed audits on your Shopify store and if lag or lower performance is from the hosting end. These are many good Shopify specific hosting providers such as Hostgator, BlueHost, 1 & 1, etc.
How to move your Shopify store to a new Hosting? – Read here.
7. Introduce your Shopify store to AMP
AMP or Accelerated Mobile Pages is a mobile website optimization technique widely used to enhance mobile loading speeds. So, what exactly is AMP?
Google has repeatedly made it clear that mobile page loading speed as one of the primary ranking factors. Faster is your mobile loading speed, better it is and AMP or Accelerated Mobile Page is one vital technique to make your mobile website load.
One easiest way to deliver web content faster on your mobile device is by stripping non-essential content and features of your website for rendering on mobile devices. AMP is all about that. Removing content that takes time to load on mobile devices by rendering a separate, lighter version of web pages is what is AMP all about. Lighter versions of your web pages are known as AMPs or Accelerated Mobile Pages.
Google loves websites that are AMP integrated. If most of your traffic is from mobile devices and if you seek to enhance your ranking on search engines, AMP is the way to go.
You can find Shopify themes that come with integrated AMP features, and on the other side, there are Shopify apps too that can help you make your Shopify store render faster on mobile devices.
AMP for Shopify websites – Apps –Ampify Me and AMP Google.
8. Stop Using Images to Display Texts
Images are heavier than texts and increase the size of your web pages. Avoid using images where you can use texts instead.
9. Break Down Large Pages
More the textual content, features and media (images/videos) heavier a page becomes. If you feel a page is too heavy and loads like a snail, try to logically break the page into multiple ones. Have a single main page with links to logically broken pages so that your visitors do not miss out on what you have to convey.
1o. Do you Really Need a Quick View feature on the website?
Quick View is one of the most common functionalities used in eCommerce where a visitor can view more information about the product page without actually having to leave the current page. Quick View is primarily implemented on the eCommerce website to save your store visitor’s time to decide on their possible purchase.
The problem with the implementation of the Quick View feature is that it slows down your website significantly. This is mainly because in many cases it pre-loads the information of the entire product page on the product listing page (typically a home page or collections page). When your visitor only wants Quick View when he seeks for, loading the information of the listed products is futile. For example, if your collections page has over 15 to 20 product thumbnails, imagine the amount of data (inclusive of product details of 15 to 20 product pages) that has to load with the collection page. The number is simply huge.
Solution/s – Simply remove the Quick View functionality if your customers are really not using it.
If you do not intend to remove Quick View, you can implement AJAX to extract product information, where product details are rendered only when the visitor clicks on Quick View of a product. One other thing that you can do is limit the data attributes on the product grid items and generate HTML and pop up dynamically using JavaScript.
11. Don’t overdo Popups
Pop-ups on your Shopify web pages can slow down your page. Use it wisely.
12. Avoid Parallax Web Designs
Parallax scrolling is a website styling definition where the backdrop of the site moves at different speeds than the rest of the elements on the page. This is primarily because CSS allows layered web page design with coding options for each layer.
As a result of layered design architecture, additional computational power is required to process the data. This results in heavier pages and higher page loading speeds. Parallax effects at times can be confusing too, so it is better to avoid parallax, especially on Shopify eCommerce sites.
Another reason why Parallax scrolling doesn’t make sense for eCommerce stores is that the style is not rendered on mobile devices.
13. Avoid Resizing in HTML – Serve Scaled Images
Hear out this example – You have an image of size 3400×2000 px in your image library, but your requirement on your Shopify store is 400X280 px. What would you do? Will you set HTML width and height attributes i.e. <img width=”400″ height=”280″ src=”imagename.png” /> or will you resize the image on photoshop of other tools to 400×280 px and reload?
If you have been doing the former i.e. setting HTML image attributes, it’s time to stop doing it. This is because, logically, a large image will always be bigger in file size than a smaller image. The attributes just change the rendering size, but not the image size in actual, thus increasing the page load speed, even to render smaller images.
Remember – Resize images using image editors, give it a suitable name and then upload as per the size specified.
14. Minify HTML
One way to speed up your Shopify web pages is by reducing the sizes of your HTML files. This can be done by minifying your HTML pages used to design your website.
HTML minification is the process eliminating anything and everything that is not required for your pages to load. Typically, elements such as comments, white spaces, etc. are removed in this process, thus making your web pages light.
How to Minify your Shopify store’s HTML Pages – Read here.
15. Minify CSS
Minification of CSS is very much similar to the process of HTML code minification. In this process additional elements such as comments, spacing, new lines, indentation, etc. are removed from the code. Since minification has no effect on the utility of CSS, the process has no negative effect on your website. On the positive side, you make your CSS more difficult to read, while making your website faster.
Good and proficient developers follow good coding practices. For CSS minification, they typically create and conserve the beautified version of the CSS and before rollout, they run the styles through the minification process.
Typically, minification can reduce the size of CSS files for up to 20% resulting in an increase of page loading speeds. Also, it is best to combine all your CSS files for the website into one so that the number of HTTP requests is reduced. Also, such a process makes gzip compression much more efficient and effective.
16. Remove Unused CSS
It is required for a browser to download from the network the main.css or the external stylesheet so that it can parse, process and render content as desired. Without this process, a browser will not be able to put forth any content demanded by the user on the browser because the stylesheet contains the rules of styling for the page.
Since downloads of each style sheet happen over the network and every node or the style sheet are to be read, it is an extra burden on the browser which increases the page loading time significantly. Hence it is important to strip stylesheets of unused CSS. The more unused CSS there is, the additional time that a browser will take to parse and render the content on it.
17. Minify JavaScript
JavaScript is a programming language that adds dynamic interactivity on websites. This dynamic programming language interacts with HTML documents to paint websites with properties for interactivity.
Since JavaScript too is code file, much like minification of HTML and CSS codes, it can be stripped of unwanted elements such as comments, spaces, extra lines etc to reduce its size.
18. Minimize Redirects
As the name suggests, Redirects are instructions to the server that the earlier location of a page is changed and is available in a new location i.e. URL in case of websites.
Let me leave you with an example. You have sent a letter to Address 1, but the person in Address 1 has moved to Address 2 and has left a note on Address 1 that he has moved and any communications should be routed to Address 2. What do you think? Does it take more time for the letter to reach the recipient, who is now at Address 2, had he been residing in Address 1? It certainly does.
Same is the case with Redirection. It hurts your page speed, rather significantly especially if the page is being accessed on mobile devices.
How to solve this?
Firstly, avoid redirects as much as possible and use them only when required.
Secondly, if redirects are a must, let’s delve a little into the kinds of redirects – they are two kinds – Server-side redirects and Client-side redirects.
-
- Server Side – 301 and 302 and the most common redirects that use HTTP to communicate the change in address. A 301 redirect is permanent and a 302 redirect is temporary. These are both server-side redirects which means that the webserver is using HTTP to direct the browser to the new location of the file. Web browsers can handle these types of redirect much quicker than client-side redirects and can cache the correct location of the file.
- Client-Side – Redirects that use the http-equiv=”refresh” attribute or JavaScript can introduce even longer waiting times and performance issues and should be not used if at all possible.
Also, give a thought to these two important suggestions before you make your page live – Never link to a page that has redirects of any kind and redirect should be of only one level i.e. Address 1 to Address 2, not Address 1 to Address 2 to Address 3.
19. Minimize Broken links
Broken links are those links which when navigated to give a 404 error. This could be for various reasons – one, the URL is wrongly entered and second, the link is modified by the source of access is not updated.
Broken links on-page content per se doesn’t have much impact on your page loading speeds. But is broken links are placed within your CSS, JavaScript, and images can have a significant negative impact on your website performance.
Make sure your code, as well as your content, don’t have any broken links. Correct them by frequently auditing your website for any broken links.
20. Reduce HTTP Requests
All page loads require the browser to make calls to the server requesting additional supportive files such as JavaScripts, Images, CSS files, etc. Each of these calls is termed as an HTTP request. For every action on the website that needs supportive files, HTTP requests are made to the webserver by your browser.
Typically, browsers can set up 6 parallel connections per domain. When most requests happen, supportive files are queued for download which usually slows down the website as a result of the delay in receiving the files.
How to minimize HTTP requests from your website?
- Combine & inline your CSS scripts
- Inline smaller JavaScripts
- Combine all JavaScripts
- Minimize the use of design & functional images
- CSS image sprites
- Minimize the number of apps used on the website
- Limit the number of social buttons
21. Enable Compression
It is well known that compression of files their size. Lighter files travel faster across the network. When both the web server and your browser have agreed upon a compression format, typically .gzip, compression within the network is enabled.
Did you know that gzip compression has the ability to reduce the size of the transferred response by up to 90%? That’s Huge!
The best part with Shopify is that your files are already compressed, but if still Google Page Insights or GTMetrix points out red on .gzip compression, typically it would be from your plugins or apps.
In such cases, write to your app vendor asking him to enable it. Update your app when compression is enabled and rest on Google page insights. You are done!
You can use Shopify Analyzer to find apps that have not enabled gzip compression.
Did you Know
When you test your website speed on GTMetrix you could have come across a parameter known as Enable Browser Caching. Please note that Shopify as a platform doesn’t allow browser caching. This is because Shopify doesn’t allow access to .htaccess file.
22. Optimize your font
Fonts that you select for your website are critical to good performance, UX design, readability, and branding. Optimization of fonts should be taken up with utmost seriousness and should always be part of your performance strategy.
Good web fonts are those that are easy to select, easy to search, high DPI friendly, easily zoomable and fit all kinds of screens regardless of their resolution.
Optimized fonts, pooled with a sensible strategy for how they are rendered and applied on web pages, can help shrink web page sizes and improve page loading times.
23. Defer Parsing JavaScript
JavaScript adds dynamic interactivity to a website. When a page is loaded, the browser parses through Javascript codes that have <script> tags. This results in additional burden on your page loading speed.
To mitigate this page loading resistance, it is best to defer parsing of Javascript during page load and parse & render only when required.
24. Optimize your Code
Practise best coding standards all throughout your website. With Shopify since you will mostly be using a Shopify theme, it is best to buy themes that are developed by trustworthy vendors.
One reason why I don’t recommend too many apps integrated with your Shopify stores is for the exact reasons. When you install and activate an app, the code pertaining to the feature is plugged into your website’s codebase. This disturbs the normalcy of coding standards and the page loading speeds. When you are in the process of buying Shopify themes for your store, try to opt for those templates that minimize the usage of apps/plugins.
25. Run Web Audits – On a daily basis
Although this is not a technique to enhance your Shopify store’s performance, auditing or knowing what is hindering your website’s speed and assessing it periodically helps you take action.
Remember the hint – More time it takes to load, lower are your conversions. If you feel your conversions are not good enough, you at least know where to start. Yes, start fixing your website’s speed performance.
Final Words…
Speed is the new king, next comes the content. If you want to win in the game of running Shopify stores, Fix your Speed Issues. Start Now!
Thank you for these great advises, I was looking for the fastest Shopify theme, the one you mentioned is really the #1, but it seems that its name is Plak and not Plax.
I put it in my favorite, I may purchase it soon
Kind regards,
Alan
Hello Alan,
Thanks for pointing out the Typo.
Cheers
Great article and great advice. Speed is extremely important. Thank you