Smettere di rendere otto sezioni off-screen prima che l'eroe possa dipingere

Performancekamo-marketing
Spegnimento
19 agosto 2026 alle ore 19:59 UTC
Autore
Kamo
Impegno
525e81c

LCP era di 4,4 s, e la sua ripartizione ha detto dove: 120 ms al primo byte, 290 ms di ritardo di carico, 390 ms effettivamente scaricare l'immagine — e poi 1.810 ms di "l'element render delay". L'immagine aveva finito di arrivare e semplicemente non poteva essere dipinto. La homepage navi 1.482 elementi DOM, sopra la soglia Faro fallisce "ottimizzare la dimensione DOM" a, e ognuno di loro è stato messo fuori e dipinto durante il rendering iniziale, mentre l'elemento LCP ha aspettato il suo giro dietro otto sezioni a cui nessuno aveva arrotolato. `contenuto-visibilità: auto` su ogni sezione tranne `#home` permette al browser di saltare layout e vernice per quei sottotree fino ad avvicinarsi al viewport. The elementi esistono ancora — in HTML, a motori di ricerca, a ancoraggi in-pagina, a trovare-in-pagina, e per l'IntersezioneObserver JumpToBar piste — non sono solo rasterizzato prima che qualcuno li veda. Due cose lo rendono sicuro qui piuttosto che generalmente: ogni sezione è già `posizione: relativa` e `overflow: nascosta`, così il contenimento implicito non cambia nulla su come la loro posizione assoluta sfondi risolvono, e `contain-intrinsic-size` utilizza la parola chiave `auto`, quindi la l'altezza del segnaposto si applica solo prima del primo rendering di una sezione e del browser ricorda quello vero dopo. Il riflusso forzato del rapporto attribuito ad un file specifico è stato PreviewBanner. Si'. leggere `offsetHeight` subito dopo l'idratazione e ha scritto `documento. corpo. stile .paddingTop`, che invalida il layout per l'intero documento. La scrittura era anche ridondante — `corpo { padding-top: var(--banner-h) } già si riserva spazio dalla prima vernice. Un ResizeObserver riporta l'altezza da `borderBoxSize`, che il browser ha già calcolato quando il callback viene eseguito, quindi nulla è forzato. borderBoxSize piuttosto che contenutoRetto di proposito: il banner trasporta `padding: 6px 16px` su piccoli schermi, e riservando l'altezza del contenuto da solo lasciare la copia seduto 12px sotto il banner. Tema.kamocrm.com ottiene la sua preconnessione indietro, che il rapporto chiede per nome a 300 ms di LCP. Dimostrarlo a dns-prefetch era sbagliato: le immagini passano attraverso l'ottimizzazione di questa origine ora, ma DynamicMetaLoader ancora fetches il tema dell'org foglio di stile da quell'host a runtime, e questa è una richiesta di render-affecting su il percorso critico. L'analisi rimane un dns-prefetch — il tracker è pigro, quindi nulla prima che l'evento di carico lo tocchi. Lo sfondo dell'eroe scende alla qualità 40: 21.9 KB a 12.8 KB, che è quello che il l'audit delle immagini stava chiedendo. Misurato attraverso la luminosità (0.21) è composito a, 50 -> 40 mosse 1.09% di pixel di oltre 8/255 e detiene 40.7 dB. Qualità 30 è stato provato e respinto al 3.20%. I fondali della sezione rimangono a 75, e questa è la seconda volta di misurazione detto così. Alla larghezza ridotta ora richiesta, scendere a 50 è *worse* che era a piena larghezza — 11.30% dei pixel di turno contro 6.60% — perché in basso risoluzione ogni blocco di compressione copre più di quello che vedi. Risoluzione e le riduzioni di qualità non impilano su una fotografia; una o l'altra. Le playlist HLS sono immutabili per un anno, dal vivo e nel manifesto di lavoro, che chiude l'ultimo elemento cache-lifetime. Questo comporta un costo piuttosto che rimuoverlo, quindi `HERO HLS SRC` trasporta un `?v=` che deve essere urtato su un re-encode; entrambi i file dicono così, perché altrimenti un re-encode sembrerà come il lavoro silenziosamente non ha fatto nulla.

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