It is advisable to measure your site’s speed before making any changes, so you can gauge the effectiveness of the changes you make. There are many tools available to measure site speed. Here are a few that we use regularly.
SiteSpeedBot.com
This is one made by some people who were unhappy with the available speed testing tools, and decided to make their own. It is available at SiteSpeedBot.com. It tests for things that other tools don’t, like HTTP2 protocol support, HTTP2 push support, lazy loading and nextgen image optimization. It is also easy to understand and use, with detailed recommendations that are easy to implement. Plus, it keeps a 12 month history of any speed tests you run. For example, you can go to https://app.wpspeedfix.com/domain/treetribe.com (replacing “treetribe.com” with your own domain) to see your domain’s history.
Google Pagespeed Insights
Google Pagespeed Insights is a speed testing tool that focuses more on the site render speed. It heavily marks down sites that rely heavily on Javascript (as most Shopify sites do). The mobile score is usually lower than the desktop score because the mobile test is emulating a CPU limited mobile device on a very slow 1.6mb/second internet connection.
Pagespeed is still a useful tool, though it’s important to keep in mind that it only partially measures speed. A large chunk of its score comes from comparing your site against a technical checklist. However, this checklist does not take into account the practical limitations of the site’s code and design. Additionally, the speed test component of Pagespeed completely ignores the geographic location of the site’s hosting. This means that scores can vary depending on the location where they’re being tested, where your hosting is geographically located and how busy the internet is at the time of testing.
Before anything else, here are the 2 key reminders:
Be Mindful of how you interpret speed test results!
When you check your site’s speed on a tool like GTMetrix or Pingdom, it’s important to keep in mind that some of the warnings might not be relevant to your site, or might not have any real impact on speed. Also, some of the recommendations (like “remove query strings from static resources”) are outdated and can actually break your site. Most tools don’t take into account how your site is built, so it’s unrealistic to expect a perfect score or an A+ grade.
We see a lot of people who are obsessed with their website’s PageSpeed score and end up breaking the render or causing a “flash of unformatted content.” This is where the site appears broken for a few seconds while the elements are loaded. Achieving a higher speed grade can cause these problems. What we actually care about is the raw load time in seconds, which should be as low as possible. It’s possible to have a high PageSpeed score but still have a slow site. Ultimately, we don’t even care about speed. What actually matters is the conversion rate.
Remember, the speed of all pages matters!
Remember that the speed of all pages on your website matters when you are testing your site. Do not focus on achieving a particular Pagespeed score or load time to the exclusion of the speed of all other pages on the site.
Although it may not be possible to test every page on a website, it is advisable to test the 10 most popular pages as this is where the biggest improvements in speed will be seen.
9 Pro Steps to Optimize Page Loading Speed for Your Shopify Store
Step 1: Identify the factors affecting your store’s speed
To optimize your Shopify store pages, you will need to check the current page speed and note how they perform before and after optimization. You can do this by comparing their performance on an excel sheet.
List out the pages on your website that your customers are most likely to visit. These are typically your home page and any pages that feature your products.
There are a couple of tools that can be used in order to generate a page speed score and recommendations to make pages faster. The Google Page Speed Insights Tool is recommended.
Below, we tested Shopify store, Fashion Nova’s home page.
The PageSpeed Insights tool provides information on how well a page performs and suggestions on how to improve page performance. Data from PageSpeed Insights can be exported to an Excel file.
In business there are some factors you cannot control. You cannot control the markets, the economy, the actions of other people, or natural events. However, you can control your own actions, attitudes, and response to events.
Similarly with site speed there are some factors you cannot control:
- Your customer’s device, network, and location
- Shopify’s infrastructure (as your store is hosted on Shopify)
- Content delivery network
- Local browser cache
- Server-side page cache
However, there are some you can control and so you can make some changes yourself. Let’s explore more of them.
Step 2: Remove the apps that you aren’t using.
Removing any apps that you are not using can help improve the slow speed performance of your Shopify site. Often, the cause of slow speeds on Shopify sites, especially older ones, is due to apps.
Apps that are installed on a website add code in the form of JavaScript and CSS files. These files help the app to function properly and must be loaded by visitors in order for them to work.
You should remove any apps that you are not using actively.
Step 3: Remove other code or tools that you aren’t using.
If your website uses any third party tracking codes or marketing tools, make sure to review those as well to ensure they meet Google’s new requirements.
You should also look at all the third-party marketing tools and code that you have embedded in the website. This includes things like Hotjar, Lucky Orange, Crazyegg and similar marketing, livechat and analytics tools. These essentially have the same impact on speed as apps.
We often find that people add various elements to their website, use them for a while, then cancel their accounts but leave the code still embedded in the website. In some cases, it might be advantageous to redo the embed codes, as vendors frequently release new versions of embed codes that are faster and more efficient.
Step 4: Manage the features of your theme
Go through your theme or template and turn off any features that you are not actively using. Some of these will make little difference – but it is worth doing just to catch those that are causing delays.
The first 4 steps of Shopify speed optimization are almost finished. Before moving on to the fifth step, let’s review what we’ve done so far:
- Go through all the specific Shopify apps you have installed on your site and audit them.
- Make sure to remove or delete the ones you’re not actively using.
- Look at all the third-party code that you’re using – which, granted, might not necessarily be an app, but it’s still something embedded in the website (marketing codes, AdWords codes, email marketing codes, those kinds of things).
- Go through your theme or template and turn off any features that you’re not actively using.
These steps should not take long to do, and depending on how old your website is, it could improve its speed noticeably.
Step 5: Optimize images in your Shopify store
Since images are such an important part of your Shopify store, you want to make sure that they are high quality. However, you also want to make sure that they don’t take too long to load. In the future, remember to compress your images before you upload them, so that you can save time.
There are a few ways you can achieve both quality and speed when working with images. One great way is to use lossless compression through tools like JPEGmini or Kraken.io. You can also compress images that already exist by using apps like Crush.pics, or Image Optimizer.
It’s important to keep in mind both the dimensions and the quality of the images you upload to Shopify. They usually provide recommended sizes for things like your home page banner or product shots. If they only ask for a 1500x500px banner, there’s no need to make it any bigger.
Use only the images you really need on your webpage, as too many can slow down your site’s performance.
Step 6: Optimize your site for mobile
If you aren’t aware, a large amount of online traffic is generated from mobile devices, so it’s essential to optimize for mobile. Google will will usually prioritize the mobile version of a site for ranking its content. You can check how much traffic to your site from mobile devices is shown in your Google Analytics by going to the Google Analytics page, then selecting Audience > Mobile > Overview report.
You will need to create an AMP version of your Shopify store to improve your website’s speed on mobile devices. Google’s AMP project is designed to improve page loading speed on mobile devices. Shopify does not yet offer AMP, but there are apps that can do it for you, such as FireAMP or RocketAmp.
Step 7: Choose a fast theme
It’s important to choose a Shopify theme that won’t drag down the speed of your store. To make sure you’re choosing a fast and responsive theme, check that it’s up to date and take a look at the live preview. You can also test the speed of the preview page using the Google Page Speed Insight tool.
A content slider on your home page can slow down your page because of its size. Sliders are popular because they are able to contain 2-5 images, but there are many cons to using them such as not being mobile-friendly, increasing bounce rates, and reducing visibility. You can opt to use a single hero layout for your themes.
Step 8: Load only visible images
When someone visits your site, all the images on that page will load immediately, even if they can’t be seen. This affects the speed of the site. There is a technique called lazy loading which delays the initialization of an object until it is needed. In this case, these are images on a website.
Lazy loading is when a low-quality version of an image is displayed as a placeholder. The image changes to a high-quality version when the visitor scrolls to that image.
Step 9: Reduce HTTP requests
If there are too many, then this will slow your web page loading time The number of requests your web page makes before fully loading can be checked using Gift Of Speed. This checks the amount of image files, JavaScript files, CSS files, iframes, font files and favicon files your web page uses. If there are too many, this will slow your web page loading time.
Making too many HTTP requests on your web page can negatively impact page speed. To improve speed, aim to reduce the number of requests.
We hope that this article has been helpful in addressing some of the speed issues you have been having with your Shopify site. Speed is a priority for Shopify in helping small businesses grow, so make sure you optimize your site for speed and you will be good to go!
Related posts:
