I’ve always been on the lookout for ways to speed up my site. My Blogger page is packed with custom features, so it can get a little heavy at times.
Then I stumbled upon the Instant Page JS script. Still, I wasn’t sure how it would handle the load, especially since it’s a JavaScript solution.
And JavaScript means extra files that the browser needs to load, and that can sometimes slow things down, right?
MxM I still have to use it but instead of linking to the script externally, I hosted it inline directly on my Blogger template.
So, there is no HTTPS calls, no waiting for external servers. Just pure inline magic.
So, how does this really help?
What Instant Page JS does is simple but effective:
It preloads links that users might click on as they hover over them or scroll near them. Essentially, it’s like loading the next page in the background so it’s ready when the user clicks.
When you implement this, pages feel faster because they’re already loaded, and the wait time is nearly gone.
While it does add some weight to the page, it’s worth noting that the preload happens only when it’s needed.
The script’s not always running in the background, just when the user shows intent. This keeps things efficient, without overwhelming the browser.
How to Add Instant Page Js to Any site - Link to Instantpage.js
Add the HTML snippet directly into your site's <head> section or before the closing </body> tag.
<script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>How to Implement Instant Page JS on Any Site - Inline Host
To implement Instant Page JS, follow these simple steps:
Add the script directly into your site's <head> section or before the closing </body> tag.
<script type="text/javascript">
/*! instant.page v5.2.0 - (C) 2019-2023 Alexandre Dieulot - https://instant.page/license */
let t,e,n,o,i,a=null,s=65,c=new Set;const r=1111;function d(t){o=performance.now();const e=t.target.closest("a");m(e)&&p(e.href,"high")}function u(t){if(performance.now()-o<r)return;if(!("closest"in t.target))return;const e=t.target.closest("a");m(e)&&(e.addEventListener("mouseout",f,{passive:!0}),i=setTimeout(()=>{p(e.href,"high"),i=void 0},s))}function l(t){const e=t.target.closest("a");m(e)&&p(e.href,"high")}function f(t){t.relatedTarget&&t.target.closest("a")==t.relatedTarget.closest("a")||i&&(clearTimeout(i),i=void 0)}function h(t){if(performance.now()-o<r)return;const e=t.target.closest("a");if(t.which>1||t.metaKey||t.ctrlKey)return;if(!e)return;e.addEventListener("click",function(t){1337!=t.detail&&t.preventDefault()},{capture:!0,passive:!1,once:!0});const n=new MouseEvent("click",{view:window,bubbles:!0,cancelable:!1,detail:1337});e.dispatchEvent(n)}function m(o){if(o&&o.href&&(!n||"instant"in o.dataset)){if(o.origin!=location.origin){if(!(e||"instant"in o.dataset)||!a)return}if(["http:","https:"].includes(o.protocol)&&("http:"!=o.protocol||"https:"!=location.protocol)&&(t||!o.search||"instant"in o.dataset)&&!(o.hash&&o.pathname+o.search==location.pathname+location.search||"noInstant"in o.dataset))return!0}}function p(t,e="auto"){if(c.has(t))return;const n=document.createElement("link");n.rel="prefetch",n.href=t,n.fetchPriority=e,n.as="document",document.head.appendChild(n),c.add(t)}!function(){if(!document.createElement("link").relList.supports("prefetch"))return;const o="instantVaryAccept"in document.body.dataset||"Shopify"in window,i=navigator.userAgent.indexOf("Chrome/");i>-1&&(a=parseInt(navigator.userAgent.substring(i+"Chrome/".length)));if(o&&a&&a<110)return;const c="instantMousedownShortcut"in document.body.dataset;t="instantAllowQueryString"in document.body.dataset,e="instantAllowExternalLinks"in document.body.dataset,n="instantWhitelist"in document.body.dataset;const r={capture:!0,passive:!0};let f=!1,v=!1,g=!1;if("instantIntensity"in document.body.dataset){const t=document.body.dataset.instantIntensity;if(t.startsWith("mousedown"))f=!0,"mousedown-only"==t&&(v=!0);else if(t.startsWith("viewport")){const e=navigator.connection&&navigator.connection.saveData,n=navigator.connection&&navigator.connection.effectiveType&&navigator.connection.effectiveType.includes("2g");e||n||("viewport"==t?document.documentElement.clientWidth*document.documentElement.clientHeight<45e4&&(g=!0):"viewport-all"==t&&(g=!0))}else{const e=parseInt(t);isNaN(e)||(s=e)}}v||document.addEventListener("touchstart",d,r);f?c||document.addEventListener("mousedown",l,r):document.addEventListener("mouseover",u,r);c&&document.addEventListener("mousedown",h,r);if(g){let t=window.requestIdleCallback;t||(t=(t=>{t()})),t(function(){const t=new IntersectionObserver(e=>{e.forEach(e=>{if(e.isIntersecting){const n=e.target;t.unobserve(n),p(n.href)}})});document.querySelectorAll("a").forEach(e=>{m(e)&&t.observe(e)})},{timeout:1500})}}();
</script>This way, you can also configure it (optional) like customizing the behavior with specific settings like how it activates (lmon hover, on scroll, etc.).
Test: Check if the page preloads as expected.
This method works for most platforms, making pages feel faster by preloading content.
Bottomline
Instant Page JS has really helped cut down on load time for my site.
I’ll admit I had doubts at first, but hosting the script inline instead is not bad. It’s a small tweak that’s made a noticeable difference in user experience.
If your site’s a little heavy and you’re looking to speed things up, this could be worth trying out.
Read More
Instant.Page GitHub Repository:
- https://github.com/instantpage/instant.page
This is the official repository where you can find the code, documentation, and setup instructions.
- https://github.com/instantpage/instant.page
-
Instant Page Documentation:
- https://instant.page/
The official site for Instant Page JS.
- https://instant.page/
-
Google Developers - Performance Best Practices:
- https://developers.google.com/web/fundamentals/performance
A useful resource from Google on optimizing web performance, which can help understand the impact of tools like Instant Page.
- https://developers.google.com/web/fundamentals/performance
-
Web.dev - Preload Links:
- https://web.dev/priority-hints/#preload-links
An article explaining how preloading links works, related to the idea behind Instant Page JS.
- https://web.dev/priority-hints/#preload-links
