Lista de verificação de otimização do WordPress

A otimização do WordPress é a arte de fazer seu site rodar o mais rápido possível, melhorando a experiência do usuário, reduzindo os custos do servidor e tem benefícios de SEO.

Muitos estudos mostram que os visitantes não desejam esperar o carregamento de um site e tendem a sair do site se demorar muito para carregar.

Um site de carregamento rápido é especialmente importante para você se você tem uma loja virtual e deseja melhorar suas taxas de conversão.

Testes na Amazon revelaram resultados semelhantes: a cada 100 ms de aumento no tempo de carregamento da Amazon.com, as vendas diminuíram em 1% (Kohavi e Longbotham 2007)

Fonte: https://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

A velocidade de carregamento do seu site também é extremamente importante para seus rankings no Google, tornando a otimização do site parte de sua estratégia de SEO.

Mas, meu site carrega muito rápido!

Claro que sim. Pelo menos para você. Mas você já tentou visitar seu site pela primeira vez em muito tempo?

Quando você navega em seu site, a maior parte será armazenada em cache em seu navegador. Se você deseja obter a primeira experiência, limpe seu cache ou use um navegador completamente diferente.

Há muitas coisas para fazer que podem melhorar a velocidade do seu site WordPress, vamos começar.

Minificando scripts

Os sites WordPress são uma combinação de HTML, CSS, JavaScript e imagens. O código HTML é carregado primeiro e depois tem informações sobre outros arquivos de folhas de estilo CSS, arquivos JavaScript e as imagens.

Cada arquivo é carregado por sua vez. Um navegador normalmente tem um limite de 2-4 “pipes”, o que significa que o navegador carregará apenas 2-4 arquivos ao mesmo tempo do servidor em que os arquivos estão hospedados.

Se você examinar o código HTML do seu site WordPress, notará muitos arquivos .css e .js diferentes. Cada um deles geralmente vem de plugins diferentes, cada um adicionando arquivos .js ou .css à mistura.

Em alguns casos, o plugin injetará estilos JavaScript ou CSS diretamente no HTML A maioria dos desenvolvedores de plugins WordPress ou autores de temas são inteligentes o suficiente para não fazer isso.

Esta é apenas uma amostra de um site WordPress normal. O código HTML tem links para vários outros arquivos. Neste exemplo simples, 4 arquivos JavaScript são carregados, um por um.

<script type=”text/javascript” src=”https://domain.com/wp-includes/js/jquery/jquery.js?ver=1.7.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/themes/Trim/js/socialite.min.js?ver=3.4.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/plugins/wp-greet-box/js/functions.js?ver=3.4.2″></script>

<script type=”text/javascript” src=”https://domain.com/wp-content/plugins/wp-greet-box/js/js-mode.js?ver=3.4.2″></script >

O WordPress possui funções internas que permitem que os autores de plugins e temas incorporem os arquivos JavaScript e CSS necessários.

wp_enqueue_script() e wp_enqueue_style(). Os nomes das funções dão uma pista sólida do que elas fazem. Ao usar qualquer um deles para incorporar os arquivos necessários, os autores de plugins e temas enfileiram seus arquivos junto com todos os outros plugins e até mesmo o próprio WordPress.

Também é possível instruir as funções de quaisquer dependências de outras bibliotecas, geralmente um arquivo de inclusão JavaScript depende do jQuery para ser carregado primeiro.

Eu costumo encontrar e instalar um plugin minificador, ativar e depois ver se alguma coisa quebra no site. A partir daí, vou identificar exatamente o que está falhando e se preciso alterar algumas configurações para corrigi-lo.

Plugins de redução tendem a ter configurações de exclusão para arquivos específicos que não funcionam bem quando carregados com outros ou para alterar onde os arquivos são carregados, no cabeçalho ou rodapé do documento.

$template_url=get_bloginfo('template_url');
wp_enqueue_script('cycle', $template_url."/js/jQuery.cycle.all.js", array('jquery'));
wp_enqueue_script('socialite', $template_url."/js/socialite.min.js", array('jquery'));
wp_enqueue_script('lazyload', $template_url."/js/jquery.lazyload.min.js", array('jquery'));

Nota: No exemplo de código, armazeno a url do tema em uma variável e depois a analiso para a função wp_enqueue_script. Isso reduz o número de chamadas PHP e/ou banco de dados necessárias, aumentando a velocidade.

Na busca por velocidades de carregamento extremas, eu poderia optar por codificar o caminho absoluto do URL, mas isso limitaria o tema a apenas um único domínio e tornaria mais difícil reutilizar o código em outro site.

Depois de instalar um plug-in de redução, as folhas de estilo JavaScript e CSS agora são unidas em menos chamadas HTTP.

<script type="text/javascript" src="https://cleverplugins.com/wp-content/plugins/bwp-minify/min/?f=wp-includes/js/jquery/jquery.js,wp-content/themes/Trim/js/socialite.min.js,wp-content/plugins/wp-greet-box/js/functions.js,wp-content/plugins/wp-greet-box/js/js-mode.js"></script>

Isso combina os 4 arquivos em um único “arquivo”/solicitação para o seu navegador.

Eu encontrei sites baseados em WordPress que tinham 22 arquivos .css carregados, bem como 15 .js. Tudo na primeira página. A mudança na velocidade pode ser incrível se você puder reduzir a quantidade de arquivos externos.

Embora os scripts de minificação tendam a ter grandes melhorias de velocidade, também é uma das técnicas que uso que tendem a trazer mais problemas na configuração.

Otimizar header.php

O header.php em seu tema é chamado em cada página do seu site WordPress. Este arquivo geralmente tem muitos elementos que podem ser otimizados.

Um exemplo clássico é o bloginfo('template_directory') que normalmente é chamado várias vezes no cabeçalho para retornar a url do tema para incluir arquivos externos.

Um método mais eficiente é fazer uma única solicitação para a url e depois armazená-la como uma variável.

$template_directory = get_bloginfo('template_directory'); 

A url do diretório do tema agora está armazenada na variável $template_directory.

Mais exemplos de como melhorar a eficiência do header.php podem ser lidos no blogpost WordPress header.php Dicas de Otimização

Reduzindo o número de plugins

Outra parte importante na otimização do WordPress é manter o número de plugins ativados o mais baixo possível. É tentador para muitos usuários testar e experimentar diferentes plugins, o que de fato é um dos benefícios do WordPress.

No entanto, ter muitos plugins ativos pode reduzir a velocidade do seu site WordPress. Muitos plugins têm uma única função que poderia ser facilmente manipulada por um pedaço de código colocado em seu functions.php.

Em muitos casos, você pode precisar apenas de uma única função, mas o plugin que você usa tem várias outras opções que você nunca usa.

Analise cada plug-in em seu site e verifique se você precisa deles. Se você não precisar deles ou a funcionalidade puder ser substituída pelo código functions.php, desative e exclua os plugins.

Não use imagens – use CSS3

O design de sites usa imagens para ajudar a fazer a interface do usuário.

Após a introdução do CSS e em particular do CSS3, muitos efeitos que são usados ​​para interfaces web podem ser imitados usando código CSS e HTML.

[box]Nota: A maioria desses efeitos não é compatível em todos os navegadores, em particular o Internet Explorer mais antigo (sim, sempre o problema filho para qualquer desenvolvedor web). Se você deseja otimizar a velocidade do seu site, usar efeitos CSS pode ser uma solução rápida e rápida, mas não é uma boa escolha se o grande público do cliente usa navegadores desatualizados.[/box]

Se você estiver trabalhando para um cliente que segmenta B2C (business to consumer), verifique o Google Analytics dele ou pergunte sobre que tipo de clientes eles têm (ou desejam segmentar). Isso pode influenciar se você pode usar efeitos CSS3 se o público de clientes geralmente usa navegadores desatualizados.

Quando Elegantthemes.com lançou uma nova versão de seu plugin shortcode, isso teve um enorme impacto no tempo de carregamento para meus clientes devido aos efeitos CSS3 e ao colocar várias imagens em um único sprite.

A pasta shortcodes/images, que costumava conter 90 imagens, agora tem um único sprite PNG, reduzindo o tamanho geral de 140kb para 15kb!
(Isso é cerca de 90% de redução no tamanho.)

Imagens para sprites

A otimização de sprite de um tema existente pode ser um pouco demorada, mas também pode trazer uma grande melhoria de velocidade para o seu site.

Um sprite é uma única imagem, geralmente no formato .PNG que possui vários elementos do seu design/layout visual. Em vez de carregar cada elemento gráfico individualmente, todas as imagens são unidas em um ou o menor número possível de sprites.

Esta técnica deve ser usada apenas para as imagens usadas para o layout do design, e não para imagens em destaque, miniaturas, etc. As únicas imagens que você deve tentar colocar em um sprite são as imagens usadas em todo o seu site em todas as páginas.

Em vez de carregar cada imagem individual (uma solicitação http diferente), todas as imagens são agrupadas em um arquivo e o CSS que exibe cada imagem é modificado para simplesmente deslocar o plano de fundo para onde no sprite está a parte necessária.

SpriteMe.org é um excelente recurso para criar sprites. O melhor método é planejar com antecedência e construir seus sprites primeiro, mas se você precisar consertar um site existente, o site spriteme.org tem um bookmarklet que torna o processo muito fácil.

Exemplo de estilos CSS em combinação com um sprite:

.btn_top {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -10px;
}
.btn_top div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -40px;
}
.btn_bottom {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -70px;
}
.btn_bottom div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -100px;
}

Cada estilo CSS faz referência ao mesmo arquivo, mas a posição do plano de fundo é diferente, mostrando as diferentes partes da imagem.

Distribuir – Use um CDN

Existem dois benefícios principais em usar uma CDN (Content Distribution Network) para hospedar seus arquivos de tema e elementos do WordPress.

Seus arquivos são carregados mais rapidamente, pois estão em um domínio diferente. O limite do navegador de 2-4 downloads simultâneos de arquivos é para cada domínio .

Portanto, se seus arquivos estiverem hospedados em um domínio diferente, um navegador carregará esses arquivos sozinho, de fato, tornando seu site mais rápido, além de reduzir o estresse de carga em seu domínio e em seu host.

Outro benefício é que, se você estiver usando um CDN importante, eles terão servidores distribuídos em todo o mundo, que detectarão de onde o visitante é e, em seguida, servirão seus arquivos a partir do servidor mais próximo em sua rede.

O servidor certo para o seu site

O servidor que hospeda o site precisa estar localizado próximo ao público-alvo. Portanto, se um site é direcionado ao mercado alemão, é melhor encontrar um servidor com uma empresa de hospedagem na Alemanha ou pelo menos na Europa Central.

Isso tem um grande impacto para seus visitantes que carregam de um servidor muito mais próximo de onde estão localizados, tornando a navegação em seu site muito mais rápida.

Isso também influencia o SEO, não apenas porque o site carrega mais rápido, mas também porque aumenta a importância do site para o público alemão e, portanto, também deve ter uma classificação mais alta.

O efeito real em termos de SEO é discutível, mas se você está tentando melhorar o desempenho do seu site, vale a pena considerar.

Isso é bem conhecido por SEO, mas uma vez que um site foi configurado, é raro vê-lo movido para outro servidor por razões puramente de SEO. Vale a pena manter em mente para o seu próximo projeto.

Corrigir erros 404

Você deve verificar seu site regularmente para garantir que não tenha páginas 404 – não encontradas de qualquer maneira. Reduzir links ruins em seu site pode reduzir a carga do servidor e proporcionar uma melhor experiência ao usuário. Não apenas links e páginas podem desaparecer, às vezes um erro de digitação ou outro tipo de erro pode levar a conteúdo não encontrado em seu site.

Dica: Confira este trecho de código para redirecionar automaticamente 301 páginas não encontradas.

[caixa]
Esta página está longe de ser concluída e não cobre todos os detalhes da otimização do WordPress – ainda. O objetivo é criar um recurso de dicas e truques para tirar o máximo proveito do seu site WordPress.

Alguns ou a maioria dos truques serão difíceis de implementar, a menos que você seja um desenvolvedor, mas cada um deles fará com que seu site WordPress seja executado mais rápido.
[/caixa]

A lista de verificação

Esta é a lista de verificação, observe que cada site e projeto é diferente. Nem todas as etapas podem ser usadas em todos os sites.