A parte do imagens e vídeo na payload típico de um site pode ser significativo. Infelizmente, as partes interessadas do projeto podem não estar dispostas a cortar quaisquer recursos de mídia de seus aplicativos conteinerizados. Esses impasses são frustrantes, especialmente quando todas as partes envolvidas querem melhorar o desempenho do site, mas não cheguem a um acordo sobre como chegar lá. Felizmente, o carregamento lento é uma solução que diminui o payload da página inicial e tempo de carregamento, mas sem limitar o conteúdo.
O que é o carregamento lento?
O carregamento lento é uma técnica que adia o carregamento de recursos não críticos na página tempo de carregamento atual. Em vez disso, esses recursos não críticos são carregados no momento precisam. No que diz respeito às imagens, "não críticas" muitas vezes é sinônimo de "fora da tela". Se você usou o Lighthouse e analisou algumas oportunidades de melhoria, talvez você tenha visto alguma orientação sobre isso na forma de Adiar a auditoria de imagens fora da tela:
Você provavelmente já viu o carregamento lento em ação, e ele é semelhante a isso:
- 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 até a janela de visualização.
- A imagem do marcador é substituída pela imagem final repentinamente.
Um exemplo de carregamento lento de imagem pode ser encontrado na famosa plataforma de publicação Medium, que carrega imagens de marcadores leves em carregamento da página e as substitui por imagens carregadas lentamente à medida que são roladas na janela de visualização.
Se você não conhece o carregamento lento, talvez esteja se perguntando sobre a utilidade dele. a técnica e quais são seus benefícios. Continue lendo para descobrir.
Por que fazer o carregamento lento de imagens ou vídeos 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:
- É um desperdício de dados. Em conexões ilimitadas, essa não é a pior coisa que poderia aconteceram (embora você possa usar essa preciosa largura de banda para fazer o download outros recursos que realmente serão vistos pelo usuário). Com dados limitados No entanto, carregar coisas que o usuário não vê pode ser um desperdício do dinheiro.
- Isso desperdiça tempo de processamento, bateria e outros recursos do sistema. Após uma mídia recurso baixado, o navegador deve decodificá-lo e renderizar seu conteúdo na janela de visualização.
O carregamento lento de imagens e vídeos reduz o tempo de carregamento inicial da página. peso da página e uso de recursos do sistema, todos eles têm um impacto positivo na desempenho.
Como implementar o carregamento lento
Há várias maneiras de implementar o carregamento lento. Sua escolha da solução deve levar em consideração os navegadores compatíveis, e também o que você está tentando carregar lentamente.
Os navegadores modernos implementam o carregamento lento em nível de navegador,
que pode ser ativado usando o atributo loading em imagens e iframes.
Para oferecer compatibilidade com navegadores mais antigos
ou executar o carregamento lento em elementos sem o carregamento lento integrado.
você pode implementar 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 sobre todas essas abordagens:
Além disso, compilamos uma lista de possíveis problemas com o carregamento lento (em inglês). e coisas a serem observadas na implementação.
Conclusão
Se usado com cuidado, o carregamento lento de imagens e vídeos pode diminuir significativamente a temperatura inicial tempo de carregamento e payloads da página, incluindo as Core Web Vitals. Os usuários não vão ter acesso a redes desnecessárias atividade, incluindo contenção de rede em conexões mais lentas, e custos de processamento de recursos de mídia que talvez nunca vejam, mas pode acessar esses recursos se quiser.
No que diz respeito às técnicas de melhoria de desempenho, o carregamento lento é razoavelmente não controverso. Se você tem muitas imagens inline em seu site, é uma é uma ótima maneira de reduzir downloads desnecessários. Os usuários do seu site e as partes interessadas do projeto vão gostar!