eCommerce Site Speed & SEO Optimizations Best Practices

People are used to instantly satisfying their curiosity, which means that developers should optimize websites for low latency. Visitors judge sites by the speed with which they load, especially when a potential buyer visits an eCommerce site to make a purchase. These microdecisions can be fragile and spur of the moment.

The last thing you need is for potential customers to leave your site because they don’t want to wait for a screen to load. Improving your eCommerce site speed by just 1 second has been shown to positively impact conversion rate, bounce rate, and page views.

In this article, we open a website's hood and examine its engine, learning how to make it run smoother and give the end-user a more enjoyable browsing experience.

Summary of key eCommerce site speed best practices

Optimize images and use lazy loading

Image optimization

ImageMagick is used to compress and convert images to WebP, a format that provides superior lossless and lossy compression for images on the web. After installing, you can run a command like this, for example, to convert a PNG image called wizard.png to .webp while compressing it to fifty percent quality:

The resulting image is smaller but comparable in quality since the WebP format was set to lossless for this example. WebP supports lossy and lossless compression and is natively supported in Google Chrome, Safari, Firefox, Edge, and the Opera browser.

A plugin like ​​EWWW Image Optimizer (for WordPress) can automate converting pictures during upload. Shopify has built-in image compression, though many plugins, such as Tiny SEO Image Optimizer and Speed, are available in the Shopify App Store for extra optimization.

Lazy loading

The website sections the user first sees on load are said to be “above the fold” (a term taken from print newspapers). Everything else is “below the fold,” or what the user doesn’t see when visiting the site, and can be loaded as needed. This process of loading elements as needed instead of all at once is called lazy loading.

Sometimes, lazy loading images below the fold improves the page’s initial load time. Also, remember how important it is to keep the time the Largest Contentful Paint takes to a minimum by minimizing the use of image sliders or large images above the fold. The Largest Contentful Paint is a metric that measures when the largest text or image in the viewport is rendered to the screen. It tracks an approximation of the time when the page's main content is visible to users.

There are a few ways to add lazy loading to your images. One way is to add it as an attribute to the image HTML element or via a plugin.

Add lazy loading to images carefully, avoiding it for pictures above the fold. Macrometa Performance Proxy (P3) can do this automatically at scale for all pages. P3 utilizes AI and Machine Learning to ensure that the optimized images render the same without a reduction in quality.

The image shows where lazy loading can be used below the fold of a web page (source)

Have a good cache or prerendering strategy

Engineering teams often prioritize optimizing web pages for human visitors. For example, minimizing the number of listings per page can improve load times and make the information more accessible. However, this strategy will not benefit SEO because search engine crawlers will not see the unloaded listings and will ignore the infinite scroll. The Google crawler, for example, doesn’t follow buttons unless marked with an “<a href>” tag and doesn’t trigger JavaScript to update current page loads. A sitemap file or a Google Merchant Center feed can help make these links crawlable.

Before prerendering existed, websites used the cache manifest to improve page loading speed by using cached or locally saved versions of each specific page. These pages would live on the visitor’s computer until they were updated on the server, locally replacing the old version with the new one. Using cache is still an excellent strategy, but now there is an extra step one might take with prerendering.

As the word suggests, prerendering means rendering the pages that the user might visit before clicking the link so that the page will load almost instantly when they click it. Macrometa PhotonIQ offers a prerendering solution compatible with any platform with no changes in code. It converts JavaScript-heavy websites into search engine-friendly static HTML pages. It provides security features that protect the origin server from high loads, such as IP and header-based whitelisting and scheduled crawling for event-based promotions. Its synthetic interactions also allow for targeting menus, automatically expanding paginated lists to provide more product data for bots, and providing content on the page for bots typically obscured by promotion popups on home pages.

PhotonIQ Prerender identifies search engine crawlers and returns SEO-optimized content (source)

Minify CSS and JS

Themes and plugins can riddle an eCommerce site with resource-heavy files. Some of these files are necessary to make the pages functional and attractive, but apart from the core functionality, they may include unnecessary elements, white space, comments, and references to files hosted on third-party servers, increasing the website’s load times.

Minifying JavaScript and CSS files means stripping them to their essential parts, shortening variable and function names, and removing everything else, making them substantially smaller and faster to load. Minification, combining scripts, and deferring non-critical files are some techniques for lowering these files' impact on your site’s speed. JS Min and CSSO are examples of minification tools available to the consumer.

Usually, the cache strategy or the CDN will take care of minifying files, but a specialized plugin is sometimes necessary. Although there are strategies for writing software that does this process manually, the rapid changes in CSS and JavaScript files make using a plugin or service desirable.

Macrometa’s Performance Proxy (P3) is a fully managed service that leverages machine learning to reorganize and optimize CSS and JavaScript, ensuring accelerated load times, lower bounce rates, and a seamless user experience. P3 enhances Core Web Vitals, which results in a higher conversion rate.

Verify your site speed before and after each optimization

Quantifiable progress is essential to improve the speed of a website, especially one with the speed requirements of an eCommerce site. It’s powerful to fix a problem, but it’s even better to know what and why the fix worked.

Running PageSpeed before and after each fix makes it obvious what changes need to be permanent and which can be reverted. Because websites can expect users to visit from several different types of devices, it’s essential to look at both the mobile and desktop tabs. Each tab includes scores for various things that affect the page’s speed and tips on improving them. Some scores in the report include the total blocking time of scripts and files and the largest contentful paint, among others. The goal is to reduce each time to zero or close to it.

Screenshot of Google’s PageSpeed (source)

Macrometa’s site performance assessment connects you with a team of professionals who can analyze and help optimize your website.

Offload compute and reduce the number of plugins

Depending on the eCommerce site's setup, several plugins might power the website. It’s essential for website maintenance to check these plugins periodically to ensure that they’re up-to-date, still relevant, and necessary.

Shipping unused JavaScript or CSS is a common problem in web development. The Chrome Dev Tools coverage report can help find unused JavaScript and CSS code.

Many plugins try to fix everything, which makes them bloated and full of unnecessary tools. Scaling back on plugins is an excellent way to see an instant improvement in your website’s speed. To detect slow WordPress plugins, you can try disabling them one by one to see what difference they make or use a plugin performance profiler.

Mobile JS Offload from Macrometa allows offloading multiple plugins, like Google Analytics and Tags, to the edge and loading Macrometa’s script once, reducing load times and overall latency. Proxying and managing cookies from the client side offers functionality comparable to the scripts running natively in the browser.

Use a content delivery network

A content delivery network (CDN) is a cache that mirrors an origin server, enabling users to access the same information from the server geographically closest to them. A CDN works with any origin server and is an easy way to improve site speed for geographically diverse users.

There are a few services that offer this, from free to paid. Companies like Cloudflare provide a free solution, while Akamai’s CDN offers a more robust product for a high-end enterprise-grade system. Akamai has an extensive global network in over 135 countries, ensuring high availability and low-latency content delivery worldwide.

In the diagram below, an origin server (in black) is located far away from the end users. A CDN copies the server's content and creates a mirror server (in red) located geographically closer to the users, dramatically improving loading speed.

The image shows how a CDN optimizes loading websites for geographically diverse users (source)

Plan for traffic surges

Though a good problem for a store, traffic surges can crash your eCommerce website if not handled properly. For example, suppose an ad for a sale event at a store pops up, and customers rush to click on it only to find the website unresponsive, a blank page, or a 503 or 599 server overload error code. Buyers will leave disappointed, needing to check back later or, even worse, giving up entirely, leading to a missed sales opportunity. According to Google/SOASTA Research in 2017, the likelihood of a user bouncing increases by 32% as page loading time goes from one second to three seconds.

One way to prevent this problem is to invest in a more scalable cloud solution or move to a larger hosting plan, but this route can quickly become prohibitively expensive. An alternative way to prevent this is using a virtual waiting room, which can be set up without impacting the operation of your eCommerce site. During high traffic demand, users wait their turn to access the eCommerce site and make purchases. That way, everyone gets a chance without crashing the site.

Macrometa PhotonIQ Virtual Waiting Rooms (VWRs) is an advanced prioritization service that manages visitors entering a site (source)

One advantage of virtual waiting rooms over load balancing is the protection against non-genuine users and equal opportunity not based on proximity to the server or time zones. Macrometa’s Virtual Waiting Rooms can handle unlimited waiting rooms, supporting both first in, first out (FIFO), and random queue types, with prioritization via headers and URL parameters. It offers extra features such as protection against cookie sharing and allows the use of Virtual Waiting Rooms via an API in non-native and mobile apps.

Last thoughts on eCommerce site speed

In this article, we have shown the importance of knowing your site’s speed and how to improve it. We have discussed various methods to optimize web performance and handle traffic surges. These methods include:

• Optimizations and lazy loading for handling images for the web
• Virtual waiting rooms for processing traffic surges
• Prerendering and cache strategies to improve SEO rankings via the web crawler
• Minifying scripts and stylesheets for file size reduction
• Using a CDN to deliver web content from a location closer to the user
• Offloading resource-heavy plugins to reduce the amount of content loaded

Managing your website’s speed can become daunting, but the good news is that you don’t have to do it alone. Talk to one of our experts today to learn how Macrometa’s PhotonIQ can help. No matter your use case, we have the team and the solution for your needs.