Blog

Improve page load speeds - with or without a headless solution

9 min read

November 8, 2021

By now you may have heard the infamous Google statistic about the eCommerce mobile experience: 57% of shoppers will abandon your website if they have to wait more than three seconds for it to load. And on top of that, 80% of those visitors will never return. This translates to missed opportunities, missed sales and potentially missed lifelong customers.

Mobile traffic has spiked 222% from 2013 to 2019. With mobile driving the majority of eCommerce traffic today, it is vital for eCommerce retailers to not only focus on page load speed but also a mobile-first strategy. If it’s not made a priority, conversion rates, average order value (AOV), client relationship building, and much more can take a hit.

And though it’s driving the most traffic, mobile does not account for the majority of sales. This points to a discrepancy between buyer expectations and their mobile shopping experience.

The average eCommerce conversion rate for desktop is 3.90%, compared to 1.82% on mobile devices.
Mobile conversation rates have been trending downwards since 2016.
Mobile users have a higher cart abandonment rate at nearly 86%, compared to just under 70% for desktop users.

And if that hit to your profitability potential wasn’t punishment enough, Google actually takes page speed into account for mobile search rankings, so the slower your site, the less likely you are to be at the top of a search.

In summation: Page load speed matters. The mobile shopping experience matters. Page load speed as part of the mobile shopping experience really matters.

Headless progressive web applications (PWAs) have two key advantages to combat this: They can make initial page load speed and page-to-page load speed lightning fast—30-40 milliseconds in our case—and they are mobile-first solutions. Both of these advantages directly impact eCommerce KPIs and D2C relationships.

But what if you’re not ready to go headless? Or what if you have a headless commerce solution and want to streamline your initial page load time even further?

In either case, there are a few things you can do today to optimize your webstore, cultivate a better shopping experience, and drive sales—with or without a headless PWA.

Give your website a page load speed audit

First, let’s see where your website stands. Start your personalized website speed diagnostic test with this handy PageSpeed Insights tool from Google Developers. This audit will give you personalized insights about your website’s page load performance and recommendations on how to shave the detrimental seconds off your loading time.

We recommend using an incognito window to ensure a clean testing environment. Enter your website URL into the field and click analyze. Voila! You’ll now have a grade on your website speed and actionable insights on how to improve your page-to-page loading time.

This tool provides an itemized estimate of how much faster your website will be if you fix certain aspects, and ranks them by impact. Note that the tool offers diagnostics for both mobile and desktop page load speed performance, which can be navigated in the upper right hand corner.

What’s a “good” page load speed?

Generally, a page load speed under 5 seconds is adequate by industry standards. The gold standard is under two seconds and a headless PWA platform such as Nacelle will strive for sub-second results. Another metric worth cross-referencing in your analysis is bounce rate. As shown in Google’s “three-second” statistic mentioned earlier, page load speed directly impacts bounce rate. Statistically, the longer the page load, the higher the bounce rate—more than 5 seconds and your bounce rate will soar. If you can bring your page load speed down, watch for a lower bounce rate to follow.

Page speed insights: the fine print

Depending on whether or not you already have a headless PWA, these recommendations have a slightly different context. The PageSpeed Insights tool assumes that every page—including the initial page and every page visited thereafter—has to go through a page load. This is true, if you don’t have a headless PWA. Recommendations from the insights tool will apply to you across your entire website.

If you have a headless PWA solution such as Nacelle, your entire site loads only once, and the PageSpeed Insights tool doesn’t take this value into consideration when giving your site speed a grade. For instance, page-to-page load time on your website will be nearly nonexistent, since everything is already loaded. This tool can still have valuable insights for you, as it pertains to the initial page load speed. While a headless PWA will certainly make your initial page load speed fast as well, there’s usually a few easy wins that your internal dev team can handle to make your one-time download even faster.

With context in mind, this tool can have valuable answers for you as you implement best practices for page load speed on your backend, regardless of your headless commerce status.

Now, how to decipher these insights. Let’s define some of the most common opportunities businesses have to increase site speed, just by tinkering with existing code.

Common site speed problems & how to fix them

Every website will have a unique diagnostic result from the PageSpeed Insights tool, but there are some common reasons that webstores struggle with slow page load speeds. Here are some of the usual suspects and solutions on how to fix them.

Problem: Third-party tools - Third-party eCommerce tools can be an excellent resource for businesses, but the code integration required to use the tools can significantly slow down your website. Not all third-party apps are created equal in terms of a sleek codebase. Many tools are marketing-minded vs. developer-driven, meaning the tool itself is brilliant, but the code may be heavy and problematic.

The dev perspective on third-party tools: One common issue seen in slow third-party apps is the use of jQuery. It’s a JavaScript library that loads in its entirety when attached to a website—loading an entire JavaScript library, even if it’s only on one initial download, is practically a death sentence for page load speed. In its day, jQuery was an efficient answer to the complicated nature of JavaScript, but it’s become obsolete as JavaScript evolved into its current easy-to-use form. Still, jQuery is so ingrained in code engineering that it appears often in third-party applications where code was not a top consideration at conception. There will undoubtedly be less jQuery in the future, but for now, be mindful of the third-party applications that require your website to carry that unnecessary weight.

Solution: Optimize Third Party Code - Your options are to remove this code or optimize it. Optimization includes attributing “async” or “defer” to script tags and incorporating lazy loads. If third-party code is significantly impacting your load speeds, this guide Efficiently load third-party JavaScript is a great place to start your optimization journey.

Problem: unused code - Whether your JavaScript is render-blocking or asynchronous, it competes for bandwidth with other resources while it’s downloading, which can significantly slow down the process.

Solution: remove unused JavaScript - If your audit revealed you have unused JavaScript dragging down your page load speed, removing it can have a big impact. You can easily find the line-by-line breakdown of unused code using the Coverage Tab in Chrome DevTools and there are several tools available to developers to help eradicate the unnecessary code.

Problem: off-screen images -Without giving your code a sense of hierarchy, the browser will interpret everything on your page as equally important, and it will download accordingly. It will distribute it’s bandwidth equally, from the content above the fold, to the content that can’t be seen without scrolling.

Solution: defer off-screen images - The idea behind deferring off-screen images, or hidden images, is to prioritize downloading critical resources first. Once those resources have finished loading, the off-screen content will download. By “lazy-loading” these images you can shave time off your page load speed.

Problem: image sizes -Image files can be notoriously massive and they can weigh down your page load speed like an anchor. Your CMS platform likely let’s you format images with ease, but it’s important to note that it’s often just resizing the image, not compressing it.

Solution: properly size images -Search Engine Land calls properly sizing images your easiest page speed win. Even if your CMS is compressing your images, that rate is preset and fixed, and often doesn’t maximize compression potential. Compressing images before upload and choosing the right file type solves this issue.

Problem: unused CSS - CSS is by default a render-blocking resource and won’t render processed content until the CSSOM is constructed. The CSSOM or CSS Object Model, is a set of APIs allowing the manipulation of CSS from JavaScript. This can cause the content above the fold on your website to appear slow to download from the shopper’s perspective.

Solution: remove unused CSS - The Coverage Tab in Chrome DevTools can also be used to identify non-critical CSS and JavaScript. Web.Dev has a how-to guide to walk you through the removal process.

Problem: lots of large resources - The more resources that are packed into a webstore’s code—think text, images, fonts, etc.—the more there is to download, and the more time it will take. Rather than stripping your site and going minimalistic for the sake of speed, the best solution is to compress those large files and make them smaller. When there’s less for the browser to download, the entire process will be faster.

Solution: compress text and resource files - By compressing these resources in your code, you’ll minimize the overall download size. The Google Developer Web Fundamentals portal has a step-by-step guide available that includes snippets of code to help developers optimize and transfer the size of text-assets.

Everyone is susceptible to slow loads

If you played around with the PageSpeed Insights tool, you may have plugged in a few other URLs besides your own. And if you looked at some big-name brands out there, you probably noticed that they’re also susceptible to these common page load speed killers.

We recently looked up one of the most profitable Shopify Plus stores to check out their page load speed potential. The tool gave their mobile site speed a grade of 6 out of 100, and offered four high-priority recommendations with over 13 seconds in estimated page load time savings—a lifetime in eCommerce. Their number one slow page load culprit? Render-blocking resources tacking on over 5 seconds of loading time alone.

The next step for faster page load speeds

The appeal of headless commerce is to enable a delightful shopping experience for customers with a mobile-first mindset and sub-second page load speeds that result in higher conversion rates and ultimately more revenue for eCommerce merchants.

Many teams seeking such a solution have already cycled through the common page speed hacks and still want to level up. Other brands feel it’s a task best outsourced, so they can focus their internal attention elsewhere. Merchants already using a headless PWA are often so dedicated to maximizing their website performance, they’re committed to optimizing page load speeds both with their headless commerce platform and with their internal dev team.

Headless architecture paired with a PWA can alleviate many of the pain points merchants face beyond just page load speed such as mobile-first prioritization and the capacity to handle spikes in webstore traffic.

The benefits of a headless commerce platform such as Nacelle include:

Sub-second page-to-page change load speeds
Increased conversion rates
A boost for AOV
Mobile-first prioritization
The ability to handle spikes in traffic while maintaining optimal site performance
Flexibility for “best-of-breed” solution strategy
Easier platform management