Quando se trata de desempenho do WordPress, temos muito o que falar sobre plugins. Cada plugin adiciona código PHP que precisa ser executado, é capaz de incluir scripts e estilos e alguns podem até mesmo executar consultas adicionais no banco de dados. Isso significa que plugins desnecessários podem afetar a velocidade da página e impactar negativamente a experiência do usuário e a classificação da página nos mecanismos de busca. Por exemplo, considere um plugin que cria e exibe formulários na página inicial, como o Contact Form 7. Em geral, você só precisa do formulário em uma única página. Você realmente quer executar os códigos e incluir scripts e estilos do plugin em todas as páginas do seu site?

Neste post, mostraremos como você pode instalar todos os plugins que precisa (sem exageros, claro) e ainda assim permitir que suas páginas do WordPress carreguem rapidamente. Vamos desabilitar o carregamento dos plugins WordPress que forem desnecessários em páginas e posts específicos. Isso envolve um processo de quatro passos:

  • Escolher os plugins mais populares que atendam suas necessidades e comparar seus recursos e efeitos sobre a velocidade da página.
  • Filtrar e desativar plugins desnecessários antes do carregamento das páginas.
  • Otimizar os arquivos CSS e JS.
  • Monitorar o desempenho do site.

Vamos nos aprofundar no tema.

Você ainda está procurando por esse host perfeito do WordPress?

Experimente a hospedagem WordPress gerenciada premium da Kinsta para experimentar seu site sem problemas.
  • Controles estilizados que representam a gerência Totalmente gerenciado
  • Um escudo com marcação representadando a segurançaSeguro como Fort Knox
  • Junção de linhas que representam migraçõesMigrações gratuitas
  • Três divisórias que representam a velocidade do servidorMáxima velocidade
  • Seta circular com ponto central representando backupsBackups diários
  • Hexágonos compensados que representam nossa infraestrutura de servidoresGoogle Cloud Platform

As Três Regras Gerais a Seguir na Escolha de um Plugin

As regras gerais a seguir podem ser muitos úteis no processo de escolha de um plugin:

  • Instale somente plugins bem codificados de desenvolvedores confiáveis: considere o número de instalações ativas, avaliação dos usuários, suporte ao cliente, frequência de atualizações e todas as informações relevantes e úteis que venham da comunidade WordPress.
  • Prefira plugins escaláveis: compare plugins similares em termos de desempenho através de ferramentas de desenvolvedores nos navegadores e/ou serviços on-line como Google Pagespeed InsightsPingdomGTmetrix para avaliar o impacto de cada plugin no tempo de carregamento da página.
  • Não instale plugins desnecessários: pode parecer óbvio, mas vale a pena mencionar que você nunca deve instalar um plugin que realmente não precisa por questões de segurança e desempenho. Além disso, certifique-se de revisar seus plugins de tempos em tempos e desinstale aqueles que não precisa e não usa mais.
O Diretório de Plugins do WordPress oferece informações relevantes que devemos levar em conta ao escolher um plugin

O Diretório de Plugins do WordPress oferece informações relevantes que devemos levar em conta ao escolher um plugin

Após escolher o plugin mais eficiente e popular disponível, podemos seguir em frente para agilizar nosso website e forçar o WordPress a carregar o plugin somente nas páginas em que ele é necessário.

Um Exemplo Concreto

Contact Form 7 é um excelente plugin que cria e exibe formulários no WordPress. Ele oferece um exemplo perfeito para nosso propósito, pois inclui os seguintes arquivos .js, mesmo que a página não apresente um formulário:

  • jquery.form.min.js
  • scripts.js
Painel Network no Chrome DevTools oferece informações detalhadas sobre solicitações feitas pela rede quando uma página é carregada

Painel Network no Chrome DevTools oferece informações detalhadas sobre solicitações feitas pela rede quando uma página é carregada

Um plugin pode causar uma perda geral de eficiência, mas podemos forçar o WordPress a desativar seletivamente os plugins de acordo com a URL solicitada. Se você é um desenvolvedor, leia a próxima seção na qual eu explico como desenvolver um mu-plugin que filtra os plugins desnecessários. Se você não é um desenvolvedor, sinta-se à vontade para avançar diretamente à seção dedicada aos plugins que permitem filtrar e organizar plugins.

Como Desenvolver um Must-use Plugin para Desativar Plugins Programaticamente

Nosso objetivo é desabilitar (desativar) plugins WordPress de acordo com a página, fazendo uma filtragem na lista de plugins ativos. Para alcançar esse objetivo, desenvolveremos um Must-use plugin, que é um plugin localizado em uma subpasta específica do /wp-content e é executado antes de qualquer outro plugin comum. Então, vamos criar um novo arquivo .php (por exemplo, my-plugin.php) em /wp-content/mu-plugins.

Nossa primeira tarefa é verificar a solicitação de URI. Como os mu-plugins são executados antes que qualquer variável is_ seja definida, não podemos usar tags condicionais. Consequentemente, temos que fazer uma análise sintática da solicitação de URI e verificar o caminho URL correspondente:

$request_uri = parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH );

$is_admin = strpos( $request_uri, '/wp-admin/' );

// add filter in front pages only
if( false === $is_admin ){
	add_filter( 'option_active_plugins', 'kinsta_option_active_plugins' );
}

Vamos nos aprofundar neste código:

  • parse_url retorna o caminho da URL solicitada
  • strpos encontra a posição da primeira ocorrência do ‘/wp-admin/’ e retorna falso se a string não for encontrada. A variável $is_admin armazena o valor retornado
  • Se a URL solicitada não contém ‘/wp-admin/’, adicionamos o filtro option_active_plugins.

A condição impede que o filtro seja executado no painel do administrador. Assim, podemos acessar as páginas de configurações do plugin com segurança. option_active_plugins pertence ao grupo de filtros option_$option_name. Esses ganchos permitem filtrar qualquer opção após ela ser recuperada do banco de dados. Como todos os plugins ativos são armazenados na tabela wp_options, na qual o campo option_value é o active_plugins, o filtro option_active_plugins oferece uma forma de ativar ou desativar programaticamente os plugins.

Dito isso, vamos definir a função de callback:

function kinsta_option_active_plugins( $plugins ){
	global $request_uri;
	$is_contact_page = strpos( $request_uri, '/contact/' );

	$unnecessary_plugins = array();

	// conditions
	// if this is not contact page
	// deactivate plugin
	if( false === $is_contact_page ){
		$unnecessary_plugins[] = 'contact-form-7/wp-contact-form-7.php';
	}

	foreach ( $unnecessary_plugins as $plugin ) {
		$k = array_search( $plugin, $plugins );
		if( false !== $k ){
			unset( $plugins[$k] );
		}
	}
	return $plugins;
}

O que acontece nesse caso:

  • Primeiro, passamos para a função um arranjo de plugins ativos.
  • A função verifica se o caminho de URL solicitado contém a string ‘/contact/’. Se a resposta for não, strpos retorna com falso e Podemos verificar a nova condição.
  • Se a solicitação de URL atual aponta para uma página que não seja a página de contato, adicionamos o plugin Contact Form 7 a um arranjo de plugins desnecessários.
  • O ciclo foreach itera sobre os elementos do arranjo $unnecessary_plugins. Se o plugin atual estiver ativo, a função unset remove o mesmo do arranjo $plugins.
  • A função retorna o arranjo $plugins atualizado.

Você pode fazer o download do código completo deste plugin no Gist.

Agora você pode fazer o upload do plugin para a pasta mu-plugins e inspecionar qualquer página do seu website. Você deve encontrar formulários do CF7 apenas nas páginas de contato. O mu-plugin pode ser personalizado, adicionando mais condições e verificando mais URIs, mas cada uma dessas condições deve ser adicionada manualmente ao código e no longo prazo, esse simples mu-plugin pode se tornar difícil de ser mantido.

Plugins que Filtram Plugins

Como uma alternativa, podemos optar por um dos plugins de qualidade que permitem adicionar filtros, que podem ser gerenciados pelo painel do administrador no WordPress.

Plugin Load Filter

Plugin Load Filter

é uma opção gratuita para os usuários WordPress que precisam filtrar plugins sob condições diversas.

Plugin Load Filter permite filtrar plugins no painel do administrador e nas páginas do site

Plugin Load Filter permite filtrar plugins no painel do administrador e nas páginas do site

Atualmente, ele tem suporte para os seguintes recursos:

  • Formatos de posts
  • Tipos personalizados de posts
  • Módulos do Jetpack
  • Conteúdo incorporado
  • Palavras-chave AMP
  • Filtros de URL

Quando o filtro é ativado, o administrador pode especificar em que local do site ele foi aplicado, conforme demonstrado na imagem abaixo.

Quando o filtro é ativado, o administrador consegue definir o tipo de página em que ele é aplicado

Quando o filtro é ativado, o administrador consegue definir o tipo de página em que ele é aplicado

Plugin Organizer

Plugin Organizer é um plugin mais abrangente que permite aos administradores de site:

  • Desabilitar de forma seletiva plugins ativos de acordo com tipo de post e solicitação de URL
  • Criar grupos de plugins
  • Alterar a ordem de carregamento dos plugins
Página de Configurações do Plugin Organizer

Página de Configurações do Plugin Organizer

A página de opções Global Plugins oferece uma facilidade com o recurso de arrastar e soltar que permite ao administrador desabilitar plugins globalmente, impedindo que o WordPress execute um ou mais plugins em qualquer local do seu site, a menos que o contrário seja especificado para posts ou páginas individuais. Esse mesmo recurso está disponível para a página de pesquisa e tipos de posts.

CF7 foi desabilitado globalmente

CF7 foi desabilitado globalmente

O plugin adiciona um meta box à tela de edição de posts para que o administrador possa sobrepor configurações globais e de tipos de posts. Esse recurso também pode ser ativado para tipos de posts, selecionando o item correspondente na tela General Settings. Outros recursos são relacionados ao agrupamento e ordem dos plugins. Mais informações podem ser encontradas na documentação on-line.

Plugin perfmatters

Uma abordagem um pouco diferente é encontrada no plugin perfmatters. Essa é uma alternativa premium que permite ao administrador do site carregar de forma seletiva os recursos do tema e dos plugins, dependendo da URL ou do tipo personalizado de post. Essa é uma ótima ferramenta para otimização de plugins e temas. E foi desenvolvido por um membro da equipe Kinsta!

Gerenciador para desabilitar scripts

Gerenciador para desabilitar scripts

Ele é muito poderoso e pode aumentar drasticamente a velocidade dos seus sites WordPress (principalmente sua página inicial). Alguns exemplos do que pode ser feito com o plugin:

  • Plugins de compartilhamento nas redes sociais só devem ser carregados em seus posts. Você pode desabilitá-los com facilidade em qualquer local e carregá-los apenas nos posts ou até mesmo em tipos personalizados de posts.
  • O popular plugin Contact Form 7 é carregado em todas as páginas e posts. Você pode desabilitá-lo com facilidade em qualquer local com apenas um clique e habilitá-lo somente na sua página de contato.

Você pode observar nesta análise do perfmatters que ele diminuiu o tempo total de carregamento em 20,2%. Somente na página inicial, ele foi capaz de reduzir o número de solicitações HTTP de 46 para 30! O tamanho da página também caiu de 506.3 KB para 451.6 KB.

Teste de velocidade com o plugin perfmatters

Teste de velocidade com o plugin perfmatters

Como Monitorar o Desempenho: As Ferramentas de Desenvolvedor no Navegador

Uma etapa fundamental na estrada rumo à otimização de desempenho é a medição do tempo de carregamento. Existem diversos plugins e ferramentas online que podem ser utilizadas para monitorar o desempenho de um site, como Google Pagespeed Insights e Pingdom. Mas, primeiro, podemos usar as Ferramentas de Desenvolvedor no navegador, que oferecem muitas informações relevantes.

A imagem mostra o painel Network no Chrome Developers Tools

A imagem mostra o painel Network no Chrome Developers Tools

O inspetor de cada navegador possui um painel Network que demonstra uma lista de solicitações da rede e informações relacionadas. Veja os links abaixo para acessar as documentações detalhadas:

O Monitor Network do Firefox oferece um painel adicional que permite avaliar quanto tempo o navegador leva para fazer o download dos recursos das páginas

O Monitor Network do Firefox oferece um painel adicional que permite avaliar quanto tempo o navegador leva para fazer o download dos recursos das páginas

Em uma instalação WordPress com 18 plugins ativos, inspecionamos repetidamente uma página de posts com o Dev Tools do Firefox. Primeiro medimos a velocidade da página e listamos os recursos solicitados antes de instalar qualquer filtro de plugins. A imagem a seguir mostra o resultado da ferramenta de análise de desempenho do Network Monitor do Firefox.

Lutando com tempo de inatividade e problemas no WordPress? Kinsta é a solução de hospedagem projetada para economizar seu tempo! Confira nossos recursos

Firefox Network Monitor

O Network Monitor oferece os seguintes resultados (cache vazio):

  • Tamanho: 709.77 KB
  • Tempo de carregamento: 6,67 segundos
  • Solicitações: 30

Em seguida, instalamos o Plugin Organizer para prevenir que o WordPress executasse o plugin CF7. O gráfico de pizza mudou um pouco.

Firefox Network Monitor

Agora a página carrega mais rapidamente (cache vazio):

  • Tamanho: 665.85 KB
  • Tempo de carregamento: 5,08 segundos
  • Solicitações: 27

Na sequência, desativamos 16 plugins desnecessários e a próxima imagem mostra o quanto melhoramos o desempenho da página.

Firefox Network Monitor

Após desabilitar todos os plugins desnecessários, o cache vazio do navegador do Network Monitor retorna com os seguintes dados:

  • Tamanho: 440.15 KB
  • Tempo de Carregamento: 3,14 segundos
  • Solicitações: 21

Este teste demonstra como plugins pesados podem afetar o desempenho da página e o quanto podemos aumentar a velocidade da página com um filtro de plugins.

Podemos melhorar ainda mais o desempenho com o auxílio de outra ferramenta de otimização. Autoptimize é um plugin gratuito que junta, reduz e comprime scripts e estilos, além de mover estilos para o cabeçalho da página e scripts para o rodapé (leia mais sobre o plugin neste post sobre Como Eliminar JavaScript e CSS que Bloqueiam a Renderização). Ative o plugin, recarregue e inspecione a página novamente.

Firefox Network Monitor

Graças ao Autoptimize, alcançamos um alto nível de otimização (cache vazio no navegador):

  • Tamanho: 474.56 KB
  • Tempo de carregamento: 1,99 segundos
  • Solicitações: 13

Por fim, podemos comparar os resultados dos nossos testes. O tamanho dos recursos foi reduzido em 235 KB, o tempo de carregamento foi reduzido de 6,67 segundos para 1,99 segundo e o número de solicitações HTTP caiu de 30 para 13.

Resumo

Seja desenvolvendo seus próprios plugins ou instalando ferramentas de terceiros, organizar e filtrar plugins é uma boa prática que você sempre deve levar em conta quando se trata de otimização de desempenho. Mas aprender como desabilitar plugins WordPress é apenas uma entre diversas outras técnicas voltadas para aumentar a velocidade do site. Aqui está uma lista de guias e tutoriais sobre desempenho de site que valem a pena ler: