Improve Performance & Speed to 2X on your E-commerce Site

  • 1. Quick Read
  • 2. How does page speed affect e-commerce?
  • 3. Strategies to boost the performance and page speed of your e-commerce site:
    • Look for an e-commerce platform that’s fast—out of the box
    • Use fast and reliable hosting
    • Use a content delivery network (CDN)
    • Organize your tracking with Google Tag Manager
    • Unblock the browser from parser-blocking scripts
    • Prioritize testing and optimizing your mobile performance
    • Use pop-ups sparingly
    • Beware of excessive liquid loops
    • Decrease thumbnail image sizes
    • Ease up on homepage hero slides
    • Weigh the benefits of installing another app for your site
    • Compress and reduce images in size and number
    • Use lite embeds to add video
    • “Minify” your code
    • Reduce redirects and remove broken links
  • 4. Conclusion

1. Quick Read

A spike in traffic or a rush of transactions and purchases may be disastrous for your e-commerce site’s performance and page speed, not to mention your brand’s image. You may, however, plan beforehand for these unexpected peaks.
The longer you wait to speed up your website, the more consumers you’ll lose to a competitor’s site that is faster. According to Google’s mobile page speed study, the bounce rate of a website increases with every second it takes for a page to load. Google is also releasing an upgrade in May 2021 that will emphasize sites with good core web vitals (i.e. site performance) in its search results. For e-commerce sites, the stakes are higher than they have ever been. That is why we have compiled this guide for you.

2. How does page speed affect e-commerce?

The time it takes for the content on a URL to load is measured in page speed. Site speed, on the other hand, is a measure of how well your website performs in general. It is graded by services like Google PageSpeed Insights, which take into account all of your site’s load times.
Customer expectations of site performance were indicated in 12 case studies studied by Skilled and they are as follows:
  • Customers who are “dissatisfied” with the performance of a website are 79% less likely to buy from them again.
  • A website should load in four seconds or less, according to 64% of smartphone users.
  • Online consumers anticipate websites to load in two seconds or less, according to 47% of respondents.
A time delay might also have an impact on sales. Crazyegg, a web performance optimization company, revealed that speeding up a page by only one second increased conversions by 7%.
That implies that if a site earns $100,000 every day, a one-second improvement yields an additional $7,000 per day, and vice versa. Sites that take a long time to load have a negative influence on your searchability. Slow landing pages, for example, decrease your Google AdWords Quality Score, resulting in a higher cost-per-click.
Slow sites damage organic results across all devices, according to search engine optimization (SEO) specialists.
So, with these considerations in mind, let us speak about how quicker load times and improved site performance may help you attract more customers—both through search and overall.

3. Strategies to boost the performance and page speed of your e-commerce site:

Look for an e-commerce platform that’s fast—out of the box

Your company needs an e-commerce platform with the necessary infrastructure to reduce loading times. As merchants, you should discuss changes to your site’s backend with your platform provider to ensure that your websites load quickly for customers.
Storefront Renderer (SFR) is a new infrastructure improvement on Shopify that speeds up site loading time. SFR is a Ruby application focused on delivering storefront queries as quickly as possible, having been created from the ground up.
What kind of performance improvements can be expected?
When compared to the speed of requests performed without SFR, Storefront Renderer alters how read requests are delivered, resulting in server-side performance benefits of 2.5 to 5 times.
Cache misses—when a page or other requested data is not located in the cache memory and must be fetched from other cache levels or the main memory, causing delays and slowdowns—are where SFR delivers the most significant performance benefits.
That means Shopify is quick right out of the box for your business.
Despite the fact that many factors impact site speed, Shopify ensures that you have the quickest infrastructure available. If your commerce platform is not dedicated to making speed a top priority, the remainder of the recommendations will not make a significant difference. Knowing you have this with Shopify, you can take control of your site performance by focusing on the following areas to enhance it further.

Use fast and reliable hosting

Your e-commerce site’s performance may be influenced by your hosting service and infrastructure (especially during high-traffic and high-transaction days).
Look for the following while studying hosting platform requirements:
  • Limits on memory or bandwidth for scalability throughout and during seasonal promotions
  • Traffic projections and peak user load to minimize crashes caused by a sudden increase of visitors
Ask your commerce platform provider to assist you in preparing for unforeseen traffic surges or an influx of orders before any large sales event.
Shopify Plus has a 99.98 percent total uptime thanks to its cloud-based infrastructure. In addition, compared to other SaaS systems, Shopify stores load 2.97 times quicker.

Use a content delivery network (CDN)

A Content Delivery Network (CDN), sometimes known as a Content Distribution Network (CDN), is a collection of servers located all over the world. It distributes the content delivery load to the nearest server to your visitor’s location, resulting in quicker local user experiences.
Because more e-commerce sites are becoming worldwide, a CDN—or, in Shopify’s case, multiple CDNs—is an essential component of platform performance.
At no additional cost, Shopify provides a world-class CDN powered by Fastly. Shopify stores will appear virtually instantly anywhere in the world, including the United States, the United Kingdom, South America, southern Africa, the Asia-Pacific area, and Asia.
How Shopify’s CDN works
Slow performance is frequently caused by visual content. When your assets (such as pictures, JavaScript, and CSS) change, Shopify notifies the CDN.
They employ the asset url filter, which adds version numbers to all of the URLs they create. A version number attached to the end of a URL, for example, may look like this: ?v=1384022871. The CDN is told to retrieve the proper version by the versioning ID supplied automatically via the asset url filter. Without the version ID, you may not see the asset you anticipate after making changes to your content, thus utilizing an asset url filter to link to an image is essential.
Furthermore, if you use CSS to reference content directly, the URL will be static. It also will not have the asset version that Shopify updates automatically.
Change your CSS syntax to include the asset url filter to guarantee automatic updates. Visit the Shopify Help Center to learn about all of the URL filters that may be used to fetch assets.

Organize your tracking with Google Tag Manager

Your e-commerce and digital marketing initiatives are fueled by customer data. However, gathering such information might cause your site’s performance to suffer. JavaScript tracking tags (for general analytics, conversions, objectives, and behavioral retargeting, for example) are frequently to blame.
Customer data collecting can also be time-consuming and resource-intensive for your developer, IT, or marketing teams. A Tag Management System (TMS), such as Google Tag Manager, consolidates all of your tags into a single JavaScript request. If a tag failure causes your website to go down, a TMS can assist you in rapidly removing the tag.
This will “reduce the amount of needed outside calls,” according to Tag Inspector. This request is also sent asynchronously (in the background, allowing the remainder of your website to load regardless of the response outcome).”
The figure below from ConversionXL shows how a TMS may reduce the time it takes for your website to load:
The risks for ecommerce websites are higher than ever. That's why we put this guide up for you.
With Google Tag Manager, you only need one piece of code to manage all of your Shopify Plus shop tags in one location. Refer to the Shopify Plus Help Center’s recommendations for further information.

Unblock the browser from parser-blocking scripts

A browser must parse the HTML before it can show a page to your consumer. Parser-blocking scripts, on the other hand, obstruct this process. When a browser encounters a parser-blocking script, it must stop everything and concentrate solely on processing that script before proceeding.
Fortunately, there is a simple solution: use the “async” or “defer” attribute.
Parser blocking:
Not parser blocking:
It is worth emphasizing that JavaScript does not block browsers by itself; rather, how JavaScript is loaded affects whether or not it does. After you have made these modifications to your code, double-check that your website is still providing the intended experience.

Prioritize testing and optimizing your mobile performance

There has never been a more important time to have a mobile commerce strategy. During Black Friday Cyber Monday in 2020, 67 percent of sales were made on mobile devices, compared to 33 percent on desktop. The entire e-commerce market in the United States was barely 39%. The disparity was most likely attributable to Shopify stores’ superior mobile-first experiences.
Mobile commerce revenues are expected to reach $319 billion yearly by 2020, indicating that the mobile buying trend will only continue to rise.
Despite increasing, mobile purchase rates, the number one complaint among mobile consumers, according to Mobile 1st, is sluggish websites. Site crashes rank higher than annoyance at slow websites.
Below we outline how to make sure your mobile-first presence, as well as your overall site performance and speed, is on par with or better than your rivals.
Test and improve the speed of your mobile site
PageSpeed Insights is a Google Labs tool that provides you with tailored recommendations for improving the performance of your mobile site (separately from desktop data). It also flags items on your site that delay the page down, such as CSS and JavaScript.
You may even examine the performance of your competitors’ mobile sites. Knowing what went wrong with their website might help you avoid making the same errors.
Then, run a speed test on your desktop page
A Desktop report will be generated by PageSpeed Insights, with identical recommendations. Compare your site’s performance to that of your top rivals once again.
Determine your overall grade
Your website’s speed is graded by GTMetrix on a scale of A to F. It combines information from Yslow and PageSpeed Insights. It also includes a performance report that aids in the analysis of issues that need to be addressed.
Final optimizations will determine how well your site performs
Your final check should be Pingdom.com. It will grade the effectiveness of your website (ranging from 0 to 100 percent ).
It also features a helpful “waterfall analysis” tool that aids in the identification of other key issues. This score sheet with line-by-line scoring is a handy reference tool.
Remember this:
Third-party tools such as GTMetrix and PageSpeed have different configurations. Tools that offer “page load” timing must include a specific time marker in their findings, such as “time to first byte” (TTFB).
Be aware that each speed testing tool has its own grading algorithm, just as each team has its own idea of what constitutes excellent site speed.
Use these speed tests to assist your decision-making, but keep an open mind. You must strike a balance between site performance and the creation of a user experience that facilitates your customers’ journey.

Use pop-ups sparingly

It may appear that providing a pop-up quick view window is basic sense. Rather than forcing you to visit a product detail page, pop-ups show you a product immediately from a product listings page.
It should, in principle, save your consumers time in deciding whether or not they are interested.
  • It adds an additional step to the consumer journey.
  • It can be accidentally clicked on, which is inconvenient for the user. It can also be misinterpreted for a product page.
  • More importantly, it can drastically slow down the time it takes for your website to load.
Product pages with pop-ups
If a visitor hits the “Quick View” button, pop-up implementations (either integrated into a theme or from an app) might occasionally pre-load the content from an entire product page.
But, especially on a collection page with 20 or 30 product thumbnails, it is a lot of data to load. Click mapping, a JavaScript-based tool that monitors where visitors scroll or move their mouse to click on your site pages can help you figure out if they are utilizing quick view at all. If your clients are not utilizing quick view or there is no other compelling reason to keep it, we recommend removing it.
When a visitor hits the “Quick View” pop-up button, use AJAX to fetch product information. Alternatively, store a subset of product data as data attributes on the product grid item. Then, using JavaScript, create the HTML and pop-up dynamically.
Neither option is better than disabling quick view. For each product, the product data must still be loaded. Even still, it is better than downloading all of the product photos and URLs individually.

Beware of excessive liquid loops

Liquid is a sophisticated coding language for Shopify. However, there are times when you must evaluate the additional benefits against the costs.
One of these cases is forloop iteration. When looking for a certain condition, the system must loop (e.g., crawl or search through) all of the products in a collection (e.g. price, or a tag).
Looping will take a long time if you have a huge product library. The problem occurs in the following scenarios:
  • Advanced collection filtering and mega-navigation implementations: they utilize layered forloops to search through all of the goods and locate the ones that are appropriate to serve.
  • Swatches: the code runs through all of the variants—then all of the images—finally producing the exact color with which the image is linked for each product on the collection page.
  • Paginating collections with thousands of products: instead of limiting the number of products displayed on each page to a reasonable quantity, sites display everything at once and then use JavaScript to load the page incrementally as needed.
These characteristics might be useful in specific situations, such as when printing pictures or product variations. They are also useful when a collection page has a lower number of goods, but be aware of the impact on load speeds.
Examine your theme code to ensure that you are not executing liquid forloops multiple times in search of the same data. When several developers work on the same theme, they may duplicate tasks or add conflicting code. Your website will load faster if these duplicates are removed.

Decrease thumbnail image sizes

Using a carousel option for “Best selling products” on your homepage might cause performance issues because the information is pulled from your product pages and shown as thumbnails.
When a product image is taken from a product page at a bigger size than required, problems occur. Because the picture is bigger, the user’s browser scales it down for the thumbnail, slowing down your page load time.
Use the built-in image size settings in Shopify. It will ensure that you download the lowest image possible while maintaining quality. It asks Shopify for the precise size of the picture that will be displayed. Then it minimizes the needed browser-side scaling by reducing the file size retrieved from the CDN.
All Shopify themes are now configured to offer the proper image sizes based on device viewpoints.

Ease up on homepage hero slides

Massive, multi-hero picture slideshows are ideal for showcasing your products. However, there is a drawback to utilizing them. The size and quality necessary for a hero slider to appear good might cause loading times to rise, especially if you have four to five slides.
Reduce the number of homepage slides—or remove them entirely. Because the brain absorbs visual images 60,000 times quicker than words, a single, high-quality, well-thought-out hero image—accompanied by a clear call to action—helps attract your consumers in immediately.
If you must use a slider, be sure to follow UX guidelines. Use srcset or Lazy Load as a catch-all and limit yourself to two to three slides.

Weigh the benefits of installing another app for your site

If you have 20 or more Shopify applications (free or paid e-commerce plugins) installed on your shop, you are most likely not using all of them. Perhaps you installed them as a trial and then neglected to uninstall them. However, these applications are operating in the background, affecting the speed of your website.
The bulk of script/CSS files for applications obtained via the Shopify Plus Admin are injected into theof your theme.liquid file within {{ content for header }}..
Before any additional code can be loaded, an app must be rendered.
Whenever you wish to install a new app, ask yourself, “Will the additional benefit of this app offset the potential decrease in load speed?”
We propose hiring a developer to help you get rid of any unwanted applications. Then, using tools like GTmetrix or PageSpeed Insights, or even manually using Chrome’s Developer tools, conduct page speed tests. Reload the page after clicking the “Network” tab.

Compress and reduce images in size and number

Images make up anywhere from 50% to 75% of the overall weight of your web pages. The greater the quality of your images, the higher the number. Lossless compression, on the other hand, allows you to reduce image size without sacrificing quality.
You may start by using TinyJPG or TinyPNG to minimize the size of new pictures you add.
Also, reduce the total amount of pictures used: Remember that each picture you put on a page generates a separate HTTP request. Trimming images lets you accomplish more and express more with less while optimizing page performance.
Also, keep an eye out for empty image sources in your code—. By sending yet another request to your servers, they place an undue strain on the browser.
Sprites are a simple option that you may utilize. They combine several pictures, such as icons, into a single image, reducing the number of separate image requests sent to the server. It also increases the speed of your website. To make sprites and render the code, upload your photos to a free program like SpritePad.

Use lite embeds to add video

Video is fast becoming the internet’s primary language. However, the way they are integrated on your site can make a huge difference in how long it takes for them to load.

Not only does the usual YouTube embed code clutter your site—some files are downloaded even before the visitor clicks the play button—but it also uses the

“Minify” your code

A method known as “minification” was developed by Google Developers. This procedure aids in the removal of badly coded HTML, CSS, and JavaScript from your web page, which might cause performance issues.
A collection of HTML, CSS, and JavaScript-specific resources is also available. On GitHub, look for kangax/html-minifier for additional information.

Reduce redirects and remove broken links

A large number of redirects and broken links might slow down your site and hurt your SEO rankings.
Redirects
Cleaning up your redirects is a good idea. 302 redirects, for example, which signal that a page has been temporarily relocated, might harm your SEO. They also cause further HTTP requests and data transfers to be delayed. Instead, within your Navigation panel, use a “cacheable redirect” or Shopify’s built-in redirects feature (which are 301s by default).
Never redirect URLs to pages that are redirects themselves. Although it may appear to be self-evident, it does occur.
Broken links
Broken links for page components such as pictures, CSS, and JS files cause more HTTP requests, slowing down your site. Remove them with a program like Broken Link Checker.
Creating custom 404 error pages will aid users who input your site’s URL incorrectly.

4. Conclusion

It is critical to get your staff on board with investing time and money to improve your site’s performance and speed. The information and resources we have provided can assist you in making your case.
Many of these tweaks are DIY. You can enlist the aid of a Shopify Plus Partner if this is not possible. They can advise you on how to make your Shopify site run faster.
chat-with-us

Latest Posts

One Comment

  1. Katelin Lewis June 9, 2023 at 1:22 pm

    I was very much delighted to read your blog and it felt very informative to me.

Leave A Comment