Speed up Magento 2 page load with just-in-time preloading

Hello,

It's been a while since my last post and first of all dear reader, I hope this blog post finds you well. This pandemia (Covid-19) left an undoubtful impact on all of us. Today, I would like to show you one super easy trick to speed up Magento 2 page load using the just-in-time preloading technique.

It is based on https://instant.page/ which is a free Open source project of ~200 lines https://github.com/instantpage/instant.page. More technical details on how this feature works you can read on https://instant.page/tech page, and I strongly encourage you to host application on your own server or better Cloudflare Workers (https://workers.cloudflare.com/) and distribute content based on the visitor location.

Preloading is done with following concept:

<link rel="prefetch" href="url">  

Integration with Magento 2 is really simple. Navigate to Dashboard --> Content --> Design --> Configuration and under Footer --> Miscellaneous HTML paste the code from https://instant.page/ website.

alt

Like I said above it is strongly recommended for production stores that you host this application on your own servers and use your own domain (preferably subdomain of the main domain used).

That's all! Clear Magento 2 caches and if Redis/Varnish used and test.

Cheating the brain
The human brain perceives actions taking less than 100 ms as instant. As a result, instant.page makes your pages feel instant even on 3G (assuming your pages are fast to render).

Easy on your server and your user’s data plan
Pages are preloaded only when there’s a good chance that a user will visit them, and only the HTML is preloaded, being respectful of your users’ and servers’ bandwidth and CPU.

It uses passive event listeners and requestIdleCallback so that your pages stay smooth. It respects data saver mode. It’s 1 kB and loads after everything else. And it’s free and open-source (MIT license).

There is also a nice Chrome extension doing the same:
https://chrome.google.com/webstore/detail/fasterchrome/nmgpnfccjfjhdenioncabecepjcmdnjg

Hope this article was helpful. Kudos to author and great idea https://github.com/instantpage/instant.page and all contributors involved.