Rapide sur mobile : ce qui a réellement fait bouger les chiffres
Quatre changements qui ont fait l'essentiel du travail sur téléphone, dont deux qui ressemblent à de bonnes pratiques et aggravaient la situation.
Les conseils de performance mobile se résument le plus souvent à une liste de choses à activer. D'expérience, les gains viennent plutôt de l'identification des deux ou trois éléments déjà présents sur la page qui coûtent cher en silence, et la plupart paraissent corrects dans le code.
backdrop-filter est l'élément le plus coûteux de votre page
Les surfaces en verre dépoli imposent un repeint plein écran à chaque image du défilement. Sur iOS Safari, cela suffit à maintenir une page sous soixante images par seconde quoi que vous corrigiez par ailleurs. Nous le désactivons entièrement en dessous de 768 pixels. Personne n'a jamais remarqué la différence sur un téléphone ; le défilement, lui, est nettement plus fluide.
loading="lazy" ne diffère pas toujours
Une image en chargement différé natif n'est réellement différée que si le navigateur sait qu'elle est loin de la fenêtre. Si la section est montée avant que la mise en page ne l'ait positionnée, le navigateur tranche « assez proche » et charge immédiatement. Nous avions une bande vidéo et deux portraits onze écrans plus bas, chargés dès le premier rendu, tous marqués lazy et tous conformes à la spécification.
La solution consiste à conditionner l'élément à un observateur d'intersection, pour que rien ne soit demandé avant que la section n'approche vraiment de l'écran. Sur notre propre page, cela représentait 232 Kio et six points Lighthouse récupérés sur du contenu que personne n'avait fait défiler.
L'indicateur de chargement était le décalage de mise en page
Chaque étude de cas de ce site affichait un décalage cumulé de 0,546, soit trois fois la note d'échec. La cause : une route chargée à la demande dont l'écran d'attente était un petit indicateur. La page affichait un espace de 200 pixels, puis le remplaçait par l'article réel, et tout ce qui suivait se déplaçait.
Charger cette route immédiatement coûte 1,7 Ko compressé. Le décalage est passé à 0,001. Un morceau différé n'est pas gratuit si l'espace qu'il occupera est inconnu.
Redimensionnez les images avant qu'elles n'arrivent dans le dépôt
Le point le moins astucieux de la liste, et généralement le plus rentable. Deux portraits de fondateurs sont arrivés en PNG de 2 Mo. À la taille où ils s'affichent réellement, réencodés en WebP, ils pèsent 54 et 45 Ko à eux deux : 96% de moins sans différence visible. Les logos clients de ce site pesaient 200 Ko chacun jusqu'à ce que quelqu'un les mesure.
Comment savoir que ça a marché
Mesurez la même page avant et après, sur un profil mobile bridé, et conservez les chiffres. Chacun des changements ci-dessus a été justifié par une paire de mesures plutôt que par une règle, et l'un d'eux, la route chargée immédiatement, va à l'encontre du conseil habituel.