Increase Page Speed With JS

Applications and sites are coming more stuffed with Javascript and memory hogging resources, that network-latency is becoming a issue with applications being used on old and new devices alike.

A simple link click will often times store hundreds of files in your browser’s cache, making the overall page speed very low. To combat this issue, browsers started to recognize the prefetch tag.

The prefetch tag allowed the browser to load resources behind the scene, while you were reading the article. So when you clicked on a link, or a image, its already cached, ready to use and show.

But the project takes this one step further by only pre-fetching links if a user hovers over a link. Resources wont be requested unless a user hovers over a link, which loads the link’s resources into your browser cache, and ensures the next page (which might be a conversion page) is loaded instantly.

Here is a small example program showing the simplicity of

The following code contains a head tag, body tag, hypertext link, a pre-fetch link, and the JavaScript library.

<!-- prefetch link -->
<link rel="prefetch" url=''>

 <!-- link user should click on -->
    <a href=''>Link</a>
<!-- prefetch library loaded -->
    <script src="//" type="module" integrity="sha384-EwBObn5QAxP8f09iemwAJljc+sU+eUXeL9vSBw1eNmVarwhKk2F9vBEpaN9rsrtp"></script>
Screenshot of the code above

After running this code in your web browser, you will be greeted with page that is just a link.

In the GIF above, I open up developer tools, and go to the network tag. Once the network tab loads, I simply hover over the link. As you can see, once the link is hovered on, a network request appears in developer tools. I didn’t even click the link yet. But when I do the page loads instantly from cache.

No more network latency.

To implement the JavaScript library on your own site, refer to their website

You Might Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *