A velocidade do site tornou-se cada vez mais importante nos dias de hoje, pois estudos mostram que   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. 70% dos consumidores  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   . O uso de placeholders, como   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. análise do PageSpeed Insights BlurHash,  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   , no dia da análise, poderia ter melhorado a velocidade da página em 1,5 segundos se tivesse implementado o carregamento lento.  nytimes.com  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  solicitações de. O seguinte gráfico de  mostra quais navegadores suportam o atributo HTML lazy loading:    API do Observador de Interseção   caniuse.com 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.   https://youtu.be/66FYrn3JDJo?embedable=true  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  , que ocupará um quadro até que seja apropriado carregar uma versão totalmente detalhada.  BlurHashName  Depois de aplicar o código BlurHash à sua imagem, o espaço reservado resultante ficará assim:   Usando BlurHash como seu espaço reservado  é 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.  BlurHashName  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  enquanto tentava encontrar uma solução melhor para como as imagens seriam carregadas em uma conexão de internet mais lenta.   teve a ideia do BlurHash   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  ou  .   documentação   Experimente de graça

Sign Up for Free

Get A Demo

Read the Docs

Visit Website

Este áudio é produzido no idioma original da história!

Muito longo; Para ler

Make resilience your competitive advantage

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

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Guia do arquiteto para construir arquitetura de referência para um Datalake de IA/ML

Navegando pelas águas: desenvolvendo aplicações RAG de nível de produção com data lakes

Vazamento do prompt do sistema Claude Sonnet 3.5: uma análise forense

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Guia do arquiteto para construir arquitetura de referência para um Datalake de IA/ML

Navegando pelas águas: desenvolvendo aplicações RAG de nível de produção com data lakes

Vazamento do prompt do sistema Claude Sonnet 3.5: uma análise forense

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps