<\/p>\n
Additionally, site performance impacts all of your other digital marketing initiatives. Whether it\u2019s paid, email, or social marketing, your website’s speed will impact users from all of these different channels.<\/p>\n
<\/p>\n
In this article, we\u2019ll dig into the details of\u00a0Shopify’s speed optimization tactics to offer customers the best possible user experience. So,\u00a0 make your web pages speedy and keep up with the expectations of impatient online users!<\/p>\n
<\/p>\n
Table of Contents<\/span><\/strong><\/h4>\n <\/p>\n
\n- Why Does Shopify Page Speed Matter?<\/a><\/li>\n
- What Site Speed Optimizations Does Shopify Already Have?<\/a><\/li>\n
- How To Optimize Shopify Site Speed?<\/a>\n
\n- 1.\u00a0 Use a fast and reliable Shopify hosting<\/a><\/li>\n
- 2. Choose A Lightweight, Fast & Responsive Shopify Theme<\/a><\/li>\n
- 3. Compress and Lazy Load Images & Videos<\/a><\/li>\n
- 4. Optimize HTML, JS, CSS, Font Rendering, and Third-party Scripts<\/a><\/li>\n
- 5. Integrate AMP into Your Website<\/a><\/li>\n
- 6. Minimize Redirects and Broken Links<\/a><\/li>\n
- 7. Migrate Tracking Codes To Google Tag Manager<\/a><\/li>\n
- 8. Run Regular Web Page Performance Checks<\/a><\/li>\n
- 9. Consider Professional Help
\n<\/a><\/li>\n<\/ul>\n<\/li>\n- Conclusion<\/a><\/li>\n<\/ul>\n
<\/p>\n
Let\u2019s dive in.<\/p>\n
<\/p>\n
<\/a>Why Does Shopify Page Speed Matter?<\/strong><\/span><\/h2>\neCommerce success depends on the speed of your website.\u00a0 The site’s speed gives the e-store visitors the first impression.<\/p>\n
<\/p>\n
You may not even have a second chance if your site is downloading slowly. Slow page loading leads to the frustration of users, and they can leave your site, which will directly affect the volume of sales.<\/p>\n
<\/p>\n
\n- 1. Increase Conversion\u00a0<\/strong><\/li>\n<\/ul>\n
Lower bounce rates and increased conversions have been linked to faster conversions on websites. According to Google, a one-second increase in site speed can boost mobile conversions by up to 27%.<\/p>\n
<\/p>\n
\n- 2.<\/strong>\u00a0Build Customer Loyalty<\/strong><\/li>\n<\/ul>\n
According to Skilled, 79% of customers are less inclined to repurchase from an online business if they are \u201cdissatisfied\u201d with the site\u2019s speed.<\/p>\n
<\/p>\n
\n- 3. Improve Google Search Ranking<\/strong><\/li>\n<\/ul>\n
Google, the most prominent search engine, uses site speed as a ranking component for search results.\u00a0Faster sites will rank higher on Google, making new clients find them easier.<\/p>\n
<\/p>\n
A Shopify website could feature the most tantalizing or useful products; your site may be well-designed, functional, highly intuitive, and aesthetically pleasing. But if the page does not load fast enough, users will leave it earlier than they will notice all the advantages of your products or the great functionality of your website.<\/p>\n
<\/p>\n
Naturally, optimizing a Shopify site for high page load speed is a major priority.<\/p>\n
<\/p>\n
<\/a>What Site Speed Optimizations Does Shopify Already Have?<\/span><\/strong><\/h2>\nOne of the nice things about Shopify is that your store does come with some built-in speed optimization features. In general, Shopify sites are pretty fast compared to other solutions. This is great news for Shopify store owners, as the platform is generally faster than platforms such as Magento.<\/p>\n
<\/p>\n
You may discover such useful instruments as:<\/p>\n
<\/p>\n
\n- Leverage Browser Caching<\/strong>: Shopify should already cache your site\u2019s internal resources by default. Caching allows some of your content, such as images, JavaScript, and CSS, to be stored locally within users\u2019 browsers. This means they will not have to re-download the content when viewing the same resource twice. This can speed up your store, as users will be able to see some of your site\u2019s content much faster than they were previously. Note that if you\u2019re seeing third-party resources get flagged for caching issues, there is nothing you can do to directly adjust the caching.<\/li>\n
- Utilize a CDN<\/strong>: Shopify\u00a0utilizes the Fastly CDN<\/a>. A CDN (Content Delivery Network) allows some of your site\u2019s content to be stored on servers across the world. This reduces the physical distance between your users and your site\u2019s content. Reducing the physical distance helps improve your site performance. The Shopify CDN essentially informs the CDN that your assets\u2014JS, images, and CSS\u2014have been edited whenever you make a change to them.<\/span> <\/span>As a standard practice, CDN allows merchants to use Shopify Plus to power their website\u2019s backend on autopilot.<\/li>\n<\/ul>\n
<\/p>\n
Many different factors may affect the timing of your website loading, and in this Shopify speed optimization tutorial, we will reveal the most common issues. Let\u2019s move on!<\/p>\n
<\/p>\n
<\/a>How To Optimize Shopify Site Speed<\/strong><\/span><\/h2>\nBy following these steps, you can significantly speed up a Shopify site:<\/p>\n
<\/p>\n
I will highlight the best practices that are used by our Shopify development team and what we consider the most powerful ways to speed up the Shopify website.<\/p>\n
<\/p>\n
<\/a>1. Use fast and reliable Shopify hosting<\/span><\/strong><\/h3>\nHosting services and infrastructure can make or break the performance of an e-commerce site. This is primarily true on high-traffic and high-transaction days.<\/p>\n
Some factors to remember when deciding on hosting platform requirements include:<\/p>\n
\n- Memory, as well as bandwidth limits, will determine if the platform will have the ability to scale per demand. Especially during seasonal promotions and flash sales.<\/li>\n
- The amount of projected traffic as well as the peak user load it can handle ensure that the platform will not crash when there is a sudden uptick in visitors.<\/li>\n
- Appropriate security ensures that your visitors’ and users\u2019 data is secure at all times.<\/li>\n<\/ul>\n
<\/p>\n
<\/a>2. Choose A Lightweight, Fast and Responsive Shopify Theme<\/span><\/strong><\/h3>\nThemes act as a store\u2019s face.\u00a0 Selecting a Shopify theme is the most critical decision for a Shopify seller. The theme acts as a storefront for online shops.<\/p>\n
<\/p>\n
Hence, choose a theme that aligns with your brand\u2019s idea, voice, products, and potential audiences. In addition, look for themes that are fast and take minimal time to load the page.<\/p>\n
<\/p>\n
![\"\"](\"https:\/\/magecloud.agency\/wp-content\/uploads\/2022\/09\/shopify-themes-1.png\")
<\/p>\n
<\/p>\n
Selecting the themes with numerous sliders, fancy animations, advanced navigation systems, etc., will affect your page speed. As every extra element will add load to your web page, it will take time to load the page.<\/p>\n
<\/p>\n
Conversely, choosing a lightweight, and thus fast, Shopify theme can immediately set your site up for strong performance moving forward.<\/p>\n
<\/p>\n
\n- Pro-Tip 1.<\/strong> Before finalizing the theme, run the theme preview page through Google PageSpeed Insight and see the suggestions to make that page faster.<\/li>\n
- Pro-Tip 2.<\/strong> Once you have chosen a theme, remember to keep it up\u00a0to\u00a0date<\/a>.<\/li>\n<\/ul>\n
<\/p>\n
To give you an idea of some of the better-performing themes resulting in higher conversion rates for websites:<\/p>\n
\n- Toy Theme<\/a><\/li>\n
- Warm Theme<\/a><\/li>\n
- Light Theme<\/a><\/li>\n
- Outdoors Theme<\/a><\/li>\n
- Simple Theme<\/a><\/li>\n<\/ul>\n
<\/p>\n
2.1. Switch to Hero Layout & Kill Sliders and Carousels<\/span><\/strong><\/h4>\n <\/p>\n
Many sites use sliders to display multiple product images on their homepage. From a design perspective, it makes sense. But high-quality images combined with transitions take time to load and it can increase the website load by manifolds. Additionally, sliders are useless (only 1% of site visitors click on sliders), do not work correctly on mobile, and can hurt your SEO.<\/span><\/p>\nWhen creating a responsive web platform, you\u2019d better not run sliders on your web and switch to a single high-quality hero image that captures the essence of the site and a clear call-to-action (CTA).<\/p>\n
<\/p>\n
\n- Pro-Tip 1:<\/strong> Don\u2019t use videos or GIFs in the hero section. <\/span>If you need to use a video, you can embed one you uploaded to YouTube; it\u2019s lighter.<\/li>\n<\/ul>\n
<\/p>\n
Carousels and sliders are the main contributors to poor usability and also load many large and HD images. Replacing the carousel with a single, optimized image paired with a clear CTA will<\/em> be better for your site\u2019s performance as well as that of your users.<\/p>\n <\/p>\n
If you want to elaborate on product features, use compelling product descriptions that paint vivid pictures and also improve SEO. If you can represent some information easily with text, there\u2019s no need to dedicate entire sliders or carousels to them.<\/p>\n
<\/p>\n
2.2. Avoid excessive pop-up quick-view windows<\/strong><\/span><\/h4>\n <\/p>\n
The point of improving the speed of your store\u2019s performance is to give visitors the information they are looking for as soon as possible. That\u2019s where a quick pop-up window is helpful\u2014displaying product details directly from an internal page rather than having them click through the page manually.<\/p>\n
<\/p>\n
However, the challenge here is:<\/p>\n
<\/p>\n
\n- It adds an extra step for the visitor.<\/li>\n
- The user might click it accidentally, which might result in a frustrating experience.<\/li>\n
- It can be confused with the actual product page.<\/li>\n
- And most importantly, excessive pop-ups can significantly impact your page load time<\/li>\n<\/ol>\n
<\/p>\n
This article<\/a> has everything you need to know about eCommerce popups.<\/p>\n <\/p>\n
2.3. Avoid excessive liquid loops<\/strong><\/span><\/h4>\n <\/p>\n
Liquid Loops are Shopify-specific and have proven to be extremely useful. However, particular functions have added benefits but also have some tradeoffs.<\/p>\n
<\/p>\n
Loop iteration is one such example that can affect merchants. It occurs when the system has to crawl through the whole store to look for any specific condition. This can be conditions like price, tags, etc. If you have an extensive product catalog, like most large merchants, this loop can take a long time and affect the response time of your store.<\/p>\n
<\/p>\n
2.4. Choose Proper Fonts<\/strong><\/span><\/h4>\n <\/p>\n
Shopify\u2019s font library contains a collection of fonts such as system fonts, Google fonts, and licensed fonts from Monotype. All of these fonts are freely available to use in all Shopify online shops.<\/p>\n
<\/p>\n
Be aware that if you use fonts that do not exist on your customer\u2019s computer, it would be irritating that your customer needs to download new fonts to have the text displayed.<\/p>\n
<\/p>\n
To steer clear of downloading new fonts to your customer\u2019s computer, you might want to think about using system fonts<\/em><\/strong> (that already exist on most computers).<\/p>\n <\/p>\n
When you choose a system font family, you can choose from a variety of typefaces to render text:<\/p>\n
\n- Mono fonts:<\/strong>\u00a0Menlo, Consolas, Monaco, Liberation Mono, or Lucida Console.<\/li>\n
- Sans-serif fonts:<\/strong>\u00a0BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, or Helvetica Neue.<\/li>\n
- Serif fonts:<\/strong>\u00a0Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, or Source Serif Pro.<\/li>\n<\/ul>\n
<\/p>\n
<\/a>3. Compress and Lazy Load Images and Videos<\/strong><\/span><\/h3>\n <\/p>\n
Product image strategy is a base for better conversion and shopper attraction. All pictures need to be in their places to help the customer find exactly what they need and make a purchase.<\/p>\n
<\/p>\n
However, a large volume of unoptimized images and videos is frequently the most popular reason for website slowness. There are 4 solutions that you might want to consider to speed up the Shopify site, as follows:<\/p>\n
<\/p>\n
<\/p>\n
3.1. Compress and Merge Images<\/strong><\/span><\/h4>\n <\/p>\n
eCommerce businesses have a propensity to use large numbers of images since, in retail, images are a necessity to highlight products. While this may allow visitors to view the products better, each image contributes to the website\u2019s loading time.<\/p>\n
<\/p>\n
The Shopify platform has no limitations on uploading pictures. Moreover, it offers the following formats for uploading the images:<\/span><\/p>\n\n- JPG or JPEG<\/li>\n
- Progressive JPEG<\/li>\n
- PNG<\/li>\n
- GIF<\/li>\n<\/ul>\n
<\/p>\n
The result of using a large number of images on the page can be a very heavy page weight that takes users longer to download than a less image-intensive page. As well, unoptimized images can make your site\u2019s page even heavier.<\/p>\n
<\/p>\n
Resizing or compressing large image assets can be one of the best ways to speed up a Shopify site. The smaller file size will allow browsers to load your website content faster.<\/p>\n
<\/p>\n
\n- Pro Tip 1: Use the recommended image sizes.<\/strong> Better quality demands bigger dimensions and image sizes. In order not to lose the page load speed, it is better to upload images of the exact di<\/span>mensions required for the page. For example, if the home page banner dimensions need to be 1500×500 pixels, you need to resize the image to the required dimensions.<\/li>\n
- Pro Tip 2: Multiple image optimization<\/strong> Shopify platform recommends using 2048×2048 pixels so that image quality is not distorted when someone zooms in. But if the user uploads multiple images of that resolution, you may find that your store becomes much slower. In that case, 800 x 800 images are recommended. <\/span><\/li>\n<\/ul>\n
<\/p>\n
![\"\"](\"https:\/\/magecloud.agency\/wp-content\/uploads\/2022\/09\/tiny-png.png\")
<\/h3>\n
<\/p>\n
Image Compression Tools<\/strong><\/p>\n <\/p>\n
There are many plugins available that can help you compress image files without decreasing quality.<\/p>\n
<\/p>\n
For new images:<\/p>\n
\n- TinyPNG<\/span><\/li>\n
- TinyJPG<\/a><\/span><\/li>\n
- JPEGmini<\/span><\/li>\n
- Kraken.io<\/span><\/li>\n
- Optimizilla<\/a><\/span><\/li>\n<\/ul>\n
<\/p>\n
For existing images on a Shopify store (Shopify Apps):<\/p>\n
\n- AVADA Seo Suite<\/a><\/span><\/li>\n
- Crush.pics<\/a><\/span><\/li>\n
- Image Optimizer<\/a><\/span><\/li>\n<\/ul>\n
<\/p>\n
While performing image compression, you have to keep in mind the quality of the image.<\/p>\n
<\/p>\n
Once all your images are optimized, the loading time of the page will reduce drastically.<\/p>\n
<\/p>\n
<\/p>\n
3.2. Replace GIFs with Static Images<\/strong><\/h4>\n <\/p>\n
GIFs can be seen as a valuable asset for customers\u2019 experiences since they provide a more interactive experience for users.<\/p>\n
<\/p>\n
However, be aware that these files are particularly large; a GIF image possesses multiple frames.<\/strong> <\/em>These files significantly add to page weight; therefore, website experts highly recommend switching them to static images where possible.<\/p>\n <\/p>\n
<\/p>\n
3.3. Apply Lazy Loading<\/strong><\/span><\/h4>\n <\/p>\n
Lazy-loading works on the principle of demand and supply. The browser only loads the content that the visitor will first see, i.e., above-the-fold content. The content below the fold will not be displayed until the visitor scrolls down.<\/p>\n
<\/p>\n
Images will not load at once and will not be displayed until the visitor scrolls down. Therefore, the loading of the specific fonts starts only when they are needed.<\/p>\n
<\/p>\n
Since many Shopify sites use lots of images, looking into lazy loading makes sense in a large number of instances. This can speed up your Shopify website as all of your site\u2019s images won\u2019t load at once, only as a user scrolls down the page.<\/p>\n
<\/p>\n
If you\u2019re interested in implementing lazy loading, Shopify has helpful documentation around this here.<\/a><\/p>\n <\/p>\n
Another solution to improve Shopify site speed that merchants need to take into account is video. Deferred Video Loading is a performance technique that allows your site to load faster by deferring the loading of video resources until they are needed.<\/p>\n
<\/p>\n
To implement this tool, you should hire an experienced Shopify developer who can assist professionally with Shopify page speed optimization.<\/p>\n
<\/p>\n
4. Optimize HTML, JS, CSS, Font Rendering, and Third-party Scripts<\/span><\/strong><\/span><\/h3>\nThe idea here is to ensure your code is as lightweight as it can be. Some experts recommend your JavaScript file size should be less than 16kb, but that\u2019s difficult to achieve. It also involves removing unused and unnecessary code, deleting code comments, fixing formatting, and using shorter function names.<\/p>\n
<\/p>\n
4.1. Minify resources: HTML, CSS, and JavaScript<\/strong><\/span><\/h4>\n <\/p>\n
During the loading process, every website loads multiple files with CSS, HTML, and JavaScript. <\/em>Most of them include extra spaces, comments, and crunch variable names. Naturally,<\/em> this leads to extra loading time. Compacting the HTML code together with inlining JavaScript and CSS can save data and optimize your site’s speed.<\/p>\n <\/p>\n
If you locate the JS and CSS files (with extensions ending in .scss.liquid or\u00a0 .sccs) in your Assets folder, you can edit the code. But it\u2019s better to use an app and get it done in seconds.\u00a0<\/span><\/p>\n <\/p>\n
If you want to use a specific app just for JS, CSS, and Liquid minification, opt for:<\/span><\/p>\n\n- JSCompress<\/a><\/span><\/li>\n
- cssnano<\/a><\/span><\/li>\n
- File Optimizer<\/a><\/span><\/li>\n<\/ul>\n
<\/p>\n
4.2. Eliminate render-blocking JavaScript and CSS resources<\/strong><\/span><\/h4>\n <\/p>\n
When visitors land on your site, their browser will start to read your code from the top down. It encounters JavaScript and CSS files and pauses the loading process until the file is processed. These resources are also called render-blocking. There is a way to change the load priority by making certain CSS and JavaScript resources wait to load until the visible part of your page has already loaded.<\/p>\n
<\/p>\n
4.3. Remove Unused Third-party Scripts and Residual Codes from Old Apps<\/strong><\/h4>\n <\/p>\n
![\"\"](\"https:\/\/magecloud.agency\/wp-content\/uploads\/2022\/09\/shopify-apps.png\")
<\/p>\n
It cannot be denied that apps are handy, especially if you are not tech-savvy and have no prior experience with coding.<\/p>\n
<\/p>\n
To add more functionality to the Shopify website and improve the user experience, additional Shopify apps are widely used.<\/p>\n
<\/p>\n
But third-party resources [have a lot of JS and CSS files that run in the background] may negatively affect your website performance by adding load to your website. Even if you are not using these apps, they still leave a lot of residual code.<\/p>\n
<\/p>\n
So, that is why you should go through your store and check all of the third-party resources used. Then, there are two simple steps you can follow:<\/p>\n
<\/p>\n
\n- Uninstall any unused apps or plug-ins. <\/em><\/strong>Another helpful trick to increase your page speed is to remove the app you believe increases the loading time. Run your website without it and note down how quickly your page loads. Find an alternative for the removed app, install it, and load your page again to check the difference in loading time.<\/li>\n
- If you are deleting an app, think about removing any legacy code they may leave behind once deleted<\/em><\/strong>. Some apps assist you in this procedure by enclosing their code in {% comment %} tags that include the app name.\u00a0 Always remember to keep a backup.<\/li>\n<\/ul>\n
<\/p>\n
Note:<\/strong><\/em> Admin-only apps like the Shopify Local Delivery app don\u2019t impact your store’s speed.<\/p>\n <\/p>\n
Asking these five questions about each resource can help make a decision:
\n[Of course, the answers to these questions will certainly vary based on your store and business model.]<\/p>\n
\n- How often do we use this feature?<\/li>\n
- Is this a \u201cmust-have\u201d or \u201cnice to have\u201d?<\/li>\n
- Is there a lighter-weight option that we could use?<\/li>\n
- Is the benefit we get from this worth a performance trade-off?<\/li>\n
- Are there any metrics we can reference to see how often this feature is used by our users?<\/li>\n<\/ol>\n
<\/p>\n
After answering these questions, we recommend working with your development team to figure out which elements can be safely removed.<\/p>\n
<\/p>\n
\n- Pro Tip 1: <\/strong>Select new apps carefully, and every time b<\/span>efore adding any extra script, you need to analyze its size.<\/span><\/li>\n<\/ul>\n
<\/p>\n
Here are some third-party codes we\u2019ve found Shopify stores utilizing that tend to have larger impacts on performance:<\/p>\n
[If you know you\u2019re utilizing one of them, it\u2019s good to be aware that it might be having an impact on the performance of your Shopify store.<\/em>]<\/p>\n <\/p>\n
- \n
- 1.\u00a0 Use a fast and reliable Shopify hosting<\/a><\/li>\n
- 2. Choose A Lightweight, Fast & Responsive Shopify Theme<\/a><\/li>\n
- 3. Compress and Lazy Load Images & Videos<\/a><\/li>\n
- 4. Optimize HTML, JS, CSS, Font Rendering, and Third-party Scripts<\/a><\/li>\n
- 5. Integrate AMP into Your Website<\/a><\/li>\n
- 6. Minimize Redirects and Broken Links<\/a><\/li>\n
- 7. Migrate Tracking Codes To Google Tag Manager<\/a><\/li>\n
- 8. Run Regular Web Page Performance Checks<\/a><\/li>\n
- 9. Consider Professional Help
\n<\/a><\/li>\n<\/ul>\n<\/li>\n- Conclusion<\/a><\/li>\n<\/ul>\n
<\/p>\n
Let\u2019s dive in.<\/p>\n
<\/p>\n
<\/a>Why Does Shopify Page Speed Matter?<\/strong><\/span><\/h2>\n
eCommerce success depends on the speed of your website.\u00a0 The site’s speed gives the e-store visitors the first impression.<\/p>\n
<\/p>\n
You may not even have a second chance if your site is downloading slowly. Slow page loading leads to the frustration of users, and they can leave your site, which will directly affect the volume of sales.<\/p>\n
<\/p>\n
- \n
- 1. Increase Conversion\u00a0<\/strong><\/li>\n<\/ul>\n
Lower bounce rates and increased conversions have been linked to faster conversions on websites. According to Google, a one-second increase in site speed can boost mobile conversions by up to 27%.<\/p>\n
<\/p>\n
- \n
- 2.<\/strong>\u00a0Build Customer Loyalty<\/strong><\/li>\n<\/ul>\n
According to Skilled, 79% of customers are less inclined to repurchase from an online business if they are \u201cdissatisfied\u201d with the site\u2019s speed.<\/p>\n
<\/p>\n
- \n
- 3. Improve Google Search Ranking<\/strong><\/li>\n<\/ul>\n
Google, the most prominent search engine, uses site speed as a ranking component for search results.\u00a0Faster sites will rank higher on Google, making new clients find them easier.<\/p>\n
<\/p>\n
A Shopify website could feature the most tantalizing or useful products; your site may be well-designed, functional, highly intuitive, and aesthetically pleasing. But if the page does not load fast enough, users will leave it earlier than they will notice all the advantages of your products or the great functionality of your website.<\/p>\n
<\/p>\n
Naturally, optimizing a Shopify site for high page load speed is a major priority.<\/p>\n
<\/p>\n
<\/a>What Site Speed Optimizations Does Shopify Already Have?<\/span><\/strong><\/h2>\n
One of the nice things about Shopify is that your store does come with some built-in speed optimization features. In general, Shopify sites are pretty fast compared to other solutions. This is great news for Shopify store owners, as the platform is generally faster than platforms such as Magento.<\/p>\n
<\/p>\n
You may discover such useful instruments as:<\/p>\n
<\/p>\n
- \n
- Leverage Browser Caching<\/strong>: Shopify should already cache your site\u2019s internal resources by default. Caching allows some of your content, such as images, JavaScript, and CSS, to be stored locally within users\u2019 browsers. This means they will not have to re-download the content when viewing the same resource twice. This can speed up your store, as users will be able to see some of your site\u2019s content much faster than they were previously. Note that if you\u2019re seeing third-party resources get flagged for caching issues, there is nothing you can do to directly adjust the caching.<\/li>\n
- Utilize a CDN<\/strong>: Shopify\u00a0utilizes the Fastly CDN<\/a>. A CDN (Content Delivery Network) allows some of your site\u2019s content to be stored on servers across the world. This reduces the physical distance between your users and your site\u2019s content. Reducing the physical distance helps improve your site performance. The Shopify CDN essentially informs the CDN that your assets\u2014JS, images, and CSS\u2014have been edited whenever you make a change to them.<\/span> <\/span>As a standard practice, CDN allows merchants to use Shopify Plus to power their website\u2019s backend on autopilot.<\/li>\n<\/ul>\n
<\/p>\n
Many different factors may affect the timing of your website loading, and in this Shopify speed optimization tutorial, we will reveal the most common issues. Let\u2019s move on!<\/p>\n
<\/p>\n
<\/a>How To Optimize Shopify Site Speed<\/strong><\/span><\/h2>\n
By following these steps, you can significantly speed up a Shopify site:<\/p>\n
<\/p>\n
I will highlight the best practices that are used by our Shopify development team and what we consider the most powerful ways to speed up the Shopify website.<\/p>\n
<\/p>\n
<\/a>1. Use fast and reliable Shopify hosting<\/span><\/strong><\/h3>\n
Hosting services and infrastructure can make or break the performance of an e-commerce site. This is primarily true on high-traffic and high-transaction days.<\/p>\n
Some factors to remember when deciding on hosting platform requirements include:<\/p>\n
- \n
- Memory, as well as bandwidth limits, will determine if the platform will have the ability to scale per demand. Especially during seasonal promotions and flash sales.<\/li>\n
- The amount of projected traffic as well as the peak user load it can handle ensure that the platform will not crash when there is a sudden uptick in visitors.<\/li>\n
- Appropriate security ensures that your visitors’ and users\u2019 data is secure at all times.<\/li>\n<\/ul>\n
<\/p>\n
<\/a>2. Choose A Lightweight, Fast and Responsive Shopify Theme<\/span><\/strong><\/h3>\n
Themes act as a store\u2019s face.\u00a0 Selecting a Shopify theme is the most critical decision for a Shopify seller. The theme acts as a storefront for online shops.<\/p>\n
<\/p>\n
Hence, choose a theme that aligns with your brand\u2019s idea, voice, products, and potential audiences. In addition, look for themes that are fast and take minimal time to load the page.<\/p>\n
<\/p>\n
<\/p>\n<\/p>\n
Selecting the themes with numerous sliders, fancy animations, advanced navigation systems, etc., will affect your page speed. As every extra element will add load to your web page, it will take time to load the page.<\/p>\n
<\/p>\n
Conversely, choosing a lightweight, and thus fast, Shopify theme can immediately set your site up for strong performance moving forward.<\/p>\n
<\/p>\n
- \n
- Pro-Tip 1.<\/strong> Before finalizing the theme, run the theme preview page through Google PageSpeed Insight and see the suggestions to make that page faster.<\/li>\n
- Pro-Tip 2.<\/strong> Once you have chosen a theme, remember to keep it up\u00a0to\u00a0date<\/a>.<\/li>\n<\/ul>\n
<\/p>\n
To give you an idea of some of the better-performing themes resulting in higher conversion rates for websites:<\/p>\n
- \n
- Toy Theme<\/a><\/li>\n
- Warm Theme<\/a><\/li>\n
- Light Theme<\/a><\/li>\n
- Outdoors Theme<\/a><\/li>\n
- Simple Theme<\/a><\/li>\n<\/ul>\n
<\/p>\n
2.1. Switch to Hero Layout & Kill Sliders and Carousels<\/span><\/strong><\/h4>\n
<\/p>\n
Many sites use sliders to display multiple product images on their homepage. From a design perspective, it makes sense. But high-quality images combined with transitions take time to load and it can increase the website load by manifolds. Additionally, sliders are useless (only 1% of site visitors click on sliders), do not work correctly on mobile, and can hurt your SEO.<\/span><\/p>\n
When creating a responsive web platform, you\u2019d better not run sliders on your web and switch to a single high-quality hero image that captures the essence of the site and a clear call-to-action (CTA).<\/p>\n
<\/p>\n
- \n
- Pro-Tip 1:<\/strong> Don\u2019t use videos or GIFs in the hero section. <\/span>If you need to use a video, you can embed one you uploaded to YouTube; it\u2019s lighter.<\/li>\n<\/ul>\n
<\/p>\n
Carousels and sliders are the main contributors to poor usability and also load many large and HD images. Replacing the carousel with a single, optimized image paired with a clear CTA will<\/em> be better for your site\u2019s performance as well as that of your users.<\/p>\n
<\/p>\n
If you want to elaborate on product features, use compelling product descriptions that paint vivid pictures and also improve SEO. If you can represent some information easily with text, there\u2019s no need to dedicate entire sliders or carousels to them.<\/p>\n
<\/p>\n
2.2. Avoid excessive pop-up quick-view windows<\/strong><\/span><\/h4>\n
<\/p>\n
The point of improving the speed of your store\u2019s performance is to give visitors the information they are looking for as soon as possible. That\u2019s where a quick pop-up window is helpful\u2014displaying product details directly from an internal page rather than having them click through the page manually.<\/p>\n
<\/p>\n
However, the challenge here is:<\/p>\n
<\/p>\n
- \n
- It adds an extra step for the visitor.<\/li>\n
- The user might click it accidentally, which might result in a frustrating experience.<\/li>\n
- It can be confused with the actual product page.<\/li>\n
- And most importantly, excessive pop-ups can significantly impact your page load time<\/li>\n<\/ol>\n
<\/p>\n
This article<\/a> has everything you need to know about eCommerce popups.<\/p>\n
<\/p>\n
2.3. Avoid excessive liquid loops<\/strong><\/span><\/h4>\n
<\/p>\n
Liquid Loops are Shopify-specific and have proven to be extremely useful. However, particular functions have added benefits but also have some tradeoffs.<\/p>\n
<\/p>\n
Loop iteration is one such example that can affect merchants. It occurs when the system has to crawl through the whole store to look for any specific condition. This can be conditions like price, tags, etc. If you have an extensive product catalog, like most large merchants, this loop can take a long time and affect the response time of your store.<\/p>\n
<\/p>\n
2.4. Choose Proper Fonts<\/strong><\/span><\/h4>\n
<\/p>\n
Shopify\u2019s font library contains a collection of fonts such as system fonts, Google fonts, and licensed fonts from Monotype. All of these fonts are freely available to use in all Shopify online shops.<\/p>\n
<\/p>\n
Be aware that if you use fonts that do not exist on your customer\u2019s computer, it would be irritating that your customer needs to download new fonts to have the text displayed.<\/p>\n
<\/p>\n
To steer clear of downloading new fonts to your customer\u2019s computer, you might want to think about using system fonts<\/em><\/strong> (that already exist on most computers).<\/p>\n
<\/p>\n
When you choose a system font family, you can choose from a variety of typefaces to render text:<\/p>\n
- \n
- Mono fonts:<\/strong>\u00a0Menlo, Consolas, Monaco, Liberation Mono, or Lucida Console.<\/li>\n
- Sans-serif fonts:<\/strong>\u00a0BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, or Helvetica Neue.<\/li>\n
- Serif fonts:<\/strong>\u00a0Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, or Source Serif Pro.<\/li>\n<\/ul>\n
<\/p>\n
<\/a>3. Compress and Lazy Load Images and Videos<\/strong><\/span><\/h3>\n
<\/p>\n
Product image strategy is a base for better conversion and shopper attraction. All pictures need to be in their places to help the customer find exactly what they need and make a purchase.<\/p>\n
<\/p>\n
However, a large volume of unoptimized images and videos is frequently the most popular reason for website slowness. There are 4 solutions that you might want to consider to speed up the Shopify site, as follows:<\/p>\n
<\/p>\n
<\/p>\n
3.1. Compress and Merge Images<\/strong><\/span><\/h4>\n
<\/p>\n
eCommerce businesses have a propensity to use large numbers of images since, in retail, images are a necessity to highlight products. While this may allow visitors to view the products better, each image contributes to the website\u2019s loading time.<\/p>\n
<\/p>\n
The Shopify platform has no limitations on uploading pictures. Moreover, it offers the following formats for uploading the images:<\/span><\/p>\n
- \n
- JPG or JPEG<\/li>\n
- Progressive JPEG<\/li>\n
- PNG<\/li>\n
- GIF<\/li>\n<\/ul>\n
<\/p>\n
The result of using a large number of images on the page can be a very heavy page weight that takes users longer to download than a less image-intensive page. As well, unoptimized images can make your site\u2019s page even heavier.<\/p>\n
<\/p>\n
Resizing or compressing large image assets can be one of the best ways to speed up a Shopify site. The smaller file size will allow browsers to load your website content faster.<\/p>\n
<\/p>\n
- \n
- Pro Tip 1: Use the recommended image sizes.<\/strong> Better quality demands bigger dimensions and image sizes. In order not to lose the page load speed, it is better to upload images of the exact di<\/span>mensions required for the page. For example, if the home page banner dimensions need to be 1500×500 pixels, you need to resize the image to the required dimensions.<\/li>\n
- Pro Tip 2: Multiple image optimization<\/strong> Shopify platform recommends using 2048×2048 pixels so that image quality is not distorted when someone zooms in. But if the user uploads multiple images of that resolution, you may find that your store becomes much slower. In that case, 800 x 800 images are recommended. <\/span><\/li>\n<\/ul>\n
<\/p>\n
<\/h3>\n<\/p>\n
Image Compression Tools<\/strong><\/p>\n
<\/p>\n
There are many plugins available that can help you compress image files without decreasing quality.<\/p>\n
<\/p>\n
For new images:<\/p>\n
- \n
- TinyPNG<\/span><\/li>\n
- TinyJPG<\/a><\/span><\/li>\n
- JPEGmini<\/span><\/li>\n
- Kraken.io<\/span><\/li>\n
- Optimizilla<\/a><\/span><\/li>\n<\/ul>\n
<\/p>\n
For existing images on a Shopify store (Shopify Apps):<\/p>\n
- \n
- AVADA Seo Suite<\/a><\/span><\/li>\n
- Crush.pics<\/a><\/span><\/li>\n
- Image Optimizer<\/a><\/span><\/li>\n<\/ul>\n
<\/p>\n
While performing image compression, you have to keep in mind the quality of the image.<\/p>\n
<\/p>\n
Once all your images are optimized, the loading time of the page will reduce drastically.<\/p>\n
<\/p>\n
<\/p>\n
3.2. Replace GIFs with Static Images<\/strong><\/h4>\n
<\/p>\n
GIFs can be seen as a valuable asset for customers\u2019 experiences since they provide a more interactive experience for users.<\/p>\n
<\/p>\n
However, be aware that these files are particularly large; a GIF image possesses multiple frames.<\/strong> <\/em>These files significantly add to page weight; therefore, website experts highly recommend switching them to static images where possible.<\/p>\n
<\/p>\n
<\/p>\n
3.3. Apply Lazy Loading<\/strong><\/span><\/h4>\n
<\/p>\n
Lazy-loading works on the principle of demand and supply. The browser only loads the content that the visitor will first see, i.e., above-the-fold content. The content below the fold will not be displayed until the visitor scrolls down.<\/p>\n
<\/p>\n
Images will not load at once and will not be displayed until the visitor scrolls down. Therefore, the loading of the specific fonts starts only when they are needed.<\/p>\n
<\/p>\n
Since many Shopify sites use lots of images, looking into lazy loading makes sense in a large number of instances. This can speed up your Shopify website as all of your site\u2019s images won\u2019t load at once, only as a user scrolls down the page.<\/p>\n
<\/p>\n
If you\u2019re interested in implementing lazy loading, Shopify has helpful documentation around this here.<\/a><\/p>\n
<\/p>\n
Another solution to improve Shopify site speed that merchants need to take into account is video. Deferred Video Loading is a performance technique that allows your site to load faster by deferring the loading of video resources until they are needed.<\/p>\n
<\/p>\n
To implement this tool, you should hire an experienced Shopify developer who can assist professionally with Shopify page speed optimization.<\/p>\n
<\/p>\n
4. Optimize HTML, JS, CSS, Font Rendering, and Third-party Scripts<\/span><\/strong><\/span><\/h3>\n
The idea here is to ensure your code is as lightweight as it can be. Some experts recommend your JavaScript file size should be less than 16kb, but that\u2019s difficult to achieve. It also involves removing unused and unnecessary code, deleting code comments, fixing formatting, and using shorter function names.<\/p>\n
<\/p>\n
4.1. Minify resources: HTML, CSS, and JavaScript<\/strong><\/span><\/h4>\n
<\/p>\n
During the loading process, every website loads multiple files with CSS, HTML, and JavaScript. <\/em>Most of them include extra spaces, comments, and crunch variable names. Naturally,<\/em> this leads to extra loading time. Compacting the HTML code together with inlining JavaScript and CSS can save data and optimize your site’s speed.<\/p>\n
<\/p>\n
If you locate the JS and CSS files (with extensions ending in .scss.liquid or\u00a0 .sccs) in your Assets folder, you can edit the code. But it\u2019s better to use an app and get it done in seconds.\u00a0<\/span><\/p>\n
<\/p>\n
If you want to use a specific app just for JS, CSS, and Liquid minification, opt for:<\/span><\/p>\n
- \n
- JSCompress<\/a><\/span><\/li>\n
- cssnano<\/a><\/span><\/li>\n
- File Optimizer<\/a><\/span><\/li>\n<\/ul>\n
<\/p>\n
4.2. Eliminate render-blocking JavaScript and CSS resources<\/strong><\/span><\/h4>\n
<\/p>\n
When visitors land on your site, their browser will start to read your code from the top down. It encounters JavaScript and CSS files and pauses the loading process until the file is processed. These resources are also called render-blocking. There is a way to change the load priority by making certain CSS and JavaScript resources wait to load until the visible part of your page has already loaded.<\/p>\n
<\/p>\n
4.3. Remove Unused Third-party Scripts and Residual Codes from Old Apps<\/strong><\/h4>\n
<\/p>\n
<\/p>\nIt cannot be denied that apps are handy, especially if you are not tech-savvy and have no prior experience with coding.<\/p>\n
<\/p>\n
To add more functionality to the Shopify website and improve the user experience, additional Shopify apps are widely used.<\/p>\n
<\/p>\n
But third-party resources [have a lot of JS and CSS files that run in the background] may negatively affect your website performance by adding load to your website. Even if you are not using these apps, they still leave a lot of residual code.<\/p>\n
<\/p>\n
So, that is why you should go through your store and check all of the third-party resources used. Then, there are two simple steps you can follow:<\/p>\n
<\/p>\n
- \n
- Uninstall any unused apps or plug-ins. <\/em><\/strong>Another helpful trick to increase your page speed is to remove the app you believe increases the loading time. Run your website without it and note down how quickly your page loads. Find an alternative for the removed app, install it, and load your page again to check the difference in loading time.<\/li>\n
- If you are deleting an app, think about removing any legacy code they may leave behind once deleted<\/em><\/strong>. Some apps assist you in this procedure by enclosing their code in {% comment %} tags that include the app name.\u00a0 Always remember to keep a backup.<\/li>\n<\/ul>\n
<\/p>\n
Note:<\/strong><\/em> Admin-only apps like the Shopify Local Delivery app don\u2019t impact your store’s speed.<\/p>\n
<\/p>\n
Asking these five questions about each resource can help make a decision:
\n[Of course, the answers to these questions will certainly vary based on your store and business model.]<\/p>\n- \n
- How often do we use this feature?<\/li>\n
- Is this a \u201cmust-have\u201d or \u201cnice to have\u201d?<\/li>\n
- Is there a lighter-weight option that we could use?<\/li>\n
- Is the benefit we get from this worth a performance trade-off?<\/li>\n
- Are there any metrics we can reference to see how often this feature is used by our users?<\/li>\n<\/ol>\n
<\/p>\n
After answering these questions, we recommend working with your development team to figure out which elements can be safely removed.<\/p>\n
<\/p>\n
- \n
- Pro Tip 1: <\/strong>Select new apps carefully, and every time b<\/span>efore adding any extra script, you need to analyze its size.<\/span><\/li>\n<\/ul>\n
<\/p>\n
Here are some third-party codes we\u2019ve found Shopify stores utilizing that tend to have larger impacts on performance:<\/p>\n
[If you know you\u2019re utilizing one of them, it\u2019s good to be aware that it might be having an impact on the performance of your Shopify store.<\/em>]<\/p>\n
<\/p>\n
- Pro Tip 1: <\/strong>Select new apps carefully, and every time b<\/span>efore adding any extra script, you need to analyze its size.<\/span><\/li>\n<\/ul>\n
- If you are deleting an app, think about removing any legacy code they may leave behind once deleted<\/em><\/strong>. Some apps assist you in this procedure by enclosing their code in {% comment %} tags that include the app name.\u00a0 Always remember to keep a backup.<\/li>\n<\/ul>\n
- cssnano<\/a><\/span><\/li>\n
- Crush.pics<\/a><\/span><\/li>\n
- TinyJPG<\/a><\/span><\/li>\n
- Pro Tip 2: Multiple image optimization<\/strong> Shopify platform recommends using 2048×2048 pixels so that image quality is not distorted when someone zooms in. But if the user uploads multiple images of that resolution, you may find that your store becomes much slower. In that case, 800 x 800 images are recommended. <\/span><\/li>\n<\/ul>\n
- Pro Tip 1: Use the recommended image sizes.<\/strong> Better quality demands bigger dimensions and image sizes. In order not to lose the page load speed, it is better to upload images of the exact di<\/span>mensions required for the page. For example, if the home page banner dimensions need to be 1500×500 pixels, you need to resize the image to the required dimensions.<\/li>\n
- Sans-serif fonts:<\/strong>\u00a0BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, or Helvetica Neue.<\/li>\n
- Mono fonts:<\/strong>\u00a0Menlo, Consolas, Monaco, Liberation Mono, or Lucida Console.<\/li>\n
- Warm Theme<\/a><\/li>\n
- Pro-Tip 2.<\/strong> Once you have chosen a theme, remember to keep it up\u00a0to\u00a0date<\/a>.<\/li>\n<\/ul>\n
- Pro-Tip 1.<\/strong> Before finalizing the theme, run the theme preview page through Google PageSpeed Insight and see the suggestions to make that page faster.<\/li>\n
- Utilize a CDN<\/strong>: Shopify\u00a0utilizes the Fastly CDN<\/a>. A CDN (Content Delivery Network) allows some of your site\u2019s content to be stored on servers across the world. This reduces the physical distance between your users and your site\u2019s content. Reducing the physical distance helps improve your site performance. The Shopify CDN essentially informs the CDN that your assets\u2014JS, images, and CSS\u2014have been edited whenever you make a change to them.<\/span> <\/span>As a standard practice, CDN allows merchants to use Shopify Plus to power their website\u2019s backend on autopilot.<\/li>\n<\/ul>\n
- Leverage Browser Caching<\/strong>: Shopify should already cache your site\u2019s internal resources by default. Caching allows some of your content, such as images, JavaScript, and CSS, to be stored locally within users\u2019 browsers. This means they will not have to re-download the content when viewing the same resource twice. This can speed up your store, as users will be able to see some of your site\u2019s content much faster than they were previously. Note that if you\u2019re seeing third-party resources get flagged for caching issues, there is nothing you can do to directly adjust the caching.<\/li>\n
- 3. Improve Google Search Ranking<\/strong><\/li>\n<\/ul>\n
- 2.<\/strong>\u00a0Build Customer Loyalty<\/strong><\/li>\n<\/ul>\n
- 2. Choose A Lightweight, Fast & Responsive Shopify Theme<\/a><\/li>\n