[8 Tips] to Boost the Speed of your Shopify e-commerce website right now
Do you want to speed up your Shopify site? Fast loading pages improve user experience, increase your pageviews, and help with your Shopify SEO. In this article, we will share the most useful Shopify speed optimization tips to boost Shopify performance and speed up your website.
Table of Contents
Theme backup
It’s always good practice before you start optimizing your Shopify store to make a backup copy of your Shopify theme.
In order to do that navigate to Admin > Themes > Actions > Duplicate
This will create a copy of your theme in its current state, that way if something goes wrong you revert back to this version of your theme.
Now that we’ve a backup copy of the Shopify theme, we can start optimizing the store.
1. Speed & Performance Testing
The first things you need to do is to analyze your website thru the PageSpeed Insights tool by Google, PageSpeed will generate a score and give you suggestions with the things you can optimize to speed up your pages and make your website
faster. This tool will reveal the critical elements slowing down your site subdivided in mobile and desktop in categories:
- Optimize images
- Minify CSS
- Minify JavaScript
- Eliminate render-blocking JavaScript and CSS in above-the-fold content
- Leverage browser caching and Reduce server response time
- Avoid landing page redirects
- Gzip compression
From this analysis now you’ve a complete list with the files slowing down your website and what exactly needs to be fixed.
2. Optimize images & compression
Image compression is a fondamental and necessary step when it comes to faster loading web pages. Although Shopify automatically serves WebP images (WebP is a modern image format that provides superior compression for images on the web) you’ll still need to do some preparation before hand.we found sessions that converted users had 38% fewer images than sessions that didn’t convert. — Think with Google
You need to always prepare and optimize your images before uploading then to Shopify.
Make sure the size in pixels of the image is a not 4000x4000px an imag of 1280px is usually a good enough image size. Also make sure that the resolution of your image is set to 72ppi.
Once you’ve prepared your images, you need to compress them. To compress your images you have two options, use a free web service to compress your images such as:
Or use a Shopify app, which you’ve to pay monthly to do the job for you. If you’ve already a lot of images on your store this might be the quickest and easiest way to go because the app will handle all the image compression for you.
You can even run it once and later use the free services above and do it manually for new images.
3. Minify files
Minification is one of the main methods used to reduce load times and bandwidth usage on websites. Minification dramatically improves site speed and accessibility, directly translating into a better user experience.
To minify JS, CSS and HTML files, comments and extra spaces need to be removed, as well as crunch variable names so as to minimize code and reduce file size.
Use one of the following services to minify your files
4. Download a Fast and Responsive Theme for Your Shopify Store
The fact is, the single most important factor in store speed depends on the site theme. If the starting point, your theme, is bloatead and slow, on its own, your site will be too.
Numerous Shopify themes have fancy elements like loaders, scrolls, attractive navigation, mega menus, animations etc.
People love to shop from a website that loads quickly and saves their time. Hence, if you wish to increase your sales, then go for a theme that is super-fast and light-weight, instead of the one that is cluttered with fancy elements.
So before you install a theme it is always recommended to look for a fast, Light-weight and responsive theme. (Have a look at our speed optimized themes)
Alternatively if you’re already happy with your current theme, make sure to keep it up to date.
5. Remove Unnecessary Shopify Apps currently installed
The majority of the apps installed to your Shopify store inject CSS/JS files. The main problem here is, if you have plenty of apps installed the number of files loaded every time with your page skyrockets pretty quickly.
So a good practice is to keep your apps to the minimal and only those you really need. If you are not using the app, delete it all togheter, because its JavaScript/CSS files are probably still running in the background, and make your site performance slower. There might be some apps you just tried out and forget to delete.
Navigate to your Shopify Admin and Click > Apps
from here you can see a list of all the apps currently installed in your Shopify online store.
Once you’ve deleted the apps, there’s one more step:
Some apps inject their code directly inside your themes theme.liquid file and they doesn’t remove it once uninstalled.
So you also need to remove Shopify app files form your theme.
Navigate to your Shopify admin > Online store > Themes > Edit Code > and search for: theme.liquid
In this file look for lines of code named after the apps you just uninstalled.
6. Reduce the HTTP Requests
Use the results from step 1 to find out how many requests your page makes. Find out what files are taking longer to load, and combine them with others. You can reduce HTTP requests by doing the following:
- Minimize the use of design & functional images
- Convert images to Base64 code
- Use inline SVG
- Combine all your CSS files
- Combine all JavaScript files
- Inline smaller JavaScript code
- Remove social buttons and replace them with icons
7. Organize All Your Tracking Code with Google Tag Manager
Typically, you add separate tracking codes for Google Analytics, AdWords conversions, goals, and remarketing tags, etc., on your own end or you send it to the developer; this process
Typically you add separate tracking code for different services such as Google Analytics, Facebook pixel, AdWords conversions, Goals, and remarketing tags, etc. loading all these files will take time and eventually slow down the overall site performance.
You can lower the number of files loaded with the help of Google Tag Manager all and have all your tags stored in one place.
Let’s take a quick look on how to set up Google tag manager in your Shopify ecommerce store.
1: Sign up into Google Tag Manager
2: Create a Google Tag Manager account
3: Add Google Tag Manager Script to your theme.liquid
4: Add new tag
5: Select the service you want to use
8. Use Hero Layout Instead of Using Sliders
Sliders have been popular for a while, and people typically add 5-6 high-quality images to the slider, which increases the overall load time of the website. Research has shown its time to ignore them completely.
- Users do not click on sliders, only 1% of people actually click on a slider. – Source
- Sliders/Carousels Annoy Users and Reduce Visibility. – Source
- Sliders/Carousels are bad for SEO. – Source
- Sliders can Hurt SEO. – Source
Instead of a slider, use a single, high-quality Hero Layout image with a clear call to action.
Conclusions
These are some quick step you can take right now to speed up your Shopify ecommerce website.
If you do not have time or need an expert to work on your website, we can improve your site’s speed, as well as aim to get you a higher score with GTMetrix and other relevant speed testing tools. We’ll optimize your images, enable caching, minify files, enable site compression etc.
