J’ai mis à jour cette page.

J’ai ajouté :

L’utilisation du CSS font-display pour les polices d’écriture.
Il gère la façon dont le le navigateur affiche/attend le chargement de la police.
C’est à cause de ça que, parfois, les pages affichent un texte vide tant que la police n’est pas chargée.

On peut contrôler ça :

font-display: fallback;

réduit à 100 ms le temps d’attente avec le premier affichage de texte. Si la police est chargée, elle l’utilise ; sinon, elle utilise la police fallback (une police système de préférence). Pour le corps du texte, c’est ce qu’il y a de mieux.

font-display: block;

force l’attente du chargement de la police. C’est utile si vous utilisez les webfont pour vos icônes. Sans ces polices, les icônes ne s’affichent pas et aucune police système ne les remplacera. Il faut donc l’attendre.

D’autres valeurs sont possible, voyez là.

L’utilisation des src-set pour les images.

Cela permet de dire au navigateur quelle image charger pour quel taille d’écran. Ça oblige d’avoir plusieurs tailles de chaque image sur le serveur, mais ça évite à un mobile en 3G de charger image en 4K de 3 Mo là où une image de 640px suffit.

Bien-sûr, si la taille de l’écran change, il peut arriver que ça fait plus de données à afficher. Mais soyons sérieux : est-ce que vous changez souvent la taille de votre écran/fenêtre ? Et sur mobile, passez-vous toute la journée de paysage à portrait et inversement ?

L’ajout de l’attribut loading sur les images.
C’est le projet du lazyload natif en HTML. Ajoutez juste ça sur vos images et iframes :

<img src="" alt="" loading="lazy" />

Ce n’est pas encore supporté partout, juste sur Chrome/Opera, mais c’est en bonne voie et il ne faut pas s’en priver.

— (permalink)