Précharger, préconnecter, prérécupérer : améliorez les performances de votre site avec des conseils de ressources

Les navigateurs Web modernes utilisent toutes sortes de techniques différentes pour améliorer les performances globales de votre site Web - de la hiérarchisation des ressources les plus importantes et de leur récupération en premier à la prédiction de la page que l'utilisateur visitera ensuite.

Cependant, vous ne devez pas vous fier aux navigateurs, aussi avancés soient-ils, pour prendre toutes les décisions concernant les performances de votre site.

En tant que propriétaire de site Web, vous êtes celui qui sait quelles ressources sont les plus cruciales et quel est le parcours réel de l'utilisateur sur votre site. Et pour améliorer les performances globales, la vitesse perçue et l'expérience utilisateur de votre site Web, vous pouvez utiliser ces connaissances pour aider les navigateurs à charger vos pages plus rapidement.

C'est là que les indices de ressources entrent en jeu.

Dans les lignes suivantes, nous les examinerons et comment utiliser au mieux leurs avantages.

Plongeons-y.

Comment fonctionnent les navigateurs (en bref)

Pour mieux comprendre les conseils de ressources et où ils sont applicables, examinons rapidement comment les navigateurs chargent réellement le contenu.

Nous pourrions diviser l'ensemble du processus de chargement d'une page par un navigateur en trois étapes :

• Établir la connexion ;
• Téléchargement, analyse et rendu du code ;
• Rendre la page interactive ;

Lors de la première étape, le navigateur doit établir une connexion avec le serveur afin de télécharger les ressources. Cela inclut la recherche du nom de domaine et sa résolution en adresse IP, la configuration d'une connexion au serveur et le cryptage de la connexion pour des raisons de sécurité.

Une fois que tout est terminé, le navigateur peut procéder au téléchargement et à l'analyse des informations, à la construction du modèle d'objet de document (DOM) et du modèle d'objet CSS (CSSOM), puis au rendu du contenu.

La dernière partie consiste à rendre la page interactive. Tous les processus mentionnés ci-dessus se déroulent dans le thread principal. Ainsi, une fois le thread principal du navigateur terminé avec l'analyse, le rendu et la peinture de la page, il est temps de s'occuper des fichiers JavaScript différés pour rendre la page disponible pour le défilement, le toucher et d'autres interactions.

En un mot, c'est le processus en coulisse chaque fois qu'une page est chargée.

Voyons comment vous pouvez avoir un impact positif sur chacune de ces étapes en intégrant les conseils de ressources.

Conseils de ressources : prélecture, préconnexion, préchargement

Comme leur nom l'indique, les conseils de ressources sont des conseils ou des instructions qui indiquent au navigateur comment il doit gérer des ressources ou des pages Web spécifiques. En d'autres termes, cet ensemble d'instructions vous permet d'aider le navigateur à hiérarchiser les origines ou les ressources qui doivent être récupérées et rendues.

Tous les indicateurs de ressources utilisent l' attribut rel de l'élément de lien que vous trouverez dans l'en- tête de vos documents HTML.

L'intégration de ces extraits de code HTML sur votre site Web permettra au navigateur de commencer à charger les fichiers sélectionnés plus tôt que s'il les trouve lors du chargement normal de la page.

Et maintenant que les bases sont derrière nous, passons à la partie pour laquelle vous êtes ici - aperçu des conseils sur les ressources, leurs avantages et quand les utiliser.

Prélecture

link rel=prefetch est un indice de ressource de faible priorité qui permet au navigateur de récupérer les ressources qui pourraient être nécessaires ultérieurement et de les stocker dans le cache du navigateur.

Étant donné que la prélecture définit une priorité très faible, n'utilisez pas cette astuce pour les fichiers de haute importance .

L'un des grands cas d'utilisation consiste à utiliser la prélecture pour améliorer le temps de chargement des pages suivantes. Par exemple, vous pouvez appliquer la directive prefetch lors de l'authentification d'un utilisateur. De cette façon, vous pouvez profiter du temps qu'il leur faut pour saisir leurs informations d'identification pour précharger les ressources nécessaires à la page qu'ils verront ensuite.

En anticipant les étapes de vos visiteurs sur votre site et en préchargeant les ressources, vous pouvez améliorer des mesures telles que First Contentful Paint et Time to Interactive. Quelque chose que Netflix a fait et a réduit son Time to Interactive de 30 %.

Tout ce que nous avons mentionné jusqu'à présent concerne la prélecture, également connue sous le nom de prélecture de liens. Mais il existe deux autres types de préchargement qui sont tout aussi importants, et nous devons mentionner :

1. Prélecture DNS
Le navigateur doit effectuer une recherche DNS pour convertir un nom d'hôte (l'URL) en adresse IP avant de se connecter à l'hôte (serveur d'origine).

Bien que cela ne prenne généralement que quelques millisecondes, si un site Web charge des fichiers à partir d'un nom de domaine tiers, ce que font la plupart des sites Web, le navigateur doit effectuer une recherche DNS pour chaque domaine. Certains sites (par exemple, les sites Web d'actualités) utilisent beaucoup de ressources externes, ce qui signifie qu'il peut y avoir des dizaines de recherches DNS requises par page.

Dans ces cas, l'utilisation de l'indice dns-prefetch peut faire gagner quelques millisecondes car l'instruction indique au navigateur de démarrer ce processus immédiatement, plutôt que lorsque le besoin est découvert plus tard dans le processus de chargement.

Comme suggéré dans le Web Almanac 2021, une bonne pratique consiste à combiner dns-prefetch avec l'indice de préconnexion pour des résultats optimaux. Vous pouvez voir pourquoi dans la section où nous parlons de préconnexion .

2. Pré-rendu
Le prérendu est très similaire au préchargement en ce sens qu'il optimise les ressources vers lesquelles l'utilisateur peut naviguer ensuite. La différence est que le prérendu rend en fait la page entière au lieu de ressources spécifiques.

Préconnexion

Comme dns-prefetch , la directive preconnect aide le navigateur à établir des connexions précoces avant d'envoyer une requête initiale au serveur.

Cependant, l'indice de préconnexion va encore plus loin. Bien qu'il effectue des recherches DNS, il inclut également les négociations TLS et les poignées de main TCP. Ceci, à son tour, élimine la latence aller-retour et fait gagner encore plus de temps.

Mais voici la question :

Si la préconnexion fait tout ce que fait DNS-Prefetch , et au-dessus, pourquoi devrais-je utiliser DNS-Prefetch en premier lieu ?

Dans la plupart des cas, la préconnexion est l'option préférable à dns-prefetch , mais le problème est que la préconnexion n'est pas prise en charge par certains navigateurs :

Source : caniuse.com

La bonne chose est que vous pouvez les utiliser ensemble pour en tirer le meilleur parti. Vous pouvez bénéficier de la pré- connexion dans les navigateurs qui la prennent en charge avec un repli sur dns-prefetch :

Selon Google :

En 2019, Chrome a réussi à améliorer son Time To Interactive de près de 1 secondes en se préconnectant à des origines importantes.

Précharge

Avant d'expliquer comment fonctionne la directive de préchargement , nous devons clarifier quelque chose.

Bien que le préchargement soit régulièrement mentionné comme un "indice de ressource", ce n'est pas le cas. Le préchargement est une récupération déclarative, et il est obligatoire pour les navigateurs , ce qui en fait plus une commande qu'un indice.

Cela étant dit, le préchargement est utilisé pour forcer le navigateur à télécharger une ressource plus tôt que le navigateur ne la découvrirait car elle est cruciale pour la page.

La directive preload fonctionne mieux sur les ressources qui font partie du chemin de rendu critique mais qui ne sont pas facilement découvertes par le navigateur. Par exemple, les polices, CSS ou JavaScript critique.

Une autre différence avec les indications dns-prefetch et preconnect est que, même s'ils n'ont besoin que des attributs rel et href , le préchargement est plus compliqué. Vous devez ajouter l'attribut as , qui indique le type de contenu de la ressource que vous souhaitez précharger.

Selon Addy Osmani, responsable de l'ingénierie chez Google, fournir un attribut as lorsque le préchargement est obligatoire :

Voici une liste complète des valeurs que vous pouvez spécifier :

L'inclusion de l'attribut as aide le navigateur à définir la priorité de la ressource prélue en fonction de son type et à déterminer si la ressource existe déjà dans le cache.

Consultez le document Chrome Resource Priorities and Scheduling pour en savoir plus sur la hiérarchisation des différents types de ressources.

Pour certaines ressources, telles que les polices, vous devez également inclure l'attribut crossorigin .

L'attribut crossorigin définit le mode de la requête sur une requête HTTP CORS. CORS (Cross-Origin Resource Sharing) est un mécanisme qui permet à un serveur d'indiquer toute origine autre que la sienne à partir de laquelle un navigateur doit autoriser le chargement des ressources. Nous n'approfondirons pas cela car ce n'est pas l'objet de cet article, mais vous pouvez trouver plus d'informations ici.

Et comme pour l'attribut as , le préchargement des polices sans crossorigin entraînera une double récupération. Voici un autre extrait de l'article d'Addy Osmani sur le sujet :

Plus d'indices de ressources, plus de problèmes

En lisant tout jusqu'à présent, vous pourriez commencer à penser que l'utilisation d'autant d'indices de ressources que possible ne ferait qu'amener les navigateurs à charger vos pages à la vitesse de l'éclair.

Malheureusement, ce n'est pas le cas.

Voici quelques-uns des revers que vous devez prendre en compte lors de l'intégration des conseils de ressources :

1. Prefetch peut augmenter la consommation de données

Bien que la prélecture définisse une faible priorité de téléchargement, cela ne signifie pas qu'elle est inoffensive. Son utilisation peut augmenter la consommation de données sur votre site, ce qui peut présenter des problèmes à la fois pour vous (augmentation du trafic sur votre serveur) et pour vos utilisateurs (surconsommation inutile de ressources). De plus, vous pouvez finir par charger des octets supplémentaires qui pourraient éventuellement ne pas être utilisés. Alors réfléchissez bien avant de l'intégrer.

2. Le prérendu peut entraîner un gaspillage de bande passante

Le pari avec prerender est encore plus grand que prefetch , car vous téléchargez des pages entières à l'avance. Cela rend l'indice gourmand en ressources et peut entraîner un gaspillage de bande passante, en particulier sur les appareils mobiles. Et le pire, c'est que les utilisateurs peuvent même ne pas voir l'effet de l'indice s'ils ne demandent pas la page.

3. La préconnexion peut entraîner une utilisation supplémentaire du processeur

Bien que la préconnexion soit un indice de faible priorité, elle peut néanmoins nuire aux performances de votre site Web. Si une connexion établie n'est pas utilisée rapidement (dans les 10 secondes sur Chrome), la directive de préconnexion ne fait qu'ajouter une utilisation supplémentaire du processeur et elle sera automatiquement fermée par le navigateur. De plus, vous devez utiliser la préconnexion avec parcimonie car la taille des certificats de chiffrement est d'environ 3 Ko, ce qui serait en concurrence avec la bande passante pour d'autres ressources importantes.

4. Le préchargement remplace les priorités définies par l'analyseur du navigateur

preload est une instruction puissante car elle permet de faire en sorte que le navigateur télécharge immédiatement une ressource. Cependant, les navigateurs Web modernes sont assez bons pour hiérarchiser les ressources, de sorte que l'utilisation excessive du préchargement peut entraîner des résultats négatifs. Par exemple, si vous ajoutez une directive de préchargement correspondant à une URL de ressource asynchrone, le navigateur la récupèrera plus rapidement, donc il l'analysera plus rapidement, annulant l'effet de votre attribut asynchrone en interrompant le thread principal très tôt dans le chargement de la page.

résumer

Nous avons couvert beaucoup de terrain dans cet article, alors récapitulons rapidement les points les plus essentiels :

• dns-prefetch et preconnect sont utilisés pour hiérarchiser les noms de domaine (par exemple, https://example.com).
• prefetch et preload sont utilisés pour hiérarchiser le chargement des ressources. Alors que le préchargement est utilisé pour améliorer le temps de chargement des pages suivantes, le préchargement fonctionne mieux sur les ressources critiques de la page en cours.
• le prérendu fait référence à une page entière (par exemple, blog.html).
• prefetch , prerender et preconnect sont des indications de ressources, et ils sont exécutés comme le navigateur l'entend. La directive preload est une commande obligatoire pour les navigateurs.
• Lorsque vous utilisez preload , n'oubliez pas de fournir les attributs as et crossorigin pour éviter une double récupération.
• Bien que les conseils de ressources soient des instructions de faible priorité, ils constituent toujours une menace pour les performances de votre site. Utilisez-les avec modération et uniquement lorsque cela est nécessaire.
• preload est une directive puissante qui peut remplacer les priorités de l'analyseur du navigateur. N'oubliez pas que les navigateurs modernes sont assez bons pour hiérarchiser les ressources, alors utilisez le « conseil » de préchargement avec parcimonie.

Utilisez les connaissances nouvellement acquises sur les conseils de ressources pour accélérer la livraison de contenu et de ressources et améliorer les performances globales de votre site. Et n'oubliez pas de tester votre site Web dans le monde réel (en vous concentrant sur les données de terrain) chaque fois que vous apportez une modification.