Reflow = une opération qui vient changer le layout d'une partie ou toute la page. Exemple : changement des dimensions d'un élément, mise à jour de sa position left,... Les reflow sont coûteux car on force le navigateur à recalculer la hauteur/largeur/position des éléments dans la page.
Repaint = similaire au reflow (ils forcent le navigateur à re-render une partie du document). Mais ils n'affectent pas les dimensions ou positions des éléments ! Exemple : changement de la couleur du bouton au hover.
Ce qui déclenche un reflow ou repaint :
Le chargement initial d'une page
Les opérations sur le DOM (exemple : ajout ou suppression d'élément)
Un changement sur une propriété qui affecte la dimension/visibilité/position d'un élément (que ça soit via du js ou une animation css)
"Decoding and rendering images is very resource-intensive" => réduire le nombre d'images, la qualité et la quantité
Lighthouse (google) recommande de servir les images dans des formats next gen pour réduire la taille de la donnée qui doit être téléchargée. Mais les nouveaux formats sont plus lent à décoder, surtout sur mobile. => à vérifier : probablement mieux de mettre plus de temps à décoder que d'envoyer moins de donnée ?