Apprentissage d'une session WebPageTest sur CSS-Tricks

Je me suis réunie avec Tim Kadlec de plus sur WebPageTest l'autre jour pour utiliser un peu de tests de performances sur CSS-Tricks. Utilisez essentiellement l'outil, perdez-vous et identifiez des points de douleur de performance sur lesquels travailler. Vous pouvez regarder la vidéo ici sur le site, ou sur leur canal Twitch, qui vaut une abonnerie pour plus d'enquêtes sur les performances comme celles-ci.

Le travail de performance Web est double:

Étape 1) Mesurer les choses et explorer les problèmes
Étape 2) Réglez-le

Tim et moi, via l'outil incroyable qui est WebPageTest, avons fait beaucoup d'étape 1. J'ai pris des notes pendant que nous avions piqué. Nous avons trouvé un certain nombre de zones problématiques, certaines assez grandes! Bien sûr, après tout cela, je ne pouvais pas les sortir de ma tête, j'ai donc dû entrer en action et faire les trucs de l'étape 2 dès que possible, et je suis heureux de signaler que j'ai fait la plupart et j'ai vu une amélioration. Crétons!

Problème identifié n ° 1) Mauvais LCP

La plus grande peinture contente (LCP) est l'un des principaux vitaux du Web (CWV), que tout le monde regarde attentivement en ce moment avec Google qui nous dit que c'est un facteur de référencement. Mon LCP était à 3,993s, ce qui n'est pas génial.

J'ai appris de Tim que c'est idéal si la première peinture contente (FCP) contient le LCP. Nous pouvions voir que cela ne se déroulait pas via WebPageTest.

Choses à réparer:

• Assurez-vous que la zone LCP, qui était finalement une grande image, est correctement optimisée, a un SRCSet réactif et est hébergé par CDN. Toutes ces choses échouaient sur cette image particulière méprisant le travail ailleurs.
• L'image LCP avait un chargement = "paresseux" dessus, ce que nous venons d'apprendre n'est pas un bon endroit pour cela.

Technique de fixation et apprentissage:

• Toutes les choses appropriées de manipulation d'images étaient en place, mais pour une raison quelconque, rien ne fonctionne pour les fichiers .gif, c'est ce que cette image était le jour des tests. Nous ne devrions probablement pas utiliser les fichiers .gif pour cette zone de toute façon.
• Éteignez le chargement paresseux de l'image LCP. Ceci est une image en vedette WordPress, donc j'ai essentiellement dû faire Php the_post_thumbnail ('', array ('Chargeing' => 'Eager')); ?>. S'il s'agissait d'une image en ligne, je ferais qui indique WordPress ce qu'il doit savoir.

Problème identifié n ° 2) premier octet pour commencer l'écart de rendu

Tim a vu cela tout de suite comme un problème assez évident.

Dans la cascade ci-dessus (voici un article super détaillé sur la lecture des cascades de Matt Hobbs), vous pouvez voir que le HTML arrive en environ 0,5 seconde, mais le début du rendu (ce que les gens voient, Big Green Line), ne commence qu'à environ 2,9 secondes. C'est trop long.

Le graphique identifie également le problème dans une ligne jaune. Je me connectais à un fichier CSS tiers, qui redirige ensuite vers mes propres fichiers CSS qui contiennent des polices personnalisées. Cela redirige le temps, et comme nous nous sommes creusés, pas seulement le temps de charge de première page, mais chaque chargement de page, voire des charges de page en cache .

Choses à réparer:

• Éliminez la redirection du fichier CSS.
• Polices d'auto-hôte.

Technique de fixation et apprentissage:

• J'ai de toute façon regardé de nouvelles polices. J'ai noté il n'y a pas longtemps que j'aime vraiment l'innovation de licence du conducteur en masse (au prix de # d'employés), mais j'aime également MD Primer, alors j'ai acheté cela. Pour le type de corps, je suis resté avec un Serif confortable avec Blanco, qui est venu avec heureusement avec des versions Ribbi ¹ très bien optimisées. La prochaine fois que je jure que je vais trouver une police variable, mais bon, tu dois suivre ton cœur parfois. Je les ai achetés et j'auto-hébergez désormais les portes de police.
• Utilisez @ Font-Face directement dans mon propre CSS, sans redirection. Utilisation également de Font-Display: Swap;, mais je dois travailler un peu plus sur cette technique de chargement. Je ne peux pas attendre la taille de la taille.

Après avoir rééturé avec le changement en place, vous pouvez voir sur une grande page d'article que le rendu de démarrage est plus rapide de 2 secondes sur une connexion 4G:

Problème identifié # 3) CLS sur le guide de la grille est mauvais

Tim a eu une astuce soignée dans sa manche pour mesurer le décalage de disposition cumulatif (CLS) sur les pages. Vous pouvez demander à WebPageTest de faire défiler la page pour vous. Ceci est important pour quelque chose comme CLS, car le décalage de mise en page peut se produire en raison du défilement.

Voir cet article sur CLS et WebPageTest.

L'astuce consiste à utiliser un paramètre avancé pour injecter JavaScript personnalisé dans la page pendant le test:

À ce stade, nous ne testions pas la page d'accueil, mais une page très importante: notre guide complet de la grille. Avec cela en place, vous pouvez voir que les CWV sont en bien pire:

Je ne sais pas quoi penser exactement au LCP. Cela est déclenché par ce qui se trouve être la plus grande image assez loin sur la page.

Le CLS est plus préoccupant pour moi, car toute mise en page changeante est toujours désagréable pour les utilisateurs. Vous voyez toutes ces lignes orange en pointillés? C'est-à-dire que CLS se produit:

Choses à réparer:

• CLS est mauvais en raison d'images chargées paresseuses qui arrivent et déplacent la disposition.

Technique de fixation et apprentissage:

• Je ne sais pas! Toutes ces images sont en ligne éléments. Je reçois que le chargement paresseux pourrait provoquer des CL, mais ces images ont des attributs de largeur et de hauteur appropriés, qui est censé réserver l'espace exact nécessaire à l'image (même en fluidité, grâce au rapport d'aspect) avant même de se charger. Alors… qu'est-ce qui donne? Est-ce parce qu'ils sont SVG?

Si quelqu'un le sait, n'hésitez pas à me frapper. Telle est la nature du travail de performance, je trouve. C'est un mélange de victoires faciles à partir d'erreurs idiotes, de petites batailles que vous pouvez combattre et gagner, des batailles plus grandes qui impliquent parfois des influences extérieures qui sont plus difficiles à gagner et des inconnues mystérieuses qu'il faut du temps pour guérir. Heureusement, nous avons des outils comme WebPageTest pour nous raconter les véritables histoires qui se passent sur notre site et nous donner les informations dont nous avons besoin pour combattre ces batailles de performance.

1. Ribbi, je viens d'apprendre, signifie régulier, italique, audacieux et en italique audacieux. Le combo classique dont la plupart des copies sur le Web ont besoin. ⮑

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!