Improving website speed is a high priority for IT teams, but traditional development architectures and browser standards have historically limited optimisation efforts to first-page load times. Now, modern development tools like single-page applications and progressive web apps are allowing developers to improve not just first-page load times but to deliver nearly instantaneous browsing speeds that rival native apps.
Optimising browsing speed requires developers to take into account the effects of previously loaded pages in a session, which means it was historically more complex than just optimising for first-page load. In addition, under older browsers and using traditional website development frameworks (sometimes called multi-page apps), developers had less influence over how browsers treat subsequent pages in a session.
In a multi-page app, each page would be treated as unique and downloaded to the user's browser in its entirety, including headers and footers, making it much harder to optimise for browsing speed. Finally, while developers could provide caching "hints" to browsers, precise details like cache ejection behaviour were often unpredictable or undocumented, making it hard for developers to rely on an asset being cached. Recent changes in browser standards and the emergence of progressive web apps and single-page applications now offer developers the capability to achieve browsing speeds that were nearly impossible before.
Measuring first-page load versus browsing speed
Unfortunately, while SPAs and PWAs are gaining traction, the industry is still focused on the first-page load times and historical network-level speed metrics that are relevant for the older multi-page paradigm.
Part of what is needed a mindset shift toward perceptual metrics. In most multi-page apps, network-level metrics (e.g., the number of assets on a page or the number of bytes downloaded) are highly correlated to the user's perception of speed. SPAs/PWAs have a more complex life cycle and can employ techniques like prefetching, which substantially reduce this correlation. As a result, developers should focus on newer perceptual metrics (e.g., Speed Index or First Contentful Paint) that directly reflect what the user experiences regardless of the technology used to implement the site.
The other problem is that most website performance tools are limited to measuring only the first-page load. Developers do not have the tooling they need when evaluating browsing speed, especially if the user journey crosses technology boundaries such as the Google-recommended best practice of going from an accelerated mobile page to a PWA.
The new customer journey is all about browsing speed
First-page load is important because it impacts bounce rates, but browsing speed is important, too. It influences purchase behaviour and conversions for users who don't bounce. Moreover, the notion that browsing speed only comes into play from the second page on your website is in itself wrong. If you follow Google's recommendations and implement both AMP and PWA, the user's session actually begins on Google search and all subsequent interactions with your site are browsing speed transitions that can be literally instantaneous.
It's also important to remember that you're not just competing with other companies in your industry — you're up against anything else your users might be doing on the internet. On mobile in particular, you are competing for the user's attention. Your competition isn't just other websites but all the other things the user could do with that phone, including native apps that offer extremely fast experiences. You don't want your site to only be fast enough to keep your users from bailing to another company; you want your site to meet the expectations for speed that native apps have set. Optimising browsing speed is critical to that endeavour.
Any IT team can do certain things now to improve a site's browsing speeds. Because IT professionals control a site's tech stack, including the content delivery network and servers, they can invest in improving CDN cache hit rates to serve more content faster. They can also adopt PWA/SPA frameworks and use service workers to prefetch content while idle in order to optimise browsing page load times.
Five tips to improve browsing speed today
The first and foremost step to cut browsing speed is to make sure that you are measuring the right thing. Although the industry has historically emphasised first-page load speeds, browsing transitions account for most of the customer journey — that's what you need to scrutinise.
To do so, use tools such as WebPageTest (the only speed measurement tool to support browsing speed measurement), but make sure throttling settings emulate your actual traffic patterns. Many tools default to emulation settings that are not realistic. In addition, you'll need to use scripting (under "Advanced") to simulate a browsing speed transition. Set your script to load the origin page, then measure the speed to load the destination page; otherwise, you will measure just first-page load.
Once you've established your baselines, take the following steps to improve site speed:
1. Improve your CDN cache hit rate.
Cacheable content served from your CDN is inherently faster than content served from your server, so utilising CDN caching as much as possible is critical to improving your site speed. Every CDN is different, but traditionally you can improve cache hit rates through your CDN console or through cache control headers. Just be aware that enabling caching isn't always as straightforward as it may seem. Different pages will have different levels of cacheability, and certain features like personalisation may interfere with caching. In addition, many tools report cache hit rates on the URL level, making it much more difficult to optimise and detect trends across page groups, especially if you add tracking parameters to your URLs.
2. Improve your browser cache hit rate.
In addition to the CDN, the browser has its own cache. With the right cache control header, you can also easily optimise the browser cache hit rate for your site. This tactic allows you to improve browsing speeds because the browser doesn't need to fetch the content or asset from the network at all — it's already downloaded to the user's browser or device. Note that you'll need to understand Cache-Control header specs and how your CDN interprets them to set caching parameters for the browser and CDN separately. For example, you can often use "maxage" to set the browser's cache time and "s-maxage" to set the CDN cache time separately.
3. Use a service worker.
Cache control headers are only treated as “hints” by the browser, and a hint can be ignored. A browser might not cache an asset because it thinks it’s too big or it won't cache the asset for as long as you need. By contrast, using a service worker gives you direct control over caching and networking, allowing you to make the caching decisions that will improve browsing speed and enhance the user experience.
4. Prefetch content during idle times.
Use prefetching when the user is idle or when the above-the-fold content has loaded. Anticipate where the user might go next and fetch that data ahead of time. A common prefetching tactic is, in anticipation of the user's next click, to begin fetching the destination page when the link to it is visible to the user on the screen.
When properly implemented, prefetching can substantially improve browsing speed because it can reduce or eliminate the time to download the next page. However, be aware that if you're not careful, prefetching can increase the traffic and load on your servers. For example, consider an eCommerce category page that lists 20 products. Naively prefetching every product on the page may increase the load on your servers by as much as 20 times your current levels.
5. Consider migrating to a PWA or SPA.
The combination of service workers, smart prefetching, and a SPA or PWA architecture unleashes the ability to dramatically improve browsing speed to sub-second load times that compete with native apps. Instead of loading the entire page each time a user navigates to a new page, SPAs and PWAs load elements like headers, footers, and scripts just once (sometimes referred to as a "app shell") and only load new body content on subsequent pages. Libraries and open-source frameworks for PWAs include React, Angular, React Storefront, and Vue Storefront, to name a few.
Load time is vitally important, and that goes beyond just the first page. Improving browsing speed will deliver a better experience to your users. Instead of users leaving in frustration because pages take too long to display, a few simple steps will go a long way to improve their experience and the likelihood they convert.
Ishan Anand, co-founder and CTO of Moovweb
Image Credit: 377053 / Pixabay