Removendo Requisições Inúteis do WordPress

AntesDepois

Muito cuidado, pois este é um artigo de nível avançado! NÃO o siga de maneira alguma caso você não tenha o mínimo de conhecimento na área.

O princípio básico desse artigo consiste em colocar as peças nos lugares corretos, evitando que o visitante faça download de conteúdos que não serão utilizados.

Embora todo website seja como um organismo – tendo padrões em comum –, eles funcionam e se comportam de maneira diferente. Para que você entenda melhor, usaremos nosso próprio site de exemplo para que você visualize os conceitos e saiba como aplicá-lo no seu projeto.

NÃO COPIE OS CÓDIGOS, ELES NÃO VÃO FUNCIONAR DE FORMA GLOBAL.

Requisições HTTP

1. Comece baixando as pastas wp-content/themes & wp-content/plugins e utilize o software SearchMonkey para ler todos os arquivos e encontrar as funções a serem desativadas ou removidas.

2. No WordPress, instale o plugin Code Snippets e crie um snippet com a seguinte função:

-add_action( 'wp_enqueue_scripts', 'remove_unnecessary_requests', 99 );
-function remove_unnecessary_requests() {
-   // Seu código vem aqui
-}

view raw Remove Unnecessary Requests hosted with ❤ by GitHub

3. Abra a página inicial de seu WordPress e leia seu código fonte. No caso de nosso website, temos os plugins WP Knowledgebase, AnsPress, Social Login & WOW declarando os .css & .js que são necessários apenas nas páginas /wiki & /suporte respectivamente.

E agora, com a ajuda de Conditional Tags, vamos mostrar ao sistema que esses assets só devem ser carregados quando necessário:

	add_action( 'wp_enqueue_scripts', 'remove_unnecessary_requests', 99 );
	function remove_unnecessary_requests() {
	$url = 'http://' . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
	if (strpos($url,'kb') === false xor strpos($url,'wiki') === false xor strpos($url,'knowledgebase') === false ) {

	wp_dequeue_style( 'kbe_theme_style' );
	wp_dequeue_script('kbe_live_search');
	remove_action('wp_head', 'kbe_search_drop');
	remove_action('wp_print_scripts', 'kbe_live_search');
	remove_action('wp_head', 'st_add_live_search');
	remove_action('wp_head', 'count_bg_color');

	}
	if (strpos($url,'suporte') === false) {

	wp_dequeue_style( 'ap-style' );
	wp_dequeue_style( 'ap-responsive' );
	wp_dequeue_style( 'ap-fonts' );
	wp_dequeue_style( 'ap-overrides' );
	wp_dequeue_script( 'ap-functions-js' );
	wp_dequeue_script( 'ap-anspress_script' );
	wp_dequeue_script( 'peity-js' );
	wp_dequeue_script( 'ap-initial.js' );
	wp_dequeue_script( 'ap-scrollbar.js' );
	wp_dequeue_script( 'ap-js' );
	remove_action ('wp_head', 'oa_social_login_add_javascripts');

	}
	if ( !is_single() ) {

	wp_dequeue_script( 'dsq_count_script' );
	wp_dequeue_script( 'comment-reply' );
	wp_dequeue_script( 'jquery-form' );
	remove_action('wp_footer', 'dsq_output_footer_comment_js');

	}
	if (is_front_page() ) {

	wp_dequeue_style( 'animate' );
	wp_dequeue_script( 'wow' );
	remove_action( 'print_footer_scripts', 'wow_init' );

	}

	}

view raw Conditional Tags - Complete Code hosted with ❤ by GitHub

Na linha 2, com a função strpos do php, conseguimos solicitar ao sistema que execute o código nas páginas que não contenham kb, wiki ou knowledgebase em seu URL;

Na linha 7, repetimos a função, mas para executar o código apenas nas páginas que não contenham suporte em seu URL;

Na linha 12, usando uma condicional do próprio WordPress, executamos o código nas páginas que não são single posts;

Na linha 17, executamos o código apenas na página inicial.

Este é o esqueleto da cirurgia que vamos fazer em nosso website. Monte ele de acordo com os seus plugins e temas e identifique onde não deve ser carregado as funções.

Só com isso já diminuímos as requisições em pelo menos 50%, o que é fundamental na otimização de um WordPress – deixando seu site muito mais rápido para os visitantes.

Agora que vamos nos aprofundar ainda mais no tema:

Requisições DNS

Em nosso website, utilizamos o Google Fonts, Google Analytics & o chat Tawk.to.

Todos utilizam scripts externos, o que obviamente requer requisições DNS. Para evitar que isso aconteça, vamos os principais arquivos para nossa nuvem.

1. A primeira parte é muito fácil: basta fazer o download das fontes .woff2 do Google Fonts e alterar o CSS para que as fontes sejam buscadas na pasta local, e não no Google.

O código original utilizado em nosso website para buscar a fonte Dosis era o seguinte:

Após baixar os arquivos .woff2 e colocá-los numa pasta chamada fonts, que vem 1 nível antes do .css, o código modificado é este:

Como os arquivos .woff2 raramente são modificados, deixaremos deste jeito, sem criar nenhum cron job para atualizar os arquivos.

2. Apesar do Google não recomendar que armazenemos o analytics.js localmente, ignoramos a recomendação e usamos um macete para contornar a situação:

A) Definimos o local onde o analytics.js será armazenado;

B) E alteramos o código do Analytics;

A linha original é igual a essa:
Altere para o seu arquivo local:

C) Crie um Cron Job para substituir o analytics.js a cada 24h utilizando o comando seguinte wget:

Substitua o /home/infinite/public_html/cdn/br/site pelo seu diretório, a partir do disco.

D) Se você usa um CDN, cria uma regra para que este arquivo tenha um Browser cache expire TTL e CDN cache de 24 horas.

3. Realizamos o mesmo procedimento, mas agora para armazenar o .js do Tawk.to.

A linha original do nosso JS é igual a essa:
Alterando para o arquivo local:

Observação: Este arquivo .js é individual, você deve puxar o seu, não copie o nosso, não vai funcionar. Não se esqueça de criar o Cron Job.

Bônus

Aproveitamos para melhorar a compreessão das imagens utilizando a ferramenta Kraken.io online, o que reduziu em 70 kB as imagens de fundo através da compreensão Lossy – levando a uma perda de qualidade imperceptível.

Notamos que uma imagem de 112 kB estava em .png, sendo que a mesma não possuía transparência e era suficientemente grande para virar uma .jpg. Após transformá-la utilizando o Photoshop e otimizá-la com o Kraken.io, conseguimos uma imagem de apenas 15 kB – ou seja, uma redução extraordinária de 100 kB (ou 20% do peso da página).

Obs: Lembre-se que clientes Infinite não precisam de plugins para otimizar imagens pois já contam com um otimizador nativo e gratuito! Portanto, desconsidere este item

NOTAS IMPORTANTES
1) A ferramenta utilizada para testar (GTMetrix), utiliza um servidor em Vancouver (CA) e nossa nuvem está em São Paulo (BR) – e mesmo tão distante, a Infinite teve excelentes resultados.
2) Nosso site possui o chat Tawk.to, que faz várias requisições externas e atrasa um pouco o carregamento do site. Sem ele, poderíamos alcançar resultados ainda melhores.
3) Não alcançamos 100% nos testes por opção, já que teríamos que nos esforçar demais para melhorar tão pouco.
4) Quando este artigo foi feito, ainda utilizávamos a rede da CloudFlare, portanto sem o nosso próprio CDN.

Tem alguam dúvida ou observação? É só deixar seu comentário logo abaixo!

Removendo Requisições Inúteis do WordPress

Requisições HTTP

Requisições DNS

Bônus

Artigos Populares

Categorias

Plataformas