La vitesse de chargement des pages d’un site web est devenue un enjeu important au cours de ces dernières années. Les internautes (et mobinautes) veulent pouvoir naviguer sans attendre et c’est parce que les utilisateurs veulent des sites rapides que Google a certainement intégré cette dimension dans son algorithme de classement.
La vitesse de chargement : un enjeux majeur
Pour les débuts du web, il y a 20 ans, les pages des sites web ne devaient pas être lourdes au vu du faible débit de connexion et des navigateurs non performants. Si les fichiers d’un site étaient trop lourds, ses pages pouvaient mettre 15 minutes à se charger (beaucoup d’entre nous ont vécu cela dans les années 2000 ! ). Maintenant que nous sommes à l’ère des connexions haut-débit, les éditeurs des sites web sont devenus très laxistes dans la surveillance du poids de la page, ce qui se traduit par des sites pouvant atteindre 25 Mo par page (true story !). Le fait étant que ces chargements importent encore plus aujourd’hui qu’elles ne l’étaient à l’époque.
Comment avoir un site performant et qui charge rapidement ?
Bien souvent ce genre de problèmes fait peur car ils nous obligent à faire appel à un développeur si on ne possède pas les compétences techniques en interne. On pense bien souvent qu’il est nécessaire d’optimiser les performances de son serveur et de la mise en cache. Cependant, tous les problèmes de chargement de page ne sont pas si compliqués et nécessitent finalement que très peu de connaissances techniques.
Le poids des images
Le poids des images est souvent le problème majeur impactant la vitesse de chargement des pages d’un site. En effet à chaque fois que nous effectuons des tests de performances sur un site, les images représentent presque toujours la partie importante du problème. Les propriétaires des sites Web semblent oublier qu’il faut redimensionner et compresser les images avant de les télécharger. Il ne faut pas seulement laisser ce travail des compressions au CMS ou au serveur. Aujourd’hui, nous voyons souvent des pages avec plusieurs mégaoctets d’images sur leur page. En réalité le poids d’une page ne devrait jamais être supérieur à 1 méga-octet (au grand max), encore moins égal à plusieurs mégaoctets, mais c’est une constatation fréquente. En fait, de nombreux sites arrivent à plus de 10 Mo par page. En fait lorsqu’un site est trop lent c’est qu’il y a toujours un problème d’optimisation d’images.
Quelques conseils pour optimiser le poids de vos images :
1. Pensez à la taille des écrans
La taille d’un écran ordinateur Full HD est de 1920×1080. La taille d’un écran ordinateur portable « classique » est de 1368×768. Une image en pleine largeur n’a donc aucune raison de faire plus de 1920x1080px. En pratique c’est encore autre chose, le corps d’une page fait rarement plus de 1000px de large, vos images ne devraient donc théoriquement pas dépasser cette valeur. Cela dépend des sites et de leur activité. Mais en gros si vous possèdez un E-commerce sous prestashop, évitez les images de produits de 1000px et qui s’afficheront en 200x2OOpx sur vos pages liste.
2. Limiter la taille de vos images avant l’import
Le redimensionnement des images est très important. Par exemple, si vous disposez d’une image large de 2400px, réduisez sa taille pour obtenir une image entre 600px et 700px de large, ce qui généralement suffit amplement. En clair votre image était dans ce cas quasiment 4x trop grande ! Sachez qu’en limitant la taille des images vous réduisez également son poids.
3. Compresser vos images
La compression des images va vous permettre de diminuer le poids de vos images. Sachez qu’il existe des méthodes de compression qui limitent les pertes de qualités et de netteté. Il existe aussi des solutions en ligne gratuite qui permettent de réduire la taille de vos fichiers images, Kraken.io par exemple.
4. Choisir le bon Format : JPG et PNG
Les JPG utilisent ce qu’on appelle la compression « à perte ». Cela signifie que certaines données sont perdues de façon permanente lorsque le fichier est compressé. L’œil ne détecte généralement pas les données perdues, de sorte que vous obtenez un fichier plus petit avec une dégradation minimale. Les PNG utilisent ce qu’on appelle la compression « sans perte ». Sans perte signifie que lorsque le fichier est enregistré, les données ne sont pas perdues. L’image est ré-échantillonnée mais les données ne sont pas supprimées du fichier. Privilégiez donc ces deux types de format !