As imagens são um dos ativos mais importantes do seu site. e deve ser parte integrante da sua estratégia. conteúdo. Ele ajuda você a contar uma história e se comunicar com os clientes em mais do que palavras. Mas e se você não usar o tamanho correto da imagem? E se essas imagens não forem otimizadas para telas móveis, que agora é a maneira mais popular de acessar a Internet? Como garantir que suas fotos sejam enviadas em um tempo decente? Temos algumas boas práticas para otimizar imagens e medir desempenho. Este post mostrará como corrigir todos esses problemas de imagem para que fique ótimo em qualquer dispositivo e não afete seu desempenho.
Por que transmitir imagens otimizadas para dispositivos móveis 1. As imagens afetam o desempenho do seu site. As imagens do WordPress consomem uma quantidade significativa de espaço em disco e largura de banda, como você pode ver em nosso exemplo abaixo, onde as imagens ocupam 48,25% do tamanho do meu conteúdo.
Mas à medida que as marcas continuam a investir em imagens de alta qualidade para seus sites, elas arriscam e diminuem a velocidade do site. Embora as imagens possam tornar um site mais atraente e visualmente atraente, elas podem diminuir o tempo de upload para dispositivos móveis, levando a menos conversões e oportunidades de receita perdidas. O Google realizou c
alguns estudos e descobriram que um segundo pode afetar até 20% de suas conversões. 1 em 2 visitantes sairão do seu site. móvel se levar mais de três segundos para carregar. Isso pode ser muito dinheiro indo diretamente para seus concorrentes. O impacto de um site móvel lento nas visitas – Fonte: Pense com o Google Mary Ellen Coe – presidente da Google Customer Solutions – também explica que as empresas devem ver a velocidade dos sites móveis como um motor de crescimento. Os visitantes estarão mais ansiosos para se envolver e comprar em um site WordPress amigável para dispositivos móveis. Além disso, veremos como exatamente o desempenho da imagem afeta a pontuação geral de desempenho. Para medir o desempenho móvel, o Lighthouse leva em conta os seguintes seis valores: Você pode estar se perguntando onde está o problema \
Ampliar corretamente imagens (implementar imagens responsivas) Codificar imagens Efetivamente Atrasar imagens fora da tela (implementar carregamento lento) Servir imagens em formatos de nova geração, usar WebP sempre que possível Use formatos de vídeo para conteúdo animado, Converter GIFs em formatos de vídeo Dica: Ao otimizar e compactar imagens, você abordará a recomendação do Lighthouse e aproximará os seis KPIs da zona verde. Isso terá um impacto positivo na pontuação geral de desempenho. Cada dia, mais e mais pessoas estão usando seus smartphones para acessar a internet, o que significa que se seu site não for otimizado, você perderá milhões (ou até bilhões) de clientes em potencial.
vantagem sobre concorrentes que ainda não o fizeram, mas também tem muitos benefícios, como melhorar a experiência do usuário, tornar tudo mais rápido e fácil de usar – o que por sua vez melhora a satisfação do cliente.
Os dispositivos móveis oferecem um tamanho de tela menor do que os desktops ou laptops, o que significa que as imagens precisam ser proporcionalmente dimensionadas para caber corretamente no espaço da tela. Quando as imagens não são redimensionadas corretamente, o conteúdo é difícil de ler em telas pequenas, reduzindo a experiência do usuário. O gráfico abaixo ilustra perfeitamente as preferências de design para cada dispositivo: Otimização de imagem e texto para dispositivos móveis – Fonte: Pesquisa Google Central Esquerda: O texto é pequeno e difícil de ler, e a imagem pequena no canto superior esquerdo não é atraente.
Certo: o conteúdo se encaixa perfeitamente na tela. A imagem principal também é bem dimensionada. Sentimos que quero ler mais e continuar o pergaminho. Além disso, você já ouviu falar da nova atualização da experiência da página do Google? Atualizar a experiência da página do Google é o fator de classificação de SEO mais recente. Inclui um conjunto de KPIs que medem como os usuários percebem a experiência de interagir com sua página. web. E adivinhem? Inclui compatibilidade móvel! Sua experiência na página determina seu ranking no Google, tornando-o mais um motivo crucial para otimizar seu conteúdo móvel. A importância da compatibilidade móvel para SEO – Fonte: Sinais de pesquisa para experiência de página É por isso que é mais importante do que nunca que o design do seu site também seja adaptado para dispositivos móveis. Quer saber se o seu site é rápido em dispositivos móveis? Curioso sobre quais imagens afetam mais seu desempenho? Isso leva-nos à próxima secção. Como medir o impacto das imagens no celular Existe
quatro ferramentas de desempenho populares que você pode usar para medir o impacto das imagens na velocidade do celular, a saber: Google PageSpeed Insights (PSI) GTmetrix Pingdom Google Search Console Para todos, basta digitar um URL para testar o tempo de carregamento da página, executar análises e encontrar gargalos. Vamos dar uma visão geral de cada um deles.
O PageSpeed Insights é uma ferramenta gratuita lançada pelo Google para medir o desempenho do seu site. WordPress em dispositivos móveis e desktop. Os relatórios são baseados na tecnologia Lighthouse e sugerem como melhorar o desempenho de uma página. PSI ajuda a medir Core Web Vitals, um conjunto de fatores específicos que o Google considera importantes na experiência geral do usuário de uma página da Web. Você não verá nenhum valor que diga explicitamente nada sobre otimizar imagens móveis. Em vez disso, o Lighthouse verifica suas páginas com as melhores práticas de desempenho móvel e fornece uma lista de otimizações de imagem: Lista de otimizações de imagem recomendadas do Lighthouse – Fonte: PSI Quer saber mais sobre como melhorar os valores do Lighthouse? WP Rocket escreveu um guia detalhado sobre como melhorar Core Web Vitals. GTmetrix GTmetrix é também uma ferramenta de análise de desempenho do site criada pela GT. net. A missão da GTMetrix é analisar o desempenho do seu site. e dar-lhe uma lista de dicas úteis para melhorá-lo. Os principais KPIs medidos pelo GTmetrix são semelhantes ao PSI: encontramos uma nota geral, os três Core Web Vitals e os outros valores do Lighthouse. Além disso, você também pode observar o tempo de carga total e os valores de TTFB.
GTmetrix informa como o conteúdo da página é dividido em imagens, vídeos, JS, CSS, etc. Em seguida, para identificar quais imagens precisam ser otimizadas, você pode usar a seção cascata. Seleccione a página \
verificar quais imagens precisam ser compactadas ou redimensionadas mais. Waterfall Chart for Images – Fonte: GTmetrix Nota: Para executar um determinado teste móvel no GTMetrix, você precisará da versão Pro. Só então você pode acessar testes móveis, ambos através de uma solução de hardware real. 3.Pingdom Pingdom pode informar se um site é desligado devido ao compartilhamento de rede ou falha do servidor DNS em qualquer lugar do mundo. Monitore o estado do seu site. web e seu desempenho (com uma nota de A a F). Além da nota geral de desempenho, os principais KPIs medidos são tamanho da página, número de solicitações HTTP e tempo de carregamento. Uma das seções interessantes é \
Problemas de imagem de arroz no celular, aqui estão algumas dicas técnicas que você pode compartilhar com seus desenvolvedores. Nota: Estas técnicas de otimização de imagem irão beneficiar a sua marca. Mantenha imagens de alta qualidade, criando uma experiência móvel mais rápida para seus visitantes. Como otimizar e carregar imagens menores para dispositivos móveis Esta seção mostrará como otimizar suas imagens para dispositivos móveis e melhorar o desempenho.Há tudo o que você precisa saber sobre otimização de imagens e como usar imagens menores para dispositivos móveis. 1.Redimensionar e transmitir imagens otimizadas para dispositivos móveis A maneira mais fácil de ajudar a tornar seu site mais fácil e rápido em dispositivos móveis é otimizar o tamanho e a resolução de sua imagem. O problema é que você pode querer servir imagens pequenas sem comprometer a qualidade, certo? Neste caso, você deve aplicar as duas táticas de alto nível: redimensionar e compactar imagens para dispositivos móveis. Vamos começar por redimensionar as fotos. Quando você carrega uma imagem para uma página, você pode especificar o número de pixels diretamente no WordPress. Por exemplo, você pode definir um novo tamanho, como 400×300 em vez de 1200×800. Como reduzir o tamanho da imagem no celular? Modo automático: use um plugin como o Imaginy para redimensionar várias imagens online. Com o Imagify, tudo o que você precisa fazer é instalar o plugin e verificar algumas opções, como a resolução máxima na qual você deseja redimensionar imagens: Para otimizar suas imagens em massa no seu celular, basta ir para o painel Imagify: Media → Bulk Optimize, para que você possa otimizar todas as imagens do seu site. com um clique. Modo manual: use um editor como a biblioteca WordPress ou ferramentas nativas do Windows\/Mac para redimensionar suas imagens. Isso pode levar muito tempo se você tiver muitas fotos. Redimensionamento manual de
uma imagem – Fonte: Biblioteca WordPress Como criar várias versões de design para dispositivos móveis?
| Comparando formatos com o tamanho do celular – Fonte: ImageKit Para resumir, o Google criou uma lista com o formato mais eficaz, dependendo do tipo de imagens que você usa no celular: | Algumas semanas atrás, compilamos uma lista dos melhores plugins de otimização de imagem que você pode usar para acelerar seu site WordPress. Deixem-me partilhar convosco os resultados interessantes que alcancei com o Imaginy: realizo uma auditoria de velocidade utilizando o Imaginy e esta imagem de 450 KB: |
| Tamanho original |
Salvo (%) |
As minhas auditorias passadas depois do Imagify