Quicklink. Prefetching dei link via JavaScript

Quicklink è una soluzione Javascript che permette di velocizzare la navigazione di un utente in Rete attraverso il prefetching dei link presenti nella viewport nell'idle time. In questo modo Quicklink si pone l'obiettivo di caricare più velocemente i contenuti che l'utente potrebbe aprire dalla medesima finestra.

L'algoritmo con cui lo script compie le sue azioni è il seguente:

• prima di tutto, individua i link all'interno della viewport, usando Intersection Observer;
• attende che il browser vada in idle (idle time), usando requestIdleCallback;
• controlla che l'utente non stia navigando tramite una connessione lenta (utilizzando navigator.connection.effectiveType) o possegga un data-saver attivato (attraverso navigator.connection.saveData);
• effettua il prefetching degli URL relativi ai link della pagina ( utilizzando <link rel=prefetch> o l'oggetto XMLHttpRequest). Questo passaggio fornisce controllo sulla priorità della richiesta. E' possibile utilizzare anche il metodo fetch() se supportato.

Una volta installato tramite npm o tramite tag script, possiamo inizializzare il motore di Quicklink chiamando l'ominima funzione quicklink():

<!-- Include quicklink from dist -->
<script src="dist/quicklink.js"></script>
<!-- Initialize (you can do this whenever you want) -->
<script>
quicklink();
</script>

Una volta inizializzato, lo script lancia il prefetching dei link presenti nella viewport in maniera automatica durante l'idle time. Possiamo poi personalizzare la chiamata a quicklink(), settandola ad esempio al caricamento della viewport:

<script>
window.addEventListener('load', () =>{
   quicklink();
});
</script>

Possiamo aggiungere una moltitudine di caratteristiche alle funzionalità offerte da Quicklink. Alcune di essere derivano dall'oggetto option che è possibile passare direttamente alla funzione che accetta svariate proprietà tra cui:

• l'elemento da osservare per il prefetching dei link;
• un array di URL su cui eseguire il prefetiching, invece di analizzare il document;
• la priorità con cui viene eseguita l'operazione;
• un'espressione regolare che permette di prendere in considerazione o escludere determinati link;
• un timeout specifico in cui il browser deve eserguire l'operazione.

Nella pagina ufficiale del progetto possiamo trovare una semplice documentazione che copre le funzionalità principali della libreria più una collezione di demo che mostrano la funzionalità in azione. Quicklink è rilasciato sotto licenza Apache 2.0.

Via Quicklink