Revisão do ShortPixel: Como otimizar o desempenho do seu site por meio da compactação de imagens

Desde 2014, mais de meio milhão de usuários já experimentaram a excelente otimização de imagem do ShortPixel. Prevendo a importância da otimização da velocidade da web no futuro, a empresa sediada na Romênia lançou ShortPixel Adaptive Images, um plug-in extremamente fácil de usar que resolve todos os avisos relacionados a imagens que GTmetrix ou Google PageSpeed ​​Insights relatam em alguns cliques. Isso melhora o seu SEO e a velocidade de carregamento do seu site.

Mas como o plugin faz tudo isso? Vamos descobrir nesta análise detalhada de Shortpixel Adaptive Images ( SPAI para breve).

O que o ShortPixel Adaptive Images faz?

Aqui estão as 4 coisas principais que ShortPixel faz:

• Ele atende as imagens de um CDN : ShortPixel Adaptive Images pega todas as imagens visualizadas pelos visitantes de um site e as exibe a partir do CDN do ShortPixel. O que é um CDN? É uma rede de distribuição de conteúdo. Em palavras simples, é um grupo de servidores distribuídos ao redor do mundo que contém cópias de um site específico. Assim, qualquer usuário terá bons tempos de carregamento, independentemente do país ou área em que se encontre. Ao carregar as imagens do CDN do ShortPixel, o que você está fazendo é aumentar a velocidade de carregamento da página (porque muito provavelmente o CDN carrega mais rápido do que o provedor de hospedagem médio, além de ter servidores em todo o mundo) e economizando alguns recursos do servidor, pois as imagens não serão solicitadas a partir dele, mas do CDN do ShortPixel.
• Ele compacta as imagens : as imagens veiculadas do ShortPixel CDN são otimizadas usando o poderoso algoritmo de otimização do ShortPixel, que oferece 3 níveis de otimização, com perdas, brilhantes e sem perdas. Mais sobre isso mais tarde.
• Ele fornece imagens adaptáveis : é daí que vem o nome do plugin. Digamos que você carregue uma imagem e a adicione a uma página em sua versão em tamanho real. O usuário que visita a página de um smartphone não precisará ver a imagem no mesmo tamanho de um usuário que usa um laptop. O plugin cuida disso, servindo as imagens no tamanho exato que o dispositivo está solicitando. Você já usou GTmetrix e obteve o erro “Tamanho correto das imagens”? Está reclamando exatamente disso. ShortPixel Adaptive Images elimina essa mensagem em alguns cliques!

• Ele resolve todos os problemas relacionados à imagem de que você pode precisar : além de compactar as imagens e exibi-las no tamanho correto, as imagens ainda podem ser melhoradas de várias maneiras. ShortPixel Adaptive Images também cuida disso, e com alguns cliques você pode fazer o seguinte:
  • Remova as informações EXIF
  • Veicule imagens em formato WebP
  • Imagens de carregamento lento
  • Recorte as imagens de forma inteligente
  • Exclua imagens do carregamento lento (útil para pré-carregar uma imagem)

Como funciona o ShortPixel Adaptive Images?

Como explicamos, cada vez que uma das páginas de um site é visitada, ShortPixel Adaptive Images (SPAI) analisa seu código e substitui cada imagem original não otimizada pela imagem do tamanho certo e otimizada. Cada imagem substituída é fornecida a partir do ShortPixel CDN.

O SPAI não altera nenhum dos arquivos do servidor; O SPAI otimiza as imagens em tempo real , o que significa que se você quiser voltar às imagens originais, pode simplesmente desativá-las. Este é o processo detalhado, totalmente transparente para todos os usuários:

1. Um usuário visita uma página que contém imagens.

2. Enquanto a página está carregando, o SPAI procura por quaisquer URLs de imagem no código, por exemplo:

3. Depois de detectar um URL de imagem, ele a envia para os servidores do ShortPixel, que a otimizam e armazenam no CDN do ShortPixel. Esta etapa é realizada apenas na primeira vez que um tamanho de imagem específico é solicitado.

4. Em seguida, o SPAI substitui o URL por um novo, que aponta para o CDN que contém a imagem otimizada e com o tamanho adequado:

5. A página termina de carregar e as imagens foram veiculadas a partir do CDN rápido do ShortPixel!

Instalação e configuração de ShortPixel Adaptive Images

Instalação

Este é o passo mais fácil, ele é instalado como qualquer outro plugin. Esta é a página que você precisa procurar: ShortPixel Adaptive Images - WordPress.org

Configurando

Assistente de integração

Se for a primeira vez que você está usando ShortPixel Adaptive Images, você será redirecionado para o Assistente de integração:

Este assistente de 4 etapas o ajudará a configurar o SPAI adequadamente para que todas as imagens sejam servidas a partir do CDN otimizado.

Se, por exemplo, você já estava usando o SPAI e atualizado para a nova versão, você pode reiniciar o assistente indo para Configurações> ShortPixel AI e clicando no botão “Assistente de configuração” localizado no menu Ajuda superior direito:

Observe que ShortPixel Adaptive Images não requer uma API Key para começar a funcionar (ao contrário do ShortPixel Image Optimizer). Você só precisa associar seu site / domínio à sua conta para que seus créditos ShortPixel sejam usados, e isso será feito automaticamente pelo Onboarding Wizard.

Depois de concluir o Assistente de integração, certifique-se de limpar o cache do seu site para que as imagens otimizadas apareçam!

Definições

ShortPixel Adaptive Images é muito fácil de usar, pois começa a fazer sua mágica logo após ser ativado e configurado com o Onboarding Wizard; não há necessidade de clicar em nenhum botão ON ou similar. No entanto, o SPAI também fornece algumas configurações para ajustar a otimização da imagem. Para acessar, basta fazer login na área de administração do WordPress e ir em Configurações> ShortPixel AI. Examinaremos as configurações mais importantes, portanto, estamos começando com a guia Compactação .

• Nível de compressão : aqui podemos escolher o nível de compressão que queremos que nossas imagens tenham.
  • Com perdas é a melhor opção para a maioria dos usuários. As imagens processadas com os algoritmos com perdas são as menores imagens otimizadas que se pode obter. Portanto, se a velocidade do seu site é fundamental e você deseja o melhor equilíbrio entre a otimização e a qualidade da imagem, recomendamos que use a otimização com perdas.
  • Brilhante é a melhor escolha se você ainda se preocupa com GTmetrix ou Google PageSpeed ​​Insights, mas acredita que uma ligeira perda de velocidade da página é um compromisso aceitável para uma qualidade de imagem de alto nível.
  • Com Lossless, as imagens são idênticas pixel a pixel aos originais, mas oferecem uma redução de tamanho menor em comparação com arquivos processados ​​com perdas ou brilhantes. Se você deseja que suas imagens permaneçam intactas, selecione esta opção.
• Suporte WebP : O formato WebP é um formato de imagem criado pelo Google que obtém excelentes resultados de compactação com pouca perda de qualidade de imagem. Um exemplo rápido de como o WebP se comporta: tiramos uma foto da internet e usando um conversor online aleatório de JPG para WebP passamos de 1,05 MiB para 344 KiB, uma redução de 67,93%, e a qualidade da imagem é praticamente idêntica! Portanto, ao marcar a opção “Suporte WebP” informamos ao SPAI que a imagem veiculada pelo CDN do ShortPixel deve estar no formato .webp desde que o navegador seja compatível.

• Remover EXIF : O plugin permite eliminar as informações “extras” embutidas na própria imagem, como a localização, o autor, o modelo da câmera, etc. Essas informações geralmente não são necessárias e removê-las ajuda a reduzir o peso da imagem um pouco. Recomendado para habilitá-lo.

Agora vamos para a guia Comportamento . Entre muitos outros ajustes, podemos encontrar o seguinte:

• Recorte inteligente : O plug-in identificará os casos em que nem toda a imagem é exibida e recortará de acordo.
• Usuários conectados : Por padrão, ShortPixel AI serve e otimiza as imagens, mesmo se você estiver logado. No entanto, se você quiser salvar algum tráfego CDN e créditos, você pode simplesmente desativar esta opção e então o SPAI só funcionará para usuários registrados. usuários (os visitantes).
• LQ image placeholders : LQIP significa Low-Quality Image Placeholders. São imagens de qualidade muito baixa (e, portanto, muito leves) que serão carregadas com o carregamento inicial da página e, quando a página estiver totalmente carregada, serão substituídas por imagens de qualidade total. Isso ajuda a aumentar o tempo de carregamento percebido.

A seguir, na guia Areas , encontraremos todos os tipos de configurações para informar ao SPAI quais imagens devem ser analisadas e otimizadas:

• Imagens SVG (não serão otimizadas, apenas armazenadas no CDN).
• Imagens em CSS Neste caso, o próprio arquivo CSS também será armazenado no CDN.
• Imagens em blocos JS
• Imagens em dados JSON

Por fim, na guia Exclusões , encontramos alguns campos onde podemos excluir imagens da otimização:

• Seletores excluídos : aqui podemos escrever os seletores CSS que queremos que o SPAI exclua da otimização.
  • Se você escrevê-los em “Não carregue lentamente”, esses seletores não serão carregados lentamente, mas ainda assim serão otimizados e redimensionados.
  • Se você escrever em “Não redimensionar”, o SPAI otimizará essas imagens, mas não as redimensionará.
  • Se você escrevê-los em “Deixar completamente de fora”, o SPAI irá ignorá-los completamente, sem otimização ou redimensionamento.
• URLs excluídos : se você quiser que o SPAI ignore algumas das imagens por URL, é aqui que as excluímos, usando expressões regulares (para excluir todos os GIFs ou PNGs, por exemplo) ou caminhos (para excluir uma única imagem, por exemplo) . O plugin inclui uma boa explicação de como usar este campo, certifique-se de dar uma olhada!

Depois que todas as configurações estiverem definidas, certifique-se de verificar a nova ferramenta Image Checker, uma ferramenta direta para verificar o status das imagens otimizadas em qualquer página do site . Basta visitar qualquer uma de suas páginas enquanto estiver conectado; na barra de ferramentas, você notará o famoso robô ShortPixel:

Clique naquele ícone e você ligará o Verificador de Imagem. Uma etiqueta aparecerá para cada imagem: “CDN” ou “ORIGEM”. “CDN” significa que a imagem é servida otimizada do CDN do ShortPixel e “ORIGIN” que é servida do servidor ou, em outras palavras, que ShortPixel Adaptive Images não a está processando.

Além disso, o cursor mudará para uma cruz (⌖) e quando clicarmos em uma imagem, obteremos informações e ações adicionais:

Preços e planos

Antes de falarmos sobre preços, precisamos lembrar que o SPAI funciona na hora. Ele só processa as imagens se elas forem visualizadas pelo menos uma vez no front-end. Até que isso aconteça, a imagem permanecerá sem processamento e, portanto, não gastará nenhum crédito.

Processar uma imagem significa corte inteligente (se escolhido), redimensionamento e otimização. Uma vez que a imagem é processada, ela é armazenada nos servidores ShortPixel CDN e pode ser servida a todos usando a cota de tráfego CDN que você adquiriu. Contanto que haja cota de tráfego CDN suficiente disponível, as imagens otimizadas serão servidas a partir do CDN do ShortPixel.

ShortPixel oferece créditos que são convertidos em cota CDN. A regra é simples: 5 MB de tráfego CDN = 1 crédito . Os créditos únicos e mensais podem ser usados ​​para processar imagens.

Planos mensais

• Plano gratuito = 100 créditos = 500 MB de tráfego CDN = ~ 500 visitas / mês
• Plano de US $ 4,99 / mês = 5.000 créditos / mês = 25 GB de tráfego CDN = ~ 25.000 visitas / mês
• Plano de US $ 9,99 / mês = 16.000 créditos / mês = 80 GB de tráfego CDN = ~ 80.000 visitas / mês
• Plano de US $ 29,99 / mês = 55.000 créditos / mês = 275 GB de tráfego CDN = ~ 275.000 visitas / mês
• Plano de US $ 99,99 / mês = 220.000 créditos / mês = 1 TB de tráfego CDN = ~ 1.100.000 visitas / mês

Planos únicos

• US $ 9,99 - 10.000 créditos = 50 GB = ~ 50.000 visitas
• US $ 19,99 - 30.000 créditos = 150 GB = ~ 150.000 visitas
• $ 29,99 - 50.000 créditos = 250 GB = ~ 250.000 visitas
• $ 99 - 170.000 créditos = 850 GB = ~ 850.000 visitas
• US $ 249 - 500.000 créditos = 5 TB = ~ 2.500.000 visitas

Exemplo: digamos que você possui um site médio com mais de 5.000 imagens que recebe 10.000 visitas por mês.

Um plano mensal de $ 4,99 / mês permitirá 25 GB de tráfego de CDN, e isso, a partir de nossos testes, se traduz em cerca de 25.000 visitas por mês.

Saiba mais sobre planos e preços aqui.

Vale a pena?

Levando em consideração que a parte mais pesada de um site são sempre as imagens e que cada segundo a mais que o site leva para carregar resulta em perda de usuários e conversões, definitivamente vale a pena . É um plugin para instalar e esquecer e, caso queira retornar às imagens originais, basta desinstalá-lo e isso resolverá o problema.

Além disso, sua equipe de suporte é maravilhosa e dezenas de usuários podem garantir isso no wordpress.org.

É um plugin altamente recomendado que ajuda a melhorar a velocidade do seu site, aumenta sua posição no Google e sua contagem de visitantes. E se você combiná-lo com uma hospedagem de boa qualidade como o Cloudways, os resultados serão ainda mais emocionantes.

Esperamos que esta análise de ShortPixel Adaptive Images ajude você a tornar seu site super-rápido!