O que é a renderização progressiva?
Renderização progressiva é o nome dado às técnicas utilizadas para melhorar o desempenho de uma página da web (em particular, melhorar o tempo percebido de carregamento) para exibir o conteúdo o mais rápido possível.
Essa prática costumava ser muito mais comum nos dias anteriores à internet banda larga, mas ainda é utilizada no desenvolvimento moderno, pois as conexões de dados móveis estão se tornando cada vez mais populares (e inconstantes)!
Carregamento preguiçoso (lazy loading) de imagens
As imagens na página não são carregadas todas de uma vez. A imagem só é carregada quando o usuário rola para perto/na parte da página que exibe a imagem.
<img loading="lazy">é uma maneira moderna de ensinar o navegador a adiar o carregamento de imagens que estão fora da tela até que o usuário rola perto delas.- Use JavaScript para ver a posição da rolagem e carregar a imagem quando a imagem estiver prestes a vir na tela (comparando as coordenadas da imagem com a posição da rolagem).
Priorizar conteúdo visível (ou renderização acima)
Inclua apenas o mínimo de CSS/conteúdo/scripts necessário para a quantidade de páginas que seriam renderizadas no navegador do usuário primeiro para exibir o mais rápido possível, você pode então usar scripts adiados ou ouvir o evento DOMContentLoaded/load para carregar em outros recursos e conteúdo.
Fragmentos HTML assíncronos
Liberando partes do HTML para o navegador, à medida que a página é construída no back-end. Mais detalhes sobre a técnica podem ser encontrados here.