Guia Essencial para Melhorar os Principais Pontos Vitais da Web Usando Lazy Loading e BlurHash

A velocidade do site tornou-se cada vez mais importante nos dias de hoje, pois estudos mostram que 70% dos consumidores dizem que a velocidade da página afeta suas decisões de compra online. Mas, indo além da experiência do consumidor, o Google atualizou recentemente seu relatório Core Web Vitals (CWV) e forneceu orientações sobre as métricas mais importantes sobre o desempenho da página. Isso significa que a qualidade da experiência do usuário e o desempenho da página são cada vez mais considerados quando se trata de seu algoritmo de busca.

Uma rápida recapitulação: Core Web Vitals mede três aspectos principais da experiência na web: carregamento, interatividade e estabilidade visual. Uma das maneiras mais eficazes de melhorar o Core Web Vitals (CWV) – e SEO – é otimizando os ativos de imagem. Existem algumas maneiras de fazer isso, incluindo compactação de imagem adequada, redimensionamento e conversão de imagem de última geração.

Além dessas três técnicas, você provavelmente verá Adiar imagens fora da tela, também chamado de carregamento lento, como uma das oportunidades de melhoria em sua análise do PageSpeed Insights . O uso de placeholders, como BlurHash, também são ótimas opções para melhorar os tempos de carregamento percebidos e oferecer uma melhor experiência do usuário quando uma conexão ou site está lento para carregar imagens.

O que é Lazy Loading?

Imagine uma página de e-commerce com 100 fotos de sapatos em alta resolução. Se um navegador carregar todas as fotos de uma vez, algumas na parte inferior da página podem aparecer antes que você possa rolar até elas, enquanto as fotos em sua janela de visualização podem não, o que pode criar uma experiência ruim para o usuário.

O carregamento lento é a técnica que adia o carregamento de imagens fora da tela até que o visitante role e as imagens entrem na janela de visualização. Ele permite que menos imagens sejam carregadas a qualquer momento e acelera o tempo de carregamento de cada imagem, o que pode melhorar o Largest Contentful Paint.

O carregamento lento também pode melhorar o atraso da primeira entrada (FID). FID é o tempo que uma página leva para responder à primeira interação do usuário, como um clique. Ao atrasar estrategicamente o carregamento de grandes componentes, como imagens, o site pode processar JavaScript e responder às interações mais rapidamente. No exemplo abaixo, para nytimes.com , no dia da análise, poderia ter melhorado a velocidade da página em 1,5 segundos se tivesse implementado o carregamento lento.

Como implementar o carregamento lento

A forma como você implementa o carregamento lento depende da sua base de código e dos navegadores aos quais você oferece suporte. Além de loading=“lazy”, um atributo HTML compatível com Chrome, os desenvolvedores podem usar JavaScript e/ou API do Observador de Interseção solicitações de. O seguinte gráfico de caniuse.com mostra quais navegadores suportam o atributo HTML lazy loading:

No entanto, dada a rapidez com que os navegadores estão mudando e seus recursos exclusivos, os desenvolvedores consideram cada vez mais o uso do JavaScript lazysizes.js como uma prática recomendada. No vídeo a seguir, nossos parceiros da Cantilever demonstram e comparam as implementações loading=“lazy” e lazysizes.js.

Prática recomendada: lazysizes.js + imgix.js

Usar lazysizes.js junto com imgix.js é uma ótima maneira de combinar os benefícios da otimização de imagem imgix e carregamento lento. Aqui está um exemplo de como isso é feito como uma propriedade meta:

<cabeça>

<meta property="ix:srcAttribute" content="data-src">

<meta property="ix:srcsetAttribute" content="data-srcset">

<meta property="ix:sizesAttribute" content="data-sizes">

</head>

E aqui está um exemplo de como isso é feito em JavaScript:

imgix.config.srcAttribute = 'data-src';

imgix.config.srcsetAttribute = 'data-srcset';

imgix.config.sizesAttribute = 'tamanhos de dados';

Use espaços reservados com carregamento lento

O risco do carregamento lento é que ele pode aumentar a instabilidade do layout da página, levando a uma pontuação CLS pior. Por exemplo, quando um visitante rola para baixo rapidamente e começa a ler a legenda de uma imagem, a imagem pode aparecer repentinamente, tirando a legenda da vista. A maneira de atenuar esse problema é usar espaços reservados de baixa qualidade ou BlurHashName , que ocupará um quadro até que seja apropriado carregar uma versão totalmente detalhada.

Depois de aplicar o código BlurHash à sua imagem, o espaço reservado resultante ficará assim:

Usando BlurHash como seu espaço reservado

BlurHashName é um algoritmo que permite criar uma versão compacta de um marcador de posição de imagem. O algoritmo cria uma string de caracteres que codifica uma representação borrada da imagem, com a quantidade de caracteres determinada pela qualidade da imagem. A string é curta o suficiente para que você possa exibi-la diretamente na marcação de sua página e, em seguida, a string pode ser decodificada na imagem desfocada - sem a necessidade de buscar e baixar um arquivo de imagem.

Um dos principais benefícios do BlurHash é que você pode converter arquivos de imagem grandes em uma quantidade menor de dados para que uma representação borrada da imagem apareça enquanto o arquivo original ainda está sendo carregado. Um engenheiro da Wolt teve a ideia do BlurHash enquanto tentava encontrar uma solução melhor para como as imagens seriam carregadas em uma conexão de internet mais lenta.

Como usar o recurso BlurHash

Para criar uma imagem borrada, basta adicionar fm=blurhash a qualquer imagem para obter a string BlurHash. Depois de obter a string BlurHash, você pode usá-la no componente BlurHash. O componente BlurHash é responsável por decodificar o hash em uma imagem que pode ser exibida.

Neste exemplo específico, o componente React BlurHash gera um elemento canvas na marcação final. Observação: a marcação gerada pode diferir ligeiramente dependendo de qual biblioteca ou decodificador de estrutura é usado.

importar './App.css';

importar Imgix de "react-imgix";

importar { Blurhash } de "react-blurhash";

função Aplicativo() {

Retorna (

<div className="Aplicativo">

<section className="App-header">

<Blurhash

hash="eCF6B#-:0JInxr?@s;nmIoWUIko1%NocRk.8xbIUaxR*^+s;RiWAWU"

largura={600}

altura={400}

/>

<Imgix

src="https://assets.imgix.net/example-images/puffins.jpg"

largura={600}

altura={400}

/>

</section>

</div>

);

}

Depois de aplicar o código BlurHash à sua imagem, o espaço reservado resultante ficará assim:

Inclua a string BlurHash com sua marcação no momento da compilação para garantir que os usuários vejam a versão desfocada da imagem imediatamente.

O take-away

Suas métricas de CWV são mais importantes do que nunca, mas a boa notícia é que existem algumas maneiras rápidas e impactantes de melhorá-las. Combinar carregamento lento com otimização de imagem e usar espaços reservados eficazes como BlurHash são duas maneiras de alcançar resultados comprovados. Você pode facilmente implementar essas técnicas usando o imgix, confira nosso documentação ou Experimente de graça .