Hören Sie auf, das Dokument auf jedem Scroll-Frame neu zu vermeigen

Performancekamo-marketing
Verschifft
20. August 2026 um 03:33 UTC
Autor
Kamo
Ausschuss
73d73f8

Zwei Scroll-Hörer auf der Homepage lesen "ScrollHeight" pro Veranstaltung. Das ist ein Layout Abfrage, und diese Seite ist der schlechteste Ort, um eine immer wieder zu machen: seine Abschnitte verwenden "Inhaltsbarkeit: Auto", so Scrollen kontinuierlich ungültig Layout und es gibt nie eine saubere zu lesen - jede Lektüre zwingt ein Synchron-Reflow. Die Höhe des Dokuments ändert sich nicht, während es sich befindet gescrollt, so dass beide jetzt einmal messen und nur bei der Größe oder wenn ein ResizeObserver auf dem Dokument-Element sagt, dass sich etwas tatsächlich geändert hat. HiddenAnimations war die schlechtere der beiden und nicht nur für den Reflow. Es hielt seine Buchhaltung in React Zustand, so nannte es setState auf jeder Scroll-Ereignis . Render pro Frame jeder Schriftrolle - und weil beide Werte in der Wirkung waren Abhängigkeits-Array, der Effekt abriss und den Hörer jedes Mal wieder an, auch. Refs machen es unsichtbar zu handeln, bis das Ei tatsächlich feuert, der Zuhörer ist passiv, und die Arbeit wird zu einem RAF pro Frame zusammengefügt. Auch Space Grotesk Vorlast, die eine absichtliche Umkehrung ist eher wiederherzustellen als Flip-Flop: Was der Hinweis kostet, hängt davon ab, was der Engpass ist. Es war entfernt, weil es behauptet, Priorität gegen das LCP-Bild, und dieser Streit ist jetzt weg - das Logo hat seine Vorlast verloren und halbiert in der Größe, und die LCP Sub-Teile nicht länger erscheinen in dem Bericht. Ohne den Hinweis wird das Gesicht nur entdeckt, wenn die Stylesheet-Posse, die es zu einem DRITTER Glied in der kritischen Kette gemacht haben (Dokument -" CSS -" Schrift). Das ist, was maximale kritische Weg Latenz zu nahm 488 ms und schob die Render-Blocking-Schätzung auf 300 ms, seit dem Entfernen der Stylesheet hätte auch die Abhängigkeit der Schrift von ihr beseitigt. Verifiziert, dass die Vorlast und die @font-face auf die gleiche URL auflösen . eine ausgeprägte Variante für vorgeladene Gesichter, und ein Missverhältnis würde es geben verschwendeter Hinweis plus ein zweiter Download der gleichen Schrift.

Alle Änderungen

Wie, was Sie sehen Versand?

Jedes dieser Updates landet automatisch in Ihrem Arbeitsbereich. Starten Sie frei und beobachten Sie es Woche für Woche wachsen.

Free Forever startenPreisgestaltung anzeigen