Comment optimiser son site web ?

L’optimisation des images : le moyen le plus facile et efficace de réduire le temps de chargement de vos pages web

Comment optimiser son site web ? …. La vitesse de chargement des pages web est importante tant pour le référencement que pour l’expérience de l’utilisateur, et portant la plupart des entreprises ne s’en rendent pas compte et négligent un aspect, très important dans ce domaine, qui est l’optimisation des images.

Au cours des dernières années, la vitesse de chargement des pages web est devenue un critère qui joue un rôle très important dans le classement des sites web sur les pages de résultats des moteurs de recherches et, par conséquent, dans le trafic généré par les résultats naturels. Les utilisateurs préfèrent les pages web qui se chargent vite, et Google n’a pas d’autre choix que de répondre à cette préférence. Toutes choses égales par ailleurs, les sites qui se chargent rapidement sont bien classés dans le moteur de recherche Google que ceux qui se chargent lentement.

 

Comment optimiser son site web ?

 

 

Il existe actuellement plusieurs aspects que vous pouvez améliorer afin d’optimiser la vitesse de chargement de vos pages web, et ce, en faisant appel à des professionnels chacun selon son domaine de compétence. Cela dit, tous les aspects liés au chargement de vos pages web n’ont pas le même degré de complexité et ne requièrent pas les mêmes connaissances techniques. Dans ce cas, ce qui nous importe, c’est la taille des images incluses dans les pages web dans le sens où ce sont les images qui sont le plus souvent la cause de la lenteur de chargement de certains sites web.

Heureusement, l’optimisation des images n’est pas une tâche difficile à accomplir.

Les images et la vitesse de chargement des pages web

Chaque fois que nous faisons le diagnostic de certains sites web en matière de vitesse de chargement, nous constatons que les images constituent presque toujours la majeure partie du problème. Il semblerait que ceux qui créent des sites Web oublient qu’il faut redimensionner et compresser les images avant de les envoyer sur les serveurs et se contentent de ce que font les CMS ou certains logiciels de compression « à la volée ».

De nos jours, il arrive souvent que nous voyions des pages web avec des images pesant jusqu’à quelques mégaoctets, alors que le poids d’une page web tout entière ne doit jamais dépasser un (1) mégaoctet. En fait, il existe de nombreux sites web qui ont des pages qui font plus de 8 Mo. Aucune page Web ne devrait jamais être aussi pesante, et quand cela se produit, c’est qu’il y a certainement un problème lié à l’optimisation des images y présentes.

Le simple fait de savoir comment bien redimensionner, compresser et sauvegarder au format adéquat une telle ou telle image peut vous aider à résoudre la majeure partie du problème lié à la taille de votre page web et, en conséquence, à la vitesse de son chargement.

Mais au fait, quand est-ce que ce problème a commencé à apparaitre ?

Lorsque j’ai commencé dans le développement web il y a presque 8 ans, les sites web n’avaient, à l’époque, pas de problème de chargement. Les pages web pesaient en moyenne 100 à 250 KB dans le code html, images, scripts et tout ce qui allait avec. D’ailleurs, le problème était plus lié aux navigateurs et connexions qui étaient lentes qu’au poids des images.

Maintenant que nous vivons dans l’ère des connexions rapides, les propriétaires de sites web négligent de plus en plus l’impact du poids de leurs pages web, ce qui se traduit par des sites web pouvant atteindre 25 Mo par page (selon de vraies données). Le problème est d’une certaine manière que la vitesse de chargement des pages web importe encore plus maintenant que dans le passé. Aujourd’hui, nous avons non seulement des paramètres restrictifs comme la compatibilité avec les appareils mobiles, mais aussi le classement dans Google qui est affecté par le temps de chargement des pages web.

Comme le temps de chargement des pages web est récemment devenu un critère très important, les entreprises ont commencé à faire appel à des infographistes spécialisés dans l’optimisation des images pour le web. Maintenant, cependant, la plupart comptent sur les CMS (système de gestion de contenu) pour le redimensionnement et la compression des images. Cela signifie que, dans la plupart des cas, l’optimisation d’une image donnée ne se produit qu’après son téléchargement. Ce processus se traduit par des images de poids très considérables et des pages web qui se chargent très lentement et, si de tels processus sont exagérément implémentés sur un site web, ils peuvent compromettre son classement sur les pages des résultats des moteurs de recherches.

Pourquoi ne pouvez-vous pas compter uniquement sur les CMS pour redimensionner et compresser vos images ?

Lorsque vous utilisez un CMS pour redimensionner une image, celui-ci ne modifie habituellement que la taille de l’image et ne la comprime pas, sinon elle est redimensionnée « à la volée » par votre serveur.

Si vous compressez une image (comme dans WordPress), le taux de compression est prédéfini, cela signifie que même si cela parait suffisant, la taille de votre image reste en moyenne plus grande de 15 à 30% qu’elle ne devrait l’être si elle avait été correctement compressée avant de l’envoyer sur le serveur. Si votre CMS redimensionne les images « à la volée », c’est-à-dire qu’elles sont redimensionnées lorsqu’elles sont servies, alors la compression est très faible, voire nulle.

Cela peut constituer un réel problème lorsqu’il s’agit d’un site ayant plusieurs images par page. Le plus souvent, dans les diagnostics réalisés, le poids des images constitue en moyenne 40 à 60 % du poids de la page, avec une économie potentielle de 30 à 50 % pouvant être réalisée si les images avaient été traitées avant leur chargement.

Alors, que devriez-vous faire avant de télécharger vos images ?

Préparation des images de votre site

Redimensionnement des images

Le redimensionnement des images est très important. Si vous avez une image de 2400 px de largeur et que votre page web a besoin d’une image de seulement 500 px de largeur, l’optimalisation qui se fait par le biais de votre CMS ne fait que redimensionner l’image de 2400 px à 500 px tout en préservant la totalité de son poids. Cela ne vous aidera en rien en matière d’économie de données à transférer.

Actuellement, la plupart des équipes de développement web ne disposent pas de personnes dédiées exclusivement au redimensionnement et à la compression des images à des fins d’optimisation de temps de chargement des pages web. Cela signifie que bien que l’on doive avoir plusieurs tailles d’images optimisées pour être affichées convenablement sur ordinateurs, tablettes et appareils mobiles, la plupart ne disposent pas de ressources pour le faire.

Si tel est le cas pour vous, la plus importante chose à faire avec n’importe quelle image à intégrer dans une page web, c’est de la sauvegarder dans une taille physique qui offre le meilleur rapport qualité/poids selon les dimensions requises. Cela signifie que si vous avez besoin d’une image de 800 x 600 pixels, assurez-vous de redimensionner l’image d’origine à 800 x 600 pixels avec un logiciel approprié comme Photoshop. Ensuite, même si vous devez l’optimiser davantage dans votre CMS, celui-ci effectue son optimisation sur une image de taille réduite au préalable.

Types de fichier

Jusque ici, nous avons compris que nous devons redimensionner et compresser l’image avant de l’envoyer sur le serveur d’hébergement du site web. Cependant, non seulement le fait de ne pas redimensionner et compresser l’image avant de la télécharger constitue un problème, mais le choix du bon type de fichier est devenu tout aussi problématique. La plupart de ceux qui s’occupent de la partie graphique dans un site web, notamment l’intégration des images dans les pages web, n’ont souvent pas d’expérience dans ce domaine, car, dans la plupart des cas, ils ne voient aucune différence entre l’utilisation des images au format JPG ou PNG.

En quoi cela importe-t-il ? Eh bien, lorsque vous utilisez le mauvais type de fichier, vous pouvez en augmenter inutilement le poids, parfois de façon considérable.

Alors, quels types de fichiers doit-on utiliser et en quel cas ?

Il existe plusieurs types de fichiers images, notamment JPG, GIF, PNG et WebP. Parmi ceux-ci, ceux que vous utiliserez le plus souvent sont les formats JPG et PNG.

Qu’en est-il des formats GIF et WebP ?

Le format GIF ne doit pas être utilisé à moins que l’on ait besoin d’intégrer une image animée. Par ailleurs, bien que le format WebP se révèle très prometteur grâce à ses algorithmes de compression sans perte « no-loss compression algorithms » et les images de haute qualité qu’il permet d’avoir, il est actuellement très peu pris en charge (uniquement par Opera et Chrome) et ne peut encore être traité que par des logiciels spéciaux.

Cela ne signifie pas pour autant que vous ne pouvez pas utiliser ce format, mais cela signifie que vous ne pouvez pas l’utiliser sans créer des solutions alternatives pour les navigateurs qui ne le prennent pas en charge. En tout cas, il est plus sûr de continuer à utiliser les formats standards qui sont JPG et PNG en attendant que le format WebP soit pris en charge par tous les navigateurs web. Il convient aussi de rappeler que ce format d’image peut réduire au maximum le poids des images sans en compromettre la qualité.

Choisir le bon type de fichier

Trop souvent, les gens choisissent le type de fichier sous lequel leurs images sont sauvegardées selon ce qui s’affiche par défaut dans leur programme de traitement d’images. Cependant, le mauvais choix du format de votre fichier image pourrait l’alourdir inutilement.

Il y a plusieurs facteurs à prendre en considération avant de choisir entre le format JPG ou le format PNG, mais la façon la plus simple à retenir est de vous demander : « mon fichier est-il une photo ou autre chose, comme une illustration artistique ou un logo ? » En règle générale, chaque fois que vous sauvegardez une photo, vous devriez utiliser JPG, pour tout le reste (que ce soit des logos, cliparts, etc.), vous devriez utiliser PNG.

Lorsqu’un mauvais format est utilisé, l’image peut être considérablement et inutilement alourdie. En outre, les images « line art » peuvent ne pas être aussi claires ou nettes lorsqu’elles sont compressées en mode « lossy » où les données sont perdues, comme avec un JPG.

Le format JPG vs le format PNG

La différence réside dans le fait que le premier subit une compression « lossy » (où il y a une perte de données) et le deuxième subit une compression « lossless » (où il n’y a pas de perte de données)

Le format JPG permet d’effectuer ce que l’on appelle une compression « lossy ». Cela signifie que certaines données sont perdues de façon permanente après avoir compressé le fichier. L’œil ne perçoit pratiquement pas qu’il y a eu une perte de données, et c’est pour cela que vous pouvez obtenir un fichier plus petit avec une dégradation minimale en qualité.

Bien sûr, cela dépend de la qualité du fichier JPG enregistré. Plus les données sont perdues, plus la qualité est réduite. Si le fichier JPG est sauvegardé avec une qualité trop faible, l’image aura une qualité tellement médiocre que des choses étranges commencent à apparaitre. Si vous souhaitez éviter ce problème, ne dépassez pas une perte de 50 % sur la qualité originale de votre image JPG lorsque vous la sauvegardez. Avec les cartes graphiques actuelles, un taux de 50% devrait laisser la qualité suffisamment élevée pour que l’œil ne perçoive aucune perte, mais assez basse pour économiser un maximum de poids.

ASTUCE : lorsque vous sauvegardez votre fichier JPG, utilisez le paramètre « affichage progressif », ceci permet à votre image de gagner en clarté à mesure que votre page web s’affiche. Les utilisateurs auront ainsi l’impression que votre page web se charge rapidement et en toute « fluidité ».
Le format PNG, quant à lui, permet d’effectuer ce que l’on appelle la compression « lossless ». L’option lossless ou « sans perte » signifie que les données ne sont pas perdues lors de la compression du fichier image. L’image est ré-échantillonnée et le « voisin le plus proche » de couleur similaire peut être utilisé lors de la compilation des données, mais les données ne sont pas supprimées du fichier.

Il existe deux types de formats PNG : le premier est un 24 bits et le deuxième est un 8 bits. Lorsque vous essayez de réduire la taille du fichier, vous pouvez choisir le paramètre PNG 8 bits. Vous pouvez même aller encore plus loin et réduire le nombre de couleurs dans votre fichier PNG.

ASTUCE : lorsque vous sauvegardez votre image en PNG en utilisant Photoshop, allez sur Exportation > Enregistrer pour le Web (hérité). Vous pouvez réduire le nombre de couleurs ou choisir l’option « noir et blanc », cela permet de réduire la taille de votre fichier PNG de 50 à 90 %.

Pour illustrer tout cela, j’ai pris le même fichier, un logo, que j’ai enregistré en PSD, en PNG 24 BIT et en PNG 8 BIT (en noir et blanc), comme vous le voyez ci-dessous. Nous pouvons voir une réduction importante en poids de fichier lorsque nous utilisons le format « PNG 8 BIT » en réduisant le nombre de couleurs à uniquement le nombre de couleurs nécessaires.

 

Il est donc clair que l’optimisation des images constitue un véritable enjeu dans l’optimisation du temps de chargement des pages web. Pourtant, c’est un problème qui est facile à résoudre. Il suffit d’avoir le bon outil de compression sur votre serveur et votre site, mais aussi d’optimiser les images avant de les télécharger. Cela vous permettra de réduire énormément le temps de chargement de votre site Web.

SEO, indexation « mobile-first » et taille d’images

Dans le courant de cette année, Google aurait passé à l’indexation mobile-first, ce qui signifie qu’il irait utiliser votre site mobile pour déterminer le classement de votre site web. Cependant, à ce moment-là, nous ne savons pas comment ils vont évaluer les utilisateurs de bureau et la vitesse de chargement des pages web. En outre, les sites lents continueront à créer des désagréments à vos utilisateurs. Cela dit, ce qui est sûr, c’est que la réduction de temps de chargement de vos pages web vous permettra d’améliorer l’expérience utilisateur et de réduire le taux de rebond.

Rappelez-vous, la vitesse de chargement de vos pages web est importante pour vos utilisateurs, et elle importe autant pour l’indexation mobile. Si vous ne faites pas de votre mieux pour optimiser vos pages pour en réduire le temps de chargement, vous finissez par perdre vos utilisateurs et, éventuellement, en classement sur les moteurs de recherche.

Les efforts que vous faites pour l’optimisation des images intégrées dans vos pages web ne seront pas vains. Presque tous les sites que j’ai vérifiés au cours des trois dernières années avaient un problème avec l’optimisation des images. Est-ce que le vôtre aussi ? Alors, si vous pouviez économiser 20 à 40 % du temps de chargement de votre page, cela ne valait-il pas la peine ?

SEO Montreal

Nous sommes une société de marketing numérique qui vise à aider nos clients à atteindre d'excellents résultats dans plusieurs domaines clés.

Demander un devis

Nous offrons des services de référencement professionnel qui aident les sites Web à augmenter radicalement leur score de recherche organique afin de rivaliser pour le classement le plus élevé, même lorsqu'il s'agit de mots-clés hautement compétitifs.

More from our blog

See all posts