Performance requirements and 10 best practices for high-speed e-commerce websites

Do you want to relaunch your e-commerce website or launch a brand-new one? It is an exciting challenge because e-commerce unlocks huge growth opportunities for retail companies. An online presence can be the key to success or a necessary choice to survive international competition.

E-commerce may allow you to market excellent local products worldwide without the intermediation of distribution, leverage advanced marketing strategies, such as targeted advertising and social media campaigns, and take advantage of AI tools to improve operational efficiency, customer experience, and marketing strategies.

However, launching an e-commerce site requires careful strategic and organizational planning, a thorough analysis of costs and benefits, strengths and weaknesses, threats and opportunities.

And that is not all. To succeed with your e-commerce, you need a modern, fast, secure website to support your business. A successful e-commerce website should provide a smooth shopping experience, comply with international privacy regulations such as GDPR, guarantee secure transactions, and accompany your clients through the sales funnel to the point of purchase.

It should be SEO optimized, scalable when needed, flexible, and easily manageable so that you can focus on your business without wasting time and resources on technical issues.

That’s no easy task, but an e-commerce website can give you great opportunities to grow your business.

In summary, three areas to consider when planning an e-commerce website are performance, security, and functionality.

So, we gathered our best recommendations on e-commerce optimization into three articles, each focusing on one of these three areas.

This first article will focus on performance, sharing a checklist of 10 best practices to optimize your e-commerce website for speed and performance.

In the following two articles, we will focus on site security and the hosting service’s functionality, dwelling on the benefits that e-commerce-optimized hosting can guarantee.

Are you ready to know what you need to launch a successful e-commerce website and head off to take over international markets? Keep reading!

Where to start to launch a modern e-commerce website

A modern e-commerce website requires several technical and functional features to enhance user interaction with the site, ensuring a rich and pleasant browsing and shopping experience.

From a technical point of view, an e-commerce website must be optimized for performance and security. It must be easy to manage for your team and easily scalable.

Building a website with these characteristics requires a state-of-the-art infrastructure, an enterprise-class Content Delivery Network, advanced features for developers, an efficient and easy-to-use backup system, and a fast and skilled support service.

So, the first step before you can launch an e-commerce website is finding out where to get the services and tools you need. This decision is about choosing the hosting infrastructure provider. The options are almost endless. You can choose to manage your servers by hiring a system administrator or opt for a fully managed solution, such as Wix or Shopify.

The first option, managing the server in-house, offers maximum flexibility and customization. However, it requires considerable resources and skilled sysadmin engineers. Large companies usually adopt this solution.

The second option, fully managed platforms, has the advantage of great ease of use but does not guarantee the technical and operational flexibility that your business may require. In addition, as the company grows, unpredicted costs may arise.

Somewhere between these two extremes, there are solutions based on an open-source platform combined with a hosting service that provides the features required for e-commerce.

You can dive deep into the differences between some of the available options in our comparison articles:

• WooCommerce vs. Shopify
• WooCommerce vs. PrestaShop
• WooCommerce vs. Magento

At Kinsta, we provide premium hosting for e-commerce websites. Our infrastructure is optimized for performance, security, and ease of use for WordPress websites, coupled with the most popular e-commerce plugins, WooCommerce, and Easy Digital Downloads. Our isolated container technology is built on top of Google Cloud Platform and leverages the power of Cloudflare’s network to ensure maximum performance and security.

This is the technical solution we recommend to anyone who asks the question: what is the best hosting infrastructure for a modern e-commerce website?

Let’s get started with e-commerce performance!

10 best practices to optimize your e-commerce website performance

According to recent research on e-commerce conversion rates, the main success factor of an e-commerce website lies in the page loading speed. An e-commerce site that loads in 1 second has a conversion rate 2.5 times higher than a site that loads in 5 seconds.

In addition, pages that load in 1 second have an average conversion rate of about 40%. If the loading time increases to 2 seconds, the conversion rate drops to 34%. At 3 seconds, the conversion rate is 29% and reaches a minimum at 6 seconds.

The analysis suggests optimizing your e-commerce for a loading speed between one and two seconds.

How can this level of performance be achieved? Performance optimization is a process of continuous improvement that affects several areas of a website. Its strategic value is particularly clear for e-commerce, which generally consumes larger amounts of resources.

To help e-commerce owners optimize their websites for performance, we have built an essential checklist of the optimizations needed to improve performance and page speed.

In short, what are the key factors to consider when optimizing your e-commerce website for performance? Let’s dive in!

1. Choose a cutting-edge hosting infrastructure and technical stack

When choosing a hosting service for your e-commerce website, it is essential to be aware of the technology stack it provides.

The first decision is about the type of hosting service. There are several types of web hosting, which differ considerably in terms of infrastructure and services:

• Shared hosting
• Dedicated hosting
• VPS hosting
• Cloud hosting
• Managed WordPress hosting

Since it is imperative to guarantee maximum performance for your e-commerce, the infrastructure must be high-speed. This would exclude shared hosting that, while it may be inexpensive (or even free), does not guarantee the minimum standards of performance and security that an e-commerce site cannot do without to succeed on the market.

A dedicated VPS-based hosting service can be highly customized and optimized for performance. Still, it requires SysAdmin skills, which may be too expensive for a small or medium-sized business. A cloud hosting service can provide performance and security for a modern e-commerce website and may not require advanced technical skills.

It is easy to find managed WordPress and WooCommerce hosting service providers if you work with WordPress. This means that you will not be responsible for server configuration and optimization, and you will have specialized support service and simplified site installation and maintenance.

It is also necessary to provide your website with a state-of-the-art technical stack. Most web hosts provide a stack based on Apache web server and MySQL. However, you might want to consider a more modern, high-performing technology stack, such as Nginx and MariaDB.

Kinsta hosting infrastructure and technical stack

At Kinsta, we believe we have created the best and fastest managed WordPress hosting solution available today on top of the Google Cloud Platform.

We provide C3D and C2 compute-optimized VMs on all plans, from Starter to Enterprise and beyond, in the regions where they are available. We also take advantage of Google’s low-latency Premium Tier network, which is available to all our clients at no extra cost.

In addition, we have built a fast and solid technical stack based on Nginx, MariaDB, PHP 8.3, LXD container, and our integration of Cloudflare Enterprise. This stack is available for all our clients, regardless of their plans.

Check out this post to learn why Kinsta is the fastest managed WordPress host.

2. Use supported PHP versions

According to W3Techs, as of August 2024,

PHP is used by 76.1% of all the websites whose server-side programming language we know.

Version 7 is used by 52.6% of all the websites that use PHP, version 8 by 33.0%, and version 5 by 14.2%.

If you run an e-commerce website, you need to know what PHP version your site uses and why you should prefer a supported version.

In short, PHP has a release life cycle, and each major release is typically supported for two years. Supported versions are the only ones that receive performance and security updates, so using an unsupported version of PHP implies reduced performance and increased security vulnerabilities compared to supported versions.

As of August 2024, the officially supported versions of PHP are PHP 8.1, 8.2, and 8.3.

We ran our own speed tests with PHP 8.1, 8.2, and 8.3 and several CMSs and frameworks, and we found that PHP 8.3 was proven to be the fastest PHP version, providing up to a 52.20% performance boost to the tested CMSs and frameworks.

PHP versions on Kinsta

At Kinsta, we only provide supported PHP versions. We currently support PHP 8.1, 8.2, 8.3.

You can quickly and easily switch the PHP version of your WordPress website in MyKinsta. Navigate to your WordPress website config section and select Tools from the left menu. Here, you will find several tools available for our clients. Scroll down the page and find PHP engine. Click on the Modify button and select the PHP version you need for your website.

3. Leverage cache for better performance

The cache is a portion of memory used to store copies of resources that can be served on future requests without downloading the full page again. There are several types of caches, each type with a specific purpose, but the types of caches we are interested in here are the browser cache and the WordPress cache.

Each server response must provide the correct HTTP headers so the browser knows how long to cache a copy of the requested resource. This is done by setting ETag and Expires headers in the HTTP request.

WordPress has its caching system. The object WP_Object_Cache allows for a reduction in the number of requests to the database: “The Object Cache stores all of the cache data in memory and makes the cache contents available by using a key, which is used to name and later retrieve the cache contents.”

WordPress users can install a third-party caching plugin for WordPress. Tools such as W3 Total Cache and WP Super Cache allow you to manage WordPress cache granularly. They can be very useful if you opt for a shared hosting solution or when the web host does not provide more efficient cache management solutions.

These tools are complicated to configure and may require knowledge that not all site owners have. In short, you need an easy way to manage your cache.

Regarding e-commerce, you may also want to exclude specific pages, such as my account and checkout, from being cached. This is critical to ensure a flawless shopping experience for your website’s clients. But how can you do that?

Cache management on Kinsta

Cache management might be daunting, especially if you lack technical skills. On Kinsta, however, managing the cache is easy, and all settings are conveniently gathered in a single section of your MyKinsta dashboard.

The key difference between Kinsta cache and third-party WordPress plugins is that Kinsta cache works on a server level.

In MyKinsta, navigate to WordPress sites and select your website. On the site settings page, click the Caching menu item on the left and select the Server caching tab. Here, you can clear the cache and change the cache expiration.

Caching plugins are not allowed on Kinsta, which sounds like a contradiction to what we stated in the previous section. Still, this is because Kinsta takes care of the cache on the server for you, thus offering better performance and easier management.

Specifically for WooCommerce and EDD websites, Kinsta automatically bypasses the cache when woocommerce_items_in_cart or edd_items_in_cart cookies are detected. This allows for a smooth shopping experience for all your clients.

Kinsta users can also manage cache directly from their WordPress dashboard thanks to the Kinsta MU plugin, which is automatically installed on all new WordPress websites hosted by Kinsta.

In the Kinsta cache screen, you can perform the following actions:

• Clear all caches
• Clear site cache
• Clear Object cache
• Clear CDN cache
• Add custom URLs to purge
• Enable/disable autopurge

The Kinsta cache plugin also provides an Admin bar button allowing you to clear:

• All cache
• Server cache (aka full-page cache)
• Object cache
• CDN cache

A different type of cache is the CDN cache. Read on to learn more about this.

4. Use a Content Delivery Network

A CDN is a network of servers that store static resources such as images, scripts, and style sheets so that they can be delivered to site viewers from the nearest geographical location.

A CDN typically provides services and features that can significantly improve a website’s performance and security. When it comes to performance, a CDN can help you with the following:

• Reduce network latency and the overall loading time of a website
• Reduce the Time To First Byte (TTFB)
• Leverage cutting-edge caching technologies
• Reduce page size with a data compression service such as GZIP or Brotli and automatic image optimization
• Cut bandwidth costs
• Improve scalability
• Improve SEO

Kinsta CDN

Kinsta provides a free Cloudflare CDN integration on all our hosting plans. This means that you can take advantage of Cloudflare features for enterprises completely free of cost, independently from the plan you subscribed to.

Cloudflare provides a static resource caching service that can significantly increase e-commerce website performance. This is particularly useful when your target audience is distributed over a large geographic area.

Thanks to our Cloudflare integration, we can provide all our clients, independently from their plan, with the following enterprise features:

• Cloudflare CDN
• Edge Caching
• Automatic image optimization

With Kinsta, you can take advantage of all these features by enabling Cloudflare’s CDN in the Caching section of your MyKinsta dashboard, where you can manage Edge Caching and CDN caching.

You can enable Mobile cache, Clear cache, and Clear URL cache from the Edge Caching tab.

Under the CDN tab, you can Clear CDN cache, optimize images, and exclude specific files from CDN caching.

5. Optimize images

Image optimization is vital for page speed. Optimizing images is not complicated for beginners, but you still need some basic knowledge.

You can optimize images in several ways. First, you should identify the image format that best suits the image’s characteristics. In addition to the traditional JPEG, PNG, and GIF formats, web-optimized image formats, such as WebP and Avif, provide high compression levels with superior quality. WordPress supports both formats out of the box, so you are free to use them on your e-commerce website.

Once you have chosen the right image format, you can move on to compression. You have two types of image compression: lossy and lossless. Lossy compression is more effective in reducing file size. However, you should consider the loss of information and, thus, reduced image quality.

If image quality is critical for your website, lossless compression may be the right choice, although the size savings may be insignificant. To compress images without loss of information, you will need tools such as FileOptimizer or ImageOptim for WordPress or photo editing software such as Photoshop. Another option is Gzip compression.

Optimize images with Kinsta

Thanks to our Cloudflare integration, Kinsta provides free image optimization. This means that your PNG, GIF, and JPEG images are automatically converted to the WebP format to improve your website’s speed and performance without using a third-party plugin.

You can enable automatic image optimization in MyKinsta under Caching > CDN > Image optimization.

Click on the Settings button in the Image optimization box and select the type of optimization you need.

6. Reduce the size of HTML, CSS, and JavaScript resources

You can reduce the amount of data the browser downloads to render a page on screen through minification, compression, and caching of HTML, CSS, and JavaScript resources.

Code minification is the process of removing unnecessary characters from the source code. Comments and whitespace are useful in development, but the browser does not need them to render the page. With code minification, you can reduce the size of HTML, CSS, and JS resources by as much as 50% or more.

It’s worth noting, though, that Cloudflare has recently announced the deprecation of their Auto Minify feature:

The reasons why we plan to remove the feature are manifold but boil down to the fact that it’s a performance feature used for the purpose of reducing page weight, and it is not as efficient at doing this as other projects Cloudflare’s working on, like improving compression.

You can reduce the size of transmitted files to increase page speed and use less bandwidth through compression. GZIP compression allows you to compress a raw data set without loss of information. Any file type can be compressed, but GZIP works best with text-based resources like HTML, CSS, and JS. Another type of compression is Brotli, which is newer and more effective than GZIP and is supported by all the major browsers.

Resource compression on Kinsta

While there are several steps to enable Brotly compression in WordPress, Kinsta customers need to do absolutely nothing to harness the power of this compression algorithm. Thanks to our Cloudflare integration, every Kinsta-hosted website uses Brotli by default.

You can check the compression type in your browser’s inspector. Select an asset in the Network > All screen and search for the content-encoding header. This provides the type of compression enabled on your website. br stands for Brotli.

7. Eliminate render-blocking resources

You can eliminate render-blocking JavaScript by adding async and defer attributes to <script> tags. This can improve the so-called First Contentful Paint. More specifically:

• Scripts with the async attribute are executed asynchronously as soon as they are loaded. Once the script is loaded, the browser pauses, parsing the HTML and executing the script.
• Scripts with the defer attribute are executed only after the page parsing is completed.

You may also want to eliminate render-blocking CSS prioritizing above-the-fold resources, adding CSS inline, using the media attribute, and using JavaScript to load asynchronously or deferring the loading of CSS.

All this could be a little tricky if you are not a frontend developer, but you can use a WordPress plugin that can do all the dirty work for you.

In addition, starting with WordPress 6.3, you can add async and defer attributes during script registration and, starting with WordPress 6.4, these attributes have been implemented for frontend scripts in WordPress core and bundled themes.

8. Optimize CSS

A specific point should be made about style sheets, which can make a web page considerably heavier.

When the browser hits a <link> tag, it stops downloading other resources and parsing the page to download and parse the CSS file. Also, you have to pay attention to some peculiarities of style sheets:

• Multiple external style sheets can be linked to the same page.
• The link to other style sheets may come from another style sheet, so it may not be visible in the HTML code.
• A style sheet that is not well designed may contain statements that are not needed on all pages of the site. This can lead to file size growth and longer processing times.
• It is true that style sheets are cached but still block rendering for a while.

This leads to the need to optimize style sheets and perform a thorough analysis through browser dev tools, such as Chrome’s Lighthouse and Pagespeed Insights.

Once you have performed the analysis, you will need to identify the most appropriate solutions for reducing the impact of style sheets on performance. Minification and compression are just two of the available options. Other measures include caching files by setting Expires and ETag headers, making the best choice of theme and site plugins, removing unnecessary CSS code, optimizing web fonts, and other performance optimization measures.

However, the best option for a developer is always to design their styles by following the CSS best practices from the very beginning.

9. Cut down on the number of HTTP requests

Images, scripts, and style sheets are all critical resources for a website. However, there are other less essential but sometimes critical resources for the site’s specific purpose, including video, multimedia content, and web fonts. Each resource generates an HTTP request to the web server that hosts it, and each request requires processing and response times that add up to one another, increasing the overall page load time.

This is why minimizing the number of HTTP requests to the server is critical.

Again, several performance analysis tools can help you determine the number of HTTP requests. Browser dev tools and online tools such as Pingdom and GTMetrix can be valuable allies when it comes to performance issues.

Among the many solutions a developer can implement to reduce the number of HTTP requests, the most effective is removing unnecessary resources from the page.

WordPress users should remove all plugins that are not strictly necessary or at least load selectively plugins that are not required throughout the website. They should also choose the most reliable and lightweight plugins available and avoid the so-called nulled plugins.

Another option is to concatenate all CSS files in a single stylesheet.

Other measures you can take to reduce the number of HTTP requests are lazily loading resources, using system fonts whenever possible, minimizing third-party HTTP requests, such as YouTube videos, and using CSS sprites for icons and logos.

10. Monitor your e-commerce website performance with an APM tool

Have you ever used a performance monitoring tool for your e-commerce website? If not, you should. A performance monitoring tool, or APM, allows you to measure the execution time of every single process on your website, such as PHP processes, database queries, AJAX calls, and much more.

Knowing the process or plugin that is slowing down or breaking your e-commerce website is crucial because for every second of delay in page loading, you lose sales, not to mention that this could ruin your brand image.

No one wants to trust their credit card details to a website that does not work as expected. For this reason, using an APM tool is crucial.

Several APM tools are on the market, including New Relic, LogRocket, Dynatrace, and many others. You need to check the most popular and pick the one that works best for your business in terms of costs and features.

Kinsta APM is free for all WordPress plans

Kinsta APM tool helps you identify PHP performance bottlenecks on your WordPress site without subscribing to third-party monitoring services such as New Relic. It is free for all WordPress plans and is integrated natively into MyKinsta.

To access Kinsta’s performance monitoring tool, select your WordPress site in MyKinsta and find the APM item in the left menu.

Enable APM and select monitoring time. The APM tool consumes server resources and can impact your website’s performance, so you may want to enable it for a limited time.

Once enabled, the APM tool monitors your website’s processes and provides a huge amount of data organized in four tabs:

Transactions: This screen displays a diagram showing the overall transaction time for PHP, MySQL, Redis, and External processes and a table listing the slowest transactions on your website. You can select a specific entry to view transaction details.

WordPress: This screen shows two tables: Slowest WordPress plugins and Slowest WordPress hooks. Again, when you click on a specific entry, you will be prompted to a table with transaction details.

Database: In this screen, you can find the slowest database queries sorted by duration. If you use the Kinsta Redis add-on, you’ll find a list of the slowest recorded Redis cache.

External: This screen displays a list of the slowest external requests.

You can deep dive into any request with Span details and Stack trace.

That’s a whole bunch of data to troubleshoot any performance issue and optimize your e-commerce website for speed and performance.

If you want to dive deeper into the Kinsta APM tool, check out the following resources:

• Zero hassle performance monitoring for WordPress
• How To Fix WooCommerce Performance Issues Using Kinsta APM
• Kinsta’s APM Tool
• Troubleshooting Performance

Summary

This article provides a checklist of the essential optimizations you can implement to improve your e-commerce website performance. As a managed WordPress host built on top of the Google Cloud Platform, our recommendations mainly go to the owners of e-commerce websites based on WordPress and WooCommerce. However, they can still be helpful regardless of the platform behind your e-commerce website.

Some optimizations directly relate to the hosting service; others can be implemented through WordPress plugins or third-party services.

Kinsta provides configuration options for cache management, image optimization, resource compression, performance monitoring, and much more, allowing you to optimize your WordPress + WooCommerce website for the best performance.

If you want to dive deeper, check out the following guides and tutorials:

• How to Speed Up Your WordPress Site
• How to Reduce TTFB to Improve Page Load Times
• How to Optimize the Critical Rendering Path in WordPress
• 18 Powerful Ways To Speed Up Your WooCommerce Store

Now it’s your turn. Did we miss anything? Do you have more tips to share with our readers to improve the performance of an e-commerce website? Drop a comment below and join the conversation.

The post Performance requirements and 10 best practices for high-speed e-commerce websites appeared first on Kinsta®.