Dicas de como otimizar seu tema e plugins no WordPress

Dicas importantes para você otimizar, consumir menos banda, economizar servidor e ganhar posições no google com otimizações básicas no seu site wordpress.

A otimização de sites tem sido um fator muito importante no quesito posicionamento do site nos rankings dos sistemas de busca. Então vou passar algumas dicas básicas e fáceis de se fazer para que seu layout seja leve o suficiente para que, no mínimo, ele não atrapalhe seu site de ranquear bem no google ou outros sistemas de busca.

Você, mesmo sem muito conhecimento técnica na área de servidores ou código, pode otimizar seu site o suficiente para que ele rode mais rápido e ganhe posições no sistema de busca ou que, no mínimo, não atrapalhe seu site de ranquear fazendo-o perder posições por conta de um layout muito pesado, algo que o google por exemplo não vê com muito bons olhos.

Plugin de Cache

O plugin de cache W3 Total Cache é indispensável para qualquer site que utiliza a plataforma wordpress. Ele pode fazer com que seu site seja otimizado somente com alguns cliques.

Minify é uma função do plugin de cache que você deve utilizar para otimizar o código CSS, HTML e Javascript. Ele retira espaços, quebras de linha e comentários, fazendo com que seu site economize bytes preciosos. Se você possui muitos arquivos javascript em seu tema não é tão recomendável utilizar o minify pois ele pode quebrar o código se o mesmo não estiver muito bem escrito. Mas teste para não deixar de otimizar o Javascript também.

O CSS e o HTML não possui muitos problemas para otimizar. É bastante simples o processo e o plugin faz tudo sozinho. O plugin é bastante intuitivo e basta você ativar o minify e limpar o cache para que o site passe a ser minificado.

A economia é gritante e você verá que o site será aberto mais rapidamente. Além do minify, o plugin também ativa cache do navegador, fazendo com que quando o usuário retornar ao seu site, ele não baixe novamente arquivos comuns do site e economizando banda de internet do usuário e tráfego de informação do site. Assim o site abrirá também mais rápido e otimizado.

Para checar a economia de dados do Minify, acesse este site: http://web-sniffer.net/ e verifique a economia.

Ao rodar a ferramenta para o lucrei.com, recebi a seguinte mensagem: Content (encoded: 6.41 KiB / decoded: 22.87 KiB). Ou seja, consegui economizar mais de 6kbs de 22kbs. Se pensar em grande escala de acessos é uma baita economia.

CloudFlare

O CloudFlare faz cache das informações do seu site. Quando o sistema faz cache da página, o próximo usuário recebe as informações do próprio CloudFlare e não do seu servidor. Isso faz com que as informações do site sejam entregues mais rapidamente, economiza e alivia seu servidor de hospedagem.

O seu plugin do W3 Cache inclusive possui integração com o CloudFlare para que eles trabalhem em conjunto. Ativando os dois esquemas de cache, seu site irá começar a ter um melhor desempenho.

Edição de código

Talvez esta parte exija mais conhecimento técnico. Uma das coisas bem importantes é fazer com que o cabeçalho carregue o mínimo de arquivos Javascripts possíveis pois eles interrompem o carregamento do restante até que eles sejam carregados.

Uma ação que você pode tomar a princípio é limpar seu cabeçalho. Separei alguns códigos para você colocar no arquivo functions.php do seu tema. Com o código seu cabeçalho ficará um pouco mais enxuto pois removerá uma série de arquivos javascripts e CSS que são carregados lá desnecessariamente.

remove_action('wp_head', 'rsd_link'); // remove really simple discovery link
    remove_action('wp_head', 'wp_generator'); // remove wordpress version

    remove_action('wp_head', 'feed_links', 2); // remove rss feed links (make sure you add them in yourself if youre using feedblitz or an rss service)
    remove_action('wp_head', 'feed_links_extra', 3); // removes all extra rss feed links

    remove_action('wp_head', 'index_rel_link'); // remove link to index page
    remove_action('wp_head', 'wlwmanifest_link'); // remove wlwmanifest.xml (needed to support windows live writer)

    remove_action('wp_head', 'start_post_rel_link', 10, 0); // remove random post link
    remove_action('wp_head', 'parent_post_rel_link', 10, 0); // remove parent post link
    remove_action('wp_head', 'adjacent_posts_rel_link', 10, 0); // remove the next and previous post links
    remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );

    remove_action('wp_head', 'wp_shortlink_wp_head', 10, 0 );

remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );


add_filter( 'script_loader_tag', function ( $tag, $handle ) {

    if ( 'themonic-mobile-navigation' !== $handle )
        return $tag;

    return str_replace( ' src', ' defer="defer" src', $tag );
}, 10, 2 );

Se seu tema carregar mais de um arquivo CSS, tente carregar sempre através do @import da seguinte forma.

style.css
 @import "arquivo1.css";
 @import "arquivo2.css";

Com este esquema, seu tema carregaria o arquivo style.css e dentro dele seria carregados quantos arquivos fossem necessários. Em que isto otimizaria seu tema? Quanto menos requisições seu site fizer através de src’s, mais rápido seu site será carregado. Sabe quando seu site está abrindo e fica aquela mensagem no rodapé do navegador “carregando” e fica piscando diversos arquivos? Cada arquivo é uma requisição externa. Quanto menos requisições melhor. No caso do CSS da forma exposta acima, seria somente uma requisição externa, e não duas.

Otimizar imagens

Muitos webmasters simplesmente baixam as imagens da web e fazem o upload das imagens em seus sites. Já vi imagens de 600px de aproximadamente 1MB serem enxugadas para 50kbs por exemplo. Isso faz toda a diferença quando seu foco é otimizar seu site. Quanto mais leve, melhor para todos. Inclusive você que exigirá menos do seu servidor.

Existem plugins wordpress que também prometem otimizar imagens, eu uso também, mas o mais recomendável é você editar em algum editor de imagens localmente. No final das contas eu utilizo as duas técnicas.

O plugin para otimizar imagens que eu utilizo é o ewww-image-optimizer-bulk.

Carregamento das imagens

Um erro bem frequente nos temas wordpress é o carregamento das imagens. Vejo como um caso bastante grave. As miniaturas das imagens na verdade não são miniaturas. São as imagens em grande escala (originais) simplesmente achatadas. Sim, a imagem original é carregada na tela (de aproximadamente 200kbs por exemplo), porém o desenvolvedor pega e achata ela para o tamanho desejado (150px x 150px por exemplo). O que deve ser feito é carregar o thumbnail que é gerado automaticamente pela ferramenta do wordpress. Verifique quais imagens seus thumbnails estão sendo carregadas. Se são as originais ou se são realmente as miniaturas thumbnails. Isto é importante e simples de ser resolvido.

Jquery Nativo do wordpress

Verifique a real necessidade de você carregar o Jquery no seu site em wordpress. Muitos temas nem utilizam javascript mas o jquery está lá, sendo carregado em cada acesso. Ou seja, aproximadamente 50kbs estão sendo baixados pelo usuário sem necessidade. Existem diversas formas de não incluir o Jquery no seu tema, mas é bastante particular e não dá para eu disponibilizar a forma correta pois não seria 100% garantido (Se quiser ajuda poste nos comentários).

Plugins wordpress

Verifique os plugins que estão ativos no seu tema e se eles são de autores confiáveis. Carregar muitos plugins pode fazer com que seu site, além de estar “desprotegido” e aberto a entrada de vírus, pode fazer com que ele fique muito pesado carregando muitos arquivos CSS e Javascript.

Como testar a otimização do seu site

O google fornece uma ferramenta chamada PageSpeed Insight onde você pode verificar, através de uma nota, se seu site está bom ou ruim e ainda dá a direção que você deve tomar para ter uma nova maior. Separando os resultados por aparelhos móveis ou desktop e dando as diretivas que devem ser seguidas para melhorar a nota do seu site oferecendo links para te ajudar com as regras que ele identificou que não estão sendo cumpridas no seu site.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *