- Spegnimento
- 19 agosto 2026 alle ore 18:34 UTC
- Autore
- Kamo
- Impegno
- a7436b2
Ogni sfondo sulla homepage è stato scaricato TWICE. I componenti reso il locale `/img/bg/N.webp`, quindi un effetto ha risolto il tema dell'org percorso sul montaggio e sostituito la fonte — così il browser ha recuperato entrambi. Sulla sito distribuito che misura 95,8 KB per il bg/2 locale più 100.7 KB per a tema uno su una singola sezione, e 21.4 + 21.9 KB sull'eroe. Non era nemmeno la stessa foto. bg/1 e bg/3 differiscono tra la copia locale e il secchio a tema di un RMSE di 0.27 — fotografie diverse, non re-encodes. Così l'elemento LCP dell'eroe, precaricato ad alta priorità, è stato gettato via dopo idratazione e sostituito con un'immagine diversa che il lettore ha poi guardato apparire. L'URL a tema è ora ciò che il server rende. Risolverlo ha bisogno di un nome host, e un componente server non può leggere uno senza `headers()` — che opta ogni percorso fuori da rendering statico, l'errore più costoso questo codebase ha fatto — così l'ospite canonico è una costante, eseguire attraverso `getThemePath` stesso così i due non possono allontanarsi. I componenti si risolvono ancora sul montaggio e solo ri-punto quando l'host live differisce, che è ciò che mantiene inquilini di white-label lavorare, e i file locali rimangono come il `onError` fallback. Il video poster è dimensionato all'apertura piuttosto che al pixel ratio del dispositivo. E 'stato l'acquisizione 750px di immagine per un pannello 369px; è un segnaposto un video vernici sopra entro un secondo o due, quindi retina dettaglio c'è speso su qualcosa Nessuno guarda abbastanza a lungo da giudicare. 26.4 KB originariamente, 9.3 KB ultimo round, 4.1 KB ora. ACCESSIBILITÀ — e questa è una trappola che vale la pena di nominare. I simboli del marchio non sono il nostro: `--color-primary*` sono sovrascritti a runtime dal tema dell'org foglio di stile, e i valori che il tema live realmente serve sono verdi quasi-nero. Contro la tela #0f1f14 misurano 1.15:1, 1.79:1 e 2.84:1, tutti molto sotto il testo del corpo 4.5:1 ha bisogno. I default incorporati sono eccellenti a 5.68:1 e 7.02:1 — che è esattamente il motivo per cui questo non può essere visto nello sviluppo. Il fallimento arriva con un foglio di stile preso da un altro host, dopo l'idratazione, solo in produzione. Un colore sostitutivo fisso sconfiggerebbe il punto di un tema white-label, e un la miscela fissa verso il bianco non può promettere nulla per un ingresso arbitrario. Quindi... `--color-accent-on-canvas` è calcolato: prendere il colore del tema e sollevarlo verso il bianco solo per quanto ci vuole per liberare la soglia. Un colore di marca già passa è restituito intatto, quindi un tema attentamente scelto è lasciato esattamente come il suo autore lo ha impostato. Unità testato contro i tre verdi del tema dal vivo, puro nero, un valore `rgb()`-forma e uno non separabile — ogni caso atterra o sopra 4.51:1, il colore di passaggio è lasciato solo, e un valore non leggibile lascia il proprio colore del foglio di stile al posto piuttosto che indovinare. Il testo del banner di anteprima si trova su un gradiente rosso animato, dove la peggiore fermata è ciò che deve passare piuttosto che la media. Misurato su #cc1111: il giorno conteggio era 3.35:1 a 0.7 alfa (crociere bianche 4.5 a 0.86, quindi 0.88), il changelog link 4.27:1 (#ffe8e8 dà 4.91), e il divisore "|" 1.50:1 — che il rosa non può liberare la linea a qualsiasi alfa, ed è puntuazione decorativa, quindi è aria nascosta. Nasconderlo dall'albero di accessibilità è la soluzione onesta; un colore che semplicemente sembrava leggibile non sarebbe. Due animazioni non composte, entrambe di cui il compositore avrebbe dovuto possedere: `.hero-bg` stava transizione `filtro` su strati che sono `opacità: 0` — blur e grigio animato dove nulla può vederli, su uno strato full-viewport che è anche il candidato LCP. E l'evidenziatore della barra di avanzamento ha loop `sfondo-posizione` per sempre su un elemento fisso nella parte superiore di ogni pagina; è uno pseudo-element tradotto ora, che sembra identico e rimane fuori dal principale filo. `background-position` è stato il singolo più grande collaboratore di tale audit Conto.