A quoi sert le préchargement des pages web ? Technologie de préchargement de page Web de préchargement instant.page

La vitesse de chargement des pages Web affectera votreE-commercesite web dans le moteur de rechercheSEOClassement.

Qu'est-ce que le préchargement d'une page Web ?

Il existe une technique appelée prefetch qui est en fait une technique de préchargement.

• Lorsqu'un utilisateur visite intentionnellement une page, le navigateur précharge la page.
• Lorsque l'utilisateur clique réellement sur le lien, l'utilisateur lit directement le contenu de la page à partir du cache préchargé et réduit le temps de chargement de la page.
• Amazon et d'autres ont découvert qu'une latence de 100 millisecondes représente 1 % des ventes, mais la latence sur le Web est difficile à surmonter.

Prérécupérer la page WebA quoi sert le préchargement ?

instant.page utilise le préchargement instantané - il précharge la page avant que l'utilisateur ne clique ▼

• Avant que l'utilisateur ne clique sur le lien, il survole le lien.
• Lorsque l'utilisateur survole pendant 65 ms, il aura la possibilité de cliquer sur le lien, donc instant.page commence à se précharger à ce stade, en moyenne plus de 300 ms pour que la page se précharge.
• Sur les appareils mobiles, les utilisateurs commencent à toucher leur écran avant de le relâcher, ce qui prend en moyenne 90 ms pour précharger la page.

Prefetch accélère le chargement des pages Web

• Le cerveau humain met moins de 100 millisecondes pour percevoir instantanément une action.
• Par conséquent, la technologie de préchargement instant.page peut rendre votre site Web instantané, même en 3G (en supposant que la vitesse de rendu de votre page est rapide).

Comment résoudre le chargement lent des pages Web ?

Les pages ne sont préchargées que lorsqu'il y a une forte probabilité que l'utilisateur les visite, et il ne précharge que le code HTML de cette page, en respectant la bande passante et le processeur de l'utilisateur et du serveur.

• Il utilise des écouteurs d'événements passifs pour garder vos pages fluides.
• Il n'est pas préchargé lorsque l'utilisateur active la protection des données (à partir de la version 1.2.2).
• Il fait 1 Ko et se charge après tout le reste.Il est gratuit et open source (licence MIT).

Quel est l'effet du préchargement de la page Web Prefetch sur instant.page ?

Après avoir testé l'ajout du code instant.page, l'amélioration de la vitesse d'accès au site Web est encore relativement importante.

• Par défaut, il filtrera pour précharger uniquement les liens de ce site et ne chargera pas les liens d'autres sites.
• Lorsque la souris clique sur le lien de l'article à gauche pendant plus de 65 ms, le réseau précharge la page de l'article.
• En vol stationnaire pendant moins de 65 ms, le préchargement n'est pas effectué (partie rouge)▼

L'utilisation d'instant.page augmentera considérablement le PV et le volume de requêtes de votre site :

• Un ami a déclaré que son nombre moyen de visites par visite était de 13.84.
• Après utilisation, le nombre de visites par habitant est passé à 17.43, ce qui équivaut à ouvrir 4 pages supplémentaires par personne.

Note:

• Il convient de noter que les blogueurs utilisant des CDN payants et des CDN complets ouverts doivent le faire avec prudence.
• Mais ne vous inquiétez pas, le préchargement ne charge que les pages html, les images et autres fichiers ne le seront pas, il n'y aura donc pas beaucoup de perte de trafic.

Comment utiliser la technologie de préchargement des pages Web ?

En fait, il existe un attribut rel dans la balise de lien de html5, dont l'un est prefetch, mais le nombre de consommateurs est faible.

L'instant.page présenté dans cet article est un script qui utilise cette technique.

• Ce script jugera en fonction de la durée pendant laquelle l'utilisateur passe la souris sur le lien.
• Lorsqu'il atteint 65 ms, l'utilisateur a une demi-chance d'ouvrir le lien et Instant.page précharge cette page.

Code de script JS de préchargement de page Web

1) Fournir officiellement des scripts JS avec l'accélération Cloudflare▼

L'utilisation de instant.page est très simple, il suffit d'ajouter le code suivant à votre site webJuste avant l'étiquette.

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

2) Liberté auto-hébergéeChen WeiliangOffre▼

• Le script réside sur le serveur, Instantclick-1.2.2.js, vous n'avez donc pas à vous soucier de ralentir les choses. 

Veuillez ajouter le code suivant à votre site WebJuste avant l'étiquette :

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