Obtaining high conversion is quite a challenging task, and reasons for a low conversion rate are numerous. According to a report by Optinmonster, causes can vary from high extra costs for shipping (61%), to the absence of guest checkout (35%), a complicated checkout process (27%), and even the inability to see the total purchase cost upfront (24%). However, the major underlying cause is poor page load speed. Time is priceless, and customers are not going to stay for years while the web-page loads, even the loyal ones. Over the last nine years, Whidegroup has been successfully addressing our clients’ performance issues, and helping them to gain a stronger e-commerce presence. Among our happy clients are Kjellmann, Styled, Beloved Dresses, and many more. In this article we explore how to optimize web page performance and establish a well-balanced website speed optimization process.

What are the Costs of Downtime and Low Performance?

E-commerce business is a game of time and money. Proof of that can be found in the research report constructed by Skilled – a website which ranks web-development agencies according to their performance. The report was formed on the basis of 12 case studies done on operating business. It demonstrates a fairly comprehensive insight into just how important web page speed is:

  • 79% of web shoppers who are dissatisfied with website performance say they won’t return to the site again.
  • 47% of consumers expect web pages to load in two seconds or less.
  • 64% of smartphone users will leave a page that takes longer than four seconds to load.

If we talk about money loss, it becomes even more dramatic. Let’s say you run an e-commerce website, which makes $100k per day. Below you can see how one small second impacts the revenue from the website:

  • A one second improvement generates an additional $7K daily.
  • A one second delay in page response can result in a 7% reduction in conversions.
  • And the same one second delay means 11% fewer page views.

Incredible results, aren’t they?

Google also strives to show users only the fastest results, which is why website page speed has become one of the crucial ranking factors for Google. Therefore, if you desire to take the highest position on the search engine results page, performance optimization is the first thing to worry about.

Most Common Performance Issues for E-Commerce Platforms

In order to investigate the problem of low performance in more detail, let’s review the three common e-commerce platforms – Magento, WooCommerce, and Shopify, which are used for the development of over 50% of e-stores. The majority of the stores developed on these platforms have performance problems due to code customizations. Despite common issues across the main e-commerce platforms, the most crucial reasons lie far deeper and vary, depending on the particular platform. That’s why each store needs an exclusively tailored approach for optimization and proper performance testing after launch.

Regardless of the e-commerce platform you run your project on, there will always be certain pages on your site that are under particular stress due to the higher traffic they will experience.

Factors That Impact E-Commerce Website Performance

Running a successful e-commerce business is absolutely impossible without knowledge of the details of every particular e-commerce platform. Especially vital is knowledge of the factors that negatively influence e-commerce website performance and best practices to eliminate them.

The first factor is traffic. The point is many websites have a set limit for bandwidth, or the amount of data transferred during a certain period (day or month). Thus, high traffic leads to an inability to reach peak performance, online store speed reduction, and, consequently, poor performance.

The server also plays a definitive role when it comes to the elimination of poor website loading speed, slow e-commerce page acceleration, and common website enhancements. The main parameters to draw your attention to are server configuration and time to first byte (TTFB). Currently, there are plenty of server configuration services for you to use.

Web font optimization is really critical in the context of performance optimization. The issue is that normally each font is an externally-hosted resource loaded from the server. In other words, each font is a query that takes time to execute. It creates an additional workload for the server and leads to slow page loading. We recommend a thorough review of all the web fonts being used on the page. Slim down to only two or three web fonts in order to not abuse server resources. Moreover, such an approach is better in terms of design aesthetic.

Category, Search, and Checkout Page – Why is Performance on These Crucial Pages the Lowest?

On every e-commerce website, there are three pages with special status: category, search, and checkout. These pages capture the most customers in comparison with other pages on the website. This, of course, leads to particularly high traffic, and thus, higher load. That’s why performance on these pages is particularly essential. The factors that cause low performance differ on each page, and now is the perfect time to go a bit deeper into this.

The category page may suffer from an extensive number of products chosen for display on the first screen. Another reason for low performance on this page is the fact that products tend to have many attributes, options, and values, which adds to the load on the server.

Reasons for poor performance on the checkout page are more numerous. First, the checkout may be slowed down due to a large number of integrated payment methods, and various (often unnecessary) custom checkout fields. Including various types of validation on your checkout, for instance, email and password validation, or ZIP code validation, are also factors that tend to affect performance negatively. Finally, another surefire way to slow down a website is implementing a large number of queries.

One of the most widespread search page weakness is autocomplete and/or auto-suggest implementation, as well as spell-check. An artificial intelligence (AI) application, undoubtedly a consequence of the worldwide AI-boom, is another issue that can trigger performance issues. The final reason for poor search page performance is the usage of analytics in order to personalize search results.

To handle problems of performance optimization most effectively, it’s necessary to learn each of the e-commerce platforms in detail, since each one is unique and the problems vary depending on the platform you run.

Magento Performance Optimization

An impressive size of CSS and JS files can be a glaring reason for poor performance on your e-commerce page. However, merging and minifying CSS and JS files can be a great solution, contribution to Magento website speed optimization aimed at helping to lighten the web page load. To that end, the total number of HTTP requests will also be reduced.

Product images that are an unsuitable size are a thorn in the side of Magento performance optimization! Although they are the “heaviest” part of the page in terms of load weight, images are nonetheless an important part of e-commerce because they create a comprehensive impression of the product being sold. Large files load slower than little ones, and it affects the speed of the website. There are various ways to optimize the file size of your website’s images while maintaining its quality. You can use command line tools, such as gifsicle, jpegtran and optipng. Most likely, your hosting service already has it. After verifying this, use the following bash script:

find ./media -iname '*.gif' -exec sh -c ‘gifsicle -b -O3 -o "{}.out" "{}"; mv "{}.out"
"{}"' \;
find ./media -iname '*.png' -exec optipng -o5 -keep -preserve '{}' \;
find ./media -type f -iname '*jpg' -exec sh -c 'jpegtran -outfile "{}.out" -optimize
"{}"; mv "{}.out" "{}"' \;

Google PageSpeed Module is one more step on the road to optimizing Magento for peak performance. After installation and configuration, it will optimize your images on the fly.

The non-optimized server can seriously hinder Magento page speed optimization, since this platform is quite tricky and demanding in the context of server configuration. To overcome this issue, you should optimize your server. While keeping its configuration well-balanced and reducing server response time, you’ll have a better chance to obtain decent website performance.

magento 2 performance optimization case

We recently dealt with a project that was built with Magento 2, and had some problems with performance. These are the steps we took to resolve the issues:

  • First, we used Google PageSpeed Module in order to make product images lightweight and thus speed up pages.
  • We then reduced server response time with a built-in Magento functionality. With Full Page Cache that is natively supported via Varnish, the time to first byte was dramatically reduced.
  • Magento 2 performance optimization was also notably improved by CSS and JS minification. For minification, we used development environment inbuilt tools.

WooCommerce Performance Optimization

WooCommerce performance optimization may be hampered by lots of styles and scripts, if you have them overflowing on every page on your site. A good solution for this issue is the use of a special plugin, for example, WooCommerce Speed Drain Repair. This plugin is intended to stop unnecessary extra items from loading, and will help boost the speed of your WooCommerce website.

The first performance issue you may face is amongst the themes. A slow theme can be a serious stumbling block on the road to WooCommerce speed optimization. However, the solution is quite straightforward. You can either change the WooCommerce theme or building a new one from scratch.

Since WooCommerce is a WordPress plugin, it has inherited some of the performance issues from its parent. The most serious one is caching, and if you’re still running a website without caching, prepare to be pleasantly surprised right after the caching implementation! Caching may be performed by caching plugins (the most popular option), browser (browser caching), or server (server caching). The most popular WordPress caching plugins in 2018 were WP Rocket, WP Super Cache and WP Total Cache. When combined with a system level page cache such as Varnish, this can be extremely powerful.

Page size is a well-known killer of WordPress website performance. However, plenty of business owners don’t actually take this into consideration. Reducing page size is the indisputable way to speed up an e-commerce page. The ways to reduce page size are numerous. For starters, you can concentrate on images and optimize them, or look at code minification. Reducing the number of files on the page also plays in favor of performance online store optimization.

Virtually every website strives to provide users with embedded content, that is engaging and attractive. However, the owners of WooCommerce-based websites should be extremely careful with this. Since media content is heavy, it significantly affects both Woocommerce and WordPress performance optimization, as they are inseparable from each other. Thus, customers that were primarily attracted to the content then will be disappointed by the poor performance and leave the website. How to avoid such a scenario and save all the content on the website simultaneously? The most reasonable solution is to use audio and video hosting services. They allow the placement of any desired media content without adding stress to the website you run. You may find hosting services such as YouTube, Vidyard, Veoh, or LiveLeak useful.

wordpress performance optimization case

We recently worked on a WooCommerce project for one of our clients that was suffering from performance issues. To help our client, these are the steps we took to resolve the issues:

  • Knowing how crucial product images are, we compressed them to make them lighter while keeping them in good appearance.
  • We advised the owner to change the hosting provider. There are hosting services specially designed for WordPress in order to obtain better load time.
  • We used caching to allow repeat visitors to avoid loading the entire website every time they visit, which only makes the website slow to load the first time.

Shopify Performance Optimization

The most common response on how to optimize Shopify store speed is considering multi-image slides before adding them to the website. A high-quality hero slider means a big size, which increases load time. The more hero slides you have, the more serious the performance problem you will experience. The easiest way to solve this problem is cutting down the number of homepage slides you employ, or even eliminating them entirely.

Non-minified code may be another reason for low performance. Therefore, code minification is a robust solution to this issue. Shopify enables you to minify CSS in a very simple way – by giving an “scss” suffix, then including it in your site with a “scss.css” suffix. However, it should be noted that Shopify doesn’t have an in-built ability to minify JavaScript.

Additional performance issues can be caused by too many redirects and broken links. It’s undeniable that redirects are really helpful: if you move the website to another URL, most likely, you want to ensure that visitors get to the right place, and redirecting is the perfect way to do this! Thus, a redirect is a great way to maintain a website’s domain authority and search rankings, in the event the site’s URL is changed for any reason. However, you should not abuse them. As for broken links or wrong links for page elements like images, CSS and JS files – they only serve to increase the number of HTTP requests and will sting your site speed. Eliminating them is a simple way to advance website performance. It’s also a good idea to develop a custom 404-page in case the visitor enters an incorrect URL, so they won’t feel confused or disappointed. Instead, they’ll be clearly informed that the current page is not found.

shopify performance optimization case

Recently we worked on a Shopify based project. Performance optimization was among the numerous tasks we performed. Here is how we solved the problem of poor Shopify performance on this particular project:

  • We implemented lazy loading – a performance optimization technique that loads only those elements that need to be reflected on the first screen. Other elements are loaded only if the user scrolls on the page. Such an approach differed considerably from the previous one, which saw the page load fully, no matter whether the user required it. Immediately after lazy loading is implemented, page weight can be reduced from 10% to 30%. In this particular case, we reached an 18% page weight reduction.
  • We deleted all the unnecessary apps that were not in use. The issue is that even if an app is disabled, it still consumes page resources, which negatively affects the page load speed. Therefore, the only way to eliminate this is through total removal of the app from the store.
  • In order to optimize CSS and JavaScript delivery, we applied Render blocking JavaScript and CSS in the above-the-fold content. This allowed us to keep CSS and JavaScript lean and deliver them faster.

Which E-Commerce Platform is the Fastest?

We know choosing the right e-commerce platform can be really daunting. Every platform is unique and has its own specific characteristics, such as the maximum number of products, product type, scalability, security, and everything else that comes into play. That’s why one of the biggest dreams of an e-commerce owner is simply being able to find a single e-commerce platform that will just be fast and reliable.

Your choice should be based on your current and future business needs and the possibility of their technical realization within the chosen platform. In light of our long-standing experience in the sphere of e-commerce development, we recommend that you draw your attention to Magento 2. This e-commerce platform is well-known for its high-performance, reliability, and robustness. Just remember that whatever e-commerce platform you choose, you can always improve the load speed.

General Recommendations to Improve E-Commerce Site Performance and Page Speed

The issue of performance optimization has been relevant since the dawn of e-commerce. With the years of experience under their belt, business-owners and web-developers have come together to form a list of the most common recommendations:

  • Choose the best hosting possible. Aspects to consider while choosing a hosting are: uptime (over 99.9%), load time (no more than 200 ms), and support plan. Popular hostings that meet these requirements are HostGator, Bluehost, and SiteGround.
  • Implement a content delivery network (CDN). The most popular CDN services in 2019 include KeyCDN, MaxCDN, Cloudflare, and Sucuri.
  • Use Google Tag Management system – it organizes all JavaScript tracking tags into one JavaScript request, which reduces the number of queries to the server, and consequently, increases your site performance.

We’re Whidegroup

We develop optimized
e-commerce stores.

How to Monitor Site Performance and Page Speed

There is no doubt that analytics is the best way to keep a pulse on an e-commerce business. Currently there are plenty of tools for performance analytics: paid and free, and laconic and complex. However, some of them have gained particular love and respect from everybody engaged in running the websites. Here you’re welcome to learn the most popular tools that are used to monitor website performance:

  • Google Analytics – this tool is like a launch pad for most aspects of the business, and it’s no wonder – it’s free, and it’s more than enough for providing basic information of website performance..
  • Google PageSpeed Insights – this tool analyzes the website’s front-end, provides a website score from 0 to 100 points and offers optimization suggestions.
  • GTmetrix – this tool enables you to perform tests from 7 different locations (USA, UK, Canada, Australia, India, Brazil, and China). You can set and compare website performance against various connection types (like Cable vs dial-up) to see how each affect your page loads.
  • Pingdom – provides insights about the number of requests per domain and what type of content gets the most requests. The report you receive outlines areas for improvement.
  • WebPagetest – this tool can test speed through 25 browsers including mobile ones, in 40 locations in Europe, the Middle East, Asia, North and South America, and Oceania. Advanced features include video capture, disabling JavaScript, and ignoring SSL certificates.
  • Yellow Lab Tools – this frontend-oriented performance tool provides insights about JavaScript interactions with a document object model (DOM) during the loading of the page, and other code validation issues.

Whidegroup Performance Online Store Optimization Tool

Since we are an e-commerce addicted development company, at Whidegroup we know well how exclusive and unique each project is. That’s why we don’t waste any effort just targeting the most common performance problems. Instead, we concentrate on a thorough research of each project we take on, learning its particularities. Only then do we make a plan and prioritize the tasks to work on.

Providing performance optimization services, we dive deep into every little aspect of the website’s functionality. To do this effectively, we use analytics tools, which helps us to obtain a better understanding of the problems experienced on a website and their severity. With regard to our multi-year expertise, we’re quite demanding of the tools we choose to work with. In one situation, in order to get the best results, we needed a quite specific tool. The tool needed to be focused on e-commerce performance testing, with clear and informative reporting, and an ability to analyze several pages simultaneously. We sought such a tool for a long time, to no avail. Instead of giving up and using a combination of tools available that didn’t fully meet our expectations, we decided to create what we were looking for.

Storalyze is the first comprehensive analytics tool by Whidegroup. It provides the user with deep analysis, highlighting the crucial factors. Through Storalyze and its combination with other tools, we can obtain even better results and thus, provide better performance optimization services for our clients. We’ve already done so successfully while working on Kjellmann, and the results were truly impressive, having impacted further on the whole optimization process.

Whidegroup tool for ecommerce performance testing

E-commerce performance optimization is not a simple task, but it is certainly worth it. If you haven’t optimized your store yet and want to, or even if you’re just thinking about it – drop us a line! We’d love to help you boost your store to its best self!

E-Commerce Performance Optimization: Don’t Let Low Website Speed Affect Your Profits
8 reviews 5 stars of 5