Prendere il piè di pagina e lo scorrimento cromato dal client

Performancekamo-marketing
Spegnimento
20 agosto 2026 alle ore 03:14 UTC
Autore
Kamo
Impegno
721669f

Tre cambiamenti, tutti rimuovendo il lavoro dalla finestra in cui la pagina viene giudicata. `(pagine)/layout.tsx` ha portato `"utilizzare il cliente"` e non ha mai avuto bisogno di esso — nessun stato, nessun effetto, senza maniglia, tre elementi composti insieme. La direttiva era portante nella direzione sbagliata: ha reso il layout un limite cliente, quindi il l'intero subtreo ri-rifornito su ogni navigazione, e ha fatto un footer lato server impossibile, perché un componente client non può importare un server uno. Che ha sbloccato il piè di pagina, che era `"utilizza il client"` per esattamente due pulsanti — "Impostazioni dei cookie" e "torna all'inizio". La direttiva non è selettiva, quindi ~29 link, quattro rubriche, la fila sociale e cinque paragrafi di ammenda legale stampare tutti spediti come JavaScript e idratato. Il piè di pagina è nel layout condiviso, così che era costo di ogni pagina, non di una pagina. I bottoni sono ora una piccola isola e l'analisi per-link divenne attributi `data-track`, che il delegato ascoltatore già in TrackedClicks legge — quindi un link server-rendered segnala ancora il suo clic senza portare un handler. TrackedClicks si sposta al layout radice, dal momento che il piè di pagina ora dipende da esso ovunque piuttosto che dalla homepage solo. Onesto conto su quello: è vicino a neutrale su byte. Un cliente componente costa un riferimento del modulo nel carico di volo; un componente server costa tutto il suo albero reso, così il carico utile cresce 216 KB -> 239 KB grezzo (+3,5 KB gzipped) mentre il pronto JS scende solo leggermente. Quello che compra in realtà è l'idratazione passa sopra i ~150 elementi del piè di pagina, su ogni pagina, e un condiviso layout che non ri-render più sulla navigazione. ScrollProgress e JumpToBar sono ora montati inattivo. Né può essere visto su arrivo — la barra di avanzamento siede a zero larghezza e JumpToBar si nasconde fino a `scrollY > 300` — così entrambi idratavano e attaccavano gli ascoltatori di scorrimento per rendere niente al momento che conta. Sono anche i due componenti qui dove deferring è provabilmente privo di costo di layout: entrambi sono `posizione: fisso`, quindi non può cambiare nulla quando arrivano. Vale la pena controllare piuttosto che assumere, con CLS a un quarto del punteggio mobile. `experimental.inlineCss` è stato ri-testato e rimane spento, ora per una ragione misurata piuttosto che una ricordata. La teoria era che il suo precedente cattivo risultato è venuto da framer-motion e gsap saturare il filo principale; entrambi sono andati, quindi era vale la pena riprovare. Non sono le biblioteche. La bandiera prende il documento da 53 KB a 93.4 KB gzip mentre il foglio di stile è 17.8 KB gzip da solo, perché Next inlinea come blocco <style> E sfugge una seconda copia nel volo RSC payload: <style> 96.7 KB, inline script 216 KB -> 334 KB. Che +118 KB è lo script il filo principale deve parse prima di qualsiasi altra cosa — la forma esatta del TBT picco che costa 20 punti la prima volta. Il CSS di bloccaggio del render è Sscored; TBT è 30% del punteggio mobile.

Tutte le modifiche

Come quello che vedi la spedizione?

Ognuno di questi aggiornamenti atterra automaticamente nello spazio di lavoro. Inizia gratis e guardalo crescere settimana dopo settimana.

Inizia gratis per sempreVisualizza il prezzo