<span class="na">src="js/instantclick.min.js" data-no-instant>
<span class="na">data-no-instant>
  // Optional: Limit the cache
  InstantClick.cacheLimit = 30; 

  // Optional: Preload on hover
  InstantClick.init({
    preloadOnHover: true
  });

  // Listen for the event when navigation occurs via InstantClick
  document.addEventListener('instantclick:newPage', () => {
    console.log("New page loaded via InstantClick!");
  });

</span>
 lang="en">

   charset="utf-8">
  InstantClick Test - Home
  
    body { font-family: sans-serif; margin: 20px; }
    nav ul { list-style: none; padding: 0; display: flex; gap: 10px; }
    .content { margin-top: 20px; max-width: 600px; }
    .box { background: #F0F0F0; margin: 10px 0; padding: 10px; border: 1px solid #CCC; }
  
  <span class="na">src="js/instantclick.min.js" data-no-instant>


  Home
  
    
       href="index.html">Home
       href="page1.html">Page 1
       href="page2.html">Page 2
    
  

   class="content">
    Welcome to the home page. Hover over "Page 1" or "Page 2" to start preloading them.
    Then click and watch how fast they load!

     class="box">
      Demo Content:
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod aliquet massa...
    
  

  <span class="na">data-no-instant>
    InstantClick.cacheLimit = 3;
    InstantClick.init({
      preloadOnHover: true
    });
    document.addEventListener('instantclick:newPage', () => {
      console.log('New page loaded via InstantClick!');
    });
  





    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  page1.html

</span>
 lang="en">

   charset="utf-8">
  InstantClick Test - Page 1
  
    body { font-family: sans-serif; margin: 20px; }
    nav ul { list-style: none; padding: 0; display: flex; gap: 10px; }
    .content { margin-top: 20px; max-width: 600px; }
    .box { background: #F0F0F0; margin: 10px 0; padding: 10px; border: 1px solid #CCC; }
  
  <span class="na">src="js/instantclick.min.js" data-no-instant>



  Page 1
  
    
       href="index.html">Home
       href="page1.html">Page 1
       href="page2.html">Page 2
    
  

   class="content">
    You are on Page 1. Try going back to Home, then come back here to see how quick it is.
     class="box">
      Demo Content:
      Curabitur at ipsum vel nunc venenatis lobortis. Vestibulum placerat nibh eget sapien accumsan...
    
  

  <span class="na">data-no-instant>
    InstantClick.cacheLimit = 3;
    InstantClick.init({
      preloadOnHover: true
    });
    document.addEventListener('instantclick:newPage', () => {
      console.log('New page (Page 1) loaded via InstantClick!');
    });
  





    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  page2.html

</span>
 lang="en">

   charset="utf-8">
  InstantClick Test - Page 2
  
    body { font-family: sans-serif; margin: 20px; }
    nav ul { list-style: none; padding: 0; display: flex; gap: 10px; }
    .content { margin-top: 20px; max-width: 600px; }
    .box { background: #F0F0F0; margin: 10px 0; padding: 10px; border: 1px solid #CCC; }
  
  <span class="na">src="js/instantclick.min.js" data-no-instant>



  Page 2
  
    
       href="index.html">Home
       href="page1.html">Page 1
       href="page2.html">Page 2
    
  

   class="content">
    Welcome to Page 2. Navigate between the three pages to test InstantClick.
     class="box">
      Demo Content:
      Sed tempus dolor ut massa viverra, nec fringilla metus facilisis. Vestibulum ante ipsum primis...
    
  

  <span class="na">data-no-instant>
    InstantClick.cacheLimit = 3;
    InstantClick.init({
      preloadOnHover: true
    });
    document.addEventListener('instantclick:newPage', () => {
      console.log('New page (Page 2) loaded via InstantClick!');
    });
  





    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  Managing the Cache with InstantClick

InstantClick keeps preloaded pages in memory (cache).

By default, it can store up to 100 pages using an LRU (Least Recently Used) strategy.

To adjust this limit, set:


  InstantClick.cacheLimit = 3; // for example



    Enter fullscreen mode
    


    Exit fullscreen mode
    





Once a page is cached, no additional network request is made if you hover/click that link again, unless the cache limit is exceeded or the page is otherwise evicted.

  
  
  Disabling Cache or Preload for Certain Links
If you don’t want to preload a certain page (especially a big one), simply add data-no-instant to the link:

 href="heavy-page.html" data-no-instant>Heavy Page (no preloading)



    Enter fullscreen mode
    


    Exit fullscreen mode
    





  
  
  Preloading Heavy Resources: Tips and Precautions
If the target page has large images, videos, or big JS files:

Early Preloading: With preloadOnHover: true, InstantClick starts downloading these large resources at hover time, potentially wasting bandwidth if the user never clicks.


Option 1: Turn off hover preloading (default is on mousedown/touchstart):


   InstantClick.init({
     // preloadOnHover: false
   });



    Enter fullscreen mode
    


    Exit fullscreen mode
    






Option 2: Mark certain links with data-no-instant to exclude them from preloading:


 href="heavy-page.html" data-no-instant>Heavy Page (no preloading)



    Enter fullscreen mode
    


    Exit fullscreen mode
    






Option 3: Optimize resources (e.g., compress images, consider video streaming, implement lazy loading) to minimize data downloaded.

  
  
  Conclusion
InstantClick is a simple yet powerful solution to provide lightning-fast navigation on your website. You only need to include one  and configure a few options to:
Preload pages for instant display.
Maintain proper browser history with pushState.
Manage caching and choose how and when to preload (on hover or click).
Enhance user experience — just be mindful of potential overhead when dealing with large files.
The mini demo site above helps you try and tweak the configuration for your specific setup. Happy integrating!
More Resources  


Official Docs: instantclick.io/documentation

Examples of real-world projects using InstantClick