Quando se trata de desempenho do WordPress, temos muito o que falar sobre plugins. Cada plugin adiciona código PHP que precisa ser executado, é geralmente inclui 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. O melhor plugin SEO all-in-one. Tipicamente, você só precisa de um formulário em uma única página, mas o ideal é que você queira incorporar um formulário em qualquer página usando o shortcode do plugin. Por esse motivo, o Contact Form 7 carrega scripts e estilos em todas as páginas do seu site. 

Mas você realmente quer rodar o código do plugin e incluir scripts e estilos em todas as páginas do seu site WordPress?

Nesta postagem, mostrarei como evitar que plugins desnecessários sejam carregados em postagens/páginas específicas, para que você possa instalar plugins adicionais (não enlouqueça, é claro) e ainda carregar seu site do WordPress rapidamente. Para realizar essa tarefa, desativaremos os plugins do WordPress programaticamente em postagens e páginas específicas. Este é um processo de 4 etapas:

Vamos nos aprofundar no tema.

A desativação seletiva de plugins do WordPress a partir do carregamento em páginas específicas / publicações / site inteiro pode ajudar a acelerar o seu site! 🚀 Click to Tweet

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

Um exemplo da vida real

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:

  • style.css
  • 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 tornar o seu site mais lento, mas podemos forçar o WordPress a desativar seletivamente os plugins, dependendo do URL de solicitação. Se você é um desenvolvedor, leia a próxima seção, onde aprenderemos a gerenciar plugins programaticamente e criar um plugin mu que filtre plugins desnecessários. Se você não é um desenvolvedor, fique à vontade para acessar a seção dedicada a plugins que permitem filtrar e organizar plugins.

Como Obter uma Lista de Todos os Plugins Ativos Programaticamente

Primeiramente, você pode obter uma lista de todos os plugins ativos em seu site WordPress com um simples trecho de código PHP. Você pode adicionar o seguinte código em um plugin personalizado ou no editor de um plugin gratuito do WordPress, como Trechos de código. Se você decidir usar seu plugin personalizado, não se esqueça de adicionar o cabeçalho do plugin como visto abaixo.

Plugins ativos na tabela wp_options

Plugins ativos na tabela wp_options

Cada plugin ativo é armazenado em wp_options tabela onde options_name é active_plugins. Então podemos extrair a lista desses plugins com um simples chamado get_option. Aqui está o código:

<?php
/**
 * @package active-plugins
 * @version 1.0
 *
 * Plugin Name: Active Plugins
 * Plugin URI: http://wordpress.org/extend/plugins/#
 * Description: This is a development plugin 
 * Author: Your Name
 * Version: 1.0
 * Author URI: https://example.com/
 */

add_shortcode( 'activeplugins', function(){
	
	$active_plugins = get_option( 'active_plugins' );
	$plugins = "";
	if( count( $active_plugins ) > 0 ){
		$plugins = "<ul>";
		foreach ( $active_plugins as $plugin ) {
			$plugins .= "<li>" . $plugin . "</li>";
		}
		$plugins .= "</ul>";
	}
	return $plugins;
});

Altere os detalhes do plugin e salve o arquivo active-plugins.php e envie para o seu arquivo /wp-content/plugins/. Crie uma nova postagem no blog e inclua o código [activeplugins]. Agora deve exibir uma lista de todos os plugins ativos.

A lista de plugins ativos mostra a pasta e o nome de cada plugin

A lista de plugins ativos mostra a pasta e o nome de cada plugin

Com isso sendo feito, podemos dar um passo além e adicionar ou remover plugins programaticamente aproveitando o filtro option_active_plugins. Este filtro pertence ao grupo de filtros option_$option_name, que permitem filtrar qualquer opção depois de ser recuperada do banco de dados. Como todos os plugins ativos são armazenados em wp_options da tabela option_value é active_plugins, o option_active_plugins filtro fornece uma maneira de ativar ou desativar programaticamente plugins.

Portanto, podemos ativar um plugin programaticamente. Por exemplo, você quer ativar o plugin ACF. Aqui está o código:

add_filter( 'option_active_plugins', function( $plugins ){

	$myplugin = "advanced-custom-fields/acf.php";

	if( !in_array( $myplugin, $plugins ) ){
		$plugins[] = $myplugin;
	}

	return $plugins;

} );

Neste exemplo, estamos assumindo que o plugin foi instalado e ainda não foi ativado.

O código acima simplesmente adiciona o plugin à lista de plugins ativos em todas as páginas do nosso site. Não é muito útil, mas você entendeu.

Além disso, o plugin deve carregar antes de qualquer outro plugin, caso contrário, nosso código não poderia funcionar como esperado. Para priorizar a carga do nosso plugin, temos que adicionar nosso script em um plugin Must-use.

Como Desenvolver um Must-use Plugin para Desativar Plugins Programaticamente

Vamos construir um plugin de uso obrigatório, que é um plugin que reside em um específico na sub-pasta /wp-content, e é executado antes de qualquer plugin regular.

Infelizmente, nessa situação, não podemos usar tags condicionais, porque as tags de consulta condicionais não funcionam antes de a consulta ser executada. Antes disso, eles sempre retornam falso. Portanto, temos que verificar nossas condições de outra forma, por exemplo, analisando o URI da solicitação e verificando o caminho da URL correspondente.

Adicione o seguinte código ao arquivo active-plugins.php então mova-o para /wp-content/mu-plugins:

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

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

if( false === $is_admin ){
	add_filter( 'option_active_plugins', function( $plugins ){

		global $request_uri;

		$is_contact_page = strpos( $request_uri, '/contact/' );

		$myplugin = "contact-form-7/wp-contact-form-7.php";

		$k = array_search( $myplugin, $plugins );

		if( false !== $k && false === $is_contact_page ){
			unset( $plugins[$k] );
		}

		return $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
  • A condição impede que o filtro seja executado no painel de administração, para que possamos acessar com segurança as páginas de configurações do plugin. Se o URI de solicitação não contiver '/wp-admin/', então invocamos o filtro option_active_plugins.
  • Por fim, se o plugin atual não estiver na matriz de plugins ativos e o URI da página atual não contiver /contact/, então removemos o plugin de $plugins.

Agora salve seu plugin e faça o upload para o seu arquivo /wp-content/mu-plugins/ folder. Limpe o cache e adicione o código [activeplugins] para várias páginas. Deve ser mostrado na lista apenas na página /contact/.

O arquivo script.js desapareceu da lista de recursos da página

O arquivo script.js desapareceu da lista de recursos da página

Podemos, então, remover uma matriz de plugins de uma só vez com apenas um pouco de PHP adicional.

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

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

if( false === $is_admin ){
	add_filter( 'option_active_plugins', function( $plugins ){

		global $request_uri;

		$is_contact_page = strpos( $request_uri, '/contact/' );

		$myplugins = array( 
			"contact-form-7/wp-contact-form-7.php", 
			"code-snippets/code-snippets.php",
			"query-monitor/query-monitor.php",
			"autoptimize/autoptimize.php" 
		);

		if( false === $is_contact_page ){
			$plugins = array_diff( $plugins, $myplugins );
		}

		return $plugins;

	} );
}

Neste exemplo, primeiro definimos uma matriz de plugins a serem removidos e, em seguida, os removemos com array_diff. Esta função “compara array1 contra um ou mais outros arrays e retorna os valores no array1 que não estão presentes em nenhum dos outros arrays”.

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. 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 e um incômodo de ser mantido.

Por esse motivo, você pode querer verificar os seguintes plugins.

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
  • WP Embed cartão de conteúdo
  • Filtro de URL para especialista (API REST / Heartbeat / AJAX / AMP / etc)

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 popular com mais de 10.000 instalações ativas e uma impressionante classificação de 5 de 5 estrelas. É um plugin mais abrangente que permite aos administradores do site:

  • Desativar seletivamente os plugins por tipo de postagem e URL de solicitação
  • Desativar seletivamente plugins por funções do usuário
  • Criar grupos de plugins
  • Alterar a ordem de carregamento dos plugins
  • Características adicionais
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. Um ótimo recurso é a Mensagem de Depuração do Organizador de Plugin, que fornece ao administrador do site informações úteis sobre os plugins que afetam todas as páginas do site.

Mais informações podem ser encontradas na  documentacão.

Metabox personalizado do Plugin Organizer na página de contato

Metabox personalizado do Plugin Organizer na página de contato

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

O plugin tem um recurso chamado Script Manager, onde tudo é agrupado pelo nome do plugin ou do tema. Isso torna super fácil desabilitar um plugin inteiro de uma só vez, ou arquivos CSS e JavaScript individuais dentro dele.

Você pode até mesmo desativar scripts com regex. Isso é especialmente útil para sites que possuem uma estrutura de URL mais complexa no local ou páginas geradas dinamicamente.

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.
  • Se você fez o upgrade para o WordPress 5.0, mas não está usando o editor de bloco de Gutenberg, talvez ainda esteja usando o editor clássico, há dois scripts front-end adicionais que são adicionados a todo o site e que você pode desativar: /wp-includes/css/dist/block-library/style.min.css and /wp-includes/css/dist/block-library/theme.min.css

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.

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:

Em uma instalação do WordPress com 18 plugins ativos, inspecionamos repetidamente uma página de postagem com o Firefox Dev Tools. Primeiro medimos a velocidade da página e listamos os recursos solicitados antes de instalar qualquer plugin de filtragem. A imagem a seguir mostra a saída da ferramenta de análise de desempenho disponível no monitor da Rede Firefox.

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

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

  • Tamanho: 255.19 KB
  • Tempo de carregamento: 1,24 segundos
  • Solicitações: 12

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

Ferramenta de análise de desempenho do Firefox

Ferramenta de análise de desempenho do Firefox

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

  • Tamanho: 104.21 KB
  • Tempo de carregamento: 0,80 segundos
  • Solicitações: 8

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

Ferramenta de análise de desempenho do Firefox

Ferramenta de análise de desempenho do Firefox

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

  • Tamanho: 101.98 KB
  • Tempo de Carregamento: 0,46 segundos
  • Solicitações: 8

Podemos comparar os resultados dos nossos testes. O tamanho dos recursos foi reduzido em 60.04%, o tempo de carregamento foi reduzido de 1,24 segundos para 0,46 segundo e o número de solicitações HTTP caiu de 30 para 13.

Resumo

Quer você construa seus próprios scripts ou instale ferramentas de terceiros, organizar e filtrar plugins é algo que você deve sempre considerar quando se trata de otimização de desempenho. Lembre-se, nem todos os plugins são desenvolvidos com o desempenho em mente. Portanto, pode ser sensato levar algum tempo e determinar quais recursos de plugin (CSS e JS) estão sendo carregados e onde.

Mas aprender como desabilitar os plugins do WordPress é apenas uma entre muitas outras técnicas destinadas a aumentar a velocidade do site. Aqui está uma lista de alguns outros guias e tutoriais úteis relacionados ao desempenho do site:

39
Shares