O que é renderização progressiva?

A renderização progressiva é uma técnica para melhorar o desempenho das páginas web, na qual o conteúdo é carregado e exibido por etapas, em vez de tudo de uma vez. Isto melhora a perceção do desempenho e a interatividade, permitindo ao utilizador ver e interagir com uma parte da página antes de todos os recursos serem carregados.

Abordagens principais:

• Carregamento preguiçoso (Lazy Loading): Carregar imagens, vídeos ou outros elementos que consomem muitos recursos apenas quando se tornam visíveis na viewport do utilizador.

  <!-- imagem com lazy loading -->
  <img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Descrição da imagem">
  

• Renderização por streaming: Enviar o código HTML em partes, permitindo que o navegador comece a analisar e renderizar antes de receber toda a página.

• Renderização no lado do servidor (SSR) ou Hidratação: Gerar o HTML inicial no servidor para uma visualização rápida do conteúdo, e depois "reviver" a estrutura estática no cliente com JavaScript para a interatividade.

  // Exemplo de conceito de hidratação
  // No cliente
  const appElement = document.getElementById('app');
  // Montar a aplicação Vue/React/etc. na estrutura DOM existente
  Vue.createApp(App).mount(appElement);
  // ou React.hydrate(<App />, appElement);
  

• Priorizar conteúdo visível (renderização acima do fold): Carregar e renderizar o conteúdo visível na primeira parte da página (sem rolar), com carregamento diferido do resto.

A aplicação da renderização progressiva melhora as principais métricas Web Vitals:

• Largest Contentful Paint (LCP): Acelera a exibição do elemento mais grande.
• First Contentful Paint (FCP): Diminui o tempo até aparecer o primeiro conteúdo.
• Cumulative Layout Shift (CLS): Embora não seja diretamente, o uso correto de placeholders e lazy loading pode ajudar a reduzir deslocamentos inesperados do conteúdo.