Publicado em 30 de outubro de 2024
A introdução da Interaction to Next Paint (INP) como uma métrica Core Web Vital no início de 2024 gerou mais interesse na performance de renderização. Parte da INP se concentra no tempo que o navegador leva para pintar o próximo frame depois que um usuário inicia uma interação com a página. Manter o INP do seu site baixo significa que os usuários vão sentir que estão respondendo às interações da forma mais rápida e tranquila possível.
O trabalho de renderização que também precisa ocorrer enquanto a página é carregada também é importante, porque pode atrasar as interações desde o início. Vale a pena encontrar maneiras de reduzir a quantidade de trabalho que ocorre durante essa parte crucial do ciclo de vida da página. A propriedade CSS content-visibility é uma maneira de fazer isso. E temos o prazer de anunciar que ela está disponível na versão de referência desde setembro de 2024.
content-visibility é uma propriedade CSS que instrui o agente do usuário a adiar a renderização de elementos até que eles se aproximem da viewport. Para páginas com muitos elementos DOM, isso pode ser benéfico, já que o carregamento inicial de uma página vai iniciar menos trabalho de renderização. Em vez disso, o trabalho acontece pouco antes de o usuário precisar vê-lo.
content-visibility: auto a áreas de conteúdo divididas em partes aumenta a performance de renderização em 7 vezes no carregamento inicial. Continue lendo para saber mais.
Para ativar essa otimização para elementos fora da tela, aplique a regra content-visibility: auto a eles no CSS do seu site:
.render-me-later {
content-visibility: auto;
}
content-visibility opera por alguns dos comportamentos definidos para a propriedade contain na contenção CSS. O objetivo da contenção do CSS é fornecer isolamento para partes da árvore do DOM. Isso permite definir o escopo das operações de renderização para uma parte específica da árvore do DOM. Assim, o layout é invalidado e refeito apenas para um subconjunto da árvore do DOM. Ao aplicar isso para renderizar o desempenho, é necessário ter um pouco de familiaridade com os vários valores da propriedade contain e como usá-los de maneira eficaz.
Quando content-visibility: auto é aplicado a elementos, eles assumem automaticamente algumas das propriedades fornecidas pela propriedade contain. O resultado é que os elementos afetados serão renderizados inicialmente com uma altura de 0px, o que significa que eles não são renderizados.
No entanto, isso tem alguns efeitos colaterais. Por exemplo, a barra de rolagem da página pode mudar e mudar a altura à medida que o usuário rola até elementos anteriormente não renderizados, que são renderizados a tempo do usuário. Para minimizar esse problema, aplique a propriedade contain-intrinsic-size.
Como content-visibility está disponível recentemente como padrão, talvez você tenha algumas dúvidas sobre usuários com navegadores que ainda não foram atualizados para usar a nova propriedade. Como content-visibility é uma propriedade CSS, não se preocupe muito. Os navegadores que entendem isso vão usá-lo, e aqueles que não entendem, não vão. Isso significa que, além dos benefícios de desempenho que você teria com os navegadores compatíveis com content-visibility, as páginas vão funcionar da mesma forma.
content-visibility oferece um benefício aditivo. Se houver casos em que você possa usá-lo para reduzir o trabalho de renderização durante o carregamento da página, use-o para garantir que as páginas tenham o máximo de capacidade de processamento possível quando precisarem. Agora que esse recurso útil está "Baseline Newly disponível", você pode usá-lo para que os usuários se beneficiem do trabalho de renderização evitado até que seja necessário.