Acelere o carregamento do seu site em WordPress

Aprenda algumas super dicas que deixarão seu site bem mais rápido! Isso não apenas vai melhorar a experiência dos usuários, como também irá contribuir para um bom posicionamento no Google.

Olá galera! Hoje quero compartilhar com vocês algumas dicas que podem acelerar o carregamento do seu site em WordPress de maneira drástica! Para vocês terem uma idéia, ao aplicar as dicas apresentadas aqui, consegui diminuir o tempo médio de carregamento do Mochileiro Digital de 6 segundos para apenas 1 segundo. Vamos colocar mãos à obra!

Não utilize o comando @import e comprima seu CSS

É muito comum vermos child themes (temas filhos) no WordPress usarem o comando @import. Dessa maneira o tema filho recebe os estilos aplicados ao tema pai e mantemos a folha de estilo pequena e fácil de ser editada.

Mas não são apenas child themes do WordPress que utilizam @import. É muito comum vermos o uso deste recurso para se importar estilos de reset do CSS entre outros.

Um problema do @import está no fato de que ele não permite que o browser faça o download em paralelo de cada uma das folhas de estilo CSS. Mas não é só isso. Quando comprimimos o CSS, o estilo que foi importado com o comando @import, não será comprimido.

A dica que fica aqui é a seguinte:

  • Coloque todas as folhas de estilo em um mesmo arquivo CSS.
  • Se não puder fazer o que indiquei acima, opte por utilizar a tag <link> para chamar cada uma das folhas. Confira abaixo:
<link rel="stylesheet" href="primeiro.css" />
<link rel="stylesheet" href="primeiro.css" />

Depois de copiar e colar todos os estilos para um único arquivo CSS, é hora de comprimir. Você pode fazer isso utilizando os plugins W3 Total Cache or Wp-Minify.

Das dicas aqui compartilhadas, tenha certeza que essa primeira é sem dúvida uma das mais eficientes. E se quiser comprovar, basta acessar a ferramenta Pingdom Tools e fazer um teste antes e depois das mudanças aqui sugeridas. Você vai se surpreender!

Utilize sprite para suas imagens e não esqueça de otimizá-las

Outro grande vilão do tempo de carregamento da maioria dos sites são as imagens. Imagens pesadas (não otimizadas para web) e uma grande quantidade delas na página (o que gera diversas requisições ao servidor) definitivamente podem estar lhe roubando segundos preciosos no carregamento do seu site.

Otimizar imagens

Essa é uma dica simples e que muitos esquecem de fazer. Se você utiliza um programa como o Photoshop para trabalhar as imagens do seu site, lembre-se de que a maneira correta de salvá-las é utilizando o comando “Save for web and devices” (Salvar para web e dispositivos).

Diferente da opção “Salvar” tradicional, aqui teremos uma tela com diversas opções de otimização, como:

  • Escolher o tipo de arquivo (GIF, JPG, PNG etc)
  • Escolher a qualidade da imagem (sendo este o recurso mais importante). Reduza a qualidade buscando sempre o equilíbrio entre uma boa resolução e o menor tamanho de arquivo possível.

Sprite de imagens

Fazer um sprite nada mais é do que pegar todas as imagens utilizadas no site (como ícones, logo, botões e etc) e colocá-las em um único arquivo .jpg ou .png. Desta maneira reduzimos consideravelmente o número de requisições ao servidor, visto que ao requisitar o arquivo para o logo, por exemplo, estamos já trazendo todos os demais elementos.

Sempre opte por códigos de carregamento assíncronos

Uma outra dica importante é utilizar códigos de carregamento assíncronos principalmente para os botões de redes sociais e analytics. Botões de Google+, Facebook, Twitter etc, geralmente possuem esse tipo de carregamento. Entretanto, é muito comum vermos plugins de WordPress para inserir botões de compartilhamento utilizando códigos antigos que não carregam de maneira assíncrona.

Fique atento e se seu site já tem um tempinho, confira se os códigos utilizados nesses botões não precisam ser atualizados.

Carregue scripts de Javascript somente nas páginas onde eles são necessários

Se um determinado widget, como os botões de compartilhamento nas redes sociais, não são utilizados na homepage, eu não preciso carregar esse script lá e sim na página single.php.

Aqui vai uma boa dica. O Plugin Widget Logic lhe permite escolher exatamente em que páginas o widget será exibido. Dessa maneira evitamos o carregamento desnecessário de scripts e aceleramos o carregamento das páginas.

Widget Logic Plugin

Instale o Plugin W3 Total Cache

O plugin W3 Total Cache melhora  a performance do servidor através utilizando cache em todos os aspectos do site. O tempo de download diminui assim como o uso da banda. Outro recurso interessante presente no plugin é o de comprimir arquivos CSS e JS, assim como utilização de CDN.

Apesar dos diversos recursos da ferramenta, você verá que a configuração é muito fácil e não exige grandes conhecimentos técnicos. Se quiser conhecer outros plugins interessantes, não deixe de conferir nosso post sobre Os melhores Plugins para WordPress.

Por fim, utilize CloudFlare

Por fim, aqui vai uma dica de arrebentar! Utilize os serviços do site CloudFlare. Ele não só vai ajudar seu site a ter o tempo de carregamento diminuído, como também o protegerá contra possíveis ataques. O plano pago do sistema, é capaz de prevenir até mesmo ataques DDOS.

Dentre os recursos que a plataforma disponibiliza podemos citar: CDN, Otimização, Proteção contra ataques e aplicativos.

Atualmente algumas hospedagens já possuem o serviço CloudFlare integrado, entretanto, se esse não for o seu caso, não tem problema. Basta abrir uma conta no site e seguir os passos para configuração. E o melhor de tudo, todos os serviços são executados sem a necessidade de se mexer no código do site, como adicionar algum script e etc.

Confira o vídeo abaixo (em inglês) com algumas explicações muito interessantes sobre o sistema CloudFlare:

Outr ponto interessante, é que no painel de configuração do serviço também é possível elecionar a opção de comprimir o HTML, CSS e o JS.

Conclusão

Quando falamos de velocidade estamos falando basicamente de carregamento de elementos, número de requisiçòes e tamanho da página. Estar atento ao uso correto de scripts, otimização de imagens, uso de cache e compactação de arquivos, podem fazer toda a diferença.

Constantemente utilize ferramentas de avaliação com YSlow, Page Speed e Pingdom Tools. Lembre-se que tempo de carregamento também é um fator de ranqueamento nos mecanismos de buscas e portanto pode influenciar muito mais do que apenas a experiência do usuário!

Nào posso dizer que tudo o que existe sobre o assunto está aqui, mas definitivamente, essas ações listadas terão um impacto enorme e imediato, pode ter certeza. E se você também tiver alguma dica, não deixe de compartilhar com a gente!

5 Comentários

  1. Wellington Bastos

    Muito legal o artigo Ubiratan! Uma dica que eu dou para otimizar ainda mais o tamanho das imagens, caso a pessoa utilize o WordPress é o plugin WP Smush.it – http://wordpress.org/extend/plugins/wp-smushit/

    Que utiliza o serviço da Yahoo, o Smush.it – http://www.smushit.com/ysmush.it/
    Que é um compressor online de imagens.

    O legal do plugin, que você pode compactar as imagens do site inteiro apenas com o clique de um botão, ou individualmente. E ele ainda mostra o número de memória economizada com a compressão.

    Abraços

    Responder
  2. Aleqsandros Bezerra

    Bom dia, Ubiratan

    Primeiramente gostaria de lhe parabenizar pelo post! São ótimas dicas.

    Como não entendo muito gostaria de saber se fosse faz trabalho freelancer? Gostaria de fazer um trabalho de otimização para meu site ficar mais rápido.

    Muito obrigado e fico aguardo de um contato.

    Forte abraço

    Aleqsandros

    Responder

Deixe uma Resposta

  • (não será publicado)

XHTML: Você pode usar estas tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

© 2014 Mochileiro Digital.

Compartilhe: