Wat is het nut van het vooraf laden van webpagina's? Prefetch webpagina preload instant.page technologie

De laadsnelheid van webpagina's heeft invloed op uwelektriciteitsleverancierwebsite in zoekmachineSEORangschikking.

Wat is het vooraf laden van webpagina's?

Er is een techniek die prefetch wordt genoemd, wat eigenlijk een preload-techniek is.

• Wanneer een gebruiker opzettelijk een pagina bezoekt, laadt de browser de pagina vooraf.
• Wanneer de gebruiker daadwerkelijk op de link klikt, leest de gebruiker de pagina-inhoud rechtstreeks uit de vooraf geladen cache en vermindert de laadtijd van de pagina.
• Amazon en anderen hebben ontdekt dat een latentie van 100 milliseconden goed is voor 1% van de omzet, maar latentie op internet is moeilijk te overwinnen.

Prefetch webpaginaWat is het nut van voorladen?

instant.page maakt gebruik van instant preloading - het laadt de pagina vooraf voordat de gebruiker op ▼ . klikt

• Voordat de gebruiker op de link klikt, zweeft hij over de link.
• Wanneer de gebruiker 65 ms zweeft, krijgt hij de kans om op de link te klikken, dus instant.page begint op dit punt te preloaden, gemiddeld meer dan 300 ms om de pagina vooraf te laden.
• Op mobiele apparaten beginnen gebruikers hun scherm aan te raken voordat ze loslaten, waarbij het gemiddeld 90 ms duurt om de pagina vooraf te laden.

Prefetch zorgt ervoor dat webpagina's sneller worden geladen

• Het menselijk brein heeft minder dan 100 milliseconden nodig om een ​​actie onmiddellijk waar te nemen.
• Daarom kan de technologie voor het vooraf laden van instant.page ervoor zorgen dat uw website direct aanvoelt, zelfs op 3G (ervan uitgaande dat de weergavesnelheid van uw pagina snel is).

Hoe het langzaam laden van webpagina's op te lossen?

Pagina's worden alleen voorgeladen als er een grote kans is dat de gebruiker ze zal bezoeken, en het laadt alleen de HTML voor die pagina, met respect voor de bandbreedte en CPU van de gebruiker en de server.

• Het gebruikt passieve gebeurtenislisteners om uw pagina's soepel te houden.
• Het wordt niet vooraf geladen wanneer de gebruiker gegevensbescherming inschakelt (vanaf versie 1.2.2).
• Het is 1 kB en laadt na al het andere.Het is gratis en open source (MIT-licentie).

Wat is het effect van Prefetch-webpagina die instant.page vooraf laadt?

Na het testen van het toevoegen van de instant.page-code, is de verbetering in de toegangssnelheid van de website nog steeds relatief groot.

• Standaard wordt gefilterd om alleen links van deze site vooraf te laden en worden geen links van andere sites geladen.
• Wanneer de muis langer dan 65 ms op de artikellink aan de linkerkant klikt, laadt het netwerk de artikelpagina vooraf.
• Bij zweven van minder dan 65 ms wordt voorladen niet uitgevoerd (rood gedeelte)▼

Het gebruik van instant.page zal de PV en het verzoekvolume van uw site aanzienlijk verhogen:

• Een vriend zei dat zijn gemiddelde aantal bezoeken per bezoek 13.84 was.
• Na gebruik steeg het aantal bezoeken per hoofd van de bevolking tot 17.43, wat overeenkomt met het openen van 4 extra pagina's per persoon.

voorzorgsmaatregelen:

• Opgemerkt moet worden dat bloggers die betaalde CDN's en open CDN's op de volledige site gebruiken, dit voorzichtig moeten doen.
• Maar maak je geen zorgen, preload laadt alleen html-pagina's, afbeeldingen en andere bestanden niet, dus er zal niet veel verkeersverlies zijn.

Hoe gebruik ik technologie voor het vooraf laden van webpagina's?

In feite is er een rel-attribuut in de link-tag van html5, waarvan er één prefetch is, maar het aantal consumenten is klein.

De instant.page die in dit artikel wordt geïntroduceerd, is een script dat deze techniek gebruikt.

• Dit script zal beoordelen op basis van hoe lang de gebruiker met de muis over de link gaat.
• Wanneer het 65 ms bereikt, heeft de gebruiker een halve kans om de link te openen en Instant.page laadt deze pagina vooraf.

Webpagina preload JS-scriptcode

1) Officieel JS-scripts voorzien van Cloudflare-versnelling▼

Het gebruik van instant.page is heel eenvoudig, voeg gewoon de volgende code toe aan uw website:Net voor het etiket.

<script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>

2) Zelf-gehoste vrijheidChen WeiliangAanbieding▼

• Het script bevindt zich op de server, Instantclick-1.2.2.js, dus u hoeft zich geen zorgen te maken over vertragingen. 

Voeg de volgende code toe aan uw website:Vlak voor het etiket:

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