How To: Speed up your Shopify store with prefetching.
Prefetching is a technique where send a request for a specific resource before a user actually clicks on anything. As you may expect, this is rather resource intensive since you are requesting things that a user may not end up clicking on. However, given the right setting, utilizing prefetching can vastly increase the percieved page load time for your website.
For a service like Shopify, where you don't have to consider overloading the backend, prefetching becomes a very attractive technique. And, even better, by using a library like Google's quicklink you can get it up and running in just a couple of minutes.
To install on your Shopify store, do the following.
Step 1: Include Quicklink in to your project.
How you do this is up to you and will depend on how your theme is setup and what your work flow is like. More information about how to include quicklink can be found here.
Step 2: Add quicklink to your theme.
In your theme.liquid template, insert something like this in the head tag after you include the quicklink source code.
quicklink({
ignores: [
/cart.js/,
/\/cart\/\/?/,
function (uri) {
return uri.includes('/account');
}
]
});
The extra rules will exclude the AJAX cart page, cart.liquid page, and any account pages from being prefetched. This is necessary because fetching any of those endpoints will cause a stateful action to occur on the backend. This will lead to a strange user experience, such as users being automatically logged out when they access their account page.
Step 3: Enjoy your speed boost!
That's all there is to it. You should have a noticable improvement to your site speed and (hopefully) your conversion rate as well.
Other Considerations
Quicklink utilizes the intersection observer api. While most browsers include this API, some legacy browsers may have issues. In this case, you may want to include a polyfill such as this one.
