Stop spedizione 1.8 MB di sfondi non dimensionati dopo l'idratazione

Performancekamo-marketing
Spegnimento
19 agosto 2026 alle ore 17:50 UTC
Autore
Kamo
Impegno
849051c

ThemedBackground era la cosa più costosa rimasta sulla homepage, e nessuna delle Sembrava una cimice. Ha reso un grezzo <img> dritto al secchio a tema, quindi il browser ha ricevuto il file sorgente intatto — 606, 646 e 585 KB, WebP, a risoluzione completa, su un telefono. Niente li ha ridimensionati e niente ha servito AVIF, perché la richiesta non si è mai avvicinata all'ottimizzazione dell'immagine. Niente carico pigro loro, e tutte e tre le istanze (Caratteristiche, Prezzo, Sezione Segnale) montare su l'idratazione, così circa 1.8 MB ha iniziato a scaricare al momento della pagina stava provando per diventare interattivo, per tre sezioni a cui nessuno aveva scorretto. E ogni cornice è stato catturato due volte: una sonda di disponibilità ha costruito una `nuova immagine()`, aspettato che esso a caricare in pieno, e solo allora impostare lo stato che ha reso l'elemento reale. `onError` è lo strumento giusto per questo e non costa nulla. Attraverso `next/image` ciascuno è un AVIF lazily-fetched, correttamente dimensionato su un URL immutabile, e il sistema è una transizione CSS piuttosto che un movimento Framer "animato" sul <img>. `images.qualities` è configurato, che è un prerequisito piuttosto che un tuning manopola: Il prossimo 16 risponde 400 per qualsiasi qualità non in quella lista, e la lista di default a [75] da solo — così `qualità={50}` non è stato ignorato, avrebbe costato immagine esterna. La qualità è ora impostata da come ogni superficie è realmente composito, misurata piuttosto che indovinato. Decodifica entrambe le codifiche e confrontarle *dopo * la pagina è propria filtri: luminosità di sfondo eroe(.21) 41.1 dB PSNR 0.57% dei pixel differiscono da >8/255 → qualità 50 luminosità di sfondo a tema(.6), scala di grigi 20%, overlay nero radiale 36.9 dB PSNR 6.60% dei pixel differiscono da >8/255 → a sinistra a 75 L'eroe è l'elemento LCP ed è composito ad un quinto della sua luminanza, quindi metà dei bit acquistano dettaglio che nulla può risolvere attraverso quel tanto nero: 77.7 KB al default, 22.0 KB a 50, per una differenza 0.57% di pixel può esprimere. Le cornici a tema siedono sotto un overlay molto più leggero, dove lo stesso passo raggiunge 6,6% — abbastanza per bandire una zona liscia di cielo attraverso una superficie piena dissanguata. Loro salvare non era mai l'impostazione di qualità comunque; era la ridimensionamento e la pigrizia. Il telaio del poster è misurato piuttosto che assunto. Un w=828 fisso era tre volte i pixel l'apertura mostra su un telefono, dove è circa 370 CSS px; è ora derivato dalla larghezza dell'elemento e dal rapporto pixel del dispositivo, contro dispositivo configuratoSizes. 26.5 KB → 7.6 KB al telefono. Le due preconnessioni sono ora prefette. Una preconnessione apre una presa immediatamente e lo tiene, che guadagna solo per un'origine necessaria durante Prima vernice. Con la fotografia a tema che attraversa l'ottimizzazione di questa origine, la prima richiesta del browser a tema.kamocrm.com è il widget di chat o il bobina eroe, sia deliberatamente dopo l'evento di carico, e l'origine di analisi è la stessa storia da quando il tracker si è trasferito a pigriOnload. Il faro ha riferito che tema preconnettere come inutilizzato ed era: una presa aperta durante il percorso critico, in competizione con esso, inattivo fino a molto tempo dopo che ha chiuso. Due cose misurate e deliberatamente NON cambiate, quindi non sono ri-litigate: · Una lista di browser che si rivolge ai browser moderni non rimuove i 13.5 KB di Le bandiere di Lighthouse... Oggetto. da parte di Entries/hasOwn, Sono Il prossimo `polyfill-module`, incluso incondizionatamente; con browserslist set, il chunk contenente costruito byte-identical, stesso hash. Aggiungere la configurazione che dimostrabilmente non fa nulla è quello che `optimizeCss` era. · Cancellare i 90 di 149 componenti che si riferiscono da nessuna parte muove il foglio di stile render-blocking di 678 bytes gzip (17,398 → 16,720). Il vento della coda scansione dei file morti non è ciò che rende il file 17 KB, quindi una cancellazione di 90 file non può essere giustificato come una correzione delle prestazioni. Ancora aperto, e non fissabile da questo repository: kamo-chat.js è servito da il secchio tema senza intestazione Cache-Control a tutti, 143 KB. Le playlist di HLS 300s TTL è deliberato — eroe-hls-encode-job.yaml li riscrive su re-encode — e vale 1 KiB, quindi rimane.

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