Images : comment améliorer vos performances de chargement ? (Acte 1)
Ecrit par Mathieu CHAPON
le
Imaginerait-on un site sans visuel ? La réponse est non. Outre l’aspect graphique et esthétique, un message passé visuellement a plus d’impact que la lecture d’un texte. Le point négatif ? Le poids de ces vecteurs. En effet, d’après les diverses études remontées, le poids d’une page HTML serait composé à 53% d’images. Un élément qui n’est donc pas à laisser de côté lorsqu’on parle de performances.
Plusieurs techniques existent pour optimiser le chargement de vos images : lazy loading, jpeg progressive, CDN … Search Foresight fait le tour de la question en 2 actes, dont le premier est à suivre. (La seconde partie est prévue prochainement !)
Qu’est-ce que le lazy loading ?
Cette technique a pour but de différer le chargement d’une ressource de la page. Concrètement, l’élément concerné n’est chargé puis affiché qu’à partir du moment où il est visible par l’internaute. Si cet élément se situe en bas de page, par exemple, il ne sera pas affiché tant que l’internaute n’aura pas scrollé jusqu’au bas de la page.
Le lazy loading permet donc d’éviter : le gaspillage de data, du temps de traitement côté navigateur (décodage et affichage) … ces différents gains auront par conséquent un impact sur les temps de chargement de votre site.
Focus Lazy Loading Images
Le Lazy loading peut s’appliquer à plusieurs objets comme les images, les vidéos ou encore les publicités. Dans cet article on se focalisera uniquement sur le lazy loading image.
Teasing : un article sur le lazy loading vidéo sera disponible dans les semaines à venir.
Quel fonctionnement ?
Dès lors que l’internaute entre sur la page, tous les visuels se chargent en une première version et dès que le visiteur atteint un visuel, une deuxième image de meilleure qualité se charge.
Pour le visiteur, la lazy loading est transparent : lorsqu’il atteint le visuel, l’image s’affiche avec la qualité attendue.
Les backstages
Pour chaque image affichée, nous avons en réalité 2 visuels renseignés : une première version utilisée pour les bots, et une seconde de qualité supérieure pour les visiteurs. Mais comment cela fonctionne ?
Lorsque les images placées dans les <img> sont candidates au lazy load, les bots utilisent du JavaScript pour vérifier leurs présences dans du viewport (la partie visible par l’internaute). Si le visuel est dans le viewport, l’image de qualité supérieure est chargée.
Image : à gauche l’image chargée; à droite l’image dans le viewport
Plusieurs intersections peuvent être utilisées pour activer le lazy laoding : scroll, resize, observer …
L’intersection observer est préférée pour sa performance et son efficacité.
Comment fonctionne l’intersection « observer » ?
Il suffit de placer dans la balise de l’image un attribut classe identifiable (ex : lazy), qui sera l’élément sélectionné avec Javascipt. L’attribut du « src » fera référence à l’hébergement où se situe l’image qui devra apparaître au premier chargement de la page. Quant aux attributs « data-src » et « data-srcset », ils indiquent les emplacements des images qui devront être chargées lorsque l’élément se trouvera dans le viewport.
Une limite existe à cette technique : sa compatibilité avec les navigateurs. Pour tester la compatibilité d’un élément JS avec les navigateurs, vous pouvez utiliser le site de Caniuse :
Dans le cas où l’intersection n’est pas supportée, il existe 2 méthodes pour arriver à vos fins :
- Les Polyfills : un script qui permet de fournir une technologie extra à tous les navigateurs
Une fois implémentés, 2 scénarios possibles :
Le navigateur supporte la technologie souhaitée -> le polyfill n’intervient pas
Le navigateur ne supporte pas la technologie souhaitée -> le polyfill permet d’utiliser la technologie en question - Utiliser des event handlers
Comment fonctionnent les event handlers ?
Alors que cette technologie est la méthode la plus compatible avec les navigateurs, elle est aussi plus compliquée à mettre en place.
En effet, alors que l’intersection observer utilisait qu’en seul event, cette méthode peut utiliser scroll, resize, orientationchange et getBoundingClientRect pour déterminer la présence de l’image dans le viewport.
Lazy loading et CSS
Bien que le moyen le plus courant pour afficher une image dans une page soit le code HTML, il est également possible d’utiliser un fichier CSS et sa propriété background-image.
En règle générale, si le navigateur voit une règle, s’appliquant à un élément extérieur, qui n’a pas lieu d’être appliquée au vu de la construction de la page, la ressource demandée ne sera pas requêtée.
Ce comportement (spéculatif) conjugué au JS peut être utilisé pour différer le chargement d’une image. Lorsque l’image est dans le viewport et appliquée à une class engendrant la propriété background-image, l’image est alors téléchargée quand nécessaire et non au chargement initial.
Dans le fichier CSS, 2 images peuvent être utilisées :
- une première correspondant au « placeholder » image
- une seconde correspondant à l’image à afficher lorsque l’élément est dans le viewport
L’utilisation du JavaScript permettra comme précédemment de déterminer si l’élément est présent dans le viewport !
Les bénéfices SEO du lazy loading :
La bonne mise en place du lazy loading va permettre d’optimiser vos temps de chargement. En effet, toutes les images qui ne sont pas apparues dans le viewport seront uniquement appelées dans leur version « light ». Pour ne pas dégrader vos performances, assurez-vous que la mise en place de votre lazy loading permet le chargement de toutes les ressources utiles, si elles sont dans le viewport ou non. Les balises <noscript> sur vos images permettront d’assurer qu’elles soient bien crawlées par les Google bots et visibles par les internautes ne supportant pas le Javascript.
Comme on a pu le constater, la méthode du Lazy Loading agit sur les visuels situés au-dessous de la ligne de flottaison. Est-il néanmoins possible d’optimiser ses performances avec tous les visuels ? La réponse est oui, notamment avec le Jpeg Progressive.
Qu’est-ce que le jpeg progressive ?
Le Jpeg est un format d’image « matriciel » avec perte, c’est-à-dire qu’à la compression de l’image on assiste à une perte de données irréversible.
En effet, la compression associe à 2 pixels de différentes couleurs, 1 seul pixel de la couleur moyenne. Cette solution a pour conséquence une dégradation de la qualité de l’image, mais permet un chargement plus rapide du visuel.
Une alternative a alors été trouvée : le jpeg progressive, qui joue sur la façon d’afficher le visuel et non sur l’image intrinsèque.
Quel fonctionnement ?
Alors que le chargement classique d’une image se fait lorsque de haut en bas lorsque toutes les données sont reçues, le jpeg progressive permet d’afficher chaque pixel reçu. Quelle différence ? Le premier rendu par le jpeg progressive n’est pas dans sa version finale. Une première version s’affiche, puis la qualité s’améliore au fur et à mesure que les pixels sont reçus.
Pour gagner en efficacité sur le premier rendu, JPEG convertit les pixels Rouge, Bleu et Vert en YCBCR. Ce dernier se compose d’un signal de luminance (Y) et 2 chroma (Cb et Cr). L’œil étant plus sensible à la luminance qu’au chroma, la réception de luminance avant la couleur affecte la perception que nous pouvons avoir de l’image et nous lui attribuons une qualité qu’elle n’a pas encore. Le temps de scruter attentivement l’image à l’œil, le visuel aura été totalement chargé et affiché.
Image : chargement de qualité moindre à qualité finale
Les backstages
Pour mettre en place le Jpeg Progressive, un simple script suffit ! L’idée est de placer dans un dossier les images compressées que vous souhaitez soumettre au Jpeg progressive et les convertir en Progressive. Comment ? Pour la compression, vous pouvez utiliser l’outil ImageMagick. Ensuite, grâce à la ligne de commande « JPG DO CONVERT » vous pouvez convertir toutes les images de votre dossier en progressive. Indiquer simplement, en fin de ligne de commande, le dossier où vous souhaitez récupérer vos images converties. Une fois la commande lancée, vos images converties vous attendront dans le dossier indiqué.
Les bénéfices SEO du jpeg progressive
La compression des images dégradera sans doute légèrement la qualité de l’image, mais permettra tout de même de réduire la taille de l’image entre 2 et 10%. Ce gain aura un impact sur les requêtes serveur plus courtes et plus efficaces, ce qui jouera également sur la bande passante.
Notons également que l’expérience utilisateur est nettement améliorée, notamment sur mobile ou avec une connexion Internet lente, puisque le mode d’affichage de l’image ne donne pas la sensation de lenteur que l’on pourrait avoir avec un chargement classique haut/bas.
Faites vous-même le test !
Après avoir installé ImageMagick en prenant bien soin d’installer les « legacy utilities » et plus précisément « convert », crawlez votre site avec votre outil préféré. Récupérez toutes les images que vous souhaitez.
Faites ensuite un « wget -i listedevosimagesàrécupérer.txt » en prenant soin de vous mettre au préalable dans un dossier qui pourra accueillir toutes les images.
Enregistrez ensuite le code suivant en .cmd avec le nom que vous voulez :
« FOR %%G IN (*.jpg) DO convert « %%G » -interlace line « output/%%G » »
Vous placez le fichier .cmd dans le dossier où se trouvent vos images, vous créez un dossier «output » (ou autre d’ailleurs, mais il faudra alors changer le code ci-dessus) et lancez le .cmd en double cliquant dessus. Observez le résultat dans le dossier « output ».
CDN : content network delivery
Il s’agit cette fois avec les CDN d’optimiser le temps de réponse en hébergeant vos images sur un autre serveur. En effet les CDN sont des réseaux de serveurs disséminés partout dans le monde. Le but étant d’héberger vos ressources sur le serveur se situant le plus près de vos utilisateurs.
Leur proximité géographique permet donc de réduire les temps de chargement … mais pas que !
En effet, lorsque vos ressources sont hébergées sur votre site, le navigateur peut uniquement en charger entre 2 et 8 en parallèle. Si vos images sont hébergées sur un domaine distinct, vous pouvez alors multiplier par 2 cette limite.
Et on n’a pas fini …
Comme évoqué en préambule, ce vaste sujet du temps de chargement images sera complété dans un second article, attendu pour la fin de l’année.