Vad är användningen av förladdning av webbsidor? Förhämta webbsida förladdning instant.page-teknik

Webbsidans laddningshastighet kommer att påverka dinelleverantörwebbplats i sökmotornSEORanking.

Vad är förladdning av webbsidor?

Det finns en teknik som kallas prefetch som faktiskt är en preload-teknik.

• När en användare avsiktligt besöker en sida förladdar webbläsaren sidan.
• När användaren faktiskt klickar på länken läser användaren sidinnehållet direkt från den förladdade cachen och minskar sidladdningstiden.
• Amazon och andra har funnit att 100 millisekunders latens står för 1 % av försäljningen, men latens på webben är svår att övervinna.

Förhämta webbsidaVad är användningen av förladdning?

instant.page använder omedelbar förladdning - den förladdar sidan innan användaren klickar ▼

• Innan användaren klickar på länken håller de muspekaren över länken.
• När användaren svävar i 65 ms, kommer de att ha en chans att klicka på länken, så instant.page börjar laddas i förväg vid denna tidpunkt, i genomsnitt över 300 ms för sidan att förladda.
• På mobila enheter börjar användare trycka på sin skärm innan de släpper, vilket tar i genomsnitt 90 ms att förladda sidan.

Prefetch gör att webbsidor laddas snabbare

• Den mänskliga hjärnan tar mindre än 100 millisekunder för att uppfatta en handling direkt.
• Därför kan instant.page-förladdningsteknik få din webbplats att kännas omedelbar även på 3G (förutsatt att din sidrenderingshastighet är snabb).

Hur löser man den långsamma laddningen av webbsidor?

Sidor är bara förinlästa när det är stor sannolikhet att användaren kommer att besöka dem, och det förladdar bara HTML för den sidan, med respekt för användarens och serverns bandbredd och CPU.

• Den använder passiva händelseavlyssnare för att hålla dina sidor smidiga.
• Den är inte förladdad när användaren aktiverar dataskydd (från och med version 1.2.2).
• Det är 1 kB och laddas efter allt annat.Det är gratis och öppen källkod (MIT-licens).

Vad är effekten av att Prefetch webbsida förinläst instant.page?

Efter att ha testat att lägga till instant.page-koden är förbättringen av hastigheten för webbplatsåtkomst fortfarande relativt stor.

• Som standard kommer den att filtrera för att förinläsa endast denna webbplatslänkar och kommer inte att ladda länkar från andra webbplatser.
• När musen klickar på artikellänken till vänster i mer än 65ms, kommer nätverket att förladda artikelsidan.
• Vid hovring i mindre än 65ms utförs inte förladdning (röd del)▼

Att använda instant.page kommer att öka din webbplatss PV och förfrågningsvolym avsevärt:

• En vän sa att hans genomsnittliga antal besök per besök var 13.84.
• Efter användning steg antalet besök per capita till 17.43, vilket motsvarar att öppna ytterligare 4 sidor per person.

För säkerhets skull:

• Det bör noteras att bloggare som använder betalda CDN:er och öppna CDN:er på hela webbplatsen bör göra det med försiktighet.
• Men oroa dig inte, förladdning laddar bara html-sidor, bilder och andra filer kommer inte att göra det, så det blir inte mycket trafikförlust.

Hur använder man teknik för förladdning av webbsidor?

Faktum är att det finns ett rel-attribut i länktaggen för html5, varav en är förhämtning, men antalet konsumenter är litet.

Instant.page som introduceras i den här artikeln är ett skript som använder denna teknik.

• Detta skript kommer att bedöma baserat på hur länge användaren för muspekaren över länken.
• När den når 65 ms har användaren en halv chans att öppna länken och Instant.page förladdar denna sida.

Webbsida förladda JS-skriptkod

1) Tillhandahåll officiellt JS-skript med Cloudflare-acceleration▼

Användningen av instant.page är väldigt enkel, lägg bara till följande kod på din webbplatsStrax före etiketten.

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

2) Självvärd frihetChen WeiliangErbjudande▼

• Skriptet finns på servern, Instantclick-1.2.2.js, så du behöver inte oroa dig för att sakta ner. 

Lägg till följande kod på din webbplatsStrax före etiketten:

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