Nehmen Sie die Fußgänger und die Scroll Chrom aus dem Client

Performancekamo-marketing
Verschifft
20. August 2026 um 03:14 UTC
Autor
Kamo
Ausschuss
721669f

Drei Änderungen, die alle Arbeiten aus dem Fenster entfernen, in dem die Seite beurteilt wird. "(Seiten)/layout.tsx" trugen ""use client"" und brauchte es nie - kein Zustand, nein Effekt, kein Handler, drei Elemente zusammengesetzt. Die Richtlinie Tragen in die falsche Richtung: Es machte das Layout zu einer Client-Grenze, so dass ganzes Subtree auf jeder Navigation wieder gedreht, und es machte eine Server-Seite Fußzeile unmöglich, weil eine Client-Komponente keinen Server importieren kann. Das entsperrte die Fußzeile, die "Button" verwenden" war für genau zwei Tasten . "Cookie-Einstellungen" und "back to top". Die Richtlinie ist nicht selektiv, also 29 € Links, vier Spaltenüberschriften, die soziale Reihe und fünf Absätze der Rechtsbuße drucken alle versandt als JavaScript und hydratisiert. Die Fußzeile ist im gemeinsamen Layout, so war das jeder Seite Kosten, nicht eine Seite. Die Knöpfe sind jetzt eine kleine Insel und die pro-Link-Analyse wurde "Daten-Track"-Attribute, die die delegierten Zuhörer bereits in TrackedClicks liest - so meldet ein Server-gerendered Link noch seine Klick ohne einen Handler. TrackedClicks bewegt sich auf das Root-Layout, da die Fußzeile jetzt überall darauf angewiesen ist und nicht nur auf der Homepage. Ehrliche Buchführung dazu: Es ist nahe an neutral auf Bytes. Ein Kunde Komponente kostet eine Modulreferenz in der Flug-Nützlast; eine Server-Komponente kostet seinen ganzen gerenderten Baum, so dass die Nutzlast wächst 216 KB - 239 KB roh (+3.5 KB gzipped), während eifrige JS nur leicht fällt. Was es tatsächlich kauft, ist die Flüssigkeitszufuhr über die 150-Elemente der Fußzeile, auf jeder Seite, und eine gemeinsame Layout, das nicht mehr wieder auf Navigation re-Render. ScrollProgress und JumpToBar sind jetzt im Leerlauf montiert. Beides ist nicht zu sehen Ankunft - die Fortschrittsleiste sitzt bei null Breite und JumpToBar versteckt sich, bis "scrollY - 300", also waren beide hydratisierend und anhängende Scroll-Hörer zu rendern Nichts im Moment, was zählt. Sie sind auch die beiden Komponenten hier, wo Aufschieben ist nachweislich frei von Layout-Kosten: beide sind "Position: fix", so dass sie kann nichts verschieben, wenn sie ankommen. Es lohnt sich, zu überprüfen, anstatt anzunehmen, mit CLS bei einem Viertel der mobilen Punktzahl. "experimental.inlineCss" wurde erneut getestet und bleibt ausgeschaltet, jetzt aus einem gemessenen Grund eher als eine erinnerte. Die Theorie war, dass sein früheres schlechtes Ergebnis kam von Framer-Motion und gsap Sättigung der Hauptfaden; beide sind verschwunden, so war es Wert eines erneuten Anschauungsversuchs. Es sind nicht die Bibliotheken. Die Flagge nimmt das Dokument von 53 KB zu 93.4 KB gzip, während das Stylesheet ist 17.8 KB gzip auf eigene Faust, weil Weiter inlines it as a <style&gt; Block UND entgeht einer zweiten Kopie in den RSC-Flug Nutzlast: <style" 96.7 KB, Inline-Skript 216 KB - 334 KB. Dass +118 KB ist Skript der Hauptfaden muss vor allem anderen parsen - die genaue Form des TBT Spike, die 20 Punkte das erste Mal gekostet. Render-Blocking CSS ist Unscored; TBT ist 30% der mobilen Punktzahl.

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