Como criar um site leve e rápido com Wordpress de forma simples e gratuita

Como criar um site leve e rápido com WordPress de forma simples e gratuita

Já faz algum tempo que o Google passou a considerar a velocidade de carregamento dos sites como uma das suas métricas de ranqueamento, e não é por menos, uma página pesada traz uma série de problemas outros problemas como por exemplo: aumento da taxa de rejeição, travamentos no navegador e aumento do tempo de carregamento. Reforçando essa postura, recentemente o buscador adicionou um recurso em pesquisas realizadas por meio de celulares que alerta o usuário que aquela página contém um carregamento lento.

SERP - Google Mobile

O WordPress é uma das plataformas mais utilizadas para criação de sites no mundo, segundo o site da plataforma, 24% da internet usam o serviço, porém algumas pessoas não gostam de utilizar por acreditar que ela seja pesada, mas na maioria dos casos alguns ajustes simples podem deixar o seu site em WordPress mais leve e rápido.

Por segurança, recomendo que antes de aplicar essas dicas no seu site em produção, faça uma instalação local para a realização dos testes e faça um backup da versão atual.

Para verificar as melhorias aplicadas ao seu site recomendo o uso da ferramenta WebPagetest que fornece informações relevantes sobre o desempenho do seu site, guarde o link do relatório para uma futura comparação. Neste post você encontrará um exemplo dos relatórios fornecidos por essa ferramenta.

Atualizações

Mantenha sempre os plug-ins e plataforma atualizados, a cada versão o WordPress recebe correções de bug e desempenho que podem evitar travamentos no servidor. Outra dica importante é a utilização da última versão do PHP, confira a seguir um gráfico com a comparação desempenho da versão 4.0 com 4.1:

 

Comparativo de performance WordPress 4.0 x 4.1
Comparativo de performance WordPress 4.0 x 4.1.
Desempenho do WordPress 4.1
PHP VersionResponse Time
5.4537ms
5.5533ms
5.6526ms
Fonte: WordPress 4.1 vs WordPress 4.0 Performance Comparison

Design

Analise o que pode ser melhorado

Algumas causas da lentidão não são por culpa da plataforma, mas por alguns problemas no layout que poderia ocorrer em qualquer outro site, para encontrar esses problemas utilize a ferramenta Google PageSpeed Insights que dará dicas de algumas melhorias para aplicar em seu site.

Temas

Uma das grandes vantagens da plataforma é a imensa quantidade temas gratuitos e premium disponíveis, porém muitos desses temas contam com um grande número de CSS e JavaScripts que podem não ser utilizados para o seu site, esses aumentam consideravelmente o peso total do site, por esse motivo sempre que possível, utilize sempre temas criados por você, assim você terá certeza que está utilizando apenas o necessário. Além disso, existem temas que são mal codificados, por isso utilize fontes confiáveis como o ElegantThemes e ThemeForest.

Caso você queira verificar se o tema escolhido seja muito pesado, faça o seguinte teste, copie o banco de dados do seu site para a versão local e instale os mesmos plug-ins que você utiliza online e aplique o tema “Twenty Fourteen” (padrão do WordPress) ou um outro de preferência, abra o seu site, vá nas ferramentas do desenvolvedor do seu navegador (normalmente é só pressionar F12), vá na guia Network e habilite o registro de log, atualize a página e você terá as informações do tempo de download do tema, para comparar com outro, mude o tema repita o procedimento em outra aba.

Utilize HTML estático

Sempre que utilizamos alguma função em PHP no tema, é realizada uma requisição para o banco de dados em seguida renderiza o HTML com essas informações. Uma forma simples de evitar isso em conteúdos que não são alterados frequentemente pelo usuário é utilizar um HTML estático no lugar dessas funções. Confira alguns exemplos:

Função em PHPResultado em HTML
language_attributes()lang=”pt-BR”
bloginfo(‘url’)http://seusite.com
get_template_directory_uri()http://seusite.com/wp-content/themes/seu-tema/

HTML, CSS e JS

Arquivos de terceiros

Ao criar site utilizamos diversas funções de terceiros como Google Analytics, botões de curtir do Facebook, +1 do Google, Twitter, jQuery, Google Fonts, entre outros. O problema é que por depender do tempo de resposta de outro servidor, isso pode causar uma lentidão ao baixar esses arquivos e o navegador poderá dar prioridade para esses arquivos ao invés dos arquivos do seu próprio site, por esse motivo sempre que possível faça o download do arquivo e adicione ao seu servidor, como no caso dos plug-ins do jQuery e fontes, antes de fazer isso, realize um teste de carregamento, se o seu servidor for lento essa técnica irá aumentar o tempo de carregamento.

No caso de botões sociais e outros recursos que não podem ser adicionados ao seu servidor, utilize o carregamento Defer ou Async, e adicionara-los no rodapé, isso dará menos importância para esses arquivos.

Em alguns casos como o Google Analytics não é recomendado fazer nenhuma alteração para não prejudicar a coleta de dados.

jQuery

Ao utilizar várias funções em jQuery você aumentará o tempo de carregamento, muitas dessas funções, como por exemplo, animações podem ser substituídas por animações em CSS3.

Outra dica importe é utilizar a partir da versão 2.0 que é 12% mais leve do que a versão anterior (1.9.1), isso porque foram removidos os patches de compatibilidade com as versões anteriores do IE 9, caso seu site ainda receba muitos acessos dessas versões utilize a versão 1.10 com apenas para versões anteriores do IE 9 com esse comando:

Fontes

Lançada recentemente as fontes no formato WOFF2 tem uma redução de tamanho de arquivo de aproximadamente 30% comparada com a outros formatos, conheça mais sobre as fontes WOFF2

Utilize a minificação

O tamanho de arquivos em CSS, JavaScript ou HTML é determinado pela quantidade de caracteres inseridos, cada um aumenta em um byte no tamanho total do arquivo. É muito comum inserirmos comentários para identificar o que aquele trecho de código representa, identamos o código para melhor leitura e no caso de JavaScripts utilizamos nomes de variáveis e funções que sejam possíveis identificar a sua função. Porém, isso é desnecessário no momento do navegador renderizar a página e só aumentam o tamanho dos arquivos.

O processo de minficação remove os espaços em branco dos arquivos e comentários, no caso dos arquivos em JavaScripts o nome das variáveis e funções são substituídos por nomes mais curtos como por exemplo: ‘a’, ‘b’, etc. O plug-in Autoptimize realizada esse processo em tempo de execução e mantem o resultado em cache, ou seja, o arquivo continua existindo de forma fácil para o programador editar, porém o navegador recebe a versão mais leve do conteúdo, além disso ele reúne os arquivos de CSS e JS em apenas uma requisição para cada formato. Confira algumas dicas de configuração do Autoptimize:

FunçãoOpção
Otimizar código HTML?Habilitada
Manter comentários HTMl?Desabilitada
Otimizar código JavaScript?Habilitada
Manter JavaScript na seção <head>?Desabilitada
Adicionar encapsulamento try-catch?Habilitada
Otimizar código CSS?Habilitada
Gerar dados: URIs de imagens?Habilitada

Após essas alterações, faça um comparativo das melhorias do seu site.

Banco de dados

Otimize seu banco de dados

Ao criar ou atualiza novos posts e páginas, o WordPress guarda uma revisão para que possa ser restaurada rapidamente se ocorra um problema, porém por padrão todas as revisões são guardadas inflando o banco de dados tornando vagaroso aumentando significativamente o tempo de carregamento de todo o site.

Alguns profissionais recomendam desabilitar essas revisões adicionando o código define(‘WP_POST_REVISIONS’, false ); o arquivo wp-config e deletar todas as revisões por meio do comando SQL DELETE FROM wp_posts WHERE post_type = “revision”;

Caso você prefira manter as revisões por segurança, o plug-in Optimize Database after Deleting Revisions irá melhorar o desempenho do seu banco, com ele é possível definir o número máximo de revisões, deletar tags não utilizadas, agendar a limpeza entre outros recursos.

Elimine seus comentários de spam

O plug-in Zero Spam promete remover 99,9% dos registros de spam dos comentários e outros formulários (Contact Form 7, Gravity Form, Ninja Forms e BuddyPress) do seu site sem utilizar o captcha, além de evitar manter o seu banco de dados limpo ele bloqueia os IP dos spammer já reconhecidos evitando assim novas requisições.

Plug-ins

Utilize apenas os plug-ins necessários para o funcionamento do site, pois alguns exigem mais atenção ao servidor do que deveria por estarem mal codificados ou mal configurados. Além disso, alguns adicionam CSS e JS desnecessários para o funcionamento do site o que aumenta as requições e tamanho dos downloads. Não esqueça de apagar os plug-ins desativados para não causar problemas de segurança.

Para verificar quem são os “Plug-ins vilões”, instale o P3 (Plugin Performance Profiler) e realize um scan para verificar quais estão roubam mais tempo de carregamento, e até o tempo carregar o tema, core do WordPress, entre outros. Após encontrar os vilões, desabilite e procure algum semelhante para suprir a sua função.

Aproveite o cache

Ao carregar uma página, o PHP realiza várias requisições ao banco de dados para renderizar os menus, widgets, conteúdo do post, etc. Para cada visitante acessa alguma página do seu site, ele realiza esse processo, quanto mais acessos o seu site tiver, maior será o processamento exigido do seu servido, o que deixará o seu site lento.

Ao instalar os plug-ins de cache como WP Super Cache ou W3 Total Cache em seu site fará o seu servidor salvar o resultado como conteúdo estático (HTML) para ser exibido para os outros visitantes, evitando um novo processamento. Veja um exemplo desse processo na imagem abaixo.

Wordpress Cache

Imagens

Utilize Lazy Load nas imagens e vídeos

Os downloads das imagens podem aumentar consideravelmente o peso e o tempo de carregamento do seu site. O plugin a3 Lazy Load aplica em todas imagens do site uma técnica que baixa as imagens e vídeos apenas quando eles estão visíveis, reduzindo assim o número de requisições e o peso da página, caso você precise aplicar em alguma imagem do seu tema, substitua a chamada da imagem pelo código abaixo:

Otimize suas imagens

Na maioria dos as imagens são as grandes responsáveis por deixar as páginas mais pesadas, segundo o HTTPArchive.org, 60% do peso de uma página está nelas.

Um erro muito comum é salvar as imagens do formato errado, isso pode aumentar e muito o tamanho do arquivo, esse infográfico explica qual o tipo deve ser utilizado em cada caso.

Para reduzir o tamanho dessas imagens utilizamos as técnicas de otimização de lossless que remove os metadados que não são necessárias para renderizar as imagens e lossy que reduz a qualidade das imagens sacrificando um pouco da qualidade.

O plug-in EWWW Image Optimizer realizar essas otimizações ao realizar o upload e também é possível realizar uma otimização em massa que analisa e aplica melhorias em todas imagens do blog.

Imagens responsivas

Ao fazer o upload de uma imagem o plug-in RICG Responsive Images criar todas as versões responsivas e inclui os vários tamanhos por meio do atributo “srcset”.

Outras dicas

Hospedagem

Caso você já tenha aplicado essas dicas ao seu site e o desempenho esteja abaixo do desejado, verifique se a sua hospedagem suporta a demanda de acessos do seu site.

GZIP

O Gzip é um software para compressão e descompressão de arquivos. Sites que utilizam o Gzip podem ser até 80% mais rápidos. Ao utilizar o Gzip seu site pode ser até 80% mais rápido.

Em muitos casos ativar o esse recurso é relativamente simples, veja como funciona:

Servidores Apache

Insira o seguinte código no seu .htaccess:

Servidores Windows

Insira o seguinte código no seu web.config:

Conclusão

Esses ajustes podem corrigir os problemas de performance do seu site sem a necessidade migrar para outro servidor ou plano, evitando assim o aumento de custos e melhorando a experiência do usuário.

Caso, você tenha mais alguma dica ou alguma observação, deixei aqui nos comentários 😉

3 Comentários

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *