Lorsque vous cherchez des moyens pour améliorer les performances de votre site, l‘optimisation des images doit être l’une de vos priorités. Les images sont essentielles pour offrir une expérience utilisateur riche, mais peuvent avoir un coût élevé pour la vitesse de votre site.
Le nombre d’octets d‘images chargés sur une page web a augmenté de 279 % pour les ordinateurs de bureau et de 1017 % pour les mobiles depuis 2011.
Parmi les millions d’URL explorées par HTTP Archive, les images représentent 33 % du poids d’une page de bureau et 39 % du poids d’une page mobile.
Conseil 1 : réduisez le nombre d'images
Si les images n’apportent pas de valeur ajoutée, elles ajoutent une complexité inutile et peuvent devenir une distraction.
Une recherche menée par Google en 2016 a révélé que sur mobile, les sessions converties comptaient 38 % moins d‘images téléchargées que les sessions non converties.
La raison pour laquelle un plus grand nombre d’images peut entraîner moins de conversions est en partie due au gonflement des images – favicons inutiles, vignettes, images de produits et logos – qui peuvent ralentir une page sans ajouter de valeur.
Essayez de remplacer les images par un style CSS lorsque c’est possible, afin de réduire cette surcharge et de limiter les redondances.
Une fois que vous vous êtes débarrassé des images redondantes et inutiles, vous pouvez encore en réduire le nombre avec des sprites CSS. Pensez aux icônes de Google. L’interface utilisateur de Google est épurée, mais la plupart des icônes de navigation qu’il utilise sont chargées dans un seul sprite CSS.
La concentration d’images statiques en un seul fichier sprite peut réduire le nombre total de requêtes sur une page et faciliter la mise en cache.
Si le nombre de requêtes n’est pas aussi important avec HTTP/2 en raison du multithreading, il peut néanmoins être utile, en fonction de votre site.
Testez toujours avant de mettre en œuvre cette solution, et gardez à l’esprit que la concentration des images peut augmenter la taille totale du fichier, de sorte que si des modifications sont apportées fréquemment au fichier, tout gain de performance sera probablement perdu.
Conseil 2 : Chargez d'abord les images essentielles
Les sites chargent souvent le contenu en dessous du pli avant le contenu au-dessus du pli. Les images héroïques peuvent être reléguées au second plan au profit de carrousels défilant avec des vignettes hors écran.
Ces images ne sont pas vues initialement par l’utilisateur final, mais elles peuvent avoir un impact sur les performances de la page.
Au lieu de charger d’abord les images non critiques, donnez la priorité au contenu essentiel. Les images de héros, les icônes de navigation et les images de produits peuvent toutes être considérées comme critiques, car l’utilisateur en dépend pour prendre sa décision d’achat.
Une autre façon de réduire la quantité d’images sur la page consiste à charger paresseusement les images qui sont hors écran et sous le pli.
Le chargement paresseux utilise JavaScript pour empêcher la page de demander des fichiers que l’utilisateur ne voit pas. Le chargement des seules images que l’utilisateur peut voir nécessite moins de données que le chargement de la page complète à chaque fois.
L’inconvénient est que l’implémentation standard du chargement paresseux fait que le téléchargement des images ne commence que lorsque l’utilisateur fait défiler la page jusqu’à cet endroit. Vous pouvez contourner ce problème en chargeant automatiquement les fichiers sous le pli et hors écran une fois que les images critiques sont téléchargées.
Conseil n° 3 : compresser et réduisez les données d'image
La qualité acceptable des images varie selon le site. Cependant, il existe quelques bonnes pratiques qui visent à améliorer l’expérience des utilisateurs (UX).
- Choisissez le bon format de fichier pour le type d’image
- Supprimez les métadonnées et supprimez les images
- Redimensionner les images pour l’utilisateur final
- Assurez-vous que l’image est toujours belle
- Choisir le bon format de fichier pour le type d’image
- Le choix du bon format de fichier dépend de vos exigences visuelles et des performances souhaitées. L’image doit-elle être photoréaliste ? S’adapter à toutes les tailles ? Est-elle en partie transparente ?.
On peut en dire plus sur les formats d’image, mais en général, il est préférable d’utiliser :
- SVG lorsque l’évolutivité et la conception réactive sont importantes.
- PNG pour la transparence, les logos et les icônes
- JPEG pour les images nécessitant du photoréalisme
- Bien que WebP puisse bénéficier d’un support plus large à l’avenir, en particulier sur les navigateurs mobiles, assurez-vous que chaque utilisateur qui vient sur votre site peut voir les images de base. Cela peut même signifier l’utilisation de WebP et la dégradation progressive vers un autre format d’image.
Supprimez les métadonnées
Tous ces formats d’image peuvent être compressés (à l’exception du SVG, qui peut être réduit et débarrassé de ses métadonnées). Pour déterminer les niveaux de qualité des images, envisagez d’effectuer un test A/B pour voir quels types de configurations d’images suscitent un engagement et des conversions plus élevés.
Optimisez votre site et améliorez sa performance
Si vous souhaitez développer votre site internet et améliorer sa performance, vous devez choisir la bonne adresse, SEO Proxiweb. Nous mettons à votre disposition notre équipe de développement web pour un site performent et une expérience utilisateurs excellente.
Puisque l’UX et un facteurs nécessaire pour le référencement naturel de votre site, on vous invite aussi à lire notre article de blog sur l’importance de référencement web qui présente la spécialité de SEO Proxiweb.
PROXIWEB