Quicklink

Instant next-page navigations

Demos

This page contains some demo sites that use Quicklink to improve navigation, grouped by architecture: Multi Page Apps / Single Page Apps.

If you like the library, and want to try them on your site, check out the Installation section of the home page.

Multi Page Apps

In this demo you’ll compare an ecommerce site with and without Quicklink to see how navigation is improved thanks to the library.

The following waterfall shows a typical navigation for a site without Quicklink (top) vs. the same site using the library (bottom):

Image shows that use of quicklink improves navigation for a site by 1 second

To try the demo:

  1. Open the unoptimized site in Chrome.
  2. Open DevTools and go to the Network panel to simulate a Fast 3G Connection.
  3. Pick Galaxy S5 as a simulated device.
  4. Make sure Disable cache is not checked.
  5. Reload the page.
Image shows chrome dev tools inspection for site not using quicklink

Now, measure performance on the same site, that uses Quicklink:

  1. Open the optimized site in Chrome.
  2. Open DevTools and go to the Network panel to simulate a Fast 3G Connection.
  3. Pick Galaxy S5 as a simulated device.
  4. Make sure Disable cache is not checked.
  5. Reload the page.

Prefetched links can be identified in the Network panel by having quicklink as the Initiator and Lowest as the Priority:

Image shows chrome dev tools inspection for site using quicklink

To measure the impact of quicklink on navigations:

  1. Clear the Network trace.
  2. Click on a list item.
  3. Take a look at the Network panel.
Image shows the site using quicklink along with prefetch cache improves data fetching time by 97 percent

In the Size column of the Network panel the trace shows that the product page was retrieved from the prefetch cache and now takes 3ms to load: a 97% improvement compared to the unoptimized version.

Here is a comparison video:

The gif shows comparison between same site being loaded with quicklink takes 1 second less than unoptimised version

Single Page Apps

Quicklink 2.0 includes support for React-based single-page-apps. This has been covered to the detail in this guide.

To try the demo:

  1. Open the optimized site in Chrome.
  2. Open DevTools and go to the Network panel to simulate a Fast 3G Connection.
  3. Pick Galaxy S5 as a simulated device.
  4. Make sure Disable cache is not checked.
  5. Reload the page.

When the home page loads the chunks for that route are loaded. After that, quicklink prefetches the route's chunks for the in-viewport links:

Image shows that data for loading links available on the page being viewed are loaded beforehand by quicklink

Next:

  1. Clear the Network log again.
  2. Make sure Disable cache is not checked.
  3. Click the Blog link to navigate to that page.
Image shows that quicklink takes only 2 milliseconds to load a site using prefetch cache

The Size column indicates that these chunks were retrieved from the "prefetch cache", instead of the network. Loading these chunks without a Quicklink takes approximately 580ms. Using the library it takes 2ms, which represents a 99% reduction!