Understanding Smart Preloading and how top companies uses it to speed up their sites

Why using Smart Preloading?

eBay observed that, by implementing preloading, the Median Above Fold Time reduced from 1.2 seconds to 0.39 seconds. They also noticed a positive impact on conversion from preloading.

After preloading was implemented, Netflix was able to reduce Time To Interactive by 30%.

Italian sports portal Virgilio Sport uses service workers to prefetch the most popular posts in their home page. As a result of this, over 3 weeks of observation Virgilio Sport witnessed load times for navigation to articles improve 78%, and the number of article impressions increases by 45%.

How it works?

By consuming data from an analytics source, such as Google Analytics, Swift enables your store to prefetch resources only when they are likely to be needed. This can make subsequent navigations appear to load instantly.

For example, we have a website with three pages - home, about, and collections. Also, let us suppose that from Google Analytics data we predict that there's a 95% chance the user to visit the collections page from the home page and only a 5% chance to go to the about page. In this case, while the user is on the home page we can download all the resources from the collections page so that the user's subsequent navigation could be as quick as possible.

When we're performing preloading based on a prediction for the user's behavior we're applying smart preloading.

Compare to other types of preloading

Simple Preloading: Before a user clicks on a link, they hover their mouse over that link, so Swift starts preloading at this moment, leaving on average over 300 ms for the page to preload.

Smart Preloading predict and prefetch resources in advance with an accuracy of over 90%, it speeds up next-page navigation on average 900ms

We also combine Smart Preloading with mouse-hover, so in the case that the prediction is wrong, your store still benefits from Simple Preloading.

It can provide instant experience for all the user experience.

Who is using smart preloading today?

Facebook: For every link in mobile News Feed, Facebook attempts to predict how likely a person is to click it. If the prediction score meets certain requirements, the initial HTML file is downloaded when the link first appears on a person's screen.

eBay: When a user searches eBay, eBay's analytics data suggests that it is highly likely that the user will navigate to an item in the top 10 of the search results. So eBay now prefetches the items from search and keeps them ready for when the user navigates

MercadoLibre is the biggest e-commerce site in Latin America. To speed up navigations, they dynamically inject <link rel=”prefetch”> tags in some parts of the flow. For example, in listing pages, they fetch the next result page as soon as the user scrolls to the bottom of the listing

To further improve performance when navigating their logged-out homepage, Netflix utilized the time spent by users on the landing page to prefetch resources for the next page users were likely to land on.

You don’t have to be Facebook or eBay to take advantage of this technique. Swift uses data from Google Analytics to predict the next pages users are likely to click and preload them, enables instant user experience.

Hope this information would be helpful for you.

Should you need further support, please feel free to contact us via live chat or email us at support@onecommerce.io

Updated on: 09/01/2023