Primeira dobra

A primeira dobra da página, ou above the fold em inglês, contem os elementos visíveis logo que a página carrega sem que o usuário precise fazer algum tipo de scroll na página. Todos os recursos dentro dessa visualização precisam carregar o mais rápido possível, para não impactar a métrica LCP.

Por isso recomendamos que, para essa visualização:

• Faça o carregamento inline do CSS crítico;

• Não use a técnica de lazy loading em imagens, videos e iframes;

• Não adie o carregamento de scripts importantes;

Vale a pena saber :)

Uma dica legal é pré carregar a primeira imagem do carrossel quando for a index e usar lazy loading nas outras imagens do carrossel, garantindo assim carregamento rápido para a minha dobra sem necessariamente carregar imagens fora da viewport.