Otimização WordPress: aumente a performance e desempenho de seu blog / site
Há muitas dicas úteis na internet sobre como otimizar seu blog Wordpress. Algumas delas são boas, mas difíceis de serem implementadas pelo “usuário médio”. Da experiência advinda da blogagem é possível saber de dicas para tornar seu site mais rápido e com melhor desempenho e performance.
É interessante que um web designer/desenvolvedor tenha em sua máquina o Firebug e Web Developer Toolbar, duas das mais importantes ferramentas de depuração em desenvolvimento web. Também tenha em mente que este artigo é dedicado, principalmente, aos sem possibilidade de configurar o PHP e MySQL diretamente, devido a condicionalismos e/ou restrições de hospedagem.
Otimize seu código HTML dentro de seu template
Esta é uma etapa que, geralmente, não é considerada importante quando, na verdade, deveria estar no topo de sua lista! É muito importante que seu código HTML esteja validado e que você não tenha código redundante. Certifique-se que seu tema é escrito com uma quantidade mínima de código possível. Não faça uso abusivo de tags como div e span.
Comprima seu CSS
Para que seu site seja mais rápido e de melhor performance e desempenho, existem vários truques que você pode aplicar no CSS, dentre eles:
- Usar declarações únicas no CSS. Você pode usar declaração única para margin, padding, background, border, font e list-style.
- Usar nomes pequenos em classes e IDs. Cada letra conta para o tempo de resposta do site. Por isso, é útil para o tamanho do CSS usar nomes simples e mais curtos ao invés de longos e descritivos nomes.
- Evitar seletores complexos. Tente fazer com que seus seletores sejam eficientes utilizando a maneira mais simples que for possível.
- Comprimir seu CSS. Depois que seu arquivo CSS estiver pronto, você pode ganhar velocidade adicional usando um compressor de CSS online - lembre-se de sempre ter um arquivo de backup com o código original.
Utilize Sprites CSS
Ao invés de usar vários arquivos de imagem no seu site/blog, experimente reunir o maior número possível de elementos gráficos em uma única imagem. Então usando a propriedade CSS background, você pode exibir os elements que quiser – essa é a técnica de CSS Sprites.
No caso dos Sprites CSS, o tamanho do arquivo de uma imagem é um menor que o de várias e o número de requisições HTTP também diminui – e esse é um dos fatores-chave para a performance de um site, como será visto a seguir.
Faça poucas requisições HTTP
Ultimamente esse tem sido um grande tema em debates sobre otimização e performance de sites. Alguns especialistas pensam que este é o aspecto mais importante a respeito do carregamento de uma página. A ideia principal é ter menos elementos na página, como imagens, arquivos CSS, javascript, etc. Alguns dizem que o ideal é faze menos de 25 requisições, se possível.
Evite carregar elementos externos
Esse é um dos mais importantes aspectos referentes à performance de web sites porque, ultimamente, os sites estão cheios de código javascript e iframes de sites de terceiros. Portanto, tente manter seu site longe de conexões a desnecessárias a elementos externos. Alguns fazem isso somente para mostrar um widget sem grande importância ou um “selinho” sobre alguma coisa que não acrescenta a navegação do visitante. Encontre alternativas ou tente hospedar os widgets em seu próprio dominio.
Deixe o tamanho da página inicial menor que 150KB
Para realizar essa “tarefa” selecione, no Web Developer, Informações > Visualizar Tamanho do Documento. Isto irá mostrar o tamanho de sua página e os elementos que fazem parte dela, como arquivos CSS, imagens, scripts, etc. Tente manter todos esses componentes no valor máximo de 150KB.
Exiba o resumo ao invés do artigo completo
Outra forma de otimizar sua página inicial é mostrar apenas uma parte de seus artigos. Dessa forma você exibe menos caracteres e faz com que o tempo de carregamento seja menor.
Reduza o número de plugins
A maioria dos plugins tem seus próprios arquivos CSS e/ou imagens. Então, se possível, é melhor manter baixo o número de plugins instalados para baixo. Dessa forma, você irá reduzir o número de requisições HTTP.
Exiba no máximo 20 imagens na index
Isso vale também para o objetivo de diminuir o número de requisições HTTP. As imagens podem estender o tempo de carregamento do site e é indicado que você não utilize mais de 15-20 imagens na index, quando possível. Quanto a páginas de artigos artigo, o número máximo de imagens deve ser de 5. Dessa forma, você pode ter artigos mais limpos e um site WordPress melhor.
Limpe sua sidebar
Coisas como calendário ou blogroll não são adequados para todo e qualquer blog/site WordPress. E estes componentes também diminuem a velocidade de carregamento de seu site. Você pode desabilitá-los, removendo o código do seu tema WordPress.
Caminho absoluto para algumas template tags
Quando você conhece os caminhos para determinados elementos, você pode usar os caminhos absolutos ao invés de usar as template tags do WordPress. Com isso, você pode reduzir o tempo de carregamento de seu site.
Por exemplo, em vez de usar a template tag bloginfo(‘’stylesheet_url’), você pode colocar o caminho absoluto: http://www.seusite.com/wp-content/themes/seutema/style.css.
Outros exemplos são:
- bloginfo(‘name’)
- wp_title()
- bloginfo(’stylesheet_url’)
- bloginfo(‘pingback_url’)
- bloginfo(‘template_url’)
- bloginfo(‘version’)
- bloginfo(‘atom_url’)
- bloginfo(‘rss2_url’)
- bloginfo(‘url’)
- bloginfo(‘name’)
- bloginfo(‘html_type’)
- bloginfo(‘charset’)
Impulsione seu WordPress com .htaccess
Esta é uma outra maneira de você aumentar o desempenho e performance de seu site/blog WordPress. Com base nas configurações do site e workflow, você pode personalizar o seu .htaccess usando as informações de “Ultimate .htaccess Tutorial” (além de informações sobre .htaccess em outros lugares). Lá você pode encontrar informações sobre cache, cabeçalhos, compressão gzip, etc.
Conclusão sobre otimização WordPress
A razão para este artigo foi a quantidade de blogs e sites WordPress atualmente disponíveis na internet. Seu número está aumentando e a maioria dos blogs não tem uma hospedagem com um nível tão bom.
Essas hospedagens não são tão rápidas, mas com uma pequena ajuda noo HTML, CSS e WordPress, a velocidade de blogs WordPress pode aumentar. Certamente essas dicas irão ajudar se seu objetivo e aumentar o desempenho e performance de seu site ou blog WordPress.
É isto aí, Tarço. Otimizar sempre.
Muito boas estas dicas.
Eu acho que os plugins são o maior “problema”. Como ainda não sei fazê-los, só instalando e testando, um por um. Já segui umas boas dicas tuas, passadas aqui.
Otimizar, sem deixar de usar muitos plugins.
Depois de um tempo deixando de usar muitos plugins em um só site, descobri que tem como desabilitá-los e carregá-los só onde serão usados.
Claro que: a organização é tudo. Organizar o conteúdo de uma forma que, por exemplo, haja uma categoria de vídeos que necessite de um plugin para isto.
Também não são todos os plugins que usam as tags recomendadas pelo WP, para escrever códigos no head, mas dá pra fazer uma gambiarra com estes e resolver.
O WP tem duas funções prontas para isto.
CSS – wp_deregister_style()
JS – wp_deregister_script()
Editando o arquivo functions.php, desabilita-se o carregamento do CSS e do javascript, usando as “Conditional Tags” do WP para dizer em que situação eles devem ser carregados, ou não.
Por exemplo, fazer carregar o plugin “jquery.toc” só na página single.php, ou Contact-form7(muito usado), só nas páginas que têm formulários…
Manda um e-mail que eu repasso o código pronto! Achei um exemplo num site, não lembro qual, e dei uma encrementada…
Parabens, ótimos post
Vitor Designer
@ Acelio
Pois é, Acelio, essas funções do WP são excelentes para fazer isso e outras coisas. Já recebi os arquivos que você enviou por e-mail e vou olhar. Você me deu uma excelente ideia de fazer um artigo sobre isso! Obrigado!
@ vitordesign
Eu é que agradeço a participação neste e em outros artigos! ;-)
Otimizar o tempo de carregamento do meu blog esta sendo prioridade pra mim. Para usuários que tem banda Larga, sites pesados não são um grande problema porém, existe muitos usuários de net discada e não podemos perder essa fatia…
Se puder me dar intruções específicas de como otimizar o .hataccess, eu agradeço!
@ Sílvio
Vamos fazer o seguinte, Sílvio: vou fazer um artigo sobre .htaccess e algumas dicas de uso! Fique ligado no desenvolvimento para web para não perder! ;-)