16 maneiras de acelerar seu site WordPress hoje!

Acelerar seu site é a única maneira garantida de obter mais tráfego e fazer mais vendas.

Em 2010, o Google confirmou que a velocidade do site é um dos mais de 200 indicadores que afetam os rankings de busca. Seus dados mostram que quando as páginas carregam lentamente, as pessoas gastam menos tempo. No entanto, a maioria de nós coloca pouco foco em tornar nossos sites mais rápidos.

Talvez ajustar os gatilhos de velocidade internos do seu site WordPress seja muito assustador.

Para esclarecer como reduzir o tempo de carregamento pela metade, convidamos Stavros Papadakis para apresentar seu processo para acelerar os sites dos clientes.

Se o tempo de carregamento for superior a 3 segundos ou o tamanho da página for superior a 2 MB, isso pode ser um grande problema que está custando dinheiro, tanto em vendas perdidas quanto em taxas de servidor.

Existem muitas ferramentas online gratuitas, como WebPageTest, GTmetrix, Google PageSpeed ​​Insights e Pingdom, que podem ajudá-lo a identificar problemas que causam tempos de carregamento lentos e uma experiência de usuário ruim para seu site.

Veja como cuidar do desempenho do seu site.

1. Ative a compactação

A compactação de seus arquivos CSS e Javascript ajudará os navegadores a baixá-los mais rapidamente.

A compactação Gzip pode reduzir facilmente os tamanhos dos arquivos de 200+KB (não compactados) para menos de 40 KB (compactados). Contanto que seu servidor tenha a compactação habilitada, aproveite-a.

Você pode ter certeza de que seus usuários experimentarão uma aceleração drástica do seu site para desktops e celulares, ativando a compactação em seu servidor.

Adicione o seguinte trecho de código em seu arquivo .htaccess para habilitar a compactação de arquivos estáticos.

AddOutputFilterByType DEFLATE application/x-httpd-php text/php text/html text/plain text/css text/xml application/x-javascript text/javascript application/javascript text/x-js

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] sem gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Anexo de cabeçalho Variar User-Agent

2. Otimize suas imagens

As imagens são as principais culpadas pela lentidão de um site. Sempre otimize suas imagens (especialmente aquelas acima de 50 KB) antes de carregá-las em seu site.

A maneira ideal de otimizá-los é usar o Photoshop ou qualquer outro software de manipulação de imagens. Salve imagens para web com qualidade de imagem de até 60%.

Você também deve usar imagens progressivas para arquivos JPG porque a renderização progressiva de imagens proporciona uma experiência de usuário mais suave.

Por favor, verifique as duas imagens a seguir, elas parecem iguais, mas a da esquerda não é otimizada e tem 80 KB e a da direita é otimizada e é apenas 18 KB, 4 vezes menor.

Imagem não otimizada

Imagem otimizada

3. Mova os arquivos Javascript para o rodapé

Embora bibliotecas Javascript como jQuery, Mootools e Prototype sejam incríveis porque estendem a funcionalidade do seu site, elas também podem bloquear a renderização de suas páginas.

Os navegadores não começam a carregar o conteúdo até que todos os arquivos Javascript no cabeçalho da página tenham sido baixados.

Uma maneira fácil de resolver esse problema é mover seus arquivos Javascript, aqueles que não são necessários durante a renderização inicial da página, do cabeçalho para o rodapé da página.

Se você usa Wordpress, pode mover chamadas de script de header.php para footer.php em seu tema e usar true como o quarto parâmetro sempre que usar a função wp_enqueue_script.

Mover scripts JS para o rodapé da página

4. Verifique se o KeepAlive está ativado

O Apache (o servidor mais usado para planos de hospedagem compartilhada em empresas de hospedagem de baixo custo) possui um ótimo “recurso” chamado KeepAlive que mantém as conexões abertas para mais de uma solicitação HTTP.

Certifique-se de que o KeepAlive esteja ativado em sua empresa de hospedagem.

Se você tiver acesso ao seu arquivo httpd.conf, habilite o KeepAlive certificando-se de ter “KeepAlive On” nele, caso contrário, apenas adicione o seguinte trecho de código em seu arquivo .htaccess.

 <ifModule mod_headers.c>
 Conjunto de cabeçalhos Manutenção ativa da conexão
</ifModule>

Ative o KeepAlive para o seu site

5. Mesclar arquivos CSS – pequenos arquivos CSS embutidos

Os navegadores lidam apenas com tantas solicitações HTTP ao mesmo tempo. Quando esse limite é atingido, alguns arquivos aguardam enquanto outros são baixados.

Ao mesclar todos os seus arquivos CSS em apenas um arquivo CSS, a página é renderizada muito mais rápido.

Se você tiver arquivos CSS com menos de 2 KB, deverá incorporá-los em vez de fazer uma solicitação HTTP extra.

O Wordpress tem alguns ótimos plugins, como Autoptimize e Better WordPress Minify, que podem ajudá-lo a mesclar ou até mesmo embutir suas folhas de estilo CSS.

Mesclar arquivos CSS e Inline-os

6. Ative o cache

O armazenamento em cache melhora drasticamente o tempo de carregamento de páginas que não são alteradas com tanta frequência.

Ao habilitar o cache em seu site, seu código não gera a mesma página repetidamente. Dessa forma, a experiência do usuário é muito melhor e seu servidor pode lidar com mais tráfego.

W3 Total Cache, WP Super Cache e WP Fastest Cache são apenas uma pequena seleção de plugins gratuitos do Wordpress que fornecem diferentes tipos de cache, por exemplo, cache de página, cache de banco de dados e cache de objetos, entre outros.

O plug-in W3 Total Cache fornece cache de página, banco de dados e objeto

7. Use uma rede de entrega de conteúdo

Se você usa um CMS como Wordpress, Joomla, Magento, Drupal ou um site PHP ou HTML personalizado, eu recomendo configurar uma Rede de Entrega de Conteúdo (CDN).

Um CDN é um sistema distribuído de servidores implantados em vários data centers na Internet.
Quando um cliente visita seu site, o conteúdo estático, como imagens e arquivos CSS, é veiculado a partir do servidor geograficamente mais próximo deles, para que sejam renderizados muito mais rapidamente.

A propósito, a carga em seu servidor também é drasticamente reduzida graças a um CDN.

CloudFlare é um provedor gratuito de CDN e DNS, entre outros. O MaxCDN também é uma ótima e acessível opção para otimizar o tempo de carregamento do seu site. Ambos são tão bons quanto podem obter.

CloudFlare é uma rede de entrega de conteúdo gratuita

8. Minimize o número de solicitações HTTP

Quanto mais solicitações HTTP você tiver, mais lento será o tempo de carregamento do seu site.

Combine seus arquivos CSS, mescle arquivos Javascript e combine imagens em sprites de dados entre outros para fazer o menor número possível de solicitações HTTP.

Quando trabalho no site de um cliente, um dos meus principais objetivos é minimizar o número de solicitações HTTP carregadas por página.

Mesclar arquivos CSS, usar sprites de dados ou URIs de dados para reduzir o número de solicitações HTTP

9. Escolha o tipo de arquivo correto para suas imagens

Use JPG como padrão. É o tipo de arquivo de carregamento menor e mais rápido.

Use PNG apenas para imagens com texto (JPG rasteriza o texto, tornando-o desfocado) ou se você precisar de um plano de fundo transparente.

Minimize ou até mesmo elimine quaisquer arquivos GIF pesados, pois eles podem diminuir drasticamente o tempo de carregamento do seu site.

Embora as duas imagens a seguir pareçam iguais, há uma enorme diferença entre elas. O da esquerda é salvo como um arquivo png e pesa 102KB e o outro é um arquivo JPG com tamanho de 18KB, isso mesmo, 6 vezes mais leve!

Imagem salva como PNG

Imagem salva como JPG

10. Corrija seus erros 404

Acredite ou não, qualquer arquivo ausente gera um erro HTTP 404 e definitivamente diminuirá o tempo de carregamento do seu site.

Sempre verifique se há erros 404 durante a renderização de suas páginas para obter o tempo de carregamento mais rápido.

Se a sua "cascata" (a forma como o navegador renderiza seu site) se parece com isso (cuidado com as linhas vermelhas), os erros 404 estão arruinando o tempo de carregamento do seu site.

Erros 404 podem arruinar o tempo de carregamento do seu site

11. Cuide do tamanho da sua página

Embora seja tentador exibir muito conteúdo em cada página, você deve tentar manter o tamanho da página no mínimo.

Isso é ainda mais crucial para celulares. Ter que carregar um site de 2 MB via celular em uma conexão 3G é uma receita para o desastre. Leve em consideração que os usuários não gostam de esperar mais de 2-3 segundos para que uma página seja renderizada.

Uma nova imagem agrega valor ao site? Caso contrário, você não deve adicioná-lo ao seu site. Simples assim.

Reduza o tamanho da página

12. Imagens de escala

Nunca dimensione imagens dinamicamente em HTML. Crie uma miniatura da imagem que você precisa nas dimensões exatas que ela será usada em suas páginas.

Por exemplo, se você tiver uma imagem de 1200px x 675px e quiser usar uma versão “escalonada” em 480px x 270px, crie uma nova versão redimensionada da imagem original e use-a.

Esta imagem é vinculada a uma versão “grande” da imagem usando uma miniatura dimensionada em vez de alterar as dimensões da imagem em HTML.

Thumbnail (imagem em escala) Links para imagem de tamanho grande

13. Aproveite o cache do navegador

O Google recomenda um tempo mínimo de cache de uma semana e, de preferência, de até um ano para ativos que mudam com pouca frequência.

Defina uma política de cache para todas as respostas do servidor a arquivos estáticos (imagens, CSS e Javascript) para que o navegador possa determinar se pode reutilizar um arquivo carregado anteriormente ou não.

Isso geralmente é feito adicionando este trecho de código no arquivo .htaccess para planos de hospedagem compartilhada

<ifmodule mod_expires.c>
Expira Ativo em
ExpiresByType text/html “acesso mais 7200 segundos”
ExpiresByType image/gif “acesso mais 864000 segundos”
ExpiresByType image/jpg “acesso mais 864000 segundos”
ExpiresByType image/png “acesso mais 864000 segundos”
ExpiresByType texto/css “acesso mais 864000 segundos”
ExpiresByType texto/javascript “acesso mais 864000 segundos”
ExpiresByType application/javascript “acesso mais 864000 segundos”
</ifmodule>

14. Otimize seu banco de dados

Contanto que você tenha um site baseado em banco de dados (que inclui WordPress e todos os outros sites baseados em CMS), certifique-se de otimizar seu banco de dados.

Monitore seu código para consultas lentas. Se você estiver em um servidor VPS ou dedicado, habilite o cache de consultas e otimize a configuração do servidor de banco de dados.

Embora a otimização completa do banco de dados possa ser um processo realmente complicado e demorado, o phpMyAdmin oferece algumas opções básicas de otimização “otimizando suas tabelas”.

Otimize seu banco de dados via phpMyAdmin

15. Selecione sua empresa de hospedagem com sabedoria

Escolha um plano de hospedagem que atenda às necessidades do seu site.

A maioria das empresas de hospedagem aplica limitações aos seus planos de hospedagem compartilhada e hospeda centenas de sites por servidor para manter as taxas no mínimo.

Você recebe o que você paga. Se você tem um site de comércio eletrônico, um CMS pesado, muito tráfego ou picos de tráfego, evite planos de hospedagem compartilhada.

Eu recomendo a empresa de hospedagem Wordpress gerenciada pela WPEngine para qualquer site WordPress de comércio eletrônico ou qualquer site WordPress com picos de tráfego.

16. Contrate um especialista

Meu objetivo é fornecer informações suficientes para você começar a otimizar a velocidade do seu site.

Mas, como você sabe, é melhor contratar um especialista quando é importante acertar.

Um dos meus clientes entrou em contato comigo para otimizar o tempo de carregamento do seu site. As páginas do site demoravam muito para carregar e os visitantes reclamavam porque a experiência do usuário era ruim.

Atualizei o WordPress para sua versão mais recente, migrei o site para uma empresa de hospedagem confiável e apliquei ajustes de otimização de velocidade para obter o melhor tempo de carregamento possível.

O tempo de carregamento passou de 8,2 para 2,6 segundos. O primeiro byte e o tempo de renderização inicial foram otimizados para 0,147 e 0,384 segundos, respectivamente, e o número de solicitações HTTP foi reduzido de 96 para 78. O Google PageSpeed ​​Insights também foi otimizado para 88%.

A taxa de rejeição diminuiu cerca de 10% em algumas semanas. O cliente e, mais importante, os usuários do site ficaram satisfeitos e a manutenção do site se tornou uma ótima experiência.

Para resumir, otimizar o tempo de carregamento do seu site é uma situação vantajosa para você e seus clientes em potencial.

Imagine como seus usuários ficarão felizes ao ver tempos de carregamento super rápidos!

Se você quiser me contratar, ficarei feliz em ajudar. Veja meu portfólio e entre em contato comigo no AwesomeWeb hoje mesmo!

Conclusão

Tudo melhora quando seu site carrega mais rápido.

O Google classifica você mais alto. Os usuários estão mais felizes. As taxas de rejeição diminuem. As taxas de conversão aumentam. E você faz mais vendas.

Pare de perder tráfego e dinheiro. Comece a otimizar o tempo de carregamento do seu site hoje.

Hoje estou oferecendo um pacote especial de $497 para os leitores do IncomeDiary. Isso é metade da minha taxa normal. Se o seu site atender às minhas qualificações mínimas, cuidarei de tudo listado neste post. Mencione o IncomeDiary em sua mensagem e entrarei em contato com você em breve. Comece 2015 com o site mais rápido que você pode ter!

Contrate-me aqui ou encontre outros freelancers de otimização de velocidade na AwesomeWeb aqui.