Speed Up Shopify

Speed Up Shopify

12 ways you can enhance e-commerce site performance and page speeds:

Use Fast and Reliable Hosting

Leverage a Content Delivery Network (CDN)

Organize Your Tracking with Google Tag Manager

Prioritize Testing & Optimizing Your Mobile Performance

Use Pop-up Quick View Windows Sparingly

Beware of Excessive Liquid Loops

decline Thumbnail Image Size

Ease Up on Homepage Hero Slides

Weigh the Benefits of Installing Another App

Compress and Reduce Images

Minify Your Code without exception

Reduce Redirects and Remove Broken Links

How Does Page Speed Affect Ecommerce?

Page speed (or, load time) refers to the total amount of time it takes the content on a specific URL to load. Site speed, in contrast, is an average of various load times sets like Google use to score a site in aggregate.

Late last year, Skilled crunched the number on 12 separate case studies related to page speed and discovered a large number of troubling results…

When it comes to customer expectations and site performance:

79% of customers who are dissatisfied with a websites performance are less likely to buy from that site again

64% of smartphone users expect a website to load in four seconds or less

47% of online shoppers expect web pages to load in two seconds or less

Customer expectations and ecommerce site performance

Perhaps more startling is the difference a second makes in ecommerce:

If a site makes $100K per day, a one second improvement generates an additional $7K daily

A one second delay in load time typically equals an 11% loss in pageviews

A one second delay also method an overall 7% drop in conversions

The difference a second makes inecommerce

Whats more, your page speed also impacts a new visitors ability to find your ecommerce website by both PPC channels and organic search engines.

With the first, slow sites produce slow landing pages. Slow landing pages lower your Google Quality Score. And a lower Google Quality Scores method a higher cost-per-click.

With the second, what SEO experts have long suspected regarding organic ranking, Google recently made official in what theyve dubbed the Speed Update:

Although speed has been used in ranking for some time, that signal was focused on desktop searches. Today were announcing that starting in July 2018, page speed will be a ranking factor for mobile searches.

Where should you start?

Analytics for Improving Site Performance and Page Speed

If you have a Google Analytics account, look for a tab called Behavior, then select Site Speed, and click on Overview. This page will give you some important stats that youll need to monitor including your average users download time, domain lookup time, and average server response time.

Next, check out the Page Timings section which gives you a breakdown of your website by pages, plus an overall loading rate for each page – and already each browser. A red box will indicate any lagging and slow pages:

So, what can you do to increase ecommerce site performance and speed?

1. Use Fast and Reliable Hosting

Your hosting service and infrastructure can make or break overall ecommerce site performance – especially during high-traffic and high-transaction days.

The list of name-brand retailers that experience ecommerce site crashes during Black Friday – like Best Buy, Lowes, Macys, and more – continues to grow every year. Beyond the bad publicity, the lost sales from that downtime can be painful to accept.

According to an ITIC survey:

81% of respondents indicated that 60 minutes of downtime costs their business over (20,556,622.37 INR) $300,000..

Some factors to consider when researching hosting platform requirements include:

Memory or bandwidth limits to determine if the platform can extent on need during planned flash sales and seasonal promotions

Projected traffic and peak user load to ensure a platform wont crash due to a sudden spike in visitors to your site

PCI compliant security to protect your users data at all times

Why start with hosting? Because…

Merchant Spotlight: Bombas

When Bombas first began getting featured on high-profile TV shows like Shark Tank, its ecommerce site load quickly increased from 500 daily transactions to upwards of 5,000.

Unfortunately, on its old hosting platform, Bombas site crashed closest after the original show and later reruns aired on CNBC.

Broken product images and a sluggish checkout experience cost the company many possible new sales and repeat customers.

Replatforming to Shopify Plus gave the Bombas team confidence that the ecommerce site would extent and stay up and running during high-quantity traffic spikes, such as future Shark Tank reruns.

Regarding Black Friday Cyber Monday, David Heath – co-founder at Bombas – explains:

Its the one time of year that we offer a sale, so preparing for this is a year-long effort – between customer acquisition, our email plan, developing and releasing new product, making sure that were in stock, and then making sure that were fully staffed up on customer service to make sure that everything runs smoothly, and that all our customers get their products when theyve ordered them.

Whether were doing 500 or 5,000 orders a day, Shopify Plus automatically scales with us, without us having to do anything additional.

What explains the difference?

Thanks to its cloud-based infrastructure – as opposed to Magentos on-assumption approach – Shopify Plus not only maintains 99.98% overall uptime but our storefront loads 2.97X faster than other SaaS platforms, like BigCommerce, and analysts suggest checkouts are up to 40% faster.

In addition, merchants on Shopify processed (75.37 INR) $1.1 million sales per minute at Black Friday Cyber Mondays peak.

For a complete examination of BFCM, check out our Holiday Online Shopping Infographic: Data & Insights from Black Friday, Cyber Monday for This Year and Beyond

As Greg Merrell, the co-founder of simplistic – a Shopify Plus Solutions Partners that specializes in high-quantity, high-traffic flash sales – says:

Shopify Plus is the only platform we trust to manager the enormous spikes in traffic and transactions that come from Good Morning America, The View, and other nationally televised flash sales.

With over a thousand successful flash sales we can unequivocally recommend Shopify Plus for all of your high traffic needs.

2. Leverage a Content Delivery Network (CDN)

A Content Delivery Network or Content dispensing Network (CDN) consists of a group of optimized servers that are distributed around the world. It distributes the load of delivering content via the server that is closest to the visitors location.

Essentially, copies of your site content are stored in each location to make a local users experience faster and more reliable.

You can also use a CDN with your tag management system (TMS) to enhance your e-commerce site performance as described below. Instead of relying on just one server, your CDN will pull your tags from the most optimal server and load them on the fastest server(s).

Given the increasingly international character of e-commerce, leveraging a CDN – or in the case of Shopify, dual CDNs – is a non-negotiable ingredient your platform should provide and optimize regularly.

Shopify provides merchants with a world-class CDN powered by Fastly at no additional cost. It allows Shopify stores to come up almost instantaneously anywhere in the world, particularly the U.S., U.K., APAC vicinity (Asia, Australia, and New Zealand), and both South America in addition as southern Africa.

instead of create thousands of small, distributed points of presence (POPs) – as legacy CDNs did during in the dial-up era – Fastly takes a fundamentally different approach:

Weve focused our efforts on placing fewer, more powerful POPs at strategic locations around the world. High-density POPs permit us to serve more from cache, including static and event-pushed content. This improves your cache hit ratio, resulting in better user experiences.

Image via Fastly Network Map (March 2018)

As a redundancy, Shopify also provides access to Akamais CDN, what the company calls its Media Delivery Network:

CDNs are about both increasing speed and reducing cost. As Red Dress Boutique owner, Diana Harbour, explains:

An annual license with Magento Enterprise starts around (3,426,103.73 INR) $50,000 and goes up. Hosting was costing us another (411,132.45 INR) $6,000 per month and the CDN was (137,044.15 INR) $2,000 per month. Getting our license, hosting, and CDN from Shopify Plus saved us about (6,852,207.46 INR) $100,000 per year right off the bat compared to Magento.

How Shopifys CDN Works

Shopify informs the CDN that your assets – such as images, JS and CSS – have changed whenever you do so on your end.

Regarding visual content, which is often the culprit in slow performance, Shopify uses the asset_url filter and automatically appends version numbers to all of the URLs it generates. For example, a version number appended to the end of a URL might look like this:?

If you link to an image without using the asset_url filter and upload a new version of the same content, then your online store might not change to the new version for a day or more. If you reference content directly in your CSS, then the URL will be static and will not carry the asset version that Shopify updates automatically.

To make sure updates happen automatically, change your CSS syntax to include the asset_url filter. For information on all of the URL filters that are used to pull assets, check out the overview on the Shopify Help Center.

A uniform CDN lets Shopify Plus merchants strength their websites backend on autopilot – so they can focus on other business priorities like maximizing sales and marketing success. Vali Vetan, co-founder at Mava Sports says it best:

Its truly cheaper because you dont need to buy a content delivery network. You dont need to buy a developer. You dont have to stay busy looking for teams. You have it all in one place.

3. Organize Your Tracking with Google Tag Manager

To successfully optimize your ecommerce website and digital marketing strategy, you must collect a large number of customer data.

Unfortunately, all those JavaScript tracking tags – for general analytics, conversions and goals, behavioral retargeting, etc. – can ultimately slow down your site performance.

Its also a time and resources burden for your dev, IT or marketing teams to deploy, test and monitor the tags throughout your MarTech system. As nChannel explains:

Adding, updating, and maintaining all those tags became cumbersome for developers, so vendors like Google produced tag management systems to simplify things. Google Tag Manager makes applying JavaScript to your site easier.

A tag management system (TMS) like Google Tag Manager condenses all of your MarTech tags into one JavaScript request.

According to Tag Inspector, this helps to reduce the number of required outside calls… it also makes this request asynchronously (in the background, letting the rest of your website load independently of the response outcome). Likewise, if a tag failure causes your website to go down, having a TMS enables you to remove the tag quickly – saving you hours of frustration and potentially millions of dollars.

The diagram from ConversionXL below is a visualization of how a TMS can speed up your page loading time:

Before using Google Tag Manager, it used to take Airbnb two to three days to complete its tagging deployment & QA course of action. With Google Tag Manager, its a matter of an hour or so from receiving a tag to testing to QA to deployment. Its exponentially better, says Mona Gandhi, Software Engineer at Airbnb. Airbnb now boasts an 8% improvement in page load time.

Carefully Consider Each Tool You Add to Google Tag Manager

Creative agency, A Digital warns that while Google Tag Manager is extremely helpful in saving you time and speeding up your e-commerce site performance, its important to question each tool that is additional to keep an eye on the effect it is having on your page speed and user experience.

As you can see, via the complete waterfall image of the tagged tracking tools from A Digitals site below, the load times are substantial until about the halfway mark.

After the red lines beside the Typekit fonts, its clear that Intercom is the biggest drag on the agency websites page speed. The agency indicates that if Intercom were removed, it would reduce the loading time by almost half.

Similarly, to make its site load almost 5X faster, Shopify Plus merchant Mava Sports removed as many apps and plugins it could without compromising user experience.

The good news is one snippet of code is all you need to manage all of your Shopify Plus store tags in one place with Google Tag Manager. To learn more, refer to the guidelines in the Shopify Plus Help Center. If you need a visual demonstration, Measure School provides a free, hands-on tutorial:

4. Prioritize Testing & Optimizing Your Mobile Performance

Youve probably experienced first-hand how waiting for a slow loading page can feel like an eternity. According to Mobile 1st:

Slow pages are the number one issue that irate mobile users complain about – ranking already higher than site crashes.

Google recently trained a thorough neural network – a computer system modeled on the human brain and nervous system – and found…

Mobile load time and bounce rate increases

Having a mobile-first e-commerce strategy has never been more basic. And itll only get worse if you dont optimize your e-commerce sites mobile UX soon.

Over Black Friday Cyber Monday, Shopify saw mobile explain 64% of all sales, an increase of 10% year-over-year. This trend will continue in the future, with mobile commerce sales expected to reach $250 billion yearly by 2020.

Mobile commerce vs desktop on Shopify during BFCM 2017

Now is the time to ensure that your mobile-first commerce presence is on par with, or already better than your competitors.

(A) Test & Optimize Your Mobile Ecommerce Site Speed

PageSpeed Insights is a web-based tool that can be accessed via Google Labs. It will give you personalized suggestions on how to enhance ecommerce site performance on mobile and desktop separately in addition as show the elements on your site – like CSS and JavaScripts – that are blocking pages from rendering quickly.

You can also research competitive merchants. Knowing whats wrong with their site performance could help you avoid making the same mistakes.

Merchant Spotlight: Merchology

After diving thorough into its analytics data, leading corporate branded apparel and accessories provider, Merchology discovered that the majority of its mobile site visitors werent converting. It quickly became clear that the company would need to re-design its ecommerce site in order to offer a mobile-first customer experience.

Wouldnt it be great if ordering from a mobile device was just as fast and easy as ordering from a desktop or tablet? asked VP of Marketing, Nolan Goodman of his team.

The company spent a lot of time analyzing data before already thinking about the UX. Merchologys team studied the way in which users switched between mobile and desktop and used the data to build a story to excursion its mobile-first site design.

Two months after launching the redesigned mobile site in September 2016, Merchology famous some impressive results:

340% YoY lift in revenue per mobile device

40% increase in their mobile conversion rates

Simplicity drives sales in spite of of device. Weve made it simple to order and checkout in spite of of whether a customer is using a desktop computer, tablet, or mobile device.

Nolan Goodman, VP Marketing at Merchology

(B) Then, Test Desktop Page Speed

PageSpeed Insights will also give you a Desktop report, with similar – although not identical – suggestions. Again, be sure to compare your own site performance with those of your top competitors.

Remember, 0.25 seconds is all that consists of a competitive advantage.

(C) Get a Cumulative Grade

GTMetrix gives your website a grade from A to F in terms of speed by merging data from Yslow and PageSpeed Insights. It also offers a performance report which helps you to analyze meaningful issues to that require optimizations.

(D) Score Your Site Performance on Remaining Optimizations

Pingdom.com should be your final test. It will score your site performance (ranging from 0 to 100%).

It also has a useful waterfall examination characterize that helps you clarify other major problem areas and their relative importance to optimization. This line-by-line scoring is incredibly valuable to come back to and test as you follow the remaining steps on this list.

Now that you know what went wrong and what you have to fix, its time to start eliminating repeat speed offenders. Lets look at some Shopify Plus-specific optimizations.

Improving Speed on Shopify Plus

For enterprise ecommerce, combining a high, customized, and personalized shopping experience with exceptional site performance is a challenge.

The following tips were produced specifically for Shopify Plus merchants by Merchant Success Manager Jonathan Sinclair.

Third-party tools like GTMetrix and PageSpeed are each configured differently. Tools that provide page load timing have to select one specific time marker – like time to first byte (TTFB) – in their results.

However, they dont all choose the same endpoint. So while one tool might tell you 5.14 seconds, another might say its 11.80 seconds. This is why using a variety of measurements is crucial.

Also, these tools were not made specifically to crawl and analyze a Shopify site.

Lets take a closer look at some of the most shared page speed issues on Shopify stores, and discuss how to fix them:

5. Use Pop-up Quick View Windows Sparingly

The whole point of improving page speed performance is to help customers, who are time-starved and impatient, to find and buy what they need in a hurry.

So, it may seem like shared sense to provide your ecommerce site visitors with a pop-up quick view window that displays a particular product – directly from a product listings page – instead of requiring them to click by to a product detail page.

In theory, it should save them time to decide whether or not they are really interested in a particular product.

The challenge with this approach is that it can truly obstruct a customers experience on your ecommerce site:

It adds an additional step to the customers journey

It can be clicked on by accident which is frustrating to the user

It can be mistaken for a product page which is confusing

More importantly, it can considerably slow down your page loading time.

Often quick view pop-up implementations (either built into the theme or from an app) will pre-load all of the information from an complete product page just in case a visitor clicks the Quick View button.

That is an enormous amount of data to be loaded, especially on a collection page where there might be 20 or 30 product thumbnails.

You can test to see if your customers are already using the Quick View window via click mapping. Some apps that can help you to do so include:




Lucky Orange is also recommended. But keep in mind that it can slow page speeds while it is being used for this purpose.

If you discover that customers arent using the tool heavily, and there is no other basic reason for having Quick View enabled, then we recommend removing it.


It should be easy enough to see if there is a Quick View button showing on your storefront product thumbnails. If so, first check your theme customizer for an option to permit/disable this function.

If you dont see this option in the theme customizer, check to see if its coming from an app – in which case it should be fairly intuitive how to remove it.

If the first two steps came up empty, it is likely baked into the theme itself, which requires a developer to clarify and remove it.


Use AJAX to pull the product info once the visitor clicks the Quick View pop-up button, or

Save a limited set of product information as data attributes on the product grid item, then build the HTML and pop-up dynamically with JavaScript

Either is slightly less ideal than removing Quick View, as the product info nevertheless has to be loaded for each product. But its better than having to download all the product images and links.

6. Beware of Excessive Liquid Loops

Liquid is a Shopify proprietary language that has proven to be very powerful. However, there are certain roles where you should be aware of the additional benefits in addition as the tradeoffs.

For-loop iteration is one of those instances that can affect Shopify Plus merchants. It happens when the system has to loop (or crawl, or search by) all of the products in a collection to look for a specific condition, whether that is a tag, price, etc.

If you have a large product catalog, as many high-quantity merchants do, this looping will take a long time.

This issue is commonly found in two situations:

progressive collection filtering and mega-navigation implementations because they utilize nested for-loops to go over all the products and find the applicable ones to serve

Swatches because for each product on the collection page the code loops by all of the variants, then all of the images, and then has to divided out the specific color with which the image is associated

These features can be advantageous in certain situations like outputting images or product variants, and if you have a smaller number of products on a collection page.

So again, just be aware of how theyre being used and how they affect load times.


The first step is to ensure that you are being as efficient as possible in your code. For example, nested loops can cause issues and require optimization.

Next, Shopify Plus Technology Partner Findify has discovered ways to deliver progressive collection filtering, without compromising load times.

Heres how the company reduced the load time of a 30,000 product collection from 15 seconds to 2.5, which resulted in a whopping 20% conversion uplift for its Shopify Plus clients:

The developers pre-compute all filters on the Shopify backend

When a collection is loaded, they initially return only a subset of the products

As customers browse or use filters, the displayed products are personalized

All the filters are dynamic, which method you will only get filtering options applicable to the products in that specific collection

Outputting the swatches themselves can be problematic. Its shared practice to use this documentation on outputting color swatches. Please observe that it is currently being updated.

Whats going on in the screenshot above is the system is looping by all of the product options, then finding the index of the color option (if it exists). Next, it loops by all of the variants and outputs the color option of that variant, but only if it hasnt already been output.

Thats a lot of moving parts!

A better solution is to use a simple product.options_with_values loop. For a more detailed explanation of how Shopifys templating language and liquid loops work, check out this post, or contact the Shopify Plus Merchant Success Team.

7. decline Thumbnail Image Size

When you use a carousel characterize for Best Selling Products on your homepage, information is being pulled from your product pages and displayed in thumbnail fact.

The problem occurs when a product image is pulled in a larger size than needed, causing the users browser to extent it down.

Its like buying a jacket thats too big for you and having to take it to a tailor… every time you put it on.


Themes should take advantage of Shopifys built-in image size parameters to download the smallest possible image while maintaining quality. It asks Shopify for the exact image size that is going to be displayed, cuts down the file size downloaded from the CDN, and reduces the required browser-side scaling.

All Shopify built themes are now set to deliver the appropriate image sizes based on device viewpoints.

progressive Options

Your theme can also be set to use:

srcset to pull appropriate image size based on screen resolution

Lazy Load to first pull low-resolution images and then replace them with high-resolution versions once the page content has loaded

8. Ease Up on Homepage Hero Slides

Carefully consider multi-image slideshows before adding them to your site. The size and quality required for a hero slider to look good can quickly increase load times, especially if you have four to five slides:


The simplest way to resolve this issue is to cut down the number of homepage slides or eliminate them thoroughly. A single, high-quality, well-thought-out hero image with a clear call to action has been shown to be very impactful.

If you absolutely must use a slider, then be sure to follow UX best practices to get as much assistance out of them as possible, keep it to a maximum of two to three slides, and use srcset or Lazy Load as a catch-all.

9. Weigh the Benefits of Installing Another App

The majority of script/CSS files for apps downloaded using the Shopify Plus Admin are injected into the

of your theme.liquid file within {{ content_for_header }}.

As a consequence, app content will be some of the first to be loaded onto the page.

The problem is that sometimes an app is built in a way that requires the page to load code (mostly JavaScript and CSS) before it can continue loading content from further down the page (i.e., images and text).

Sometimes, in order for an app to function correctly, it needs to be rendered before the following code is loaded.

Jason Bowman photo

Navigating this tension between faster loading versus the experiential and sales value of apps, explains Jason Bowman, a Solutions Engineer and APAC Team rule at Shopify Plus, is why we async load scripts additional with Script Tag API so the page load isnt halted.


The main question you have to ask yourself when it comes to each and every app that you install is: Will the additional value of this app outweigh the possible slow down of load speed?


If you happen to have 20+ apps installed on your store, its likely you arent using them all. Perhaps you installed them as a trial, then forgot to remove them.

Meanwhile, the app has been silently running in the background, hurting your ecommerce site performance.

Go by and remove any apps that you arent using. Next, run page speed tests using tools like GTmetrix or PageSpeed Insights, or already a manual test using Chromes Developer tools – simply click over to the Network tab and reload the page.

The Plus Merchant Success team strongly indicates that you enlist a developers help to find and remove the non-vital and offending app.

10. Compress and Reduce Images

Images explain somewhere between 50% to 75% of your web pages total weight. The higher-quality your images and the more you great number on each product page, the larger that number gets. Lossless compression minimizes image size without reducing quality:

For new images…

Shopify developers also recommend using TinyJPG or TinyPNG for this task.

For excess images…

Keep in mind that each image you use on a page creates a new HTTP request. In addition to streamlining page speed, trimming the number of images helps you do more and say more with less.

Also, watch out for empty image supplies – – in your code. These cause an excess burden on the browser to send in addition another request to your servers.

A simple solution you can use is called sprites which consolidate multiple images like icons into one, limiting the servers number of individual image requests and improving your page speed. Uploading your images to a free tool like SpritePad will quickly create sprites and render the code for you.

11. Minify Your Code

Poorly coded HTML, CSS, and JavaScript on your web page can seriously slow your sites performance.

For an easy fix, Google Developers have produced a course of action known as minification and offer a list of HTML, CSS, and JavaScript-specific resources to help. More detailed guidance is provided by kangax/HTML-minifier on GitHub:

observe: Shopify handles SCSS.liquid minification automatically. We also offer whitespace controlling tags to help theme developers remove some bloat in the rendered HTML.

12. Reduce Redirects and Broken Links

Additional performance issues can be caused by too many redirects and broken links. Do some house cleaning every now and then to keep them to a minimum.

For redirects…

While redirects are helpful to send visitors to new URLs, they should be used sparingly. 302 redirects, which indicate a page has been moved temporarily, can hurt your SEO, cause additional HTTP requests and delay data transfers. Instead, use a cacheable redirect or Shopifys built-in redirects function – which are 301s by default – within the Navigation panel.

If you have a large and/or older site that has recently moved or restructured URLs, never redirect URLs to pages that are themselves redirects. It sounds obvious but it happens.

For broken links…

Again, broken links or the wrong links for page elements like images, CSS and JS files increase HTTP requests and sting your site speed. Removing them is an easy win if you use a tool like Broken Link Checker.

Its also a best practice to create a custom 404 error page to assist visitors who accidentally go into an incorrect URL for your site.

Youll be able to do many of these optimizations yourself.

It will not affect your Shopify website functionality. https://www.shopifywebexpert.com/shopify-page-speed-optimization.aspx

để lại bình luận của bạn

Tin đăng nổi bật

Tin đăng gần đây

  • 65 Xuân Thủy
26.5 Tỷ đ
  • 65 Xuân Thủy
11 Tỷ đ
  • HIệp Thành Quận 12
4.7 Tỷ đ
  • Tân Quy - Quận 7 -Tp Hồ Chí Minh
4.3 Tỷ đ

Những ý kiến ​​gần đây