Um dos fatores que podem tornar o seu site lento é o uso de fotos grandes e não otimizadas para a web.
Às vezes, quando as pessoas tentam publicar algo rapidamente, elas carregam fotos diretamente de suas câmeras fotográficas, em resolução muito alta, fotos que pesam de 4 a 5 MB.
Uma imagem otimizada tem menos kilobytes sem qualquer perda visível de qualidade, e você deve sempre otimizar as imagens sem perder qualidade antes ou durante o upload para o seu site.
Não importa se o seu site é WordPress ou outra plataforma você pode otimizar imagens para a web e fazer com que seu site carregue mais rápido.
Uma vantagem de usar o WordPress é que você tem plug-ins que podem otimizar imagens à medida que você as carrega em seu site e também otimizar imagens existentes em massa.
Então, quais são as melhores práticas em relação às fotos?
Não perca qualidade
Siga os objetivos do seu site. Não otimize cegamente só porque alguma ferramenta lhe deu uma pontuação ruim. As ferramentas não conhecem os objetivos do seu site.
Se eu tivesse um blog de moda ou uma loja, mostraria imagens lindas; Não me importa a nota do YSlow ou do Pagespeed Insights.
Não se preocupe com notas e pontuações, faça o que é melhor para você e seus visitantes. É melhor gastar mais em CDN para fornecer imagens maiores e melhores, do que otimizar demais as imagens e ter um site feio.
Pode custar-lhe visitantes e dinheiro.
Não carregue imagens maiores do que você precisa
Se a largura do seu conteúdo for 620px, você deve redimensionar suas imagens para 620px antes de carregá-las em seu site.
Se quiser que os visitantes vejam uma imagem maior ao clicar nela, você pode usar uma largura de 1024px. Defina uma das miniaturas do WordPress com largura de 620px e use essa miniatura em sua página e vincule-a à imagem maior.
Você provavelmente não precisa de imagens superiores a 1024px (isso deve ser suficiente para a maioria dos blogs), mas e se precisar?
Nesse caso, você pode considerar fazer upload de imagens em resoluções maiores e usar um CDN.
Entraremos em mais detalhes sobre o CDN em um minuto.
Otimize as imagens antes de fazer upload
Você pode otimizar suas imagens em seu computador com o Photoshop. Algumas pessoas recomendam que você torne sua imagem um pouco mais nítida com Smart Sharpen, Unsharp Mask, High Pass Filter ou qualquer ferramenta de sua preferência; O Photoshop tem várias opções.
Não vi muita diferença (em KB) após a nitidez, mas não sou um mestre em Photoshop.
Redimensione a foto para a resolução que você precisa em seu site, use Salvar para a web, escolha JPG, Qualidade entre 60-80%, marque Progressivo e depois Salvar.
Eu recomendo que você use JPG, a menos que precise de transparência e precise usar PNG.
Se você não possui o Photoshop, pode usar estas ferramentas para otimizar:
- Motim (Windows)
- Imageoptim (Mac)
- Jpegmini (on-line, Mac e Windows)
- Kraken (on-line)
- Compressor.io (on-line)
Eu mesmo uso o Jpegmini; Ainda consigo reduzir outros 5 a 10%, mesmo depois de otimizar primeiro com o Photoshop.
Ou otimize durante o upload
Não acredito que exista uma maneira que seja a melhor para otimizar imagens, se você não quiser perder tempo otimizando suas fotos no seu computador antes de carregá-las, você pode optar por deixar um plugin do WordPress fazer todo o trabalho para você.
Existem muitos plug-ins do WordPress que você pode usar:
- WP Smush – Otimização de imagem
- Otimizador de imagem ShortPixel
- Otimizador de imagem Kraken.io
- Optimus - Otimizador de imagens WordPress
- Nuvem de otimização de imagem EWWW
- Otimizador de imagem Imagify
Com esses plug-ins, você pode otimizar imagens no upload e também otimizar aquelas que já carregou.
Não usei todos, apenas WP Smush e ShortPixel, e achei o ShortPixel excelente. Ele pode reduzir alguns KB mesmo para imagens previamente otimizadas com Photoshop e Jpegmini.
Outro plugin útil é o Imsanity .
Se você tiver um site com vários autores, precisará controlar quais imagens as pessoas carregam. Defina uma largura, altura e qualidade máximas. Quando um usuário carrega uma imagem maior, o plug-in irá reduzi-la automaticamente para o tamanho configurado.
WP Smush Pro também faz isso.
Exibindo imagens
Agora que você otimizou as imagens, você também pode melhorar a forma como apresenta essas imagens em seu site.
Se você tiver muitas fotos em uma página, como em um blog de moda, por exemplo, poderá aproveitar o carregamento lento.
Isso significa que suas imagens serão carregadas somente quando estiverem visíveis, conforme o visitante rola para baixo.
Você pode usar um dos seguintes plug-ins do WordPress para isso:
- Carga preguiçosa
- BJ Carga Preguiçosa
- Carga preguiçosa de foguete
- Carregamento lento de imagem
- Carregamento lento WPParse
Não sei dizer qual plugin é melhor. Você precisa testar porque pode haver incompatibilidades com o seu tema. Por exemplo, o carregamento lento não funciona para imagens em destaque se você tiver um tema Genesis Framework.
Além disso, enquanto eu estava testando o carregamento lento, parecia estranho no celular. Havia espaços em branco onde as fotos deveriam estar porque as imagens não carregavam tão rápido quanto na visualização da área de trabalho.
Outra coisa que você pode fazer para acelerar o tempo de carregamento é veicular imagens de um subdomínio, como images.domain.com.
Você precisa criar um subdomínio a partir do cPanel ou qualquer painel de controle que sua empresa de hospedagem esteja oferecendo e, em seguida, configurar o WordPress para carregar mídia desse subdomínio usando o WP Original Media Path .
Posso escrever uma postagem detalhada no blog para pessoas que desejam fazer isso (se alguém solicitar), mas minha recomendação é usar um CDN. É uma solução muito mais direta.
Use um CDN
Cloudflare é super fácil e gratuito. Basta alterar seus servidores de nomes de domínio para Cloudflare e ativá-los (verifique a nuvem laranja para ver se há entradas DNS) e pronto. Seus arquivos estáticos (imagens, CSS, JS) serão carregados do Cloudflare CDN.
Existem outras empresas de CDN que você pode usar, listadas abaixo. Mas acho que Cloudflare é o mais fácil de implementar:
Limpe você mesmo
Cada vez que você muda de tema, você deixa um rastro de miniaturas não utilizadas e entradas de banco de dados relacionadas a essas imagens.
Ao mudar de tema, você pode usar o AJAX Thumbnail Rebuild para reconstruir miniaturas para se adequarem ao seu novo tema.
Miniaturas antigas podem ser excluídas do servidor usando um dos seguintes plugins:
Eu recomendo o Thumbnail Cleaner porque é rápido. Mas remove todas as suas miniaturas, não apenas as não utilizadas. Após a exclusão, você deve usar o AJAX Thumbnail Rebuild para reconstruir as miniaturas necessárias.
As miniaturas não utilizadas não afetam o desempenho do seu site. Eles apenas ocupam espaço no seu servidor. Porém, existem entradas de banco de dados relacionadas a essas miniaturas e é uma boa prática manter seu banco de dados o mais limpo possível.
Isso é o que faremos na próxima etapa – limpar o banco de dados do WordPress.
Deixe uma resposta