A parte de imagens e vídeos no payload típico de um site pode ser significativa. Infelizmente, as partes interessadas do projeto podem não estar dispostas a cortar recursos de mídia dos aplicativos existentes. Esses impasses são frustrantes, especialmente quando todas as partes envolvidas querem melhorar o desempenho do site, mas não conseguem chegar a um acordo. Felizmente, o carregamento lento é uma solução que diminui o payload da página inicial e o tempo de carregamento, mas não reduz o conteúdo.
O que é carregamento lento?
O carregamento lento é uma técnica que adia o carregamento de recursos não essenciais no tempo de carregamento da página. Em vez disso, esses recursos não essenciais são carregados no momento em que são necessários. No que diz respeito a imagens, "não crítico" costuma ser sinônimo de "fora da tela". Se você usou o Lighthouse e analisou algumas oportunidades de melhoria, talvez tenha recebido alguma orientação nesse domínio na forma da auditoria de adiamento de imagens fora da tela:
Você provavelmente já viu o carregamento lento em ação. A resposta será semelhante a esta:
- Você chega a uma página e começa a rolar a tela enquanto lê o conteúdo.
- Em algum momento, você rola uma imagem de marcador de posição até a janela de visualização.
- A imagem do marcador é substituída pela imagem final.
Um exemplo de carregamento lento de imagens pode ser encontrado na conhecida plataforma de publicação Medium, que carrega imagens de marcadores de posição leves no carregamento da página e as substitui por imagens carregadas lentamente à medida que são roladas para a janela de visualização.
Se você não conhece o carregamento lento, talvez esteja se perguntando se a técnica é útil e quais são os benefícios dela. Continue lendo para descobrir.
Por que carregar imagens ou vídeos lentamente em vez de apenas carregá-los?
Porque é possível que você esteja carregando coisas que o usuário talvez nunca veja. Isso é problemático por alguns motivos:
- Isso desperdiça dados. Em conexões ilimitadas, isso não é o pior que pode acontecer, embora você pudesse estar usando essa preciosa largura de banda para fazer o download de outros recursos que serão de fato vistos pelo usuário. No entanto, em planos de dados limitados, carregar coisas que o usuário nunca vê pode ser um desperdício de dinheiro.
- Isso desperdiça tempo de processamento, bateria e outros recursos do sistema. Após o download de um recurso de mídia, o navegador precisa decodificá-lo e renderizar o conteúdo na janela de visualização.
O carregamento lento de imagens e vídeos reduz o tempo de carregamento da página inicial, o peso da página inicial e o uso de recursos do sistema, todos com impactos positivos no desempenho.
Como implementar o carregamento lento
Há várias maneiras de implementar o carregamento lento. Sua escolha de solução precisa considerar os navegadores compatíveis e também o que você está tentando carregar lentamente.
Os navegadores mais recentes implementam o carregamento lento no nível do navegador,
que pode ser ativado usando o atributo loading em imagens e iframes.
Para oferecer compatibilidade com navegadores mais antigos
ou executar carregamento lento em elementos sem carregamento lento integrado,
implemente uma solução com seu próprio JavaScript.
Existem várias bibliotecas para ajudar você a fazer isso.
Consulte as postagens neste site para ver detalhes completos de todas essas abordagens:
Além disso, compilamos uma lista de possíveis problemas com o carregamento lento e itens a serem observados na implementação.
Conclusão
Se usado com cuidado, o carregamento lento de imagens e vídeos pode reduzir significativamente o tempo de carregamento inicial e os payloads da página no seu site, incluindo as Core Web Vitals. Os usuários não vão ter atividades de rede desnecessárias, incluindo contenção de rede em conexões mais lentas, nem custos de processamento de recursos de mídia que talvez nunca apareçam, mas ainda podem conferir esses recursos se quiserem.
No que diz respeito às técnicas de melhoria de desempenho, o carregamento lento é razoavelmente incontroverso. Se o site tiver muitas imagens inline, essa é uma ótima maneira de reduzir downloads desnecessários. Os usuários do seu site e as partes interessadas do projeto vão gostar!