- Navios
- 19 de agosto de 2026 às 18:34 UTC
- Autor
- Kamo
- Enviar
- a7436b2
Cada fundo na página inicial estava sendo baixado TWICE. Os componentes renderizado o tema local `/img/bg/N.wepp`, então um efeito resolveu o tema do org caminho na montagem e substituiu a fonte — então o navegador obteve ambos. Na local implantado que mediu 95.8 KB para o bg/2 local mais 100.7 KB para o teve um tema em uma única seção, e 21,4 + 21,9 KB sobre o herói. Nem sequer era o mesmo quadro. bg/1 e bg/3 diferem entre a cópia local e o balde tema por um RMSE de 0,27 — fotografias diferentes, não re-encodifica. Então o elemento LCP do herói, pré-carregado em alta prioridade, foi jogado fora depois hidratação e substituição por uma imagem diferente que o leitor viu aparecer. A URL temática é agora o que o servidor renderiza. Resolver precisa de um nome de máquina, e um componente servidor não pode ler um sem `headers()` — que opta por cada rota para fora da renderização estática, o erro mais caro este codebase tem made — de modo que o hospedeiro canônico é uma constante, executado através do `getThemePath` em si os dois não podem derivar. Componentes ainda re-resolve na montagem e apenas re-ponto quando o hospedeiro vivo difere, que é o que mantém os inquilinos de marca branca trabalhando, e os arquivos locais permanecem como o recurso `onError`. O cartaz de vídeo é dimensionado para a abertura em vez da relação de pixels do dispositivo. Ele estava buscando 750px de imagem para um painel 369px; é um placeholder um vídeo pinta dentro de um segundo ou dois, então detalhe da retina lá é gasto em algo Ninguém olha o suficiente para julgar. 26.4 KB originalmente, 9.3 KB última rodada, 4.1 KB agora. ACESSIBILIDADE — e esta é uma armadilha que vale a pena nomear. Os símbolos da marca não são nosso: `--color-primary*` são substituídos em tempo de execução pelo tema da org folha de estilo, e os valores que o tema ao vivo realmente serve são quase-verdes pretos. Contra a tela #0f1f14 eles medem 1.15:1, 1.79:1 e 2.84:1, tudo muito abaixo o texto do corpo 4.5:1 precisa. Os padrões embutidos estão bem em 5.68:1 e 7.02:1 — e é precisamente por isso que isso não pode ser visto em desenvolvimento. O fracasso chega com uma folha de estilo obtida de outro hospedeiro, após hidratação, apenas na produção. Uma cor de substituição fixa iria derrotar o ponto de um tema em branco, e um mistura fixa para branco não pode prometer nada para uma entrada arbitrária. Então... `--color-accent-on-canvas` é calculado: pegue a cor do tema e levante-o para o branco apenas o quanto for preciso para limpar o limiar. Uma cor de marca que já passa é devolvido intocado, então um tema cuidadosamente escolhido é deixado exatamente como seu autor o estabeleceu. Unidade testada contra o tema ao vivo três verdes, puro preto, um valor de forma `rgb()` e um valor inparsável — cada caso aterra em ou acima de 4,51:1, a cor passante é deixada em paz, e um valor ilegível deixa a própria cor da folha de estilo no lugar em vez de adivinhar. O texto do banner de antevisão fica num gradiente vermelho animado, onde a pior parada é o que tem que passar em vez da média. Medido sobre #cc1111: o dia a contagem foi de 3,35:1 a 0,7 alfa (cruzamentos brancos 4,5 a 0,86, assim 0,88), o a ligação 4.27:1 (#ffe8e8 dá 4.91), e o divisor 1.50:1 - que rosa não pode limpar a linha em qualquer alfa, e é pontuação decorativa, por isso é Aria-escondido. Esconder da árvore de acessibilidade é a correção honesta; uma cor que apenas parecia legível não seria. Duas animações não compostas, ambas as quais o compositor deveria possuir: `.hero-bg` estava transicionando `filtro` em camadas que são `opacidade: 0` — borrão e escala de cinza animado onde nada pode vê-los, em uma camada de full-viewport que é também o candidato LCP. E o destaque da barra de progresso looped 'background-position' para sempre em um elemento fixo no topo de cada página; é um pseudo-elemento traduzido agora, que parece idêntico e fica fora do principal Fio. «Posição de fundo» foi o maior contribuinte da auditoria Contar.