J’aime bien ce blog, mais les exemples qu’il donne… je ne comprends pas.

– http://www.mucem.org/ : poids de la page (avec bloqueur) : 4,59 Mo
– https://hackstock.net/ : poids : 1,26 Mo (pour moins de 11 lignes de texte, 4 petites images et un menu)
– http://www.losangelesends.com/ : poids : 3,52 Mo
(les autres liens ça passe, même si ça ressemble pas forcément à quelque chose).

Je ne prétends pas être une référence, mais ma page d’accueil fait 0,7 Mo, avec des images, des styles et ce qu’il faut de scripts, et ne ressemble pas à une page blanche monochrome. Et 0,7 Mo, je trouve que c’est déjà beaucoup (cela dit, y a un peu plus que 11 lignes de texte).

Ce que je veux dire, c’est qu’il n’est pas nécessaire de sacrifier le design pour faire un truc léger.

Y a des technos et il faut les utiliser : minifier le code source ? Bullshit : si vous utilisez GZip, ça minifie déjà de façon intrinsèque et c’est plus performant dans l’ensemble sans charcuter la lisibilité du code ni abuser d’un service web externe.

Pensez également à utiliser une bonne gestion du cache, à la fois pour les fichiers à mettre en cache dans le nav, que pour le cache statique côté serveur : d’expérience, le gros du gain en perf vient de là.

**

Quant au poids des images…

Prenez son image de la fourmi, tout à la fin : elle fait 66 kio.

C’est pas mal, mais un simple coup de optipng dessus me la fait passer à 55 kio, et c’est gratuit en terme de qualité d’image. L’ouvrir dans Gimp, la réenregistrer puis la repasser sous optipng me fait passer ça à 52 kio

Ensuite, le PNG n’est pas optimal pour ce genre d’images. Le JPEG ou le WebP sont bien préférables.

Ainsi :
– son image (optimisée avec Gimp et Optipng) : https://lehollandaisvolant.net/img/c4/fourm.png (52 kio)
– une autre image d’une fourmi, mais en JPG : https://lehollandaisvolant.net/img/f3/fourmi2.jpg (infiniment plus jolie, de la même dimension : 53 ko — et si je passe un coup de jpegoptim dessus, je tombe à 50 ko, sans pertes).
– la même image de cette fourmi en JPG dégradé, mais conservant une qualité bien acceptable : https://lehollandaisvolant.net/img/36/fourmi3.jpg (21 ko !).

(source fourmi : https://www.flickr.com/photos/niznoz/141728051 )

Bref, quand il s’agit de réduire l’empreinte énergétique d’un site, vouloir le faire c’est pas mal, mais le faire vraiment c’est mieux.

Voir là pour d’autres astuces : https://lehollandaisvolant.net/tuto/pagespd/

— (permalink)