Pratikkumar P. Gaikwad | 15 min read | Feb 26, 2020

Improve Performance & Speed to 2X on your e-commerce site

1. Quick Read

A massive traffic surge or a rush of transactions and sales can be lethal — in terms of both the performance and page speed of your ecommerce site. Not to mention the image of your brand-but you can prepare for it.
The longer you put off optimizing your site for speed, the more clients you will lose to the competitor having a faster site. According to Google’s study of mobile page speed, the bounce rate of a website gets worse every second it takes to load a page.
The risks for ecommerce websites are higher than ever. That's why we put this guide up for you.

What impact does page speed have on ecommerce?

Page speed measures the amount of time it takes to load the content onto a URL where as site speed represents how your site performs overall. It’s scored by services such as Google PageSpeed Insights that look in aggregate to different load times on your site.
A delay in time is also affecting your ecommerce sale. Tammy Everts, a Web performance expert, has discovered that conversions have increased by 66 percent with a 2-second page speed reduction. Everts says “online shoppers will never learn to be slow patient.”
A slow loading website is also penalized by both paid and organic search engine channels
Slow landing pages impacts quality score of Google Adwords which results in higher cost per click when opting for paid search
Search engine optimization (SEO) experts will also warn you that sluggish websites are affecting organic rankings. With their new “Speed Update” Google made it official. As of Feb 2020, page speed is now a rating consideration for mobile searches too.
Let us talk about how you can obtain more clients with quicker load times and improved website results.
12 Ways to improve the performance of your ecommerce site and the page speeds:

2. Using reliable and fast hosting

Depending on the device or network of the user, page speed can differ. Yet your hosting service and infrastructure can influence the performance of your ecommerce site (especially during days of high-traffic and high-transaction).
When researching the requirements of the hosting platform, be sure to check:
Shopify Plus has a total uptime of 99.98 percent thanks to the cloud-based infrastructure. The front loads 2.97X quicker than other SaaS systems, too.
In order to prepare you for unexpected traffic spikes or a influx of orders, request your business platform provider before any major sales event.

3. Use a content delivery network (CDN)

A Content Delivery Network (CDN) is a network of servers spread all over the world. It distributes the visitor’s content load via the closest server and improves local user experience.
Given the global growth of more ecommerce sites, a CDN – or, in Shopify’s case, double CDNs – is a non-negotiable platform feature.
Shopify delivers a world class Swiftly driven CDN at no additional cost. Shopify stores are going to pop up almost instantly anywhere in the world. Locations include: the region of the USA, the UK, South America, South Africa, Australia and New Zealand (APAC), and Asia.
Fewer, more efficient Fastly Presence Points (PoPs) now available worldwide at strategic locations. High density PoPs allow you to serve more from the database, including static and event-driven content. It boosts the impact ratio for your cache, leading to better user experience.
In general, CDNs help in speed up and cost reduction. The Red Dress Boutique Owner, Diana Harbor, says that winning our Shopify Plus, Host and CDN saved us around $100.000 per year.

How Shopify’s CDN works

In many instances visual quality is the source of slow performance. Shopify alerts the CDN when the properties have changed — such as photos, JavaScript (JS), and cascading style sheets (CSS).
The asset url filter is used and version numbers are immediately appended to all the URLs they create. For example, at the end of the URL, an attached version number can appear like this:?v=1384022871. The versioning ID applied via the asset url filter immediately helps inform the CDN to grab the correct version.You may not see the asset you would expect after you have made changes to your content without the version ID.
So you must connect to an image using the asset url filter to make sure that the exact new image appears automatically on your online store.
However the URL will be unchanged whenever you reference content directly in your CSS. It will also not bring the asset edition that Shopify upgrades automatically.
Edit the CSS syntax to include the asset url function, to ensure automatic updates. Visit the Shopify Help Center for details on all the URL filters which help pull money.
Try utilizing tools to handle JavaScript monitoring tags easier and automate the distribution of your content.

4. Organize your tracking with Google Tag Manager

Customer data power the e-commerce campaigns and digital marketing. However obtaining the data can also slow down performance on your website. All those JavaScript monitoring tags (for example, general metrics, conversions and goals behavioural retargeting) are often at fault.
The collection of customer data can also be a burden of time and resources for your developers, IT or marketing teams. A Tag Management System (TMS) like Google Tag Manager condenses all of your tags into one request for a JavaScript. If an error in the tag causes the website to go down, using a TMS always allows you to quickly remove the tag.
This will, according to Tag Investigator, “reduce the number of outbound calls needed.It also asynchronously renders this request (background, leaving the remainder of your website loaded regardless of the response outcome).
The ConversionXL diagram below shows how a TMS speeds up the loading time for your page:
One snippet of code is all you need to use Google Tag Manager to handle your Shopify Plus shop tags in one location. Refer to the guidelines in the Shopify Plus Help Centre for more information.
Let us now discuss some of the testing tools and techniques that can be used to speed up site. You should of course always begin with your mobile phone.

5. Prioritize testing to optimize your mobile performance

A focus on mobile retail has never been more important. The rise of mobile shopping will only continue to grow — with revenues in mobile commerce projected to reach $319 billion per year by 2020.
According to Mobile 1st, the number one thing Mobile users complain about despite high mobile purchasing levels is sluggish sites and they rank even higher than site crashes.
We outline below how you can ensure that your ‘ first mobile presence ‘ and overall site performance and speed, matches or outstrip your competitors.

Test and optimize your mobile site speed

PageSpeed Insights is a Google Labs tool that provides you with personalized suggestions to improve the performance of your mobile site (separately from the desktop data). It also lists items that delay the page on your blog, such as CSS or JavaScript.
You can even take a look at the results of your mobile site rivals. Understanding what’s wrong with their website can help you avoid the same errors.
The Check My Site tool by Google will also help you calculate how your mobile conversion rate is improved by website speed:

Then, test your desktop page speed

You will also receive a Desktop report from PageSpeed Insights, with similar suggestions. Again equate results on your own platform with that of your top competitors.

Get a composite score

GTMetrix offers performance scores from A to F to your website. This fuses data from both Yslow Insights and PageSpeed Insights. It also provides a performance report that lets you identify problems involving optimisation.

After final optimizations score your site performance

Go for pingdom.com as your final test. It will rate the success of your site (ranging from 0 to 100 percent). It also has a valuable “waterfall review” function that lets you find certain important areas of issue. A useful reference method is this line by line ranking.

Take note of

That third-party application has different configurations, including GTMetrix and PageSpeed. Tools which provide “page load timing” have to pick from their tests a particular time marker — such as “time to first byte” (TTFB).
Remember that a particular scoring scale is added to each testing tool just as each team is able to define good site speed differently.
Use these speed tests to direct the decision-making process but keep your mind free. You must balance the speed of your website with the development of a user interface to optimize your customers journey. Such tools have not been developed for searching and analyzing Shop websites. Those basic tips will be looked at next.

Shopify Speed Optimization

Let’s take a look at the most growing Shopify Speed problems and how they can be fixed. These are suggestions provided by Jonathan Sinclair, a Shopify Plus Merchant Performance Program Manager.

6. Use pop-ups sparingly

It may feel like common sense to build a pop-up quick view window. Instead of visiting a product detail page, you display a product directly from the product listing page.
In theory, your customers should save time to decide whether they are interested.
However, it can impede the experience of a customer on your electronics site:
  • It adds an extra step to the client’s journey.
  • Accidentally, which frustrates the customer, it can be clicked on.
  • It may be confusing for a product page.
Most specifically, it can slow down the loading time on your website considerably.
Fast display pop-up implementations (included in a theme or from an app) can sometimes preload the details from a whole product page. It is only in the event a visitor clicks the “Quick View” button.
However, there is a huge amount of data to load, especially on a selection page containing 20 or 30 product thumbnails. Clicking Mapping will let you see if all your clients are using quick view by using a JavaScript-based method that monitors users scrolling or moving their mouse to click on their website pages.
We recommend that you deactivate quick view if:
  • It’s not really used by your customers.
  • There’s no other critical reason for it.

Detection

It should be simple to see if the product’s thumbnails have a Quick View Tab on it. Check your theme customizer for an ability to turn on or off this feature.
If this feature isn’t seen in the customizer theme, search to see if it comes from an app. If it is, then how to remove it should be obvious.
If the first two measures do not succeed, then it will possibly be built into the style itself. In that situation you need a developer to detect this and disable it.

Solution

Using AJAX to get the product information when a client hits the Quick View pop-up button.Or, save a limited number of product information as data attributes for the product grid item. Then, dynamically create the HTML and pop-up using JavaScript.
Any alternative is less desirable than quick removal. The product information for each product has yet to be loaded. But, it’s better than downloading all the images and links to the product.

7. Beware of excessive Liquid loops

Liquid is a powerful scripting language for Shopify. Nonetheless, there are some situations where you have to balance the added benefits against the drawbacks.
One such instance is forloop iteration. Forloop means that all products in a collection have to loop (e.g., crawl, or search for them) and it happens when a specific condition is sought (e.g. price or tag).
If you have a big catalog of products it will take a long time to loop. The issue comes up in the following cases:
  • Advanced collection filtering and mega-navigation implementations: They use nested forloops to go over all products and find the appropriate ones to serve.
  • Swatches:For each object on the compilation list, the code runs through all of the variants — then all of the images — finally filtering out the specific color to which the picture is related.
  • Paginating collections with thousands of products: Instead of having a more reasonable number of products on each tab, the sites show everything at once, and then use JavaScript to slowly load the page on request.
In some cases, these features may be beneficial — such as output images or product variants. These are also useful when you have a limited number of products. But be cautious about the effects of loading times.

Solution

Check your theme code to make sure you’re not running liquid forloops multiple times looking for the same information. This can arise as several developers collaborate on a project, and there may be overlapping activities or incompatible protocols. Removing any coding or redundant job clashes would allow the website load faster.
Findify has developed ways of providing sophisticated searching for collections — without affecting load times. The organization reduced the load time from 15 seconds to 2.5 seconds in the 30 000 product collection. The result was a massive uplift of 20% conversion for Shopify Plus clients.

8. Reduce picture sizes in thumbnails

The use of a “Best selling items” carousel tab on your homepage could be a concern. Information is being collected from your product pages and presented as thumbnails.
The problem arises when a product picture is depicted in a larger size than is appropriate. This allows the user’s application to reduce this down to the thumbnail that influences the loading time of your website.

Solution

Use the built-in image size parameters of Shopify. This means that you access the shortest file possible while maintaining the accuracy of the image. IThis asks Shopify for the exact size of the picture to be shown. It then reduces the downloaded file size from the CDN and reduces the required scaling on your client side.
All Shopify designed themes are now set to deliver appropriate image sizes depending on the device’s point of view.

Advanced Options

You can also choose a theme to use.
  • Srcset to select the correct picture sizes depending on the resolution of the frame.
  • Lazy Reload first remove low-resolution images — then overwrite them with high-resolution versions — once the contents of the website have been enabled.

9. Ease up on homepage hero slides

Huge, multi-hero-image slideshows are great to show off your products. Unfortunately, there is a downside to using it. For a hero slider to look good, the size and quality can increase load times, particularly if you have 4-5 slides.

Solution

Cut down the number of slides on the webpage. Alternatively, delete them entirely. A high-quality image of a hero — with a clear call for actions — helps to quickly attract your customers. It’s because the brain handles visual images 60,000 times faster than words.
If you need to use a slider, follow the best practices of UX. Keep two or three slides on it, and use srcset or Lazy Load to capture all.

10. Weigh the advantages of installing your site in another app

You actually don’t use them yet, if you’ve got more than 20 Shop apps installed (free and paid ecommerce plug-ins). You might have built some of them as an exercise, but you forgot to remove them. Now, certain apps are running in the background, harming the efficiency of your web.
Most of the script / CSS files for apps downloaded from the Shopify Plus Admin are embedded into the < head > of your theme.liquid package inside { { content_for_header}}.
In order for the app to work correctly — it needs to be rendered before any other code is loaded.
Whenever you want to install a new application, ask yourself, “Is this app’s added value greater than the potential delay in load speed?”

Solution

Go through and delete those applications that you don’t use. Next, run page speed tests using tools like GTmetrix or PageSpeed Insights, or even manual tests using Chrome’s Developer tools. Tap on the “Network” tab and reload the list.
We suggest that you allow the developer to find and remove any unwanted applications.

11. Compress and reduce the size and amount of images

The pictures compensate for 50% to 75% of your Web sites ‘ total weight. The higher the quality of your images, the larger the number gets. But you can minimize the size of the image without reducing the quality of the lossless compression.
You should continue using TinyJPG or TinyPNG for this function in order to reduce the scale of new images that you create. Reduce the total amount of images used in addition.
Note that every image you use on a page creates a new HTTP request.
Also, search in your code for empty image sources. This causes an excessive burden on the browser to send your servers yet another request.
The “sprites” is a very simple solution that you can use. These merge multiple images such as icons into one, limiting the number of specific requests for photos on the site. It also increases website velocity. To build sprites and make the application for you, upload the images to a free tool such as SpritePad.

12. Code Minification

Google Developers have built a “minification” tool that aims to delete badly written Xml, CSS and JavaScript from your web page, which may slow down your site efficiency.
There’s also a collection of tools related to HTML, CSS, and JavaScript to support.
Note: Shopify conveniently performs mining SCSS.liquid. They often provide white space managing tags to support theme developers eliminate any bloat in the rendered HTML

13. Reduce redirects and broken links

Site speed and SEo rankings are bound to get affected because of too many redirects and broken links.
For redirects…
Perform some house cleaning of your site. For eg, your SEO may be hurt by 302 redirects, which imply a page has been temporarily moved. They often cause additional requests for HTTP, and interrupt transfer of data. Instead, use a ‘cacheable redirect‘ or the installed in Shopify’s 301s function in the navigation panel by design.
Avoid redirecting URLs to pages that are themselves redirects. It sounds quite obvious, but it tends to happen more frequently.
For broken links…
Broken connections for page items such as images CSS and JS files can raise HTTP requests and sting the speed of your website. To fix these, use a device like Broken Link Checker. Custom development of 404 error pages will support users who mistakenly enter an incorrect URL for your site.

Improving the performance of e-commerce sites takes time

Investing time and resources to improve your site efficiency and speed is crucial to get buy-in from your team. We’ve included the information and tools that may help you build a case.
Many of those optimizations are DIY upgrades. You should hire a Shopify Partner’s support like OSC when it is not possible They will instruct you how to make the Shopify site faster

For Further Details or Additional Information

OR

If you want to know more about our Services

Feb 29th, 2020|