Beaucoup de visiteurs ouvrent votre site en 4G avec un forfait limité, dans le métro ou en zone mal couverte. Une page avec plusieurs grosses photos leur semble en panne et ils partent avant la fin du chargement.
Bonne nouvelle : les images sont le problème de vitesse le plus simple à corriger, et vous pouvez le faire par le chat.
Les images sont souvent le poids principal d'une page. Redimensionnez-les à la taille d'affichage, utilisez WebP ou un format moderne, et chargez en différé celles qui sont sous le premier écran.
Redimensionner avant d'importer
Une photo brute de smartphone peut peser plusieurs mégaoctets et faire des milliers de pixels de large, alors qu'elle s'affiche dans un cadre de quelques centaines de pixels. Visez environ le double de la largeur d'affichage pour les écrans nets, pas davantage.
- Image d'en-tête pleine largeur : 1600 à 2000 pixels suffisent.
- Cartes et vignettes de produits : 600 à 800 pixels.
- Logos et icônes : utilisez le SVG, net et très léger.
Choisir le bon format
WebP (et AVIF quand c'est pris en charge) donne souvent des fichiers bien plus petits que JPEG ou PNG à qualité comparable. Gardez le JPEG en secours pour les photos et évitez le PNG pour les photographies, trop lourd. Une qualité de 75 à 80 % ne se voit généralement pas.
Charger intelligemment
Les images sous le premier écran ne doivent se charger que lorsque le visiteur s'en approche (chargement différé). L'image principale en haut doit en revanche se charger tout de suite, car c'est la première chose vue.
Donnez aussi une largeur et une hauteur, ou un ratio fixe, à chaque image pour que la page ne saute pas. Et si une image contient du texte avec accents (é, è, ç, œ), préférez du vrai texte HTML : il reste net et lisible.
Un prompt à copier-coller
« Optimise toutes les images de ce site pour les données mobiles. Convertis les photos en WebP, redimensionne chacune à deux fois au maximum sa taille d'affichage, charge en différé tout ce qui est sous le premier écran sauf l'image d'en-tête, fixe les ratios pour que rien ne saute et ajoute de courts textes alternatifs descriptifs. »
Ensuite, ouvrez le site sur votre téléphone en coupant le Wi-Fi et comparez la rapidité d'apparition du premier écran.