Arrêtez de mesurer le document sur chaque trame de défilement

Performancekamo-marketing
Expédié
20 août 2026 à 03:33 UTC
Auteur
Kamo
Commite
73d73f8

Deux auditeurs de défilement sur la page d'accueil lisent « ScrollHeight » par événement. C'est un la mise en page, et cette page est le pire endroit pour en faire un à plusieurs reprises: son les sections utilisent la visibilité: auto, donc le défilement continu invalide la disposition et il n'y a jamais un propre à lire de - chaque force de lecture a une réalimentation synchrone. La hauteur du document ne change pas tant qu'il est pare-soupillage, de sorte que les deux mesurent maintenant une fois et ne mesurent que sur la redimensionnement ou lorsqu'un Redimensionner l'observateur de l'élément du document dit que quelque chose a réellement changé. HiddenAnimations était le pire des deux et pas seulement pour le reflux. Il a conservé sa comptabilité dans l'état React, de sorte qu'il a appelé setState sur chaque événement de défilement - a rendre par trame de chaque défilement et parce que les deux valeurs étaient dans l'effet un tableau de dépendance, l'effet a réduit et ré-estatié l'auditeur à chaque fois également. Les réfacteurs le rendent invisible pour React jusqu'à ce que l'œuf brûle réellement, l'auditeur est passif, et le travail est coalescé en une rAF par trame. Reste également la précharge de Space Grotesk, qui est un renversement volontaire plutôt qu'une bascule: ce que coûte l'indice dépend de ce qu'est le goulet d'étranglement. C'était supprimé parce qu'il a revendiqué la priorité contre l'image LCP, et cette affirmation est Le logo a perdu sa précharge et a été divisé par deux en sous-parties, et les sous-parties LCP no plus longs figurent dans le rapport. Sans l'indice, le visage n'est découvert que lorsque la feuille de style parses, qui en fait un lien TROISIEME dans la chaîne critique (Farte caractères CSS). C'est ce qui a pris la latence du chemin critique pour 488 ms et a poussé l'estimation de blocage de rendu jusqu'à 300 ms, depuis l'enlèvement de stylesheet aurait supprimé la dépendance de la police à son égard. Vérifié que la précharge et la résolution de face de la «font-face» à la même URL et Next émettent une variante distincte de "p.p." pour les faces préchargées, et un déparpillement il y aurait un perte de l'indice plus un deuxième téléchargement de la même police.

Tous les changements

Comme ce que tu vois expédier ?

Chacune de ces mises à jour atterrit automatiquement dans votre espace de travail. Commencez gratuitement et regardez-le grandir semaine après semaine.

Commencez gratuitement pour toujoursPrix de visualisation