Optimiser les performances avec des astuces sur les ressources

Les navigateurs Web modernes utilisent toutes sortes de techniques pour améliorer les performances de chargement de pages en devinant le choix de l'utilisateur. peut être susceptible de faire ensuite. Le navigateur en sait toutefois peu sur notre site ou notre application dans son ensemble, et c'est souvent le développeur qui fournit les meilleures informations sur ce qu'un utilisateur est susceptible de faire.

Prenez l'exemple du contenu paginé, comme un album photo. Nous savons que si l’utilisateur regarde une photo dans un album, il a la possibilité de cliquer sur le lien "Suivant" pour afficher l’image suivante dans l’album. Cependant, le navigateur ne sait pas vraiment que de tous les liens de la page, c’est celui sur lequel l’utilisateur est le plus susceptible de cliquer. Pour un navigateur, tous ces liens ont le même poids.

Et si le navigateur pouvait savoir en quelque sorte où l’utilisateur se dirigeait et pouvait aller chercher la page suivante à l’avance, de sorte que, lorsque l’utilisateur clique sur le lien, le chargement de la page est beaucoup, Plus vite? C’est en principe ce que sont les conseils de ressources. Ils permettent au développeur de dire au navigateur ce qui est susceptible de se passer à l'avenir afin que le navigateur puisse en tenir compte dans ses choix de chargement des ressources.

Tous ces conseils de ressource sont utilisés l'attribut rel de l'élément que vous serez familiarisé avec la recherche dans le de vos documents HTML. Dans cet article, nous examinerons les principaux types de conseils de ressources et le moment et le lieu où nous pourrons les utiliser dans nos pages.

DNS Prefetching

Une recherche DNS est le processus utilisé pour transformer un nom de domaine convivial, tel que example.com dans l’adresse IP conviviale pour l’ordinateur, telle que 123.54.92.4 qui est réellement nécessaire pour récupérer une ressource.

Chaque fois que vous tapez une URL dans la barre d’adresse du navigateur, suivez un lien dans une page. ou même charger une ressource telle qu'une image d'un domaine différent, le navigateur doit faire une recherche DNS pour trouver le serveur qui contient la ressource que nous avons demandée. Pour une page occupée contenant de nombreuses ressources externes (comme un site Web d'actualités contenant de nombreuses annonces et des outils de suivi), des dizaines de recherches DNS sont nécessaires par page.

Le navigateur met en cache les résultats de ces recherches, mais elles peuvent l'être. lent. Une technique d'optimisation des performances consiste à réduire le nombre de recherches DNS requises en organisant des ressources sur moins de domaines. Lorsque ce n'est pas possible, vous pouvez avertir le navigateur des domaines à rechercher avec l'indicateur de ressource dns-prefetch .

Lorsque le navigateur rencontre cet indicateur, il peut commencer à résoudre le problème images.example.com nom de domaine dès que possible, même s'il ne sait pas encore comment il sera utilisé. Cela permet au navigateur d’avancer et de travailler plus en parallèle, ce qui diminue le temps de chargement global.

Quand dois-je utiliser dns-prefetch ?

Utilisez dns-prefetch lorsque votre page utilise des ressources d'un autre domaine, pour donner au navigateur une longueur d'avance. La prise en charge du navigateur est vraiment excellente mais si un navigateur ne la prend pas en charge, aucun dommage n’est causé – le prefetch n’arrive tout simplement pas.

Ne relancez aucun domaine que vous n'êtes . et si vous souhaitez pré-extraire un grand nombre de domaines, vous feriez peut-être mieux de savoir pourquoi tous ces domaines sont nécessaires et si quelque chose peut être fait pour en réduire le nombre.

Preconnecting

One Le pré-chargement DNS est précédé de connexion préalable à un serveur. L’établissement d’une connexion à un serveur hébergeant une ressource nécessite plusieurs étapes:

• une recherche DNS (comme nous venons de le dire);
• Une poignée de main TCP
  Une «conversation» brève entre le navigateur et le serveur pour créer la connexion.
• Négociation TLS sur des sites HTTPS
  Cela vérifie que les informations de certificat sont valides et correctes pour la connexion.

Cela se produit généralement une fois par serveur et prend un temps précieux, en particulier si le serveur est très éloigné du navigateur et que la latence du réseau est élevée. (C’est là que les CDN distribués dans le monde sont vraiment utiles!) De la même manière que la prélecture DNS peut aider le navigateur à devancer le jeu avant qu’il ne voie ce qui se passe, la pré-connexion à un serveur permet de s’assurer que le navigateur accède à la partie. de la page où une ressource est nécessaire, la lenteur des travaux d’établissement de la connexion a déjà eu lieu et la ligne est ouverte et prête à l’emploi.

Quand dois-je utiliser preconnect ?

Encore une fois, la prise en charge du navigateur est forte et si un navigateur ne prend pas en charge la préconnexion, le résultat sera identique à ce qu'il était auparavant. Pensez à utiliser preconnect lorsque vous êtes certain de pouvoir accéder à une ressource et que vous souhaitez aller de l'avant.

Veillez à ne pas établir de connexion à l'avance, puis à ne pas utiliser la connexion, car cela ralentirait votre page et le bloquerait. une quantité infime de ressources sur le serveur auquel vous vous connectez également.

La ​​pré-extraction de la page suivante

Les deux astuces que nous avons examinées jusqu'à présent sont principalement axées sur les ressources de la page en cours de chargement. Ils peuvent être utiles pour aider le navigateur à prendre de l'avance sur les images, les scripts ou les polices, par exemple. Les deux astuces suivantes concernent plus la navigation et la prévision de l’emplacement de l’utilisateur après après le chargement de la page en cours.

La première de ces astuces est le prélecture, et son tag de lien peut ressembler à ceci:

Cela indique au navigateur qu'il peut aller de l'avant et aller chercher une page en arrière-plan afin qu'elle soit prête à partir à la demande. Il y a un peu de risque ici parce que vous devez anticiper l'endroit où l'utilisateur va naviguer par la suite. Faites-le correctement et la page suivante peut sembler se charger très rapidement. Ne vous y trompez pas et vous perdez du temps et des ressources en téléchargeant quelque chose qui ne sera pas utilisé. Si l'utilisateur dispose d'une connexion mesurée, telle qu'un forfait de téléphonie mobile limité, vous risquez en fait de lui coûter de l'argent réel.

Lors d'une pré-extraction, le navigateur effectue la recherche DNS et établit la connexion au serveur que nous avons vue précédemment. deux types d’indices, mais va encore plus loin et demande et télécharge les fichiers. Cependant, il s’arrête à ce stade et les fichiers ne sont pas analysés ni exécutés et ne sont en aucun cas appliqués à la page en cours. Ils sont simplement demandés et maintenus prêts.

Vous pouvez penser à une prélecture, c'est un peu comme ajouter un fichier au cache du navigateur. Au lieu d'aller sur le serveur et de le télécharger lorsque l'utilisateur clique sur le lien, le fichier peut être extrait de la mémoire et utilisé beaucoup plus rapidement.

L'attribut en tant que

Dans l'exemple ci-dessus, vous pouvez voir que nous définissons l'attribut comme à comme = "document" . Ceci est un attribut facultatif qui indique à ce navigateur que ce que nous recherchons doit être traité comme un document (c'est-à-dire une page Web). Cela permet au navigateur de définir le même type d’en-têtes de demande et de politiques de sécurité que si nous venions de suivre un lien vers une nouvelle page.

Il existe de nombreuses valeurs possibles pour l’attribut que en activant le navigateur permet de gérer correctement les différents types de prefetch.

Valeur de en tant que	Type de ressource
audio	Fichiers audio et musicaux
vidéo	Vidéo
Piste	Vidéo ou audio Pistes WebVTT
script	fichiers JavaScript
style	feuilles de style CSS
police	polices de caractère Web
image	Images
fetch [19659039] Demandes d'API XHR et Fetch
travailleur	Les travailleurs Web
incorporent	Multimédia demandes
objet	Multimédia
document	Pages Web [19659064] Différentes valeurs pouvant être utilisées pour spécifier des types de ressources avec l'attribut en tant que . Wh fr Devrais-je utiliser prefetch ? Again prefetch a un excellent support pour le navigateur . Vous devez l'utiliser lorsque vous avez une certitude raisonnable que l'utilisateur peut suivre votre site si vous pensez que l'accélération de la navigation aura un impact positif sur l'expérience de l'utilisateur. Cela devrait être mis en balance avec le risque de gaspillage de ressources en récupérant éventuellement une ressource qui n'est pas utilisée par la suite. Prérendering The Next Page Avec prefetch nous avons vu comment le navigateur peut télécharger les fichiers à l’arrière-plan sont prêts à être utilisés, mais ils ont également noté que rien n’était plus fait à ce moment-là. Le pré-rendu va encore plus loin et exécute les fichiers en effectuant à peu près tout le travail nécessaire pour afficher la page, à l'exception de son affichage réel. Cela peut inclure l'analyse de la ressource pour toutes les sous-ressources telles que les fichiers JavaScript et Cela peut vraiment donner l'impression que le chargement de page suivant est instantané, avec le genre de performance de chargement vif que vous pourriez voir en cliquant sur le bouton de retour de votre navigateur. Cependant, le pari est encore plus grand ici, car vous passez non seulement du temps à demander et à télécharger les fichiers, mais également à les exécuter avec n'importe quel JavaScript ou autre. Cela pourrait utiliser de la mémoire et du processeur (et donc de la batterie) dont l'utilisateur ne verrait pas l'intérêt s'il ne demande pas la page. Quand dois-je utiliser prerender ? La prise en charge du navigateur pour prerender est actuellement très limitée, avec uniquement le support de Chrome et du vieil IE (pas Edge). Cela pourrait limiter son utilité, à moins que vous ne cibliez spécifiquement Chrome. Encore une fois, c'est un cas de «pas de mal, pas de faute», car l'utilisateur ne verra pas l'avantage, mais il ne leur posera aucun problème sinon. Conseils d'utilisation des ressources à utiliser Nous avons déjà vu comment les indications de ressource peuvent être utilisées dans la d'un document HTML utilisant la balise . C'est probablement le moyen le plus pratique de le faire, mais vous pouvez également obtenir la même chose avec l'en-tête HTTP Link: . Par exemple, pour effectuer une pré-extraction avec un en-tête HTTP: Link: ; rel = prefetch; comme = image; Vous pouvez également utiliser JavaScript pour appliquer de manière dynamique des indicateurs de ressources, éventuellement en réponse à une interaction. Pour utiliser un exemple tiré du document de spécification W3C: var hint = document.createElement ("link"); hint.rel = "prefetch"; hint.as = "document"; hint.href = "/article/part3.html"; document.head.appendChild (indice); Cela ouvre certaines possibilités intéressantes, car il est potentiellement plus facile de prédire où l'internaute pourrait naviguer en fonction de la manière dont il interagit avec la page. Things To Note Nous avons examiné quatre méthodes de plus en plus agressives. du préchargement des ressources, du simple effleurement de la résolution DNS au rendu complet d'une page prête à être utilisée en arrière-plan. Il est important de se rappeler que ces indications ne sont que cela. les navigateurs pourraient optimiser les performances . Ce ne sont pas des directives. Le navigateur peut suivre nos suggestions et faire preuve de la plus grande discrétion pour décider comment réagir. Cela peut signifier que, sur un appareil occupé ou surchargé, le navigateur ne tente aucunement de répondre à ces astuces. Si le navigateur sait qu’il utilise une connexion avec compteur, il peut par exemple pré-extraire le DNS mais pas l’ensemble des ressources. Si la mémoire est faible, le navigateur peut à nouveau décider qu'il ne vaut pas la peine d'extraire la page suivante tant que la page actuelle n'a pas été déchargée. En réalité, sur un navigateur de bureau, les astuces seront probablement suivies comme le développeur le suggère, mais sachez que cela revient au navigateur dans tous les cas. L'importance de la maintenance Si vous avez travaillé avec le Web pendant plus de deux ans, vous vous en rendrez compte. sur une page est invisible, alors il peut souvent devenir négligé. Les métadonnées cachées (telles que les descriptions de page) en sont un bon exemple. Si les utilisateurs du site ne peuvent pas voir facilement les données, celles-ci peuvent facilement devenir négligées et devenir obsolètes. Il existe un risque réel en matière de ressources. Comme le code est caché et qu'il est utilisé de manière non détectée, il serait très facile pour la page de changer et pour toute indication de ressource de ne pas être mise à jour. La conséquence, par exemple, de pré-télécharger une page que vous n’utilisez pas, signifie que les outils que vous avez mis en place pour améliorer les performances de votre site le nuisent activement. Il est donc vraiment vraiment important Ressources Le meilleur outil 2023 pour ta croissance Instagram ! Source link Partager : Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre) Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre) Articles similaires Revenir vers le haut Search: L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 ! Essai Gratuit Aujourd'hui