Desempenho do WordPress

Como Acelerar Seu Site Feito No WordPress

A execução de testes de desempenho de sites, usando ferramentas como o Google PageSpeed Insights ou o WebPageTest, é útil para encontrar gargalos e melhorar a performance. O uso dessas métricas são de grande valia, mas lembre-se que não basta acelerar seu site, se você for negligente com o desempenho percebido pelo usuário na sua experiência de uso. Vejamos então o que podemos fazer para melhorar o desempenho do WordPress.

Acelerar ao máximo é a meta… Mas não seja obcecado por isso

alcançar a metaMuitos querem atingir nota 100 nas ferramentas de medição de desempenho, seja por uma obsessão pessoal, seja por demanda de um cliente (sim, isso ocorre). Mas é importante parar e pensar sobre qual é a motivação por trás desse alvo a ser atingido. Muitos pensam que basta ter um site rápido, segundo a métrica do Google PageSpeed Insights . Na verdade, o objetivo do Google ao disponibilizar essa ferramenta foi trazer algumas diretrizes para melhores práticas de desempenho da web.

Essa ferramenta apresenta recomendações para otimizar seu site, e se as orientações apresentadas forem seguidas, seu site será mais responsivo e mais rápido. Mas nem sempre será possível atingir a nota máxima segundo a ferramenta de medição de desempenho.

O desempenho do WordPress

É muito importante para um blog ou site ter um carregamento rápido, tanto para o SEO (Otimização de Sites), quanto para os leitores que muitas vezes não possuem uma rápida conexão à Internet.

Quando lidamos com o WordPress e questões como acelerar um site baseado nesse CMS, isto pode ser complicado: O WordPress é  conhecido pela sua abrangência e seus recursos, mas ele não é um dos CMS mais rápidos, ao menos segundo a ótica dos desenvolvedores. Embora o WordPress possua um dos melhores desempenhos dentre os CMS existentes, depois que você já instalou dezenas de plug-ins e algumas centenas de posts, ele tende a ficar um pouco mais lento. Soma-se a isto os plug-ins de terceiros e vários scripts que entram em execução, e podemos ter facilmente um pesadelo nas nossas mãos para gerenciar.

Algumas dicas que podem ser feitas

Dicas básicas:

Home (página inicial) mais leve

O coração do seu site é a página inicial. Ela é a porta de entrada para todas as outras páginas. Tente deixar sua página inicial o mais leve possível, evite fazer com que ela faça muitas consultas ao banco de dados. Uma página inicial com muita informação (ou seja, pesada) pode prejudicar o desempenho do WordPress e espantar seus visitantes.

Plug-in de cache

Atualmente é quase que indispensável o uso de um cache para o WordPress. Os recursos que o cache possibilita são vários:

  1. Maior velocidade e melhor navegabilidade no seu blog;
  2. Melhor experiência de uso para o usuário;
  3. Menos uso de hardware do servidor;
  4. Menos probabilidade do site sofrer sobrecarga.

Segue o plugin recomendado:

Depois de ativado, basta habilitar o plugin e marcar as opções abaixo:

Importante: Uma vez que o plug-in de cache é desativado, ele não vai funcionar se for ativado novamente. Primeiro é necessário apagar todos os arquivos de cache gerados e fazer uma nova instalação limpa do plug-in.

Desative e Remova plugins desnecessários

Alguns plugins podem tornar seu blog lento, prejudicando a navegação do usuário. Procure desativar os plugins sem importância ou deixe-os desativados quando não são necessários. Plugins desativados não influenciam no carregamento do blog.

Se possível, remova os plug-ins que não pretende usar. Assim teremos menos uma consulta de atualização de plugin feita pelo WordPress.

Plugins não recomendados

Alguns plugins podem aumentar o tempo de carregamento do site, isso se deve a vários motivos, dentre eles:

  • Alguns plugins não são desenvolvidos corretamente ou não levam em consideração a otimização do tempo de carregamento do site;
  • Carregam arquivos estáticos, como CSSs e Java Scripts em páginas nas quais os plugins não são utilizados;
  • Realizam um número elevado e desnecessário de requisições ao servidor;

Vamos citar alguns Plugins que já testamos e sabemos que consomem bastante memória no seu site:

  • Slider Revolution
  • Visual Composer

Nota: esses plugins podem deixar seu site mais lento, mas não quer dizer que devam ser evitados de qualquer forma.

Otimize o MySQL

Todo o conteúdo do WordPress é guardado em um  banco de dados gerenciado pelo MySQL. Com o tempo este banco pode ficar maior, e seu acesso, mais lento. Para que isso não influencie na velocidade de carregamento de seu blog, otimize esta base. Para tal, siga os seguintes passos.

otimizar

Otimize as imagens

Não use imagens em tamanhos maiores do que o necessário, e com mais cores do que se precisa. Otimizar as imagens do tema e artigos reduzirá seu tamanho e fará com que isto não influencie tanto no carregamento do seu blog. Esta otimização você pode fazer através de serviços online, ou com um editor de imagens.

Outra coisa que você nunca deve fazer é postar uma imagem em alta resolução para depois mostrá-la em uma resolução menor, como por exemplo 400×300. Além de deixar o carregamento da página mais lento, você ainda vai ocupar espaço desnecessário na sua hospedagem.

O Dynamic Drive é um serviço online que permite otimizar imagens em diferentes formatos, permitindo também exibir todos os resultados da otimização, para que você escolha a imagem de menor tamanho com boa qualidade. O serviço é gratuito e pode ser acessado através do site http://tools.dynamicdrive.com/imageoptimizer/

Outra boa maneira de ajustar isto é usar plug-ins que façam a otimização das imagens, como o Optimus Image Optimizer. Esse plug-in pode usar técnicas de compressão com perda e sem perda de qualidade, de forma a fazer com que as imagens armazenadas no seu site ocupem menos espaço. Dependendo da situação, ele altera as imagens para o formato WebP, criado pelo Google. Isto irá acelerar o carregamento do seu site, com menos tempo de download.

Você ainda pode usar um editor de imagens como o Photoshop ou o GIMP, para você mesmo realizar o trabalho de otimizaçao das imagens.

Ajuste o wp-ajax

A API do WordPress funciona em /wp-admin/admin-ajax.php e executa requisições em AJAX em seu navegador. Em teoria, é incrível como o WordPress acompanha o que está acontecendo no painel.

No entanto, é possível que a API do WordPress comece a enviar pedidos em excesso para o admin-ajax.php. Isto pode levar a um grande consumo de recursos, como CPU, memória e a decorrente lentidão do seu site, do seu servidor ou de ambos. Sempre que um navegador é deixado em aberto em uma página usando a API, ela gera problemas e lentidão devido ao seu grande número de requisições.

Uma maneira de contornar é usar o plug-in Heartbeat Control (que está disponível no repositório do WordPress) para modificar as configurações do ajax do php. É um plugin simples mas que fará sua administração do WordPress ficar muito mais rápido.

 Heartbeat

Bloqueie o arquivo xmlrpc.php

Ultimamente, os ataques ao arquivo xmlrpc.php tem aumentado. Este arquivo é instalado por padrão por Sistemas de Gerenciamento de Conteúdo (CMS) como o WordPress. O xmlrpc.php é uma API que permite que conteúdos sejam postados por meio de aplicativos remotos, incluindo o próprio app oficial do WordPress, por exemplo.

Caso o seu WordPress não necessite desta integração, recomendamos desativar o acesso externo à este arquivo.

Para efetuar esta configuração, edite o arquivo .htaccess e inclua a configuração abaixo:

<Files xmlrpc.php>
    order allow,deny
    deny from all
</Files>

Descubra o que consome mais memória em seu WordPress

Se o seu site está lento, talvez seja uma boa ideia usar o plug-in P3 (Plugin Performance Profiler). Este plug-in  faz uma análise da performance de todos os plug-ins instalados no seu WordPress, permitindo que você veja se o problema está em algum plug-in.

Este plug-in analisa o carregamento de várias páginas do seu blog, vê quais são os tempos de carregamento de cada plug-in, o tempo de carregamento do site sem plug-ins, mostra o numero de queries feitas a base de dados, entre outros.

Todos os relatórios são guardados para que depois você possa comparar com relatórios mais recentes, assim como enviar os resultados por e-mail. Este recurso, em particular, é útil para pedir ajuda a alguém para resolver a lentidão.

Plug-in: https://wordpress.org/plugins/p3-profiler/

Mais detalhes: https://www.wptotal.com/p3-encontre-os-plugins-que-deixam-o-seu-site-lento/

Outro ótimo plugin é o Query Monitor. Ele informa por exemplo qual a querie lenta no seu banco de dados.

Plug-in: https://wordpress.org/plugins/query-monitor/screenshots/

Veja na imagem abaixo o exemplo de como ele trabalha dentro do WordPress.

Querymonitor

Ative o cache do plano Private

Caso sua conta esteja em um plano Private da Hostnet, verifique se o sistema de cache do plano está ativado.

Acesse dentro do Painel da Hostnet o menu: Servidor Private >> Configurações dos Sites >> Editar domínio >> Cache

Caso esteja INATIVO, altere para ATIVO e clique em SALVAR no final da página .

Dicas avançadas:

Evite consultas desnecessárias no banco

Consultas desnecessárias ao banco de dados influenciam no carregamento do blog. Procure modificar seu tema evitando estas consultas. Não há necessidade de realizar uma consulta ao banco de dados para especificar a url presente na logo do blog, por exemplo. Procure especificar o endereço completo diretamente no HTML. Abaixo temos um exemplo:

<a href="<?php bloginfo('url');?>" title="<?php bloginfo('name');?>"><img src="logo.png" alt="Logo"/></a>

No código acima foram feitas duas consultas ao banco de dados, que neste caso são desnecessárias e poderiam ser substituídas apenas pela URL do blog e o nome do blog. Procure revisar o código fonte do seu tema procurando estas consultas desnecessárias e quando possível substitua-as.

Abaixo algumas tags que você poderá substituí-las:

bloginfo('atom_url') // http://seudominio.com/feed
bloginfo('charset') // Charset utilizado(UTF-8, ISO-8859-1 ...)
bloginfo('html_type') // text/html
bloginfo('name') // Nome do Blog
bloginfo('pingback_url') // http://seudominio.com/xmlrpc.php
bloginfo('rss2_url') // http://seudominio.com/feed
bloginfo('stylesheet_url') // http://seudominio.com/wp-content/themes/tema/style.css
bloginfo('template_url') // http://seudominio.com/wp-content/themes/tema
bloginfo('url') // http://seudominio.com
wp_title() // Título do blog

Otimizando wp-config.php

Desabilite a revisão de artigos:

define('WP_POST_REVISIONS', false);

Configure o tempo dos salvamentos automáticos:

define('AUTOSAVE_INTERVAL', 600); // Valor em segundos

Desabilite o WP_DEBUG:

define('WP_DEBUG', false);

Adicionar regras de Otimização com .htaccess

O arquivo .htaccess lida com a forma como o seu servidor web processa o seu site. Existem algumas regras que você pode adicionar no final do .htaccess . Algumas tags são:

      • ETag – Esta tag indicará para os navegadores (browsers) quando uma imagem já foi baixada, e pode ser obtida a partir do cache do navegador local ao invés do servidor.
      • Expires headers – Esta tag é semelhante ao ETag mas permite que você defina diferentes tempos de expiração para diferentes tipos de arquivos
      • AddOutputFilterByType DEFLATE – minimiza o código-fonte de seus arquivos HTML, removendo linhas vazias, pausas e espaços.
Abaixo temos um exemplo:

########## Begin - ETag Optimization
## This rule will create an ETag for files based only on the modification
## timestamp and their size. 
## Note: It may cause problems on your server and you may need to remove it
FileETag MTime Size
# AddOutputFilterByType is now deprecated by Apache. Use mod_filter in the future.
AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript
# Enable expiration control
ExpiresActive On
# Default expiration: 1 hour after request
ExpiresDefault "now plus 1 hour"
# CSS and JS expiration: 1 week after request
ExpiresByType text/css "now plus 1 week"
ExpiresByType application/javascript "now plus 1 week"
ExpiresByType application/x-javascript "now plus 1 week"

# Image files expiration: 1 month after request
ExpiresByType image/bmp "now plus 1 month"
ExpiresByType image/gif "now plus 1 month"
ExpiresByType image/jpeg "now plus 1 month"
ExpiresByType image/jp2 "now plus 1 month"
ExpiresByType image/pipeg "now plus 1 month"
ExpiresByType image/png "now plus 1 month"
ExpiresByType image/svg+xml "now plus 1 month"
ExpiresByType image/tiff "now plus 1 month"
ExpiresByType image/vnd.microsoft.icon "now plus 1 month"
ExpiresByType image/x-icon "now plus 1 month"
ExpiresByType image/ico "now plus 1 month"
ExpiresByType image/icon "now plus 1 month"
ExpiresByType text/ico "now plus 1 month"
ExpiresByType application/ico "now plus 1 month"
ExpiresByType image/vnd.wap.wbmp "now plus 1 month"
ExpiresByType application/vnd.wap.wbxml "now plus 1 month"

ExpiresByType application/smil "now plus 1 month"
# Audio files expiration: 1 month after request
ExpiresByType audio/basic "now plus 1 month"
ExpiresByType audio/mid "now plus 1 month"
ExpiresByType audio/midi "now plus 1 month"
ExpiresByType audio/mpeg "now plus 1 month"
ExpiresByType audio/x-aiff "now plus 1 month"
ExpiresByType audio/x-mpegurl "now plus 1 month"
ExpiresByType audio/x-pn-realaudio "now plus 1 month"
ExpiresByType audio/x-wav "now plus 1 month"

# Movie files expiration: 1 month after request
ExpiresByType application/x-shockwave-flash "now plus 1 month"
ExpiresByType x-world/x-vrml "now plus 1 month"
ExpiresByType video/x-msvideo "now plus 1 month"
ExpiresByType video/mpeg "now plus 1 month"
ExpiresByType video/mp4 "now plus 1 month"
ExpiresByType video/quicktime "now plus 1 month"
ExpiresByType video/x-la-asf "now plus 1 month"
ExpiresByType video/x-ms-asf "now plus 1 month"

Se você tem muitos visitantes recorrentes no seu site, você pode acelerar o desempenho do seu site fazendo uso do cache do navegador do cliente. Existem vários recursos no site que são estáticos, como imagens e a maior parte do código HTML, CSS e JavaScript. Logo, uma maneira de aproveitar melhor o cache é ajustar uma data de expiração ou uma “idade máxima” para esses recursos estáticos. Assim, o navegador procurará primeiro no cache local (no disco rígido do computador) ao invés de buscar na rede. Com isso, serão menos elementos a serem transferidos, o que impacta diretamente no processo de abertura do site.
Então, edite o arquivo .htaccess, e estabeleça uma idade máxima para os elementos estáticos do seu site. Você deve empregar uma solução como a abaixo:

<filesMatch ".(ico|pdf|flv|jpg|svg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>

Assim, arquivos com as extensões ICO, PDF, FLV, JPG, SVG, JPEG, PNG, GIF, JS, CSS e SWF terão o tempo máximo de vida de 84600 segundos, ou seja, um dia inteiro. Se o usuário retornar ao site em menos de um dia, os elementos estáticos que serão carregados serão aqueles que estão no cache do seu navegador, e não na rede.

Reduza o uso de JavaScript, CSS e HTML no seu site

Menos é mais”, como é muito falado. Otimizar o código JavaScript, HTML e CSS usado torna o site menor e com isso, mais rapidamente interpretado pelo navegador. Um plug-in do WordPress que pode ser usado com esse fim é o Autoptimize, que permite que as otimizações sejam feitas no HTML, JavaScript e CSS. Para acelerar o desempenho do WordPress, o uso de um plug-in que faça cache da página a ser remetida será de grande valia. Alguns plug-ins, como o WordPress Cache Enabler, chegam ao requinte de detectar qual é o navegador do cliente. Se for um navegador derivado do Google Chrome (como o próprio, ou o Chromium, ou outros) ele pode dar preferência para entregar imagens no formato WebP, que são suportados por essa série de navegadores. Para tal, você deverá ligar uma opção, intitulada Create an additional cached version for WebP image support.

Elimine recursos que estão bloqueados

Alguns recursos nas páginas estão bloqueados para renderização, por dependerem de outros recursos. Por exemplo, as fontes são elementos bloqueantes para certas seções nas páginas. Logo, é necessário carregar as fontes antes para depois carregar essas seções. O plug-in citado anteriormente (Autoptimize) pode ser usado para contornar esse problema, desmarcando a opção Force JavaScript in <head>? (sob a opção JavaScript Options) e marcando a opção Inline all CSS? (sob a opção CSS Options). Assim será possível resolver o problema do JavaScript e dos CSS. Agora, se o seu tema estiver usando fontes do Google (como a Noto Serif e outras), é possível resolver usando um plug-in que as desabilitam. O nome é Disable Google Fonts.

 

Habilite a compressão

É possível ajustar a configuração do servidor Web para comprimir os dados antes de enviá-los para o cliente. Se os dados estão compactados, gerarão menos tráfego e serão transmitidos mais rapidamente. O computador do cliente gastará mais tempo descomprimindo essa informação. Mas, como os computadores atuais são rápidos, o tempo gasto com a descompressão é menor do que a transferência de dados. Para habilitar essa opção, você terá que verificar na configuração do servidor Web, se ele está com esta opção habilitada.

Reduza o tempo de resposta do servidor

Quanto mais rápido o servidor responder, melhor. Logo, para melhorar a eficiência, use um provedor de hospedagem que faça uso de um serviço de CDN, como o Cloudflare. A Hostnet oferece esse serviço em todos os planos.

Remova as strings de consulta

Remova as strings de consulta dos seus recursos estáticos. Alguns elementos iniciados pelo caracter “?” não são retidos em servidores proxy, o que é uma oportunidade perdida para aumentar o desempenho do WordPress. Uma opção é usar o plug-in Query Strings Remover, para fazer esse serviço para você.

Objetivo alcançado!

De fato, todas essas otimizações que o Google PageSpeed Insights sugerir, realmente reduzirão o tempo de carga e irão acelerar seu site. Logo, implemente tantas otimizações quanto você puder, mas não esqueça de testá-las antes. Não é porque a ferramenta diz que seu site irá carregar mais rapidamente que assim será.

Mas não seja obcecado por esses números. Eles não definem a quantidade de acessos que o seu site terá. A qualidade do conteúdo que você colocará no site é que será o fator primordial para adquirir mais visitantes.

Conteúdo importante para WordPress

Páginas relacionadas: