Smettere di rassicurare il documento su ogni frame di scorrimento

Performancekamo-marketing
Spegnimento
20 agosto 2026 alle ore 03:33 UTC
Autore
Kamo
Impegno
73d73f8

Due ascoltatori di scorrimento sulla homepage leggere `scrollHeight` per evento. Questo è un layout query, e questa pagina è il posto peggiore per fare uno ripetutamente: la sua sezioni utilizzano `contenuto-visibilità: auto`, quindi scorrendo continuamente invalida disposizione e non c'è mai una pulita da leggere — ogni lettura forza un riflusso sincrono. L'altezza del documento non cambia mentre è arrotolato, così entrambi ora misurano una volta e ri-measure solo su ridimensionamento o quando un ResizeObserver sull'elemento documento dice qualcosa effettivamente cambiato. HiddenAnimations era il peggio dei due e non solo per il riflusso. Continuava la sua contabilità in stato React, così ha chiamato setState su ogni evento di scorrimento — un render per frame di ogni scorrimento — e perché entrambi i valori erano nell'effetto l'array di dipendenza, l'effetto ha abbassato e riattaccato l'ascoltatore ogni volta Anch'io. I rifs lo rendono invisibile a React fino a quando l'uovo realmente accende, l'ascoltatore è passivo, e il lavoro è carbonizzato in un rAF per frame. Inoltre ripristina il precarico di Space Grotesk, che è un inversione deliberata piuttosto che un flip-flop: ciò che il suggerimento costa dipende da ciò che il collo di bottiglia è. Era rimosso perché ha rivendicato la priorità contro l'immagine LCP, e che la contention è ora andato — il logo ha perso il suo precarico e halved in dimensioni, e le sottoparti LCP no più a lungo appaiono nella relazione. Senza il suggerimento il viso viene scoperto solo quando le parses del foglio di stile, che lo ha reso un collegamento THIRD nella catena critica (documento -> CSS -> font). Questo è ciò che ha preso la massima latenza critica percorso a 488 ms e ha spinto la stima di render-blocking fino a 300 ms, dal momento che rimuovendo stylesheet avrebbe rimosso anche la dipendenza del carattere. Verificato che il precarico e il @font-face si risolvono allo stesso URL — Successivo emette una variante `.p.` distinta per le facce precaricate, e un errore ci sarebbe un sprecato suggerimento più un secondo download dello stesso carattere.

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