Petite mise à niveau de cette page avec mes récentes découvertes (async, defer, json…).
Bref, un tas de bonnes pratiques pour les performances (mais aussi un brin d’accessibilité).

**

Il faut aussi noter que les outils comme GTMetrix font des analyses instantanées d’une page : ils ne regardent pas le contexte global dans lequel une page est vue par le navigateur.

En ce qui me concerne, je préfère avoir une seule image d’illustration : que l’article soit dans un petit bloc ou dans un gros bloc, l’image est unique. Et si le visiteur visite deux pages à la suite, il n’aura à télécharger le fichier qu’une seule fois.
C’est le cas par exemple pour les images d’illustration des articles sur le blog.

Bien souvent, en revanche, GTMetrix me dit de spécifier des images à la bonne taille pour chaque affichage : donc une petite et une grande. Si l’utilisateur affiche les deux pages à la suite (très courant pour mon site), alors il devra télécharger plusieurs images… Ce n’est donc pas optimal.

Il faut donc appliquer tout ça de façon pragmatique et réfléchie, pas appliquer bêtement juste pour avoir un bon score à tout prix (justement par ce que ce score ne reflète pas une navigation réelle).

Même chose pour l’aliasing sur les images : parfois un gros PNG en 1000x1000 sera bien plus léger qu’un PNG mis à l’échelle en 500x500.
Or, GTMetrix dira que votre image est trop grande et devra être réduire de moitié. Il dira même que votre image sera 50% plus légère, ce qui est faux.

Exemple :
https://lehollandaisvolant.net/img/45/1000x1000.png (1,9 ko)
https://lehollandaisvolant.net/img/3a/500x500.png (2,5 ko)

Ceci vient du fait que PNG aime les applats de couleur unis, et que si on réduit une image, il y a un flou sur les applats, ce qui casse ce cote uni et coûte cher en taille de fichier. Ceci est un exemple bidon, mais il illustre bien le concept, et il est assez courant.

— (permalink)