Para que serve a carga previa da páxina web? Precargar a páxina web da tecnoloxía instant.page

A velocidade de carga da páxina web afectará á túaComercio electrónicositio web no buscadorSEORánking.

Que é a precarga da páxina web?

Hai unha técnica chamada prefetch que en realidade é unha técnica de precarga.

• Cando un usuario visita intencionalmente unha páxina, o navegador precarga a páxina.
• Cando o usuario fai clic na ligazón, le directamente o contido da páxina desde a caché precargada e reduce o tempo de carga da páxina.
• Amazon e outros descubriron que a latencia de 100 milisegundos representa o 1% das vendas, pero a latencia na web é difícil de superar.

Precargar páxina webPara que serve a precarga?

instant.page usa a precarga instantánea: precarga a páxina antes de que o usuario faga clic en ▼

• Antes de que o usuario faga clic na ligazón, pasa o rato sobre a ligazón.
• Cando o usuario pase o cursor durante 65 ms, terá a oportunidade de facer clic na ligazón, polo que instant.page comeza a precargarse neste momento, cunha media de máis de 300 ms para que a páxina se cargue previamente.
• Nos dispositivos móbiles, os usuarios comezan a tocar a súa pantalla antes de soltar, tardando unha media de 90 ms en precargar a páxina.

A captura previa fai que as páxinas web se carguen máis rápido

• O cerebro humano tarda menos de 100 milisegundos en percibir unha acción ao instante.
• Polo tanto, a tecnoloxía de precarga instant.page pode facer que o teu sitio web se sinta instantáneo mesmo en 3G (supoñendo que a velocidade de renderización da túa páxina sexa rápida).

Como resolver a carga lenta das páxinas web?

As páxinas son precargadas só cando hai unha alta probabilidade de que o usuario as visite, e só precarga o HTML para esa páxina, respectando o ancho de banda e a CPU do usuario e do servidor.

• Usa oíntes de eventos pasivos para manter as túas páxinas fluidas.
• Non se carga previamente cando o usuario activa a protección de datos (a partir da versión 1.2.2).
• Ten 1 kB e cárgase despois de todo.É gratuíto e de código aberto (licenza MIT).

Cal é o efecto de precargar a páxina web de Prefetch instant.page?

Despois de probar engadindo o código instant.page, a mellora na velocidade de acceso ao sitio web aínda é relativamente grande.

• De forma predeterminada, filtrarase para precargar só as ligazóns deste sitio e non cargará as ligazóns doutros sitios.
• Cando o rato faga clic na ligazón do artigo da esquerda durante máis de 65 ms, a Rede cargará previamente a páxina do artigo.
• Cando se estaciona durante menos de 65 ms, non se realiza a precarga (parte vermella)▼

Usar instant.page aumentará significativamente o PV do teu sitio e o volume de solicitudes:

• Un amigo dixo que a súa media de visitas por visita foi de 13.84.
• Despois do uso, o número de visitas per cápita ascendeu a 17.43, o que equivale a abrir 4 páxinas máis por persoa.

coidado:

• Hai que ter en conta que os blogueiros que usan CDN de pago e CDN de sitio completo aberto deben facelo con precaución.
• Pero non te preocupes, a precarga só carga páxinas html, imaxes e outros ficheiros non, polo que non haberá moita perda de tráfico.

Como usar a tecnoloxía de precarga de páxinas web?

De feito, hai un atributo rel na etiqueta de ligazón de html5, un dos cales é prefetch, pero o número de consumidores é pequeno.

A instant.page introducida neste artigo é un script que utiliza esta técnica.

• Este script xulgarase en función do tempo que o usuario pase o rato sobre a ligazón.
• Cando chega a 65 ms, o usuario ten media oportunidade de abrir a ligazón e Instant.page precarga esta páxina.

Código de script JS de precarga da páxina web

1) Proporcione oficialmente scripts JS con aceleración Cloudflare▼

O uso de instant.page é moi sinxelo, só tes que engadir o seguinte código ao teu sitio webXusto antes da etiqueta.

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

2) Liberdade autoaloxadaChen WeiliangOferta ▼

• O script vive no servidor, Instantclick-1.2.2.js, polo que non tes que preocuparte por ralentizar as cousas. 

Engade o seguinte código ao teu sitio webXusto antes da etiqueta:

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