A cosa serve il precaricamento della pagina web? Precarica la pagina web con la tecnologia instant.page

La velocità di caricamento della pagina Web influirà sul tuofornitore di energia elettricasito web nel motore di ricercaGestione SEOClassifica.

Che cos'è il precaricamento della pagina web?

C'è una tecnica chiamata prefetch che è in realtà una tecnica di precarico.

• Quando un utente visita intenzionalmente una pagina, il browser precarica la pagina.
• Quando l'utente fa effettivamente clic sul collegamento, legge direttamente il contenuto della pagina dalla cache precaricata e riduce il tempo di caricamento della pagina.
• Amazon e altri hanno scoperto che la latenza di 100 millisecondi rappresenta l'1% delle vendite, ma la latenza sul Web è difficile da superare.

Precarica la pagina webA cosa serve il precarico?

instant.page utilizza il precaricamento istantaneo: precarica la pagina prima che l'utente faccia clic su ▼

• Prima che l'utente faccia clic sul collegamento, passa il mouse sopra il collegamento.
• Quando l'utente passa con il mouse per 65 ms, avrà la possibilità di fare clic sul collegamento, quindi instant.page inizia a precaricare a questo punto, con una media di oltre 300 ms per il precaricamento della pagina.
• Sui dispositivi mobili, gli utenti iniziano a toccare il display prima di rilasciare, impiegando in media 90 ms per precaricare la pagina.

Il precaricamento velocizza il caricamento delle pagine web

• Il cervello umano impiega meno di 100 millisecondi per percepire un'azione istantaneamente.
• Pertanto, la tecnologia di precaricamento instant.page può rendere il tuo sito web istantaneo anche su 3G (supponendo che la velocità di rendering della tua pagina sia elevata).

Come risolvere il caricamento lento delle pagine web?

Le pagine vengono precaricate solo quando c'è un'alta probabilità che l'utente le visiti e precarica solo l'HTML per quella pagina, rispettando la larghezza di banda e la CPU dell'utente e del server.

• Utilizza listener di eventi passivi per mantenere le tue pagine fluide.
• Non è precaricato quando l'utente abilita la protezione dei dati (a partire dalla versione 1.2.2).
• È 1 kB e carica dopo tutto il resto.È gratuito e open source (licenza MIT).

Qual è l'effetto del precaricamento della pagina web instant.page?

Dopo aver testato l'aggiunta del codice instant.page, il miglioramento della velocità di accesso al sito Web è ancora relativamente ampio.

• Per impostazione predefinita, filtrerà per precaricare solo i collegamenti di questo sito e non caricherà i collegamenti da altri siti.
• Quando il mouse fa clic sul collegamento dell'articolo a sinistra per più di 65 ms, la rete precarica la pagina dell'articolo.
• Quando si staziona per meno di 65 ms, il precarico non viene eseguito (parte rossa)▼

L'utilizzo di instant.page aumenterà significativamente il PV del tuo sito e il volume delle richieste:

• Un amico ha detto che il suo numero medio di visite per visita era 13.84.
• Dopo l'utilizzo, il numero di visite pro capite è salito a 17.43, il che equivale ad aprire altre 4 pagine a persona.

precauzioni:

• Va notato che i blogger che utilizzano CDN a pagamento e CDN a sito intero aperti dovrebbero farlo con cautela.
• Ma non preoccuparti, il precaricamento carica solo pagine html, immagini e altri file no, quindi non ci sarà molta perdita di traffico.

Come utilizzare la tecnologia di precaricamento delle pagine Web?

In effetti, c'è un attributo rel nel tag link di html5, uno dei quali è prefetch, ma il numero di consumatori è piccolo.

Instant.page introdotto in questo articolo è uno script che utilizza questa tecnica.

• Questo script giudicherà in base a quanto tempo l'utente passa il mouse sul collegamento.
• Quando raggiunge i 65 ms, l'utente ha una mezza possibilità di aprire il collegamento e Instant.page precarica questa pagina.

Codice script JS di precaricamento della pagina Web

1) Fornisci ufficialmente gli script JS con l'accelerazione Cloudflare▼

L'uso di instant.page è molto semplice, basta aggiungere il seguente codice al tuo sito webPoco prima dell'etichetta.

<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBz虚ni砖用wang络kLHw"></script>

2) Libertà auto-ospitataChen WeiangOfferta▼

• Lo script risiede nel server, Instantclick-1.2.2.js, quindi non devi preoccuparti di rallentare le cose. 

Aggiungi il seguente codice al tuo sito webPoco prima dell'etichetta:

<script src="https://img.chenweiliang.com/javascript/instantpage.js" type="module"></script>