O Google é o mecanismo de busca dominante. Esta é a principal fonte de tráfego para a maioria das empresas. Portanto, para quem leva negócios a sério, é muito importante ter uma boa classificação no Google.
Embora ninguém saiba quais são todos os fatores que determinam as classificações do Google, é um fato bem conhecido que a velocidade da página é um dos principais. A velocidade da página não afeta apenas o tempo de carregamento, mas também interfere na experiência do usuário, que o Google dá grande importância e até mencionou isso .
Não há nada mais irritante para um usuário do que um site lento. Eles são impacientes, com um período de atenção muito curto. E eles não têm tempo nem tolerância com um site que não respeita isso. E o Google sabe disso.
E se isso não bastasse, de acordo com Google existe uma relação direta entre as taxas de conversão e o tempo de carregamento da página.
A velocidade é importante.
O que é o Google PageSpeed Insight?
Esta é uma ferramenta gratuita do Google que oferece muitas dicas e truques úteis de desempenho para melhorar o tempo de carregamento da página. O PageSpeed Insights analisa o conteúdo de uma página da web e, em seguida, gera sugestões para tornar essa página mais rápida. Isso é feito levando em consideração diversos relatórios diferentes, bem como análises realizadas no Google Lighthouse, cujos detalhes podem ser encontrados Aqui .
Este PageSpeed também reporta imagens?
Sim.
O Google PageSpeed gera um relatório para a página inteira. E como as imagens fazem parte da página, elas também estão incluídas no relatório. E agora, usando o Lighthouse, ele faz algumas sugestões excelentes para melhorar os recursos relacionados a imagens em seu site.
Mas por que imagens?
Na maioria das vezes, as imagens são o ponto mais fraco no seu objetivo de melhorar o desempenho geral da página. A otimização de imagens agora está disponível como padrão em muitas ferramentas, como ImageKit.io . E você também pode resolver esses problemas sem nenhuma alteração significativa em seu código. Portanto, esta geralmente é a primeira e mais fácil solução para resolver o problema.
Quais problemas de imagem o Google relata?
No momento da publicação deste artigo, os relatórios do Google PageSpeed Insights 5 problemas com imagens no site. Vejamos eles e como você pode resolver cada um deles usando métodos diferentes.
Veicule imagens em formatos de próxima geração
WebP, JPEG2000 e JPEG XR são formatos de imagem modernos suportados por navegadores que fornecem melhor compactação e qualidade visual do que os formatos JPG e PNG mais antigos. Maior compactação, mantendo a qualidade visual, significa que suas imagens consomem menos dados de rede e carregam mais rapidamente.
Observação:
Dentre esses três formatos, o WebP é o que tem ganhado máxima distribuição. O Firefox também aceita, agora suportado em mais de 80% dos dispositivos . No entanto, tanto o JPEG2000 quanto o JPEG XR ficaram aquém do suporte do navegador em 13% e 4% respectivamente. JPEG2000 é compatível com Safari, enquanto JPEG XR suportado em navegadores IE. Com as taxas de adoção tão baixas, você pode querer ignorá-las totalmente para economizar algum esforço. A ferramenta PageSpeed do Google também não relata casos em que JPEG2000 e JPEGXR não são usados.
Como fazer isso?
Você pode usar ImageKit.io para entregar imagens automaticamente no formato desejado. Suporta conversão para WebP, mas não suporta JPEG2000 ou JPEGXR.
Além disso, ImageKit.io também leva em consideração outros fatores, como tipo de conteúdo da imagem, nível de compactação, etc. Fornecer o melhor formato que retorne o menor tamanho de imagem possível (o que em muitos casos envolvendo compactação PNG com perdas pode não ser o caso do WebP).
Imagens bem escolhidas
Depois que a imagem for convertida para o formato correto, também é importante reduzi-la às dimensões corretas que são realmente necessárias na página.
Uma imagem clicada com uma câmera DSLR pode ter mais de 5.000 x 3.000 pixels de tamanho, o que não é o que você deseja em seu site. Você provavelmente precisará dessa imagem em três páginas diferentes do seu site, cada uma com requisitos de tamanho diferentes: a página de detalhes do produto (cerca de 1000 x 1000 pixels de tamanho), a página de listagem do produto (400 x 400 pixels de tamanho) e a página inicial do site. (tamanho da miniatura 100×100 pixels). Então você tem que redimensionar e cortar a imagem original de aproximadamente 5000×3000 pixels nesses três tamanhos.
Se você tem um site responsivo e deseja saber como carregar o tamanho correto da imagem em diferentes dispositivos, considere implementar os atributos srcset e tamanhos da tag img em vez de uma tag src simples. Esses novos atributos estendidos permitem fornecer ao navegador uma lista de URLs de imagens e especificações para usá-las. O navegador baixa automaticamente o URL da imagem correta da lista disponível para cada dispositivo. Olhar Aqui para obter mais detalhes sobre isso.
O redimensionamento ineficaz costuma ser a causa raiz do aumento do peso da imagem em uma página da web.
Como fazer isso?
A melhor maneira de fazer isso é usar uma solução de redimensionamento de imagem em tempo real como ImageKit.io, que permite redimensionar e cortar uma imagem em qualquer tamanho apenas especificando-a no URL. Isto tem duas vantagens –
- Você não precisa fazer esse redimensionamento manualmente ou escrever seu próprio código para fazer isso.
- A solução em tempo real permite adaptar rapidamente suas imagens às mudanças de layout.
Normalmente, o design do site muda ou é necessária uma dimensão de imagem diferente para acomodar um novo dispositivo. Ter uma solução de redimensionamento de imagens em tempo real garante que você possa se adaptar facilmente a tal situação, simplesmente alterando as dimensões especificadas no URL.
Codifique imagens com eficiência
Depois de converter a imagem para o formato e tamanho desejado, é necessário compactar a imagem para reduzi-la ao tamanho desejado. Ou seja, você precisa compactar a imagem sem degradar sua qualidade visual percebida.
Normalmente, os níveis de compressão são determinados em uma escala de 1 até 100, onde 100 é a melhor qualidade (ou menor compactação). Farol usado pelo Google PageSpeed, verifica a imagem em um nível de compactação de 85.
Geralmente é seguro fornecer imagens com um nível de qualidade de 75–90. Nestes níveis, o equilíbrio entre o tamanho e a qualidade da imagem é aceitável e a deficiência visual não será perceptível ao olho humano. Ajustar o nível de compactação pode reduzir significativamente o tamanho de uma imagem, fazendo com que ela carregue mais rápido.
Como fazer isso?
ImageKit.io fornece compressão em em tempo real diretamente do URL.
Você pode definir a configuração de qualidade desejada no URL para obter a imagem nesse nível de compactação ou pode definir o nível de qualidade padrão para cada imagem diretamente na barra de ferramentas.
Deixe de lado as imagens dos bastidores
Longas páginas da web abrangendo vários pergaminhos são comuns atualmente. Uma página típica de listagem de produtos de comércio eletrônico contém centenas de produtos em uma página, cada um com sua própria imagem. Isso significa que a página pode carregar algo entre 100 e 200 imagens, o que é aproximadamente 1 MB de imagens por página.
Embora, quando o usuário carrega a página pela primeira vez, ele não consegue ver a página inteira. Ele simplesmente olha a primeira página do site, que cabe na sua tela. Isso significa que apenas os primeiros 10 a 20 produtos ou banners estarão visíveis para o usuário quando a página for carregada pela primeira vez. Portanto, as 80 a 100 imagens restantes não precisam ser carregadas até que o usuário comece a rolar a página para baixo.
Isso reduz o número de imagens necessárias para carregar logo no início, liberando recursos do dispositivo (recursos de rede e de computação) para processar outros recursos da página da web, como JS, CSS, etc. , Por sua vez, acelerando o carregamento da página.
Como fazer isso?
Esse Um excelente tutorial que demonstra como o carregamento lento pode ser aplicado ao seu site para diferentes tipos de imagens usando várias técnicas de Javascript. Ele também fornece métodos para equilibrar a experiência do usuário e o desempenho ao carregar imagens lentamente usando algumas das transformações fornecidas pelo ImageKit.io.
Além do que é mencionado no tutorial vinculado acima, os navegadores modernos também pretendem suportar o carregamento lento de imagens usando o atributo “loading”. Provavelmente estará disponível a partir do Chrome 76 para dispositivos desktop. Até o lançamento, os métodos Javascript mencionados no guia funcionarão bem em todos os navegadores.
Sirva recursos estáticos com uma política de cache eficiente
A maneira mais rápida de carregar um site é não carregá-lo. Ou seja, devemos tentar evitar solicitações que sejam transmitidas pela rede, o que acarreta um novo download do recurso.
As imagens não mudam durante um longo período de tempo. Os sapatos pretos da Adidas terão a mesma aparência para todos os usuários por vários meses. Isso o torna um forte candidato para armazená-lo localmente no cache do navegador do usuário por um longo período de tempo e, em seguida, reutilizar essa cópia em cache local em vez de baixar novamente a imagem pela rede.
Você pode definir o tempo de cache de qualquer recurso usando o cabeçalho Cache-Control. Você pode ler mais sobre isso Aqui .
As imagens devem ser armazenadas em cache por um longo período (geralmente um ano ou mais). No entanto, depois que o PageSpeed Insight foi testado e testado com diferentes tempos de cache, ele procura um tempo de cache de pelo menos 180 dias para esse alerta específico. Este aviso aparecerá para recursos com tempo de cache inferior a 180 dias.
ImageKit.io cuidará disso automaticamente e todas as imagens sempre serão fornecido cabeçalhos corretos para controlar o cache com prazo de validade de 180 dias.
PENSAMENTOS FINAIS
Enquanto você passa horas e dias criando o site perfeito para o seu negócio, não se esqueça de que as imagens exibidas nele afetam diretamente a experiência do usuário e a velocidade de carregamento da página.
Otimizar suas imagens e fornecer a melhor experiência ao usuário dará ao seu site a vantagem necessária sobre seus concorrentes.
Fonte de gravação: https://blog.imagekit.io
