Speed matters: 11 Steps to optimize your ecommerce site for faster website

1. Measure the performance of your website

Before making any changes, you need to first diagnose if your shop has technical issues or low performance. Here are some tools that can help you gain valuable insights into your website:

• Google PageSpeed insights

• GTMetrix

• Pingdom

• New Relic

• ySlow

• Webpagetest.org

• Google Lighthouse

Take the time to test your website. Try to use all the recommended tools – each of them has a different angle and may bring a different issue to light. You want to have as wide a perspective as possible. 

For example:

• Google PageSpeed Insights will check your core web vitals (a set of metrics identified by Google as crucial for a webpage's user experience). 

• GTMetrix will provide more technical insights and break down your webpage loading time – from the time to first byte (TTFB) to the time it takes to load the entire page. 

• Pingdom will check the performance of your apps and plugins.

Test your home page, category pages, collection pages, subcategories, product pages, and carts. A holistic approach is crucial in increasing conversions. Average loading time can be misleading, as it might very well mean that a small group of people is experiencing a hyperfast load time, while the site is really slow for the majority. To avoid that, make sure to measure accurately.

Ecommerce performance metrics

Once you’ve gathered all the data on your web and mobile performance, you can start the optimization process (if needed). The best way to start is to find the metrics that make sense for your business. 

The most popular Google metrics with benchmark 

Sources: Metrics by GTmetrix, SemRush blog, PageSpeed Insights by developers.google.com, HubSpot Blog.

There is no point in using them all. Speed on its own won’t necessarily improve your conversion rates. For example, you could spend significant funds shaving one second off your load times and only get a marginal impact on conversion.

You need to find that balance between getting the speed as low as possible versus maintaining the page content and UX, so conversions grow. Then, your ecommerce team can set goals around page speed and measure consistently.

Here, we’ve curated some benchmarks from our customers: 

Djerf Avenue

Djerf Avenue is a Swedish, non-seasonal, ready-to-wear brand offering vintage-inspired basics. See the full page speed report.

See the full product page speed report.

Djerf Avenue’s headless tech stack:

Davida Cashmere

Davida Cashmere is a leading cashmere Scandinavian designer brands. See the full page speed report. 

Davida Cashmere’s headless tech stack:

Tobe Outerwear

Tobe Outerwear is a Swedish brand that makes comfortable and stylish winter outerwear. See the full page speed report.

Tobe Outerwear’s headless tech stack:

2. Ecommerce platforms and back end speed

Ecommerce platform infrastructure influences the performance of your website. Depending on the platform type, different optimizations and strategies have to be implemented to achieve a great customer experience.

In the beginning, the performance of all the ecommerce platforms might seem the same, but the biggest differences surface over time. You don’t want to buy a platform that will slowly grow into an overdeveloped, overloaded site that can’t be further optimized, which is what will happen if you choose a technology that lacks agility. If your platform doesn’t include all the features and functionalities that you need out of the box, you have to start adding plugins and code right away. It’s only going to grow over time. 

That is why, while looking at ecommerce platforms, you should look at their agility, scalability, and native feature set. Headless solutions like Centra are built on horizontally scaling technology, handling virtually any load with industry-leading response times. They can scale limitlessly – 10, 100 or 1000 checkouts per second. With other ecommerce technology, there are limiting factors that you can’t overcome, like plugin conflicts that cause slowdown and downtime or code-breaking upgrades that destroy your user experience instead of improving performance. 

Control, scalability and agility

Headless platforms are the backbone of the best-performing online stores. Their power comes from the MACH development approach, which allows you to create your whole ecommerce tech stack with a focus on performance. Every element of the store contributes to your websites’ end performance. That’s why a limited choice of front-end technology, PSP options and CMS, as well as a plugin-first development approach can negatively impact loading times.
Legacy monolithic platforms and SaaS monolithic platforms don’t allow you true freedom of choice, and thus you’re unable to gain from the best technology on the market.

3. Third-parties influence on performance

Third parties have a significant influence on ecommerce site speed. Plugins or apps are the primary causes of performance issues on websites. Sometimes it’s about their lack of optimization or poor technology, but often it’s just the wrong implementation. It’s so easy for non-technical people to install plugins and add them to the page improperly. 

In those cases, measuring consistency can help you. You will have information on how certain plugins influence your shop’s performance. Factual information on how much loading time the app contributed across your website is a good start to a conversation with the plugin provider. Usually, providers are ready to work on optimizing their solution or supporting the implementation to overcome challenges.
Find the right balance between growing conversion by adding new solutions like reviews and keeping the site fast by limiting the number of plugins and extra options. Sometimes, to tip the scale in your favor, you might want to be creative. For example, if the chat widget is loading slowly, but you want to keep it, you might hide it behind a placeholder image that looks like the widget, while the actual widget loads in the background. Nobody will open the chat in the first three seconds. That way, you can use a third-party integration without a damaging effect on performance.

4.  Hosting choice

A shop’s back-end infrastructure often depends on servers and hosting. If there are any hosting-related issues, you might not always be able to fix them. 

If you’re self-hosting your site, think about a few technical areas: 

• Application logic: Code profiling can help you identify which dependencies are being used on your site and how long they take to load. 

• Database queries: When your database queries aren't firing efficiently, slowing may occur. You might not even realize they’re performing poorly until you look diligently. It takes more work and central processing unit (CPU) resources to process slow database queries. 

• Routing: Your most visited pages and content should be at the top of the routing queue. This establishes a higher priority. If things are running slowly, you can also add more routes. 

• CPU starvation: Overusing plugins or scripts can result in CPU starvation on your site. Remove unnecessary scripts and uninstall resource-intensive plugins that aren’t often used.

5. Server improvements

Despite all your efforts to reduce loading times by optimizing your web content, if your server is slow, you won’t see a big improvement. Your server’s response times may be influenced by a variety of factors: slow application logic, slow database queries, slow routing, frameworks, libraries, resource CPU starvation or memory starvation.

The server efficiency is your hosting provider’s responsibility. They should keep it fast, but there are a few details that you can check or ask to be checked if your time to the first byte is increasing. You can implement: 

• Gzip compression – If your provider isn’t doing so already, compress your files. Compressing your website’s files makes them faster to transfer, which helps to cut down load times by about 70%. 

• Caching — This is one of the best ways to improve your site's speed, without compromising its quality. The first time a customer visits a page, your site’s server must download JavaScript and HTML files and images. Caching is a temporary storage that saves the content so it can load faster during another visit.
  
  Caching is enabled by adding a small piece of code to your website’s .htaccess file. Most likely, your hosting provider does this by default. If you have to do it manually, you can access it through the file manager within your hosting user area. Added code informs browsers what to cache and how long to store it for. 

• Content delivery network — You can distribute your websites’ content to servers located all over the world, so your customers can access your content quickly from the closest geographic location. You can use the services of an independent CDN provider, but it’s better to choose hosting that includes CDN services.

• HTTP/2 – This is the fastest HTTP protocol. Make sure that your hosting provider is offering it.

• Google PageSpeed – This is a plug-and-play module that changes resources to implement best practices for web performance on the server level without your involvement. Specifically, minifies HTML, CSS, and JavaScript, optimizes file caching,  file loading and images, and combines and optimizes external JavaScript files.

6. Website code evaluation

In most cases, conducting code optimization is the low hanging fruit of performance. The compact and efficient nature of optimized code can free up memory resources, lower processing time, and improve the efficiency of a website, especially for time-sensitive and resource-intensive tasks. Overall, code optimization can bring numerous benefits for the speed, performance, and efficiency of your store.

Here are some easy code optimizations that will help you achieve a higher level of performance: 

• Remove unnecessary 404 pages. They’re affecting your website and server speed. 

• Minimize round-trip times (RTT). RTT is the minimum time required to send a signal in both directions, from the sender to the receiver. Fewer requests for a server means faster web page performance. Here is the Google manual. 

• Load files asynchronously from subdomains. You will improve the overall speed of your website by loading files simultaneously.

• Remove parser-blocking scripts from the browser. In order for a browser to display a page to a customer, it first has to go through HTML parsing. This process might be interrupted by parser-blocking scripts. They stop the process until the browser finishes running the script. 

Parser blocking: <script src="jquery.js"></script>
Not parser blocking: <script src="jquery.js" defer></script>

• Combine your CSS and Javascript files. When your pages are loaded, this option merges multiple code files into one, reducing server load time.

• Compress CSS, Javascript, and HTML files. 

• Remove JavaScript from your HTML. This will improve the performance of your website, make it more responsive, and reduce the amount of data that needs to be sent to the endpoint.

Single page applications (SPA) are becoming very popular due to their high performance. They’re good for small websites but not perfect for bigger stores. There are concerns about the influence of SPAs on SEO and accessibility. Following a trend and building a new, much more complicated website might be a disadvantage, especially if you can easily fix your current website. More often than not, cleaning up your HTML and conducting simple optimization will give you about the same results as creating a SPA page — without additional challenges, risks, and costs. 

7. The best front-end technology 

Front-end frameworks are key in building the best user experience. There are three popular front-end technologies you should choose from: React, Angular and Vue.js. Interesting to note, technology popularity can vary based on location; for instance, React is popular in the US and Western Europe while Vue is prevalent in China.

The performance of a chosen technology depends on the developer’s handling of it, but it's not the sole consideration. The project type and scale can also play a role, as some projects need more structure while others need more flexibility and customization. Additionally, aspects such as maintenance, user traffic, and scalability significantly influence the front end framework performance. 

Different frameworks will perform better under different scenarios, here’s a short overview: 

Sources: Edgio blog, Frontend technologies by merixstudio.com, knowledgehut.com, 

8. Database optimization

Over time, your site will grow, and your database of posts, products, pages, limited collections, affiliate links, etc. will eventually start slowing down your shop. The only way to keep it under control is to include database check-ups in your weekly website maintenance. Besides that, you can try:

• Deleting unnecessary files regularly. 

• Including the database-cleaning phase into each campaign/promotion process. 

• Regularly conducting database performance checks, testing onsite search, add-to-cart and other important steps of the customer journey.

• Condensing your customers’ data into one file by using a tag management system (TMS) such as Google Tag Manager.

9. Media assets management 

Modern fashion and lifestyle websites are image-heavy. Elements such as images, icons, videos and UI can make up half of your website’s size. They have a significant impact on performance and conversions. An attractive visual identity is a powerful selling tool, and you shouldn’t compromise it to improve your website’s loading times. There are a few good practices that you might consider: 

• Choose lite embeds for videos. They will only load the thumbnail to increase the speed. The actual video loads only after clicking on it. 

• Clean your content. Delete unnecessary fonts and media from the media library, update or delete broken links, and limit redirections. 

• Optimize your images. The first easy win is compression, which allows you to keep picture quality high while downsizing it by removing metadata. Another thing to do is transcoding – uploading images in the best format for the device. WebP is believed to be preferred by most devices, but JPEG is a close second. Google has recently introduced a format called JPEG 2000. For now, it’s only compatible with Chrome, so we don’t recommend using it, but it might be worth keeping an eye on. 

• Use customer journey research. Make rarely visited pages lighter to improve the website's overall performance and increase conversions on your money-making pages. 

• Prioritize content loading. Each of your pages has important media files that need to be loaded like the logo, navigation bar, etc. Also, there are likely heavy banners to load that aren’t that determining. Record the loading page time, and identify the times that those heaviest and slowest images are being loaded. Use Google Analytics to create custom timing events to optimize page loading. For any image loading, you can attach the unload event.

• Facilitate parsing. Above-the-fold content has to load quickly. It needs to be as easy to separate for the browser as possible, but  the lower content should then be split similarly. For faster loading, you want to accelerate the parsing of the page. There is no silver bullet toward that goal. Website developers are the most qualified to choose the best effective strategy. 

• Uninstall all unnecessary third-party applications like Shopify apps, as they might cause compatibility issues within your apps and negatively impact website speed.

10. Mobile responsiveness

Business owners know that more than half of orders come from smartphones nowadays. That indicates the importance of mobile responsiveness and loading speed. Creating a great browsing experience on mobile is harder but worth the effort. Mobile phones as a source of traffic are going to grow significantly. Up to 80 percent of traffic will be coming from smartphones, so it is sensible to prioritize them.

There are two different systems (Android and iOS) and a few very different mobile browsers to address. iOS is easy to work with – you know the dimensions of all available models, and it’s powerful, so it rarely experiences a slowdown. One downside might be that Safari isn't the most developer-friendly browser in terms of smartphones. On the other hand, Android can easily get slowed down or crushed. There are so many Android devices, dimensions, and browsers that you just can’t deliver a seamless experience to all of them.

Here are a few steps to improve mobile responsiveness:

• Build a completely different experience for Android and iOS. This is a well-known practice that allows you to separate challenges and invest time where it’s needed. 

• Minimize page size. In spite of slower connections, mobile users expect websites to load as quickly as their desktop counterparts. That’s why media asset optimization is crucial.

• Optimize for sizes currently being used, but also look for the sizes that are up and coming. 

• Switch to Accelerated Mobile Pages (AMP) – Google's AMP is a framework for creating standalone pages that load instantly (in just 500 milliseconds). They are created by simplifying the HTML and enforcing stringent limitations on CSS and JavaScript. AMP are served from the Google cache, and their content is pre-rendered on their server. 

• Focus on your HTML. A browser still very much depends on HTML, so serve the right architecture instead of waiting for the browser to create it. It improves both performance and SEO accessibility.

• Minimize the amount of JavaScript. You can rely on browser APIs. This is the most technically advantageous change, and it will help you improve a number of specialized areas of your store.

• Switch to a progressive web apps (PWA) front end. If you have a headless platform, you can gain lightning-fast browsing speeds on your website on mobile devices by coupling it with a PWA portable front end. Their first loads are a little longer than multi page websites, but the browsing transition speed makes up for it.

11. Google tools adjustments 

Google offers a variety of tools to help business owners deliver the best customer experience. Here’s how you can get the performance boost by making small changes to your Google tools’ use. 

Tracking with Google Tag Manager

Tags collecting data can slow down your store performance. JavaScript tracking tags (e.g., conversions, goals, behavioral retargeting) are the main reason. Google Tag Manager combines all tags into one JavaScript request. This reduces the number of external requests and allows the website to load independently from them. 

Source: https://cxl.com/blog/tag-management-can-improve-site-performance/ 

Monitoring layout instability

Google Analytics offers a layout instability API that shows how much your website moves around during load time. If your layout lacks stability, you need to reconsider your design and implementation to check dimensions and blank space, and find the source of the problem. It’s not only going to help grow your perceived performance, but also your rankings in Google. 

Maintaining ecommerce site speed over time

One of the most important parts of building website performance is implementing speed metrics into weekly KPI reporting. Creating a really good user experience requires commitment and constant improvements over a period of time. All good practices, like releasing content with proper images, cleaning out leftover data or media, and measuring performance changes, have to be implemented into all processes across the company, so teams can work together toward the same goal instead of sabotaging each other

FAQ