How to load web pages instantly (Expert techniques & tools)

By Lora Raykova · 4 min read · Last updated July 30, 2024

Make Uxify one of your go-to sources on Google

Fast. Faster. Instant.

A few years ago, an instant page load was a demo. Today Chrome can prerender a whole page before the visitor clicks, and sites that use it feel noticeably different from sites that don’t.

Here’s how web browsing got here, and the ways you can bring instant page loads to your own visitors.

What does it mean to load pages instantly?

Loading pages instantly refers to the swift and seamless display of web pages upon user request. Simply put, achieving a load time close to 0s when a site visitor loads a page from your website.

Achieving instant page loading involves optimizing various backend and frontend resources, such as minimizing file sizes, leveraging browser caching, and employing content delivery networks (CDNs).

Read on to learn about the latest techniques to add to your optimization toolbox.

Why are instant page loads important?

The goal is to enhance user experience by providing quick and responsive access to information, which is crucial for retaining user engagement and satisfaction on your website.

Recent user research revealed that site visitors abandon a page at 2.75s and will visit 60% more pages if subsequent pages load in under 3 seconds.

Offering instant experiences also positively impacts how real users interact with your website, leading to passed Core Web Vitals and Largest Contentful Paint specifically.

Famously the most challenging performance metric, LCP is a complex aspect to optimize and, fortunately, heavily impacted by instant loading techniques.

The challenges in web browsing now

While network engineers do their best to compensate for the World Wide Web’s inherent weaknesses, 53% of mobile users expect swift page loading in 3 seconds or less.

To bridge this gap, site owners today use a myriad of strategies to cut down the waiting time and stay competitive, such as:

Web performance budget setups
Manual and automated page loading optimization
Images, media, and code compression
Real-world performance (Core Web Vitals) optimization
User behavior analysis, customer journey optimization, and much more!

Site owners don’t have to rely on in-house resources only, though.

Browsers like Google Chrome and AI agents like Navigation AI are increasingly finding ways to help speed up loading times, aiming for the elusive “instant experience.”

Manual instant page loading techniques

Leveraging browser capabilities and resource hints

One way to go around instant browsing experiences is optimizing your website for fast future navigations.

Future navigation
Subsequent loading of web pages after you land on a website.

Resources hints like link rel=prefetch are easy-to-implement APIs with lower priority in the rendering of the web resources. It’s added to the HTML of your website and is reasonably well-supported by browsers (Safari is lagging behind).

Introduced by Barry Pollard himself, a recent exciting development in Chromium is the Speculation Rules API.

Speculation Rules API is the newer, better-specified API for prefetching or prerendering entire web pages. It is a JSON-based API that allows specifying prefecthed or prerendered links and much more advanced use cases.

By using the Speculation Rules API, you can expect initial page load times that are significantly faster than 2.5s and even fall closer to the first few milliseconds. This is possible by leveraging the API to specify a list of URLs to web pages for prerender or prefetch, which the browser will execute in the background.

The Speculation Rules API gives us more control over URLs you would like to prerender or prefetch by adding them to a document instead of a list. This allows us to specify the triggers and the priority with which the included URLs for pages and elements on the pages are executed by the browser. You then can specify a level of “eagerness,” which basically represents how confident you are that a user will click those links.

Unlocking instant page loading on WordPress

Adam Silverstein revealed the WordPress Performance team is working on more stable implementations of the new Speculation Rules API.

Currently, the focus remains on making a small chunk of the API’s functionality available to site owners and developers in the ecosystem to test out the efficiency and rate of adoption before making it a part of the core. Here’s what WordPress users can leverage so far:

A module in the Performance Lab plugin
A standalone plugin (Speculative Loading) that implements the Speculation Rules API frontend only (applies the conservative “eagerness” level, but developers are free to modify the behavior)
WP-admin routes are excluded by default, but it is up to WP developers to make out the routes they’d like to avoid or prioritize (i.e., avoid prerendering and prefetching shopping carts but prioritize obvious future navigations)

The WordPress Performance team is also working on more sophisticated implementations within plugins in the ecosystem. This aims to alleviate some of the heavy work developers have to do when figuring out which routes are top priority and which ones are a no-go.

How to load pages instantly on any website automatically

Navigation AI is the Uxify agent that owns navigation speed. It watches how real visitors move through your site, works out which link each one is about to click, and prerenders that page in the background. When the click comes, the page is already painted. It works the same way on desktop and mobile.

Navigation AI is built on the Speculation Rules API covered above. What changes is who decides what to prerender. With manual rules, you pick the URLs and the eagerness once and hope they still fit next month. Navigation AI makes that call for each visitor, on each page, while the session is happening.

It runs on Reality, Uxify’s real-user data layer, which tracks more than 3,000 signals from real sessions on your site. From those it reads where the visitor is in the viewport, how they’re scrolling, which device they’re on and what they’ve done so far in the visit. Mobile is easier than it sounds: on a small screen there are only so many links a thumb can reach from where the visitor is.

The prediction starts when the page loads and gets sharper as the visitor scrolls and moves the pointer. Only when the agent is confident does it ask the browser to prerender, so it doesn’t fill the browser with pages nobody opens. You switch it on with one Uxify snippet. There are no rules to write and no routes to maintain.

It keeps score on itself. Navigation AI tracks three custom metrics:

Prediction precision: how many out of all user interactions has Navigation AI predicted successfully
Waste precision: how many out of all user interactions has Navigation AI failed to predict, resulting in straining the browser
Browser honor ratio: signals if a page is actually being prerendered properly (if not, we check browser efficiency or the user’s network strength so Navigation AI can adapt to similar situations)

And it reports back. Every week or month, Navigation AI sends you a summary of what it prerendered and what that earned you, including how many more product pages the average visit reached. One store saw 2.43 more products per visit.

What prerendering earns

Across the sites it runs on, Navigation AI predicts the next click correctly 72% of the time. Navigations get 55% faster, pageviews per session go up 30%, and conversion rate lifts by 1%.

Prerendering pays off even when a team builds it by hand. Ray-Ban’s own developers wrote custom speculation rules and saw LCP drop 43% and conversion rate rise 156%. Navigation AI does that same work for every visitor, automatically, with no rules to write.

Expect the page-level gains straight away. The full effect on your Core Web Vitals takes up to 28 days to show in CrUX, because that’s the window Google reports on.

Faster navigations keep people browsing, and people who browse more pages are the ones who end up buying.

Instant loading techniques: Accuracy and trade-offs

Striking the right balance in deciding which pages to prerender/prefetch is connected to how well you understand your users’ behavior. The manual approach requires careful consideration of past user experiences and data analysis to achieve the “medium risk, medium reward” scenario.

Ideally, you’d want to double down on heatmaps and explore what users do on your web pages – where they click, how far down they scroll, and what they tend to ignore.

Because browsers can handle a limited amount of prerender/prefetch requests, site owners and developers should:

Exclude routes like logo links, logged-out pages, successful purchase pages, add-to-cart pages, etc.
Prioritize routes like main call-to-action (CTA) buttons, learn more pages, logical subsequent navigations, etc.

Or you can hand that work to an agent. Navigation AI reads the same signals a heatmap shows you, live and per visitor, and decides on its own which page to prerender.

FAQs

Does prerendering/prefetching pages in the background show in analytics?

If the user hasn’t landed on the page in question, it does not count toward analytics, like Google Analytics, for example. Bear in mind that the Speculation Rules API is still in the early stages, and depending on the analytics providers you use, they might decide to include this data in some way. For now, prerender/prefetched pages only count toward the Chrome User Experience Report (CrUX) if the user has actually landed on them.

How long does the browser keep cached versions of the prerendered pages for?

Developers don’t have control over the duration. However, Chrome stores all cached versions of the prerendered pages that weren’t picked by the user in the HTTP cache. This way, they remain faster to load if the user decides to return to them later.

The AI is handled entirely by Uxify servers and is not executed in the browser. The Navigation AI JavaScript only uses the ready-made results coming from the Uxify servers instead of running the entire AI model itself.

Do the instant loading techniques work for the first page users land on (like a home page) or for subsequent browsing only?

Prerendering/prefetching techniques do not apply in the case of first website visits. However, the Chrome URL bar is starting to use prerendering by recognizing URLs we often search for and loading them ahead of time.

For example, typing www.goo will most probably trigger the www.google.com page to load in the background (depending on individual user search activity, of course).

Currently, there are also explorations into how the Google search engine bar can incorporate prerendering.