- Spegnimento
- 19 agosto 2026 alle ore 17:29 UTC
- Autore
- Kamo
- Impegno
- 917ad87
La homepage ha spedito la sua intera piega invisibile. Framer Motion serializza un `initial` prop nel prerendered HTML come uno stile inline, quindi il markup arrivato con il <h1>, la colonna di copia, l'apertura della bobina e l'emorragia completa sottofondo tutto a `opacity: 0` — e rimase in quel modo fino a quando React aveva scaricato, sfilato e idratato ed eseguire la sua prima cornice di animazione. Primo e La più grande vernice di contenuto è stata quindi misurare un JavaScript di quarti-megabyte fascio piuttosto che la pagina: il server aveva già reso l'intestazione, e un copione lo teneva indietro. Nulla vede questo — non la costruzione, il tipo controllare, lint run o la guardia di navigazione — e su un collegamento desktop è invisibile. `curl` la pagina e contare `opacità:0`: 102 di loro, ogni elemento sopra la piega tra loro. Gli stessi ingressi, con la stessa durata e facilitazione, sono ora portachiavi CSS. Il foglio di stile è parsed prima che un singolo script è stato eliminato. Il PIC sfondo utilizza una transizione piuttosto che un keyframe, perché una transizione fa non eseguito sul render iniziale — quindi la cornice che è all'arrivo è semplicemente su, con nulla per LCP ad aspettare. Il resto della finestra di carico, in ordine descrescente di che costo: · La bobina ha iniziato a pagare dal primo byte — `preload="metadata", a poster sull'elemento, e una scala adattativa che si apre sulla pista 540p a 1.17 Mbps — per un'apertura che su una vista stretta siede sotto la piega, sotto la colonna di copia. Ora aspetta l'evento di carico, poi per la principale filo per andare inattivo, quindi per l'apertura a venire all'interno di un viewport. Livello è bloccato alla dimensione del giocatore e inizia sul rung inferiore su un telefono. I lettori Save-Data e 2G/3G conservano la cornice del poster e il pulsante di riavvio. · Il poster stesso era un JPEG da 93 KB su un'intestazione della cache di un giorno. Attraverso ottimizzazione immagine è un AVIF di 26 KB su un URL immutabile, e non è Preso fino a quando il rullo non è voluto. · Il logo del marchio è di 132 KB di uscita potrace a otto decimi, precaricata come un immagine, per disegnare un segno largo 140 px. Arrotondato ad un decimale di 3503 unità spazio con il ripieno ripetuto, è 59 KB — geometricamente identico a 0.0023 CSS px al formato più grande è mai reso a. script/ ottimizza-logo-svg.mjs è idempotent, per la prossima volta il logo viene esportato. · GSAP era sulla lista di script impaziente di ogni pagina del sito, quattro volte over: un tween sul bagliore della barra di progresso, `gsap.set()` scrivendo due statici proprietà di stile, un `da To` duplicare un increspato il foglio di stile era già animando, e una chiamata globale-timeline che spara solo per i lettori che hanno chiesto una mozione ridotta. Tutti e quattro sono andati dalla critica percorso; l'ultimo carica la libreria all'interno del suo ramo. · TouchOptimized misura ogni pulsante, collegamento e ingresso nella pagina durante idratazione, intrecciando ogni lettura con le scritture dell'elemento precedente — una circuito forzato-synchronous-layout lungo diverse centinaia di elementi, atterraggio in Blocco totale Tempo al telefono esiste per aiutare. E ora lotti i legge e aspetta inattivo. · ` Strategia di assunzione="afterInteractive">` emette un ` Пlink rel="preload" as="script">`, che ha chiesto al browser di prendere il tracker di analisi alta priorità accanto al background dell'eroe. `lazyOnload` registra ancora visita, un momento dopo e fuori dal percorso critico. · L'eroe ha montato tre strati di sfondo full-viewport. La rotazione è desktop-solo, quindi su un telefono due di loro erano permanentemente `opacità: 0`. · `clearCookieConsent` — due linee di localStorage — è stato esportato dal banner di consenso, così il controllo di gestione dei "cookie" del piè di pagina trascinato 250 linee di Framer Motion in un pezzo che rende nel HTML iniziale. Si muove app/lib/cookie-consent.ts, e il banner e lo stack toast ora montano su idle: né dipinge nulla all'arrivo. · `experimental.optimizeCss` stampato "✓ OptimizCss" in ogni costruzione e fatto Niente. Inlinea CSS critico tramite HTML finito post-elaborazione, che l'App Router non lo consegna mai. Verificato contro l'uscita costruita con la `beasties` backend realmente installato: zero <style> blocchi in <head>, il foglio di stile ancora un blocco normale <link>. Rimozione — una bandiera che riporta successo mentre inerte legge come un'ottimizzazione già presa. · 36 selettori di classe e 24 keyframe in globals.css senza riferimento ovunque nel repository, fornitore e documenti inclusi. Percorso critico, gzip, schierato contro una costruzione pulita: html 38,101 → 36,277 js 281,700 → 245,707 css 18,629 → 17,398 logo 57,390 → 22,902 totale 395,820 → 322,284 (-19%) ansioso script 15 → 13 Fuori dalla finestra di carico interamente sopra: il poster 93 KB, la HLS manifesto e i suoi segmenti 1.17 Mbps, due immagini di sfondo, e il tracker. Non indirizzato qui: `/` risponde 307 a `/en`, che è l'URL di una pagina-velocità test e che Lighthouse conta come redirect. L'unica vera soluzione è `localePrefix: 'as-need'`, e che riscrive canonici, hreflang, sitemaps e ogni href interno attraverso ~250 percorsi in 22 locali mentre 301-ing ogni URL indicizzato /en/*. Questa è una decisione SEO piuttosto che una performance uno, e il hop costa ~60 ms su una connessione già aperta.