Dominando o INP: como aproveitar a visibilidade do conteúdo para maior capacidade de resposta

Você quer saber o segredo para páginas da web responsivas, UX mais suave e excelente pontuação INP?

É um trabalho de renderização eficiente.

Isso geralmente é conseguido controlando a renderização do conteúdo fora da tela, descarregando o navegador da execução de tarefas que não são imediatamente necessárias durante o carregamento inicial da página.

Nas linhas a seguir, você aprenderá como aproveitar a propriedade CSS de visibilidade de conteúdo para melhorar significativamente o desempenho do seu site, aumentar seus Core Web Vitals e aprimorar a experiência do usuário.

Leia.

Quantificando a capacidade de resposta com a interação com a próxima pintura (INP)

90% do tempo de um usuário em uma página é gasto após seu carregamento.

Dito de outra forma, tão crucial quanto investir esforços para acelerar o carregamento inicial da página, é igualmente importante como o seu site se comporta quando o usuário começa a interagir com ele.

Está com falhas? Fornece rolagem suave? É responsivo?

Todas as respostas estão escondidas atrás da sua pontuação INP.

Interaction to Next Paint é uma métrica de desempenho centrada no usuário e sucessora do First Input Delay, usada para avaliar a capacidade de resposta de uma página da web. Ele mede especificamente o tempo que uma página da web leva para responder visualmente à entrada de um usuário.

A palavra-chave aqui é “visualmente”.

Ninguém espera que todas as suas interações sejam executadas em alguns milissegundos. Isso simplesmente não é possível. Tudo o que você precisa fazer para ter uma boa pontuação INP e Core Web Vitals é fornecer feedback visual imediato às ações dos visitantes em seu site.

Voltando ao início do nosso artigo, garantir que o navegador possa renderizar suas páginas com eficiência é a maneira infalível de obter pontuações excelentes e experiência no mundo real.

E os dois fatores críticos que afetam muito a velocidade de renderização são o thread principal e o tamanho do DOM.

O papel do thread principal e do tamanho do DOM

Vamos fazer algumas tarefas domésticas antes de nos aprofundarmos nos detalhes técnicos.

Sua pontuação INP depende da rapidez com que o navegador retorna feedback visual ao usuário após interagir com seu site.

Para que o navegador seja capaz de receber, processar e apresentar feedback rapidamente, seu thread principal deve ser descarregado de tarefas de longa execução.

Alguns dos maiores culpados incluem recursos pesados ​​de JavaScript e, por último, mas não menos importante, tamanho grande de DOM.

Este é o processo. Agora, vamos desmistificar cada parte.

O tópico principal

O thread principal é o thread principal de execução que lida com a maioria das tarefas críticas associadas à renderização de uma página da web, incluindo:

• Análise de HTML, CSS
• Execução de JavaScript
• construção do Document Object Model (DOM)
• adicionando estilos computados
• produzindo a árvore de layout
• criando registros de pintura

Quando uma tarefa leva mais de 50 ms para ser executada, ela é considerada uma tarefa longa . Isso acontece principalmente devido à execução pesada de arquivos JavaScript ou ao grande tamanho do DOM.

Você deve saber que o thread principal pode executar apenas uma tarefa por vez. Portanto, quanto mais longas as tarefas ocorrerem, mais lento seu site parecerá.

Por que?

Imagine que você tem uma página da web com um recurso interativo, como uma visualização de dados complexa ou uma interface de usuário dinâmica. O usuário aciona uma ação, digamos, clicando em um botão, que inicia uma computação JavaScript pesada (leva mais de 50 ms para ser executada).

Isso apresenta automaticamente vários desafios ao desempenho e à capacidade de resposta do seu site:

1. Essa longa computação bloqueia o thread, impedindo-o de executar outras tarefas, como manipular entradas do usuário, renderizar atualizações ou executar outros scripts.
2. Enquanto a computação está em andamento, o usuário pode tentar interagir com outras partes da página - rolando, clicando em outros botões ou digitando em campos de entrada. No entanto, essas ações não serão processadas imediatamente e a página parecerá congelada ou sem resposta.
3. Se a interação do usuário deveria desencadear uma mudança visual (como destacar um botão quando clicado), esse feedback será adiado até que a tarefa de longa duração seja concluída.

Resumindo, é fundamental descarregar tarefas do thread principal e conhecemos pelo menos 7 maneiras de fazer isso.

O DOM (Modelo de Objeto de Documento)

Uma das principais tarefas do thread é analisar o HTML.

Isso significa que o navegador transforma os dados (marcação HTML) em DOM.

O DOM representa a estrutura da página como uma árvore de objetos que o navegador usa para renderizar o conteúdo na tela.

Um DOM maior normalmente significa mais nós (elementos, texto, comentários, etc.) para o navegador gerenciar.

Quando você tem um tamanho de DOM grande, o thread principal tem mais trabalho a fazer. Demora mais para analisar o HTML em um DOM, aplicar estilos CSS, fazer o layout da página e renderizar novamente partes da página quando ocorrem alterações (como por meio de manipulações de JavaScript).

Árvores DOM grandes também podem retardar as interações da página porque cada interação do usuário (como cliques, rolagens e digitação) geralmente exige que o navegador recalcule estilos e layout para partes do DOM.

Portanto, uma boa regra é que uma página tenha umtamanho DOM de até 1.400 nós.

Uma maneira de melhorar a eficiência do thread principal e mitigar o impacto de um DOM grande é controlar a renderização do conteúdo fora da tela.

E esta propriedade CSS pode ajudá-lo a fazer isso…

Aproveitandoa visibilidade do conteúdopara renderização aprimorada

A propriedade CSS content-visibility é uma adição inovadora à caixa de ferramentas de otimização de desempenho da web.

Esta propriedade, especificamente na sua configuração automática, desempenha um papel fundamental no aumento da eficiência de renderização de páginas da web. O atributo content-visibility: auto informa ao navegador que ele pode pular a renderização e os cálculos de layout de um elemento até que seja necessário, o que geralmente ocorre quando o elemento entra na janela de visualização.

Quando aplicado, content-visibility: auto permite que o navegador otimize a carga de trabalho de renderização. Ao adiar a renderização de conteúdo não visível, a visibilidade do conteúdo diminui significativamente o tempo de carregamento inicial e reduz a carga de trabalho no thread principal, levando a velocidades de renderização mais rápidas e melhor capacidade de resposta da página da web.

Um exemplo prático onde content-visibility: auto brilha está na otimização da interação com o Next Paint.

Por exemplo, em uma postagem de blog com vários comentários ou em um site de notícias de rolagem longa, aplicar content-visibility: auto a comentários individuais ou artigos de notícias que não estão imediatamente visíveis garante que o navegador permaneça responsivo às interações do usuário e carregue o conteúdo visível rapidamente.

Esta é uma maneira simples de implementá-lo:

No entanto, você deve saber que não é uma solução única para todos. Você deve abordar a visibilidade do conteúdo com equilíbrio, testando seus efeitos em vários dispositivos e navegadores para garantir um desempenho consistente e evitar mudanças imprevistas de layout ou problemas de acessibilidade.

Visibilidade de conteúdo em ação

Durante nosso webinar com o Google sobre “Otimizando INP”, tivemos a oportunidade de demonstrar o impacto da visibilidade do conteúdo e como o NitroPack a aplica.

Identificamos a causa raiz do INP ruim usando várias ferramentas – extensão Web Vitals, Chrome DevTools e o Performance Profiler.

No processo, descobrimos que os principais culpados que causaram uma pontuação INP de 272ms foram dois eventos de “estilo Recalcular” que levaram 69,87ms para serem processados ​​e afetaram 1.139 elementos.

Ao habilitar o NitroPack no site, nosso serviço detectou automaticamente os elementos que se beneficiariam da visibilidade do conteúdo: auto . Após uma configuração rápida, conseguimos reduzir o tempo de renderização das tarefas longas e o número de elementos afetados em mais de duas vezes:

Além disso, a pontuação do INP melhorou de “precisa de melhorias” para “bom”.

Prepare seu site para o futuro e passe o INP no piloto automático. Obtenha o NitroPack agora →

Dicas adicionais para otimizar o INP

Sem dúvida, a visibilidade do conteúdo oferece grandes ganhos de desempenho com esforço mínimo.

No entanto, em alguns casos, você pode precisar de poder de desempenho extra para garantir uma capacidade de resposta suave e boas pontuações de INP. Se isso acontecer, aqui estão várias outras estratégias de otimização de INP que você pode utilizar:

1. Renda-se ao tópico principal

Como você já sabe, o desempenho do seu site depende muito de quão ocupado está o thread principal. Ceder ao thread principal refere-se à prática de dividir deliberadamente tarefas de longa execução em partes menores e gerenciáveis ​​para evitar o bloqueio do thread principal por longos períodos.

Isso pode ser alcançado usando funções de rendimento como:

• agendador.yield()
• setTimeout
• requestAnimationFrame
• solicitaçãoIdleCallback

2. Reduza o tamanho do seu DOM

O segundo culpado da capacidade de resposta mencionado foi o tamanho do DOM. Ter um DOM grande pode dificultar significativamente a passagem do INP. Para evitar isso, é crucial minimizar o seu tamanho ou, mais especificamente, limitar a profundidade do seu DOM.

Este objetivo pode ser alcançado através de várias estratégias:

• Evite plug-ins e temas mal codificados.
• Limite o uso de JavaScript para criar nós DOM.
• Opte por alternativas aos construtores de páginas conhecidos por produzirem HTML excessivo.
• Considere dividir um site de página única em várias páginas.
• Evite ocultar elementos desnecessários com a propriedade CSS display: none.
  

3. Evite sobreposição de interações

A sobreposição de interação ocorre quando um usuário interage com outro elemento da página antes que a renderização da primeira interação seja concluída. Isso geralmente acontece durante a digitação rápida em campos de formulário, onde ocorrem vários pressionamentos de teclas rapidamente.

Para otimizar isso, considere:

• Implementação de depuração nas entradas para reduzir a frequência de retorno de chamada de evento.
• Utilizar AbortController para cancelar solicitações de busca em andamento, evitando a sobrecarga do thread principal devido a retornos de chamada de busca excessivos.
  

Embrulhar

Lembre-se: o objetivo do INP é permitir que o navegador pinte a próxima tela o mais rápido possível.

Os usuários querem saber se suas ações estão sendo processadas e se algo está acontecendo em segundo plano.

E combinar recursos do navegador, como visibilidade de conteúdo, com soluções poderosas de desempenho da web, como o NitroPack, significa que você cobre todo o espectro da experiência do usuário – desde o carregamento inicial até a navegação por todas as suas páginas.

Teste o NitroPack gratuitamente →