Otimização de carregamento de imagem

Vamos falar sobre o carregamento preguiçoso
Em Tilda, o carregamento lento é habilitado por padrão para todos os sites. Ele permite que os sites carreguem mais rápido, mesmo em dispositivos móveis.
Implementar o carregamento lento é mais um passo na otimização de sites no Tilda para carregamento mais rápido. As tecnologias estão em constante evolução e estamos sempre trabalhando para tornar o carregamento ainda mais rápido.
Lazy Load é um plugin que bloqueia o carregamento de imagens fora da área de visualização. Ou seja, as imagens são carregadas à medida que o usuário rola a página. Vamos dar uma olhada em como funciona.

Vamos selecionar um modelo de Tilda regular e publicá-lo:http://project130385.tilda.ws/

Abra o console do desenvolvedor do navegador, habilite a imitação de velocidade lenta (3G) nas configurações e atualize a página.
DOMContentLoaded: 628 milissegundos
Esse parâmetro indica que todos os scripts básicos e HTML foram carregados, permitindo que o usuário visualize a página imediatamente.

Fim: 1,65 segundos
Esse parâmetro indica quanto tempo levou para o site inteiro carregar.

Transferido: 263KB
Esse parâmetro mostra a quantidade de dados que foi transferida (em bytes).
Esses números parecem muito otimistas, mas tudo é relativo, não é? Vá para as Configurações do Site → Mais e marque a caixa de seleção "Desativar carregamento preguiçoso para imagens". Teste a página mais uma vez.
DOMContentLoaded: 697 milissegundos
Esse parâmetro indica que todos os scripts básicos e o código HTML foram carregados, o que significa que o usuário pode exibir a página imediatamente.

Fim: 10,14 segundos
Esse parâmetro mostra quanto tempo levou para o site inteiro carregar.

Transferido: 1.8MB
Esse parâmetro mostra a quantidade de dados que foi transferida (em bytes).
O tempo geral de carregamento da página e a quantidade de dados transferidos se multiplicaram.

Vamos ver o que mais podemos aprender usando o PageSpeed Insights. Vamos verificar a página com a otimização desativada.
Agora, vamos ativar o Lazy Load para imagens:
O Lazy Load bloqueia imagens que não são visíveis para os usuários,
o que permite que os sites carreguem mais rapidamente.
Observação
Como removo o código JavaScript e CSS que impede a exibição da parte superior da página?
Essa pergunta geralmente surge depois de fazer o teste. O Google desaconselha o uso de scripts na parte superior da página.
Em teoria, você pode remover os scripts. No entanto, você deve ter em mente que é uma análise automatizada e não é precisa. Como vimos, as páginas carregam muito rapidamente quando o Lazy Load está ativado porque otimizamos tudo o que havia para otimizar. A análise mostrou que a remoção de scripts economiza 0,3 segundos, mas dificilmente faz qualquer diferença.

É por isso que recomendamos ignorar os resultados do teste automatizado que reage tão mal aos scripts no topo da página.

A propósito, como o Google passa em seu próprio teste?
Oops!
Feito em
Tilda