Integrating Speculative Loading for faster ghost site loading
Speculative Loading is like the browser “reading the user’s mind”, preparing the next page in advance so that when the user clicks, the page appears almost instantly, delivering an “instant” page loading experience.
Similar to how lazyload is supported by browsers, Speculative Loading is also browser-supported. You don’t need to install any third-party scripts to run it, optimizing website performance.
Speculative Loading is based on the browser’s Speculation Rules API which allows the browser to predict which pages users are likely to visit next and automatically preload resources for those pages before users actually click the links.
There are 2 types of preloading speculation:
- Prefetch: The browser only loads the main resources of the page (HTML, CSS, JS, images) and caches them. When users access the page, the browser will use the preloaded resources, helping the page load faster.
- Prerender: More powerful than prefetch. The browser not only loads resources but actually renders the entire page in a hidden tab or background process. When users click the link, the page appears instantly as if it was already loaded.
TanaFlows theme applies both Speculative loading methods to strategically optimize website performance.
- Your website will prefetch main resources of pages within your viewport to avoid loading pages that haven’t been scrolled to. This helps preload pages on both desktop and mobile. You’ll be satisfied with the experience.
- When you click a link, the page appears instantly as if it was already loaded thanks to prerendering the page’s resources. This means on computers, when you hover over a link for 200ms, that link will preload the page.
- Menus at the top and bottom of the page are excluded from preloading to help focus on links in the main content area of the page.
Currently, Speculative Loading is not yet supported on browsers like Safari, Firefox and Opera. However, like the history of lazyload and webp, they will be supported in the future.
