NesTe artigo, você entenderá como o atributo Lazy Loading é essencial para a melhoria do Core Web Vitals e da performance do seu site.
O que é Core Web Vitals?
Core Web Vitals são métricas do Google que avaliam a experiência da página. Para que o site não perca visitas, as métricas servem para avaliar a estabilidade e a velocidade com que as páginas respondem às interações dos usuários.
O resultado dessa jornada do usuário mais rápida auxilia nas estratégias de SEO e em ganhos nos resultados de negócio.
O que é Lazy Loading?
Lazy Loading faz com que conteúdos que possuam o atributo não sejam carregados antes de estarem próximos ao viewport. Ou seja, adia o carregamento de conteúdos dentro do construtor de páginas do Adobe Commerce (antigo Magento).
É implementado em imagens e vídeos, pois são elementos mais pesados da página e, por muitas vezes, diminuem a velocidade das informações do site.
Para os medidores do Google, a prioridade inclui carregamento completo das páginas, conteúdos exibidos mais rápido e de maneira mais ágil, e diminuição considerável da desistência na navegação do site por parte do usuário.
O que acontece quando não se usa o Lazy Loading?
Quando não se utiliza o Lazy Loading, todos os conteúdos do site serão carregados imediatamente, fazendo com que conteúdos fora da tela disputem recursos de download com conteúdos mais relevantes disponíveis na primeira visualização.
Especificações do Lazy Loading no Adobe Commerce
Após estudos profundos pelos especialistas de desenvolvimento da WEBJUMP, foi criada uma extensão de um arquivo do core (PageBuilder) e foi aplicado o parâmetro “loading=lazy”, que proporciona a aplicação de elementos de imagem do pagebuilder no frontend da loja Adobe Commerce.
Dentro dessa implementação, também há uma melhoria de CSS, que exibe o primeiro item do slider no momento do carregamento da tela para melhorar a nota de LCP (Largest Contentful Paint), que consiste em mostrar a primeira imagem do slider e em posicioná-la para carregar antes do slider. O usuário consegue visualizar a imagem, enquanto ocorre o carregamento das informações do site.
Como o Lazy Loading melhora o Core Web Vitals
Entenda os principais pontos em que o Lazy Loading otimiza a performance de páginas:
Performance do site antes do Lazy Loading aplicado:
Performance do site depois do Lazy Loading aplicado:
A performance aumenta consideravelmente seus números e taxas de carregamento. O objetivo é aprimorar as notas de Core Web Vitals nos sites para haver melhorias contínuas de performance e, assim, garantir a melhor experiência no seu site para o usuário, sem criar fricções e melhorando o SEO para rede de pesquisa do Google.
Testes realizados pela skilled.co mostraram que as páginas carregadas em 2,4 segundos tiveram uma taxa de conversão de 1,9%, enquanto que nas carregadas com mais de 5,7 segundos a taxa de conversão foi de 0,6%.
Estudos recentes feitos pelo Walmart revelaram que, a cada um segundo de melhoria no tempo de carregamento da página, as conversões aumentam em 2%.
Dessa maneira, torna-se essencial que haja otimização da velocidade do site para o aumento das taxas de conversão.
Instalação do Lazy Loading no Adobe Commerce
A instalação do módulo deve ser realizada via Composer, disponível nas versões do Adobe Commerce suportadas pelos módulos:
– 2.4.4
– 2.4.5
Arquivo responsável por referenciar o html que será responsável por aplicar a tag de Lazy Loading:
Após a criação do arquivo acima, é realizado o fallback do master.html, e nele foi adicionada a tag de loading=lazy nos elementos img:
No final, foi criado um arquivo chamado di.xml, e esse arquivo é utilizado para adicionar um item para os argumentos padrões do módulo DefaultConfigProvider, sendo aplicada a configuração do Lazy Loading:
Próximos passos do Lazy Loading para implementar na sua empresa
A implementação do Lazy Loading já está disponível. Além disso, estudos detalhados estão sendo desenvolvidos para iniciar a implementação de mais um atributo, que consiste em um componente de texto com landing lazy, ou seja, bloco de texto com possibilidade de inserção de imagens.
*Artigo desenvolvido em parceria com Paloma Coelho, Desenvolvedora Front-end na WEBJUMP.