Adiar imagens fora da tela: como corrigir esta oportunidade do Google Lighthouse

Medir o desempenho do seu site costuma ser um trabalho de sucesso ou fracasso. Isso ocorre porque as ferramentas disponíveis não nos deram uma visão adequada da experiência do usuário em relação ao desempenho desse site. No entanto, o Google Lighthouse corrige muitas dessas desvantagens e faz com que você possa ajustá-lo ao seu fluxo de trabalho de desenvolvimento. Uma das 'oportunidades' dentro do Lighthouse é adiar imagens fora da tela no WordPress. A boa notícia é que isso é simples de conseguir.

Neste post, veremos 🔎 como adiar imagens fora da tela no WordPress usando código e plugins. Primeiro, porém, temos que esclarecer alguns termos sobre o Google Lighthouse e, em seguida, falar sobre onde a métrica Adiar imagens fora da tela deve estar em sua lista de prioridades.

A diferença entre uma recomendação de auditoria e uma oportunidade

Antes de entrarmos em como você adia imagens fora da tela no WordPress, é importante entender como essa instrução se encaixa no Google Lighthouse. É uma 'oportunidade' de desempenho e não uma recomendação de auditoria. Aqui está a diferença:

• Recomendação de auditoria . Isso terá um impacto definitivo em suas pontuações no Google Lighthouse, e você deve dar atenção a essas métricas como prioridade.
• Oportunidades . Embora ainda tenham alguma importância, eles não afetarão suas pontuações de auditoria. Como tal, você pode considerá-los uma preocupação secundária.

A métrica Adiar imagens fora da tela é uma oportunidade. Isso significa que ainda pode ter um impacto, mas é algo que você pode observar quando sua pontuação não puder mais melhorar.

Adiar imagens fora da tela – uma definição

Seu site provavelmente usará imagens em todas as seções de suas páginas. Alguns deles serão exibidos 'acima da dobra' – ou seja, na tela sem a necessidade de rolagem. Como tal, as imagens fora da tela representam todo o resto.

A métrica Adiar imagens fora da tela refere-se a elementos visuais que atendem a qualquer um dos quatro critérios a seguir:

• Uma imagem deve começar abaixo da área visível da página e terminar três vezes a altura dessa área.
• Imagens muito pequenas (aquelas com menos de 0,02 MB de tamanho) não serão consideradas na métrica Adiar imagens fora da tela .
• As páginas que demoram mais de 50 ms para carregar acionarão a oportunidade.
• Se sua página definir um atributo de carregamento, você não verá Adiar imagens fora da tela . Alerta de spoiler: fique à vontade com loading="lazy" agora!

Além do mais, você pode descobrir que um site com muitas imagens fora da tela terá pontuações ruins de Largest Contentful Paint (LCP). Isso traz uma mudança confusa no Google Lighthouse 10, que abordaremos a seguir.

Melhorar o tempo de interação (TTI) é uma métrica depreciada

Em versões mais antigas do Google Lighthouse, Adiar imagens fora da tela afetava o TTI. No entanto, o Google agora considera isso uma métrica depreciada. A ponderação de 10% forneceu a pontuação geral da auditoria de desempenho transferida para Mudança cumulativa de layout (CLS) e agora fornece ponderação de 25% [1][2] .

Isso traz um problema, pois, independentemente de você adiar ou não as imagens para fora da tela, isso não causará uma mudança de layout. Como tal, é por isso que Adiar imagens fora da tela agora é apenas uma oportunidade, em vez de uma recomendação de auditoria completa.

Por que o Google Lighthouse solicitará que você adie imagens fora da tela

Apesar do rebaixamento de Adiar imagens fora da tela , ele ainda tem alguma importância para velocidade de carregamento e desempenho. Você pode ver o impacto de imagens totalmente carregadas fora da tela em segundos em qualquer ferramenta que escolher:

Embora essa métrica não afete o CLS ou o TTI, ela pode ter um impacto no LCP – embora menor em muitos casos. Também é um bom lembrete de que você só deve carregar imagens quando precisar. A seguir, discutiremos o porquê.

Por que você não deve carregar todas as suas imagens de uma vez

Na conversa, todos nós trabalhamos sobre o 'princípio cooperativo'. Esta não é uma aula de ciências sociais, então não entraremos em muitos detalhes aqui. No entanto, há uma faceta importante desse conceito que importa para a métrica Adiar imagens fora da tela . A 'máxima de quantidade de Grice' afirma que você só deve revelar o máximo de informações necessárias para estabelecer o contexto.

Por que isso é importante? Porque se você der muita informação, isso pode causar sobrecarga para o ouvinte (entre outros problemas).

Como tal, você também não deve carregar todas as imagens do seu site de uma só vez! Isso ocorre por alguns motivos sólidos:

• Um usuário não verá as imagens fora da tela e, caso contrário, elas consumirão os recursos necessários para os elementos na tela.
• O carregamento de imagens fora da tela pode contribuir para uma Experiência do usuário (UX) ruim, porque uma página será carregada sem que nada aconteça na janela de visualização.
• Para o usuário, isso também pode custar-lhes financeiramente. Por exemplo, considere alguém navegando em um site que não adia nenhuma imagem fora da tela enquanto usa dados móveis, em vez de Wi-Fi.

Dado que o foco do Google Lighthouse está no UX e como o desempenho percebido o afeta, é vital entender tudo o que foi dito acima. A boa notícia é que existe uma maneira direta de adiar imagens fora da tela.

Como adiar imagens fora da tela em seu site

A resposta é: carregamento lento. Essa é a maneira mais direta e eficaz de reduzir o impacto das imagens fora da tela no desempenho percebido do seu site. Melhor ainda, a maioria dos navegadores suporta carregamento lento:

No entanto, o Firefox oferece suporte apenas para carregamento lento de imagens, o que será importante se você optar por implementar isso para quadros embutidos. Ainda assim, você tem várias maneiras de implementar isso. A abordagem principal usa o atributo loading HTML dentro de um elemento <img> ou <iframe> . Você terá a opção de usar três valores diferentes:

• eager . Isso dirá ao navegador para carregar essas imagens primeiro. É a opção padrão e é tão bom quanto não incluí-la, pois as imagens sempre serão renderizadas, independentemente de onde estiverem na página.
• lazy . Isso adiará o carregamento de uma imagem ou iframe até atingir uma distância codificada da janela de visualização. A distância exata pode diferir entre os navegadores e você também desejará sempre especificar as dimensões da imagem.
• auto . O navegador escolherá a melhor opção para o trabalho.

Isso é tão simples de implementar quanto você esperaria:

 <img src="image.png" loading="lazy" alt="" width="200" height="200">

Claro, não há nada para ver no front-end aqui, porque a imagem estará fora da tela e invisível de qualquer maneira.

Se você optar por usar Accelerated Mobile Pages (AMP), poderá implementar o carregamento lento automaticamente usando o elemento amp-img . Quando se trata de outras plataformas, módulos ou plugins são a melhor maneira de implementar o carregamento lento.

Se você deseja adiar imagens fora da tela no WordPress, use um plug-in dedicado para fazer isso. Por padrão, o WordPress implementa carregamento lento para todas as imagens, mas esse pincel amplo pode não atender às suas necessidades exatas.

Usando plug-ins do WordPress para adicionar carregamento lento ao seu site

Sempre que você quiser adicionar qualquer funcionalidade extra ao WordPress, um plugin é sempre sua melhor aposta. Quando se trata de carregamento lento, esse também pode ser o caso.

O WordPress possui vários plug-ins que podem ajudá-lo a adicionar carregamento lento, mas nem todos são iguais. Por exemplo, alguns têm classificações e críticas ruins, outros não recebem muitas atualizações e alguns nem conseguem fornecer o nível certo de funcionalidade. No entanto, o Optimole pode entregar as mercadorias quando se trata de compressão de imagem e carregamento lento.

Esta não será uma visão geral do que o Optimole pode fazer em geral – nosso site irmão Themeisle pode mostrar isso a você. Em vez disso, destacaremos as opções rápidas e descomplicadas que você tem para carregar imagens lentamente. Para encontrar as opções certas, vá para a tela Mídia > Optimole > Configurações e procure a chave de alternância Dimensionar imagens e carregamento lento . Você vai querer ter certeza de que está ativado:

Depois de fazer isso, várias opções ficarão disponíveis na seção Avançado > Lazyload :

Isso fornece um conjunto valioso de opções para trabalhar. Por exemplo, você pode ativar um espaço reservado para suas imagens, alternar entre o carregamento lento clássico ou nativo do navegador, ativar o dimensionamento de imagem e muito mais.

No entanto, há duas configurações que você deseja investigar mais a fundo. O primeiro permite excluir um determinado número de imagens do carregamento. O padrão é três, mas você pode definir quantas imagens tiver acima da dobra. Isso significa que você implementará o carregamento lento para todas as imagens no site:

O outro recurso interessante é a capacidade de especificar seletores CSS para ajudá-lo a carregar imagens de plano de fundo preguiçosamente:

Isso oferece uma maneira de personalizar toda a experiência de carregamento lento com base em suas necessidades e na pontuação do Lighthouse, mantendo alguma flexibilidade. Além do mais, tudo isso é possível com a versão gratuita do Optimole!

Conclusão 🧐

Se as imagens não estiverem na tela, você não precisa carregá-las. Sem uma solução como o carregamento lento, você pode aumentar o tempo de carregamento do seu site. Também afetará algumas das métricas mais importantes relacionadas ao desempenho. A oportunidade de adiar imagens fora da tela do Google Lighthouse dá a você um empurrão para implementar algum tipo de carregamento lento, e há muitas maneiras sem código de fazer isso.

Por exemplo, o Optimole é um dos melhores plugins para ajudá-lo a adiar imagens fora da tela no WordPress. Você pode definir opções com uma especificidade maior do que a abordagem global 'sempre ativa' do WordPress. No entanto, existem outros plugins que ajudam você a fazer isso também, como plugins de cache. Até mesmo o caminho de codificação é direto e, melhor ainda, você obtém suporte de quase todos os navegadores.

O Optimole se tornará seu método para adiar imagens fora da tela no WordPress? Compartilhe seus pensamentos conosco na seção de comentários abaixo!