Les Priority & Resource Hints pour des pages web plus rapides

Qu’est-ce que les Resource Hints ?

Les Resource Hints sont des directives que vous pouvez fournir aux navigateurs pour leur indiquer comment gérer certaines ressources de votre site web. Ces directives permettent d’optimiser le chargement et l’affichage des pages en anticipant les besoins en ressources.

Les différents types de Resource Hints :

1. Preload
2. Prefetch
3. Preconnect
4. Prerender
5. DNS-prefetch
6. Modulepreload
7. Fetchpriority

Importance de ces techniques dans l’optimisation des performances web

Les Resource Hints jouent un rôle essentiel dans l’optimisation des performances web en réduisant les temps de chargement et en améliorant la fluidité de la navigation. Elles permettent de prioriser les ressources critiques et d’anticiper les besoins en ressources futures, offrant ainsi une meilleure expérience utilisateur.

Pourquoi utiliser les Resource Hints ?

• Amélioration de la vitesse de chargement : Les Resource Hints permettent de réduire le temps nécessaire pour charger les éléments critiques d’une page, améliorant ainsi la vitesse de chargement globale.
• Meilleure expérience utilisateur : Un chargement plus rapide se traduit par une expérience utilisateur plus agréable, réduisant le taux de rebond et augmentant le temps passé sur le site.
• Impact sur le référencement naturel (SEO) : Google et d’autres moteurs de recherche prennent en compte la vitesse de chargement des pages dans leur algorithme de classement. En améliorant les performances de votre site, vous pouvez obtenir un meilleur classement dans les résultats de recherche.

Preload : Charger les ressources critiques en avance

Le preload permet de charger des ressources critiques en avance, avant même qu’elles ne soient nécessaires. Cela permet de réduire les temps de chargement en assurant que ces ressources soient prêtes dès que le navigateur en a besoin.

L’attribut as spécifie le type de contenu à précharger (script, style, font, etc.). Cela aide le navigateur à prioriser et à gérer les ressources de manière plus efficace.

Exemples pratiques d’utilisation :

Le preload est particulièrement utile pour les ressources critiques comme les fichiers CSS, les polices de caractères et les scripts JavaScript nécessaires à l’affichage initial de la page.

• Fichiers CSS :

<link rel="preload" href="styles.css" as="style">Langage du code : HTML, XML (xml)

• Scripts JavaScript :

<link rel="preload" href="script.js" as="script">Langage du code : HTML, XML (xml)

• Polices de caractères :

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">Langage du code : HTML, XML (xml)

Prefetch : Anticiper les ressources futures

L’optimisation des performances web passe par une gestion efficace du chargement des ressources. L’attribut prefetch est une fonctionnalité qui permet d’anticiper les besoins futurs de l’utilisateur en chargeant des ressources non critiques avant qu’elles ne soient réellement nécessaires.

Contrairement à l’attribut preload, qui est destiné aux ressources critiques pour l’affichage initial de la page, le prefetch est utilisé pour les ressources futures moins prioritaires. Cela permet d’améliorer l’expérience utilisateur en réduisant les temps de chargement lors de la navigation entre les pages.

Cas d’utilisation de prefetch :

• Pages suivantes d’un site : Le prefetch peut être utilisé pour précharger les pages que l’utilisateur est susceptible de visiter ensuite. Par exemple, sur un site d’e-commerce, si un utilisateur consulte un produit, il est probable qu’il souhaite ensuite accéder à la page de paiement ou à son panier. En préchargeant ces pages, on réduit le temps d’attente pour l’utilisateur.
• Ressources non critiques mais probables : Le prefetch peut également être utilisé pour charger des ressources non critiques, mais qui pourraient être nécessaires plus tard. Par exemple, des images ou des scripts supplémentaires utilisés dans des sections d’une page web qui ne sont pas immédiatement visibles, mais que l’utilisateur pourrait consulter lors de sa navigation.

Exemple de code

Pour mettre en œuvre le prefetch, il suffit d’ajouter une balise link dans la section <head> de votre document HTML, avec l’attribut rel défini sur prefetch et l’attribut href contenant l’URL de la ressource à précharger. Voici un exemple :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de prefetch</title>
    <link rel="prefetch" href="https://example.com/image-supplementaire.jpg" as="image">
</head>
<body>
    <!-- Contenu de la page -->
</body>
</html>Langage du code : HTML, XML (xml)

Dans cet exemple, la balise link indique au navigateur de précharger l’image « image-supplementaire.jpg » hébergée sur le domaine « example.com ». L’attribut as permet de spécifier le type de ressource à précharger (dans ce cas, une image).

Preconnect : Établir des connexions à l’avance

Le preconnect permet d’établir des connexions avec des serveurs externes avant même que les ressources soient demandées, réduisant ainsi le temps nécessaire pour établir ces connexions plus tard.

L’attribut preconnect réduit la latence en préétablissant les connexions TCP et en résolvant les DNS à l’avance, ce qui accélère le chargement des ressources.

Exemples pratiques d’implémentation :

• CDN :

<link rel="preconnect" href="https://cdn.example.com">Langage du code : HTML, XML (xml)

• API tierces :

<link rel="preconnect" href="https://api.example.com">Langage du code : HTML, XML (xml)

Modulepreload : Préchargement des modules JavaScript

Le modulepreload est une directive spécifique pour les modules JavaScript, permettant de les précharger afin de réduire les temps de chargement lors de leur utilisation.

L’attribut modulepreload est utile lorsque vous utilisez des modules JavaScript pour structurer votre code. Il permet de s’assurer que les modules sont prêts à être exécutés dès que nécessaire.

Exemples d’utilisation pour les modules JavaScript :

<link rel="modulepreload" href="module.js">Langage du code : HTML, XML (xml)

Fetchpriority : Prioriser les ressources importantes

L’e’attribut fetchpriority permet de définir la priorité de certaines ressources, aidant le navigateur à gérer les ressources de manière plus efficace et à améliorer le temps de chargement.

Comment définir la priorité des ressources

Pour définir la priorité des ressources, vous pouvez utiliser l’attribut importance (qui est en fait un raccourci pour fetchpriority). Les valeurs possibles sont les suivantes :

• high : La ressource est critique pour l’affichage et l’interactivité de la page. Elle doit être chargée en priorité.
• low : La ressource n’est pas essentielle pour l’affichage initial de la page et peut être chargée avec une priorité inférieure.
• auto : La priorité est déterminée automatiquement par le navigateur en fonction du type de ressource et de son emplacement dans le document HTML.

Exemples pratiques d’implémentation :

<img src="image.jpg" fetchpriority="high">
<link rel="stylesheet" href="style.css" importance="high">Langage du code : HTML, XML (xml)

Prerender : Charger les pages futures en arrière-plan

Le prerender permet de charger des pages complètes en arrière-plan, y compris toutes les ressources associées, afin qu’elles soient instantanément disponibles lorsque l’utilisateur y accède.

Le prerender est mis en œuvre à l’aide d’une balise <link> placée dans la section <head> du document HTML. Cette balise contient l’attribut rel défini sur prerender et l’attribut href contenant l’URL de la page à précharger.

Voici un exemple de balise <link> pour précharger une page web :

<link rel="prerender" href="/page-suivante.html">Langage du code : HTML, XML (xml)

Dans cet exemple, la balise <link> indique au navigateur de charger en arrière-plan la page située à l’adresse « /page-suivante.html ».

Le prerender est particulièrement utile pour les pages que l’utilisateur est très susceptible de visiter ensuite, comme la page suivante dans un processus de navigation linéaire.

Le prerender peut consommer beaucoup de ressources. Il est donc important de l’utiliser de manière judicieuse pour éviter des surcharges inutiles.

DNS-prefetch : Résolution DNS anticipée

Le DNS-prefetch permet de résoudre les noms de domaine avant que les ressources associées ne soient demandées, réduisant ainsi la latence.

Le DNS-prefetch est particulièrement utile pour les ressources hébergées sur des domaines externes, comme les CDN ou les API tierces.

Exemples concrets d’application :

<link rel="dns-prefetch" href="//example.com">Langage du code : HTML, XML (xml)

Loading et decoding : Optimisation des images et iframes

L’attribut loading permet de différer le chargement des images et des iframes jusqu’à ce qu’elles soient sur le point d’apparaître dans le viewport, économisant ainsi de la bande passante et améliorant les performances.

Le lazy loading réduit le temps de chargement initial et améliore les performances pour les utilisateurs, surtout sur les pages contenant beaucoup d’images ou d’iframes.

L’attribut decoding peut être utilisé pour optimiser le rendu des images. Les valeurs possibles sont async, sync, et auto.

Exemples pratiques d’implémentation :

<img src="image.jpg" loading="lazy" decoding="async">
<iframe src="video.html" loading="lazy"></iframe>Langage du code : HTML, XML (xml)

Meilleures pratiques pour l’implémentation des Resource Hints

• Prioriser les ressources critiques : Identifiez et préchargez les ressources essentielles pour l’affichage initial de la page.
• Éviter les surcharges inutiles : N’utilisez pas les Resource Hints de manière excessive pour éviter de surcharger le réseau et les navigateurs.
• Tester les impacts sur les performances : Utilisez des outils comme Lighthouse et WebPageTest pour analyser et tester les impacts de vos optimisations.

Conclusion

Les Resource Hints sont des outils puissants pour améliorer les performances web. Ils permettent de réduire les temps de chargement, de fournir une meilleure expérience utilisateur et d’améliorer le référencement naturel.

Rappel des bonnes pratiques :

• Prioriser les ressources critiques
• Utiliser les Resource Hints de manière judicieuse
• Tester les impacts des optimisations sur les performances

Nous vous encourageons à expérimenter avec ces techniques et à les implémenter progressivement sur votre site pour constater les améliorations de performances.

FAQ