Interrompere tre risorse dal superamento dell'elemento LCP

Performancekamo-marketing
Spegnimento
20 agosto 2026 alle ore 03:13 UTC
Autore
Kamo
Impegno
86cb9fc

La ripartizione LCP è dove il tempo rimanente è, e le sue due parti di carico — 270 ms di ritardo del carico delle risorse, 500 ms di durata del carico — sono un problema prioritario, non un problema di dimensioni. L'elemento è lo sfondo dell'eroe, 14,8 KB di AVIF, ed è serve dalla cache in 44 ms. Che cosa era in competizione con, tutto rivendicando alto la priorità che precede in <head>: Inter 48.4 KB precaricata Space Grotesk 22.3 KB precaricata logo-full-white.svg 15.6 KB precaricata (gzipped on the wire) E' il momento giusto. ~86 KB, contro una risorsa LCP di 14,8 KB Niente richiesto per il logo preload. Reagisci auto-precarica la prima immagine albero e questo è il logo nav, quindi ha ereditato una rivendicazione prioritaria non ha mai avuto bisogno — è un segno 140x40 nell'angolo. `fetchPriority="low"` gocce il suggerimento interamente. Il logo è anche 39 KB di sorgente per quel rendering 140x40: 89 percorsi autotracciati piena precisione di interi. Re-encoded a 2 punti decimali è 19.2 KB raw / 7.3 KB con un taglio del 54% sul filo. Deliberatamente SENZA svgo's mergePaths, che ha collasso i 89 percorsi in 5 — che riscrive l'avvolgimento del fill-rule, che è come lettere contatori sono tagliati, e non c'è browser senza testa qui per dimostrare che ancora Sembra giusto. Il passo conservatore ottiene lo stesso risparmio comunque. Space Grotesk perde il suo precarico, e il commento che difende aveva la premessa sbagliato: ha sostenuto l'H1 dell'eroe è l'elemento LCP. Il faro nomina il LCP elemento esplicitamente ed è l'immagine di sfondo. `display: swap` già significa no testo aspetta su questa faccia, e il fallback generato di Next porta corrispondenza metriche di dimensione-regolare in modo che lo swap non sposta il layout. Inter mantiene il suo precarico — è il testo del corpo, e questo è dove un swap sarebbe effettivamente sentito. Inoltre: le immagini ottimizzate hanno risposto `max-age=86400, must-revalidate`. Questi URL sono content-addressed — fonte, larghezza e qualità sono tutti nella stringa di query — così non possono restituire diversi byte. Cresciuto fino ad un anno. next.config.ts registra anche il re-test di `experimental.inlineCss`, che rimane Fuori. Vedere il commit che segue per il perché. Risultato in <head>: il precarico del logo è andato, e gli byte rivendicano priorità avanti della caduta dell'immagine LCP da ~86 KB a ~56 KB.

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