Le navigateur charge et affiche séquentiellement les ressources telles que HTML, CSS, JavaScript et les images. Cependant, l'utilisation d'attributs tels que `async`, `defer`, `preload`, `media`, `loading="lazy"`, `srcset` et `sizes` permet d'optimiser la vitesse de chargement.
En particulier, pour les images, les attributs `loading="lazy"`, `srcset` et `sizes` permettent de sélectionner l'image optimale en fonction de la taille de l'écran et de retarder le chargement des images inutiles, améliorant ainsi la vitesse de chargement de la page.
Des attributs tels que prefetch, preconnect et dns-prefetch sont efficaces pour améliorer la vitesse de transition des pages en préchargeant les ressources de la page suivante.
Les navigateurs effectuent généralement le rendu dans l'ordre suivant :
- Analyse HTML (de haut en bas, head -> body) :
1. Analyse HTML et création du DOM 2. Chargement et application des fichiers CSS (blocage du rendu) 3. Chargement et exécution des scripts (blocage du rendu)
4. Rendu du contenu de la section <body> (images, texte, etc.)
Le contrôle des priorités des ressources du navigateur permet d'optimiser la vitesse de chargement des pages.
Nous souhaitons documenter les principaux attributs ci-dessous qui permettent d'améliorer l'ordre de rendu.
async : Téléchargé en parallèle de l'analyse HTML et exécuté immédiatement après le téléchargement. S'il existe une dépendance entre une ressource de la page et ce script js, il est préférable de supprimer l'attribut async.
defer : Téléchargé en parallèle de l'analyse HTML et exécuté une fois l'analyse HTML terminée. = L'ordre est garanti. Si l'exécution doit avoir lieu après le rendu complet du code HTML, il est conseillé d'ajouter l'attribut defer.
Par défaut, le navigateur charge d'abord le code HTML. Si une source de script se trouve dans la balise head, le rendu est bloqué. L'ajout des deux attributs ci-dessus permet d'éviter le blocage du rendu HTML.
CSS
stylesheet : Valeur par défaut. Il s'agit d'un élément qui bloque le rendu et est utilisé lorsque le chargement du CSS est indispensable.
preload : Téléchargement anticipé sans bloquer le rendu. Il devient un stylesheet au moment de l'événement onload et le style est appliqué.
media : Rendu uniquement si les conditions de taille d'écran sont remplies.
Images
loading="lazy" : Le chargement se fait lorsque l'image apparaît à l'écran (lorsque la position du défilement est proche de l'élément contenant l'image).
srcset : Sélection de l'image optimale en fonction de la taille de l'écran (optimisation de la taille des images).
sizes : Fournit une indication au navigateur pour qu'il sélectionne l'image appropriée en fonction de la taille de la fenêtre d'affichage.
Dans le cas de la dernière balise img, si des images de 480 px et 1024 px de largeur sont disponibles, l'attribut size affiche une image de 480 px si la largeur maximale est de 600 px, et une image de 1024 px sinon.
* Dans le commerce électronique, des dizaines d'images peuvent être présentes sur une seule page. La réduction de la taille des images a donc un impact significatif.
Par exemple, la page de résultats de recherche contient au moins 20 images, et la recherche est effectuée 100 000 fois par jour…
Autres
rel="prefetch" : Téléchargement anticipé des ressources avant le changement de page pour améliorer la vitesse de chargement de la page suivante.
rel="preconnect" : Configuration préalable de la connexion réseau pour un lien spécifique (vidéos volumineuses, polices, etc.).
rel="dns-prefetch" : Recherche du DNS des ressources externes pour un chargement plus rapide des ressources (principalement CDN externes).
* preconnect vs dns-prefetch
preconnect implique une connexion TCP (DNS - handshake TCP - handshake TLS), il s'agit donc d'une opération lourde qui accapare les ressources du navigateur. Utilisé lorsque le chargement rapide des ressources externes est nécessaire (ressource très importante et rendu rapide essentiel).
dns-prefetch ne recherche que le DNS, l'opération est donc plus légère. Adapté aux ressources non critiques et chargées ultérieurement.