Quand il s’agit d’améliorer l’expérience de chacun sur Internet, il faut vous saisir de chaque occasion pour améliorer les performances de votre site. Dans cet article, nous examinons les indications du navigateur comme prefetch et prerender ainsi qu’à la nouvelle directive preload afin de voir la manière dont ils peuvent potentiellement améliorer les performances. Nous prenons également en considération ce que cela signifie pour le montoring synthétique ainsi que la surveillance en navigateur réel.
Qu’est-ce qu’un browser hint et comment cela améliore la Web performance ?
Les browser hints qui sont des indications de navigateur (également appelées resource hints et speculative fetch) ne sont pas une nouveauté. Mozilla a introduit prefetch en 2006 dans son navigateur Firefox. Un browser hint informe le navigateur des possibles futures navigations. Les Browser hints permettent au navigateur d’utiliser les temps d’inactivité pour récupérer ou préparer la récupération des ressources par anticipation sur les prochaines actions de l’utilisateur. Le navigateur décide s’il procède au hint en fonction de l’appareil de l’utilisateur, la bande passante disponible et d’autres variables. Les Browser hints arrivent ont une très faible priorité et parfois même le navigateur les ignore complètement.
Nous avons inclus les types les plus fréquemment utilisés dans cet article, mais vous pouvez trouver une liste complète des types disponible sur W3Schools. Les options pour les browser hints incluent :
Prefetch
Prefetch est une suggestion de navigateur qui signifie que l’URL est la cible la plus probable de la prochaine navigation. Le navigateur, s’il choisit d’agir selon la suggestion, place la réponse dans le cache de l’appareil et n’effectuera aucun traitement sur la réponse. Par exemple, pendant le processus de paiement, l’utilisateur examine actuellement son panier. La page suivante recueille les informations d’expédition et les préférences. Vous pouvez améliorer les performances de la page d’expédition en demandant au navigateur de récupérer certaines ressources nécessaires pour la page d’expédition. Une fois que le visiteur accède à la page, le navigateur n’a besoin que de récupérer le fichier du cache.
Prerender
Prerender est similaire à prefetch sauf que prerender récupère la page entière plutôt que certaines ressources désignées. Prerender dirige le navigateur pour qu’il traite le contenu et le stocke dans la mémoire de l’appareil. Lorsque vous utilisez prerender, vous devez être certain que le visiteur naviguera vers la page en question, sinon vous surchargez votre serveur inutilement et gaspillez l’abonnement de données mobile de votre visiteur.
Alex Painter dans son article “Devriez-vous utiliser prerender sur votre site Web” dit : “Simplement ajouter rel=”prerender” sur un élément <link> dans le code HTML n’est pas forcément le meilleur moyen de mettre en oeuvre cette technique. A la place, vous pourriez considérer l’utilisation d’un JavaScript pour retarder le prérendu le temps que la page d’origine finisse de se charger ou même ajouter un gestionnaire d’événement sur un lien afin que le prérendu se fasse quand l’utilisateur passe la souris dessus.
Prefetch DNS (dns-prefetch)
Le prefetch DNS fonctionne simplement comme un prefetch classique, toutefois il ne résout que le DNS. Le hint indique au navigateur qu’il doit résoudre le DNS pour la navigation future de l’utilisateur. En effectuant cet aller-retour nécessaire assez tôt, vous pouvez gagner un temps précieux sur le traitement du front end.
Preconnect
Cela permet d’approfondir le prefetch DNS et demande au navigateur de s’avancer et de résoudre le DNS, de procéder à la négociation TCP et à la négociation TLS (le cas échéant) pour la navigation suivante.
Next and Prev
Si une page fait partie d’une série de pages, comme une galerie de photos, un article qui s’étend sur plusieurs pages ou un catalogue de produits avec pagination, les hints Next et Prev indiquent au navigateur la future navigation possible de l’utilisateur. En outre, Google utilise next et prev pour améliorer l’indexation des pages de la série.
Preload ou declarative fetch
Les browser hints, comme décrits ci-dessus, indiquent au navigateur que la page suivante pourrait avoir besoin de ces ressources, tandis que preload indique au navigateur qu’il a besoin de la ressource pour la page en cours. Un preload force le navigateur à récupérer la ressource dès que possible au lieu d’attendre que la ressource soit nécessaire plus tard dans la page. Par exemple, une ressource peut ne pas résider dans le code HTML, mais profondément dans un fichier CSS ou un script, et attendre le chargement du CSS ou du fichier de script puis la récupération de la ressource gaspille un temps de chargement précieux. Une directive preload indique la ressource au navigateur au plus tôt afin qu’il puisse obtenir lcette dernière le plus rapidement possible. Les précharges sont particulièrement utiles lors de l’utilisation de polices Web.
Avantages rapportés de l’utilisation de la précharge
Addy Osmani, un ingénieur de Google, a écrit un excellent article sur le préchargement, et il rapporte plusieurs cas d’utilisation où la directive précharge a permis d’améliorer considérablement les performances.
Housing.com a constaté une amélioration de 10% de ses performances lorsqu’il a commencé à précharger des scripts récemment exécutés.
Shopify a constaté une amélioration de 50% (1,2 seconde) par rapport au premier rendu lorsqu’il utilisait la précharge pour récupérer les polices Web.
Treebo a gagné une seconde en préchargeant son image d’en-tête et ses bundles webpack.
Utiliser les Browser hints et Preload sur votre site
Vous déclarez les browser hints et les directives de préchargement (preload) à l’aide de la balise <link>. Les balises de lien se trouvent dans le <head> de la page. L’attribut relationship (rel) de la balise link indique au navigateur quel type de hint est utilisé.
<link rel=”prefetch” href=”//www.votresite.com”>
<link rel=”dns-prefetch” href=”//www.votresite.com”>
<link rel=”prerender” href=”//www.votresite.com”>
Le navigateur définit la priorité du lien en fonction de l’attribut de relation. Prefetch, prerender, preconnect, Next et Prev reçoivent tous une priorité basse tandis que preload peut recevoir une priorité élevée en fonction de l’attribut “as” de la liaison de préchargement. S’il n’y a pas d’attribut “as”, la ressource obtient une haute priorité alors que as = “script” peut être déclassé en priorité moyenne ou basse. Il existe plusieurs types de directives possibles :
as=”audio”
as=”vidéo”
as=”police”
as=”script”
as=”image”
Vous pouvez voir la liste complète dans le Preload W3C Candidate Recommendation.
Comme mentionné plus tôt, les browser hints (pas preload) reçoivent en général une priorité très basse de la part du navigateur. Vous pouvez améliorer les chances que le navigateur reconnaisse le hint en mettant l’attribut “pr”. L’attribut “pr” indique au navigateur la probabilité qu’il en ait besoin en le notant de 0 à 1. Par exemple, le tag du lien ci-dessous a 80% de chance d’être nécessaire pour la prochaine navigation.
<link rel=”preconnect” href=”http://www.yoursite.com” pr=”0.8″>
Comment les conseils et les directives du navigateur affectent-ils ma supervision ?
Vous pouvez vous demander comment preload et les browser hints affectent vos résultats de monitoring. L’effet, s’il en est un, dépend du type de moniteur. Les types de moniteur tels que SSL, DNS et les moniteurs de serveurs externes ne sont pas affectés car ils n’utilisent pas un navigateur Web, mais votre Real User Monitoring et certains moniteurs synthétiques peuvent montrer quelques différences.
Browser Hints
Étant donné que les indications du navigateur, telles que prefetch et dns-prefetch, ne s’exécutent qu’après le chargement de la page en cours, vos Full Page Check et votre surveillance de disponibilité ne présenteront aucune différence de performance (c’est pourquoi nous démarrons chaque test synthétique avec un cache vide). Les moniteurs de transaction qui parcourent plusieurs pages peuvent montrer des performances améliorées après la requête initiale de navigation si la première page inclut des browser hints. Les Browser hints (conseils du navigateur) n’étant que des suggestions, vous pouvez observer des changements dans les performances lorsque le navigateur choisit de ne pas suivre la suggestion.
Preload
Un browser hint est optionnel pour le navigateur, mais une directive de preload n’est pas une simple suggestion au navigateur mais une exigence. Le navigateur doit donc suivre la directive pour récupérer la ressource. La directive preload récupère la ressource de manière asynchrone pendant qu’elle télécharge le reste de la page, de sorte que les moniteurs de navigateur réel comme les Full Page Check et les applications Web voient une amélioration des performances.
Qu’en est-il de mon Real User Monitoring ?
Le Real User Monitoring fonctionne à partir d’un script situé sur chaque page surveillée. Si les utilisateurs accèdent directement à la page, ils ne bénéficieront pas des conseils du navigateur, mais verront des améliorations basées sur les directives de préchargement. Une fois sur votre site, si les pages suivantes utilisent les ressources définies dans la page en cours, l’utilisateur devrait voir des améliorations et ces améliorations de performances affecteront vos rapports de suivi des utilisateurs réels (RUM). Étant donné qu’Uptrends agrège vos données de performance, vos rapports vous montreront les résultats de performance en fonction du visiteur de chaque page, et pas seulement de ceux provenant de pages avec des browser hints pour la page.
Une note sur le prerender
Lorsque vous effectuez un prefectch, la ressource est récupérée et stockée dans le cache, mais le navigateur ne traite pas la ressource tant qu’il n’en a pas besoin. Pour une directive prerender, le navigateur télécharge et exécute entièrement la page, puis il stocke la page complète dans le cache. Microsoft décrit ce processus comme l’ouverture d’une tabulation cachée contenant toutes les données téléchargées, le DOM créé, la page affichée, le CSS appliqué et le JavaScript exécuté. Si l’utilisateur se rend sur la page prérendue, la page cachée est alors affichée et donne l’impression à l’utilisateur d’avoir été chargée instantannément. Les chargements instantannés sont une bonne chose pour les utilisateurs, mais si vous utilisez prerender sur une page qui utilise Google Analytics et que l’utilisateur ne consulte pas cette page, votre rapport analytique enregistrera tout de même la page vue du fait que le scrit ait été exécuté lors du processus prerender. Aussi, le prerender dispose d’une limite de compatibilité avec les navigateurs (voir le tableau ci-dessous) et si vos visiteurs utilisent un navigateur qui prend en charge le prerender et que ce dernier choisit de l’exécuter, alors votre rapport montrera la page vue.
Conclusion
Les browser hints, lorsqu’ils sont utilisés de manière responsable, sont un moyen puissant d’améliorer l’expérience de l’utilisateur sur votre site. Vous devez examiner attentivement les options afin de ne pas abuser de la bande passante et des données mobile de l’utilisateur, de plus vous ne souhaitez pas imposer un fardeau excessif à vos serveurs. Sérgio Gomes, un développeur de Google, a écrit un excellent article sur les conseils de navigateur qui comprend de nombreux conseils et avertissements supplémentaires à considérer avant d’utiliser certaines de ces optimisations dans votre code.
Vous verrez les gains de performances pour le préchargement dans vos rapports de Full Page Check, et les visiteurs de votre site verront les améliorations que les browser hints peuvent apporter au fur et à mesure qu’ils cliquent sur votre site. Après tout, c’est la qualité du parcours de l’utilisateur qui le maintient sur votre site et le fait revenir. Améliorez votre voyage avec des directives preload et des browser hints, et assurez un voyage rapide et efficace grâce à la surveillance d’Uptrends. Avec Uptrends, vous saurez que votre site Web, votre service Web ou votre API rencontre un problème. Un avertissement précoce avec les nombreuses options d’alerte d’Uptrends peut vous aider à minimiser les pannes, à préserver les performances et à satisfaire vos utilisateurs.
Leave a Reply