Pare de renderizar oito seções fora da tela antes que o herói possa pintar

Performancekamo-marketing
Shipped
19 de agosto de 2026 às 19:59 UTC
Author
Kamo
Commit
525e81c

O LCP era de 4,4 s, e a sua repartição dizia onde: 120 ms para o primeiro byte, 290 ms de atraso de carga, 390 ms realmente baixando a imagem - e, em seguida, 1.810 ms de "o elemento torna o atraso". A imagem tinha acabado de chegar e simplesmente não podia ser pintado. A homepage navios 1.482 DOM elementos, sobre o limiar Farol falha em "otimizar o tamanho DOM" em, e cada um deles estava sendo colocado para fora e pintado durante a renderização inicial, enquanto o elemento LCP esperava a sua volta para trás oito secções para as quais ninguém se tinha deslocado. `conteúdo-visibilidade: auto` em cada seção exceto `#home` deixa o navegador pular layout e pintura para essas subárvores até que se aproximem do viewport. A elementos ainda existem — no HTML, para motores de busca, para âncoras em página, para find-in-page, e para as execuções IntersectionObserver JumpToBar — elas simplesmente não são Rasterizado antes que alguém possa vê-los. Duas coisas fazem com que seja seguro aqui em vez de em geral: cada secção já é «posição: relativa» e «sobrefluxo: oculta», assim, a contenção implícita não muda nada sobre como eles absolutamente posicionados backgrounds resolvem, e `contain-intrinsic-size` usa a palavra-chave `auto`, então o altura do placeholder só se aplica antes da primeira renderização de uma seção e do navegador Lembra-se do verdadeiro depois. O retorno forçado do relatório atribuído a um arquivo específico foi PreviewBanner. Ele ler `offsetHeight` logo após a hidratação e escreveu `documento. corpo. estilo .paddingTop`, que invalida o layout para todo o documento. A escrita foi também redundante — `body { padding-top: var(-- banner- h)} ` já reserva o espaço da primeira pintura. Um ResizeObserver relata a altura do `borderBoxSize', que o navegador já computou quando o callback é executado, então nada é Forçado. borderBoxSize em vez de contentRect de propósito: o banner carrega `padding: 6px 16px` em telas pequenas, e reservando a altura do conteúdo sozinho Deixaria a cópia sentada 12px sob a bandeira. theme.kamocrm.com recebe seu preconnect de volta, que o relatório pede pelo nome em 300 ms de LCP. Demonstrá- lo para dns-prefetch estava errado: as imagens passam este otimizador de origem agora, mas DynamicMetaLoader ainda busca o tema do org stylesheet dessa máquina em tempo de execução, e isso é uma requisição que afeta renderização em O caminho crítico. Analytics permanece um dns-prefetch — o rastreador é preguiçosoOnload, então Nada antes do evento de carga tocar nele. O fundo do herói cai para a qualidade 40: 21,9 KB para 12,8 KB, que é o que o A auditoria de imagens estava a pedir. Medido através do brilho( 0.21) é composto em, 50 -> 40 movimentos 1,09% de pixels por mais de 8/255 e detém A qualidade 30 foi testada e rejeitada em 3,20%. Os cenários de seção permanecem em 75, e esta é a segunda medição tem Foi o que disse. Na largura reduzida que agora pedem, cair para 50 é * pior * do que estava em largura total — 11,30% de deslocamento de pixels versus 6,60% — porque em menor resolução cada bloco de compressão cobre mais do que você vê. Resolução e reduções de qualidade não empilham numa fotografia; uma ou outra. As listas de reprodução HLS são imutáveis por um ano, ao vivo e no manifesto de tarefas, que fecha o último item de tempo de vida de cache. Isso move um custo em vez de removendo-o, assim `HERO HLS SRC` carrega um `?v=` que tem que ser batido em um re- encode; ambos os ficheiros o dizem, porque caso contrário um re- encode será parecido com o O trabalho silenciosamente não fez nada.

All changes

Como o que vês no transporte?

Cada uma dessas atualizações pousa automaticamente em seu espaço de trabalho. Comece grátis e veja crescer semana após semana.

Começar Livre Para SempreVer Preços