Ishan Anand, co-founder and chief technology officer at Moovweb

On the web, speed always matters. Slow websites don’t just get abandoned—they’re rarely even seen. In 2019, Google’s algorithm update added website speed to the list of factors that influence search ranking.

For ecommerce, websites speed can be the difference between success and failure; longer waits lead to fewer conversions and lower returns on search engine marketing. Fortunately, some technologies allow retailers to build lightning-fast websites. Take advantage of them or fall behind the competition.

Website speed and PWAs

Among the speed-boosting tools at your disposal, progressive web apps (PWAs) are perhaps the most powerful of all. PWAs are modern websites, built for speed. They have lightning-fast browsing transitions, but their first loads tend to be slower than traditional sites. To capitalize on your PWA’s speed, you first must understand how to measure website speed correctly.

Developers typically focus on first-page load speed is, but you’re missing critical information if you’re only measuring and optimizing for first loads. Browsing speed is a significant part of a user’s journey, as most of the session occurs after the first load.

The criteria used to measure speed for websites has changed dramatically. Traditional metrics, like the number of requests and total download time, have been replaced by perceptual metrics that correlate better to the user experience. Perceptual metrics include such as speed index (how quickly content is displayed), first meaningful paint (how fast the most important parts of the page load), and time to interactive (how long it takes before a page can accept user input), among others. While there are many tools and metrics, make sure you focus on the metrics that matter for your business. For ecommerce, paint times are more critical than interactive metrics, and the single best metric to measure is the largest contentful paint (how long it takes to render the largest image). The last painted hero and the largest image rendered are also close cousins, but be sure to check other metrics against your use case.

Ultimately, website speed is a full-stack problem, and optimal performance requires integration across the front end, back-end, and content delivery network (CDN). Here are four PWA performance techniques that you probably aren’t using but will give you the most benefits:

1. Proper cache management: Content served from your server won’t load as fast as cacheable content served from your CDN. To improve your overall speed, you’ll need to upgrade your cache hit ratio. Every CDN is different, but most give you the ability to boost cache hit rates through cache-control headers or the CDN console. If you have trouble enabling caching, consider a CDN that supports edge computing. While it’s common to cache “static assets,” such as images and CSS files, the JSON data that consumers are waiting on (such as size, price, color, etc.) is hardly ever cached. To unlock truly instantaneous speeds, you need to bring the dynamic data to the CDN. Managing dynamic data like this on a traditional CDN is tricky unless it has edge computing capabilities.
2. Server-side rendering: With many PWA frameworks, a bundle of JavaScript needs to be downloaded, parsed, and executed before the page content can be displayed. SSR removes that bottleneck by sending the browser the rendered page content immediately and allowing the JavaScript that makes it work to come later. This can dramatically speed up the page, including Speed Index and LCP metrics. The challenge is that you need to add Node.js to your infrastructure and cache the SSR content at the CDN properly.
3. Prefetching: Predictive prefetching speeds up a website by fetching the data for the pages that users are likely to visit next before they visit them. As a result, the download times for these pages can be skipped entirely, resulting in speedy page transitions. The challenge with predictive prefetching is that it will increase the load on your servers, though a modern CDN can prevent that.
4. Accelerated mobile pages: AMP is a subset of HTML. Pages that meet this format will load extremely fast—on average, 500 milliseconds or less—from the Google search results page. However, supporting AMP essentially requires you to write your website twice: your PWA in a JavaScript framework like React and your AMP pages in AMP-HTML. Thankfully, vendors have developed AMP conversion features. For example, frameworks like Next.js and React Storefront both support some form of AMP compatibility.

Developers mostly overlook these four techniques due to the effort involved and the tools currently available. You will have a competitive advantage if you employ all four, especially right now, as more people shop online because of COVID-19.

Moovweb, a website infrastructure platform provider. The firm provides mobile commerce technology to 38 of the retailers in the 2020 Digital Commerce 360 Top 1000.