Prefetch with high fetchPriority on mouse & touch events

By default, a prefetch is loaded with a low priority.
When there’s a fair chance that this prefetch is going to be used in the near term (= after a touch/mouse event), giving it a high priority would help make the page load faster in case there are other resources loading.

Prioritizing it implicitly means deprioritizing every other resource that’s loading on the page.
Due to HTML documents usually being much smaller than other resources (notably images and JavaScript), this theft of bandwidth should rarely be detrimental.

Closes #117

Author: dieulot

instantpage.js

@@ -116,7 +116,7 @@ function touchstartListener(event) {
     return
   }
 
-  preload(linkElement.href)
+  preload(linkElement.href, 'high')
 }
 
 function mouseoverListener(event) {
@@ -142,7 +142,7 @@ function mouseoverListener(event) {
   linkElement.addEventListener('mouseout', mouseoutListener, {passive: true})
 
   mouseoverTimer = setTimeout(() => {
-    preload(linkElement.href)
+    preload(linkElement.href, 'high')
     mouseoverTimer = undefined
   }, delayOnHover)
 }
@@ -154,7 +154,7 @@ function mousedownListener(event) {
     return
   }
 
-  preload(linkElement.href)
+  preload(linkElement.href, 'high')
 }
 
 function mouseoutListener(event) {
@@ -231,14 +231,15 @@ function isPreloadable(linkElement) {
   return true
 }
 
-function preload(url) {
+function preload(url, fetchPriority = 'auto') {
   if (prefetches.has(url)) {
     return
   }
 
   const prefetcher = document.createElement('link')
   prefetcher.rel = 'prefetch'
   prefetcher.href = url
+  prefetcher.fetchPriority = fetchPriority
   document.head.appendChild(prefetcher)
 
   prefetches.add(url)