The speed and overall performance of ecommerce websites(opens in new tab) has become a priority for businesses, as the patience of customers dwindles. An online store must offer a fast experience or you risk losing conversions and perhaps future earning opportunities.
Countless things can cause ecommerce performance problems, but there are a few we come across frequently as performance engineers. The issues we address here should be the initial points on your checklist if your site is lagging. Some of these problems can be resolved without the expertise of a developer – business users rejoice!
Content delivery network not enabled
A content delivery network, or CDN, stores a cached version of your web store content on servers around the globe. This dramatically reduces load time because it improves latency, which is the time it takes for a page asset (e.g., an image) to load after being requested. That’s because these CDN servers are much closer to most consumers than the origin server, so the bytes don’t have to travel as far.
Most people understand the importance of a CDN. However, it’s common to turn the CDN off when someone is making changes to your site so this work-in-progress version is not cached. But people are forgetful, and they may not remember to turn the content delivery network back on. This is more common than you think.
So how can you check if the CDN is working correctly on your website? CDNPlanet(opens in new tab) is a tool that allows you to see if you’re using a CDN, though it will not reveal the source of the problem. For instructions on figuring out why the CDN is not working and enabling it, take a look at this article(opens in new tab) on our developer site. Enabling it may be as easy as checking a box on the back-end of your ecommerce platform(opens in new tab).
Unnecessary content creates delays
You know your site is sluggish, but what is slowing it down? There’s an easy way to find out with a tool called WebPagetest(opens in new tab). Simply enter your website and run a test to get a visual representation of how long it takes each piece of a web page to load and see if anything is taking an unreasonable amount of time.
WebPagetest also provides a pie chart that breaks down load time by images, fonts, CSS and more. Unnecessarily large images are the most common source of delays. Use a program like ImageOptim(opens in new tab) to downsize them and you will see an immediate improvement in load times. There’s no reason for your site to carry needless extra weight.
Third parties impede page rendering
The valuable features of WebPagetest do not end there. Running a “visual comparison(opens in new tab)” test will provide a filmstrip view of how a web page looks in one-tenth of a second increments. It displays the percentage of the page loaded at each benchmark, as well.
Slow page rendering is often the result of third-party requests that you may not even realize are part of your website. If this is an issue, you can block those individual requests or domains using the “Block” feature built into WebPagetest and re-run your test to see if there is any progress.
Note that every test in WebPagetest has a unique URL, so you can bookmark your tests for future reference. That’s really handy if you want to test at a later date and compare results!
Heavy fonts are another common source of sluggish page rendering. If you think speed is deterring buyers from visiting your site, ask yourself if you can make do with the standard fonts built into all web browsers.
Slow time to first byte
Content on single-page applications (SPA) is generated by the JavaScript single page application. Though SPAs are generally faster and have other benefits, search engine crawlers cannot always understand JavaScript, so they don’t know how to index your website. This is why you need a tool that translates JavaScript into HTML that the search engines can crawl, something known as an SEO page generator. The SEO page generator ensures your web store is indexed properly in the all-important search rankings.
However, sometimes an SEO generator can create a high time to first byte, which is how long it takes for the first piece of incoming content to reach a customer’s browser. Here’s what you can do to figure out if this is the problem:
- Add ?seodebug=T&seoprerender=T&preview=201806151215 to a URL on your site (example: http://www.example.com/some-page?seodebug=T&seoprerender=T&preview=201806151215).
- Replace that string of numbers at the end with the current date and time to avoid cached results.
- Open the page source in Google Chrome by clicking on the three vertical dots in the top right corner, then selecting More Tools à Developer Tools.
- Once in the source code, make sure the main DIV tag is not empty, then do a control-F for the words “error” and “status 502” (a failed request).
If you find any red flags, it will help a developer pinpoint and resolve the problem.
This is a basic overview of common triggers for slow online stores. For a more technical explanation of website performance issues, check out Nine Key Areas to Look At When Troubleshooting Ecommerce Performance(opens in new tab). Your development team will find it extremely useful.