Guia de Otimização Wordpress

Aprenda a deixar seu blog mais rpido

www.brunodesouza.com

Guia para otimizar o carregamento do Wordpress

O trabalho Guia de otimizao para Wordpress de Bruno de Souza foi licenciado com uma Licena Creative Commons - Atribuio 3.0 Brasil. Com base no trabalho disponvel em www.brunodesouza.com. Podem estar disponveis autorizaes adicionais ao mbito desta licena em http://www.brunodesouza.com/contato.

Voc tem a liberdade de: Compartilhar copiar, distribuir e transmitir a obra. Remixar criar obras derivadas. fazer uso comercial da obra

Sob as seguintes condies: Atribuio Voc deve creditar a obra da forma especificada pelo autor ou licenciante (mas no de maneira que sugira que estes concedem qualquer aval a voc ou ao seu uso da obra).

Ficando claro que: Renncia Qualquer das condies acima pode ser renunciada se voc obtiver permisso do titular dos direitos autorais. Domnio Pblico Onde a obra ou qualquer de seus elementos estiver em domnio pblico sob o direito aplicvel, esta condio no , de maneira alguma, afetada pela licena. Outros Direitos Os seguintes direitos no so, de maneira alguma, afetados pela licena: Limitaes e excees aos direitos autorais ou quaisquer usos livres aplicveis; Os direitos morais do autor; Direitos que outras pessoas podem ter sobre a obra ou sobre a utilizao da obra, tais comodireitos de imagem ou privacidade.

Aviso Para qualquer reutilizao ou distribuio, voc deve deixar claro a terceiros os termos da licena a que se encontra submetida esta obra. A melhor maneira de fazer isso com um link para esta pgina.

1


SumrioIntroduo ..........................................................................................................................3 1. Eliminar plug-ins desnecessrios ......................................................................................4 2. Otimize seu banco de dados .............................................................................................5 3. Desativar a reviso de post e apag-las do banco..............................................................6 4. Use um plug-in de cache ..................................................................................................7 5. Otimize as suas imagens ..................................................................................................9 6. Hospede as imagens de seu blog/site em outro servidor ou em um subdomnio ............. 10 7. Comprimir seu contedo ................................................................................................ 12 8. Desabilitar hotlinking ..................................................................................................... 12 9. Problemas com o gravatar.............................................................................................. 13 10. Otimize seus arquivos css e javascript ........................................................................... 14 11. Reduzir uso de scripts externos .................................................................................... 15 12. Utilize o php flush ........................................................................................................ 16 13. Minimizar o php e consultas de banco de dados ........................................................... 17 14. Otimizando o wordpress pelo wp-config.php ................................................................ 18 15. Limpar o banco de dados.............................................................................................. 20 16. Utilizando um CDN (content delivery network) para otimizar o carregamento .............. 23

2


IntroduoOtimizando a velocidade de nosso site no s o fazemos feliz, mas tambm seus leitores, afinal um site que carrega rpido sempre ter vantagens em relao a um site que demora muito para carregar, alm de economizar banda e os custos de hospedagem. Uma web mais rpida sempre melhor para todos, especialmente para os usurios, e isso pode significar mais visitas a qualquer site que possa se adaptar s novas exigncias. Aumentar a velocidade de carregamento de um site aumenta a taxa de converso, aumentando a experincia do usurio. Por que se preocupar com a otimizao em termos de carregamento? Matt Cutts da Google j confirmou oficialmente que o Google leva em conta o tempo de carregamento para posicionar um site. Se voc tem um site de carregamento lento, isso pode significar rankings mais baixos no Google e menos trfego. Antes de comear a otimizar seu site, voc precisa saber quais as partes que tm de melhorar, quais levam mais tempo para carregar e qual o peso total do mesmo. Para fazer isso eu recomendo que voc use ferramentas como Pingdom ou Firebug (para Firefox) com os plugins PageSpeed ou YSlow. Existem diferentes maneiras de otimizar a velocidade do Wordpress, deixo aqui 15 dicas testadas para voc otimizar a velocidade do seu blog no Wordpress e deixa-lo to rpido como um relmpago. Se voc implementar algumas das dicas descritas abaixo, voc vai notar uma melhora dramtica no desempenho do seu site Wordpress.

3


1. Eliminar Plug-ins DesnecessriosSe voc est usando 20 plug-ins no seu blog voc precisa verificar se isso realmente necessrio, se no os apague. Certifique tambm se os plugins que esto em uso, esto atualizados. Uma das melhores formas de descobrir quais plug-ins esto deixando o carregamento do seu blog lento utilizar o P3 (Plug-in Performance Profiler), um plug-in que faz uma anlise da performance de todos os plug-ins permitindo que voc veja se o problema est em algum plug-in.

Este plug-in, criado pela GoDaddy, faz uma anlise do carregamento de vrias pginas do seu blog, v quais so os tempos de carregamento de cada plug-in, o tempo de carregamento do site sem plug-ins, mostra o nmero de queries feitas base de dados, entre outros. Todos os relatrios so guardados para que depois voc possa comparar com relatrios mais recentes e pode tambm enviar os resultados por email (til se pedir ajuda a algum para resolver a lentido).

4


2. Otimize seu banco de dadosUm Banco de dados Mysql no se limpa sozinho. Otimizar o banco de dados um passo importante para acelerar o seu blog. Para otimizar seu banco de dados, voc pode fazer isso manualmente ou usar um plugin. Eu prefiro manualmente, e sem necessidade de plugins desnecessrios. Voc ficar surpreso com o quanto voc pode diminuir o tempo de carregamento de seu site, voc ir perceber uma melhora significativa no carregamento do site, alm de parecer que voc tirou um fardo do seu banco de dados. Se voc quiser fazer isso da forma mais fcil, instalar o plug-in Optimize DB ou WP Optimize. Se voc quiser fazer isso manualmente faa o seguinte:

1. 2. 3. 4. 5.

Voc deve abrir o gerenciador de banco de PHPMyAdmin Selecione o seu banco de dados. Ao clicar em "Marcar Tudo" na parte inferior da pgina. Escolha a opo "Otimizar tabela" na lista suspensa ao lado. E pronto!

Faa backup do seu banco de dados antes de realizar qualquer teste nele, pois se der algo errado, voc poder voltar o banco normalmente.

5


3. Desativar a reviso de Post e apag-las do BancoA reviso de Posts foi introduzida no Wordpress a partir da verso 2.6, mas ser que elas so realmente necessrias. Estas revises so criadas para caso voc queira restaurar algum artigo, voltar para uma reviso antiga. Porm se voc modificar um A no texto e salvar, ser criada uma nova reviso e quanto mais voc editar o artigo, mais revises sero criadas. Com isso o tempo de carregamento do seu blog vai para o espao, pois o tempo usado para consultar o banco de dados ser maior devido ao nmero de revises que esto armazenadas nele. Se voc no precisa deste recurso, voc deve adicionar a seguinte linha no arquivo wp-config.php na sua instalao do Wordpress: define('WP_POST_REVISIONS', FALSE); Se voc deseja eliminar todas as revises do Banco de dados basta realizar a seguinte consulta: DELETE a,b,c FROM wp_posts a LEFT JOIN wp_term_relationships b ON (a.ID = b.object_id) LEFT JOIN wp_postmeta c ON (a.ID = c.post_id) WHERE a.post_type = 'revision'; Se voc no tem habilidade em gerenciar banco de dados mysql, voc pode usar o Plug-in Delete Revision que faz todo o trabalho para voc ele pode ser baixado aqui ou atravs de uma busca na pgina Plug-ins > Adicionar Novo em seu painel de administrao. Depois de instalado, v a Configuraes > Delete-Revision e clique em Verificar Artigos de Reviso.

6


4. Use um plug-in de CacheO Wordpress um sistema de gesto abrangente e muito flexvel, mas tambm faz um uso excessivo de recurso de CPU. Para aliviar este fardo para os servidores, o Cache tem um papel importante e cada instalao do Wordpress deve ter um. A funo dos plugins de cache criar pginas estticas (somente HTML) de cada pgina do seu blog e, quando um visitante acessa o seu blog, o prprio plugin de cache se encarrega de fazer poucas consultas bsicas ao banco e dados central do Wordpress e compara os resultados com as pginas que j esto armazenadas em cache. Caso o resultado seja semelhante, o plugin de cache interrompe essas consultas ao Wordpress e simplesmente entrega ao visitante uma pgina esttica que no ir gerar nenhum tipo de consulta ao banco de dados. Isso diminui o tempo de acesso do visitante ao site, fazendo com que os elementos do site (imagens, css, Javascript) carreguem mais rpidos e assim poupando recursos de banda e CPU. Existem vrios plug-ins para gerenciar o cache do Wordpress Wp Super Cache, W3 Total Cache, Hyper Cache, Db Cache, etc., mas vou citar aqui a mais completa deles, o W3 Total Cache, uma soluo bastante completa, bem como a criao de um cache esttico, fornece vrias ferramentas para acelerar o carregamento de um site em Wordpress. O W3 Total Cache faz jus ao seu nome e a mais completa soluo de cache. Suas vantagens so: Apoio simples, bom e documentao completa. Compatvel com hospedagem compartilhada, VPS e dedicada. As diferentes opes para o cache de pginas: no disco (por padro) com PHP Cache Alternativo (APC), eAccelerator, XCache e Memcache. Minificao do HTML, CSS e arquivos Javascript para acelerar o local de carregamento. Opo para cache do Banco de Dados.

7


Compatvel com CDN (Content Delivery Network), Amazon CloudFront, Amazon S3 ou qualquer outro sistemas. Falarei do CDN mais abaixo. No vou entrar em detalhes sobre a configurao do W3 total cache, mas sua configurao muito simples, o EscolaWp escreveu um manual que ensina a configurar o plug-in. Como instalar e configurar o plugin W3 Total Cache no WordPress.

O que no fazer cache?Existem alguns elementos em um blog que voc deve evitar o cache. Como anncios, feeds ou qualquer contedo dinmico obtido usando php ou um sistema de servidor. O ponto inteiro de cache para poupar tempo, evitando processos do lado do servidor. Se voc tiver qualquer contedo que precisa mudar para cada visitante, ento voc deve evitar o cache dessa pgina ou contedo. No se preocupe com seus anncios do Google ou BuySellAds. Esses anncios so entregues usando Javascript e o cache no afetar a entrega desses anncios. A maioria dos sistemas baseados em Javascript no sero afetados pelo cache, uma vez que so scripts do lado do cliente, e no os scripts no servidor. Embora seja sempre uma boa prtica verificar para garantir que o seu contedo dinmico no est sendo armazenado em cache.

Voc saiba!1. Se voc j estiver usando o plug-in PHP Speedy certifique-se de remov-lo antes de instalar qualquer plug-in de cache que eu mencionei acima. O PHP Speedy pode causar conflitos com os plugins. Em minha opinio um plugin de cache supera os benefcios do PHP speedy. Plug-in de Cache uma escolha melhor e o PHP speedy j passou a sua vida til. 2. preciso tempo e esforo para configurar corretamente W3 cache total por causa das muitas opes disponveis. 3. Se voc decidiu usar o plugin Hyper cache, ser preciso usar com ele o plugin DB Cache Reloaded, eles se complementam, e voc obter um bom impulso no desempenho. Fiz alguns testes e gostei bastante, mas particularmente prefiro o W3 Total Cache.8


5. Otimize as suas imagensAs Imagens se tornam um fardo muito pesado em um site e consomem largura de banda em nosso servidor. Para evitar estes efeitos, essencial otimizar as imagens e de preferencia utilizar apenas arquivos JPEG. Se voc editar suas imagens no Photoshop, use sempre a opo "Salvar Web e dispositivos ou usar algumas ferramentas para otimizar suas imagens que apresento abaixo: Ferramentas Online:

Punyp Smush.it ( Possui plug-in para Wordpress) Online Image Optimizer

Ferramentas para Desktop

Shrink O'Matic RIOT PNGGauntlet

Existe tambm um plugin para Wordpress chamado Lazy Load, o trabalho dele carregar imagens somente quando elas se tornam visveis no browser. Com o efeito fade voc faz um retoque bem interessante para o site. Faz algo sofisticado que alguns blogs famosos, como o Mashable, esto usando. O plug-in proporciona uma dupla reduo: 1- No tempo de carregamento da pgina para o usurio final; 2- No consumo de recursos do servidor, principalmente do LOAD da mquina.

9


6. Hospede as imagens de seu blog/site em outro servidor ou em um subdomnioQuando voc tem um site muito popular, tende a usar uma grande quantidade de banda. Para reduzir esta largura de banda e fazer que seu site carregue rapidamente, a soluo salvar suas imagens em outro servidor. Existem muitos servios populares que permite hospedar essas imagens:

Amazon S3 Flickr PicasaWeb

Outra maneira de otimizar o carregamento do seu blog transferir todas as imagens do seu domnio principal (ex: seudominio.com) para um subdomnio (ex: cache.seudominio.com) voc estar aumentando o poder de carregamento do seu blog, j que cada domnio, por padro, s carrega dois arquivos simultaneamente. Aps criar o subdomnio, voc precisa configurar o Wordpress para que, a partir deste momento, todo upload seja realizado diretamente para cache.seusite.com. Para isto, basta ir a Configuraes e clicar em Mdia, conforme ilustrado a seguir:

Agora como caminho para upload alterado, necessrio que voc transfira as imagens que esto no domnio principal, mais precisamente na pasta wp-content/uploads, ser necessrio realizar uma migrao completa, via FTP ou via Cpanel, para o subdomnio, j que o Wordpress no vai mais reconhecer este local. Tambm vai ser necessrio atualizar o caminho das imagens em todos os posts antigos atravs do phpMyAdmin. Para isso, basta selecionar seu banco de dados no menu lateral e clicar na aba SQL.10


Copie e cole o cdigo abaixo e clique em Executar: UPDATE wp_posts SET post_content = REPLACE(post_content,'http://www.seusite.com/wpcontent/uploads/','http://images.seusitecom/') Tambm ser necessrio atualizar os links da biblioteca de imagens rodando mais um comando SQL, mas com o cdigo abaixo: UPDATE wp_posts SET guid = REPLACE(guid,'http://www.seusite.com/wpcontent/uploads/','http://images.seusite.com/') Todas estas dicas vo ajudar seu blog a carregar rapidamente. Importante s dicas que forem ser executadas no Banco de dados, criem um backup antes caso algo sai errado.

11


7. Comprimir seu contedoIsto se faz mediante ao Arquivo .htaccess que est na raiz do seu FTP , se no tive crie-o, este arquivo permite comprimir os arquivos do seu blog (css, JavaScript, php, html y xhtml). Existem vrias maneiras de faz-lo dependendo da verso do seu apache. Para verses do apache inferiores a 2.x, use o seguinte cdigo:

Se a verso do seu servidor Apache 2.x, voc pode utilizar o mod_deflate tambm:

Os dois cdigos podem ser baixados em http://migre.me/8GZOO

8. Desabilitar HotlinkingO hotlinking, tambm conhecido como roubo ancora de banda, quando algum copia a URL da sua imagem, e a utilizando sem seu prprio site, o que faz utilizar banda do seu servidor. Existem vrias formas de evitar isto colocando um pequeno cdigo no .htaccess, que est na raiz do seu servidor.

cdigo pode ser baixado em http://migre.me/8GZNR12


9. Problemas com o GravatarPode parecer estranho, mas um dos grandes problemas de velocidade no meu blog estava sendo o Gravatar. O Gravatar o servio que adiciona automaticamente as imagens avatar ao lado dos comentrios. Uma soluo simples seria a de desativar avatares completamente, mas que provavelmente ir fazer a sua seo de comentrios ficarem com olhar um pouco triste. Alm disso, os avatares ajudam a manter o controle de quem est dizendo em discusses, por isso so mais do que pura vaidade. A melhor soluo colocar o avatar padro para "em branco". Desta forma, os usurios que criaram um avatar o tero exibido junto ao seu comentrio, mas os usurios sem um Gravatar associado ao seu email tero um avatar em branco. Com avatar padro ativado, seu site precisa para fazer uma chamada externa ao Gravatar para cada imagem exibida e isso pode ser um assassino de velocidade real. Uma segunda opo adicionar seu avatar prprio padro e hosped-lo no seu site Para fazer isso, abra o arquivo functions.php e adicione o seguinte cdigo:add_filter( 'avatar_defaults', 'newgravatar' ); function newgravatar ($avatar_defaults) { $myavatar = get_bloginfo('template_directory') . '/images/seuicone.png'; $avatar_defaults[$myavatar] = "NomedoAvatar"; return $avatar_defaults; }

Envie sua prpria imagem para o Gravatar novo padro para a pasta do tema que voc est usando (/ wp-content/themes/seutema). E a Terceira opo seria usar o FV Cache Gravatar, que acelera o seu site, certificando-se que os Gravatars esto armazenados em seu site e no carregar a partir do servidor do Gravatar.13


10. Otimize seus arquivos CSS e JavaScriptOs arquivos CSS e Javascript pode ser otimizados para reduzir o tamanho dos mesmos. Por exemplo, as linhas em branco e classes CSS sem uso, devem ser eliminadas. Ao otimizar estes arquivos, voc pode reduzir efetivamente o uso de banda do seu servidor para comprimir o css existem vrias ferramentas:

WP CSS: um plug-in para Wordpress CSSOptimizer CSS Compressor Clean CSS

Para ajudar a otimizar seus arquivos Javascript existem as seguintes ferramentas:

JavaScript Compressor Another JavaScript Compressor

Coloque o JavaScript (jquery, mootools, prototype e outros) no fim do cdigo. Ah, mas me disseram que tem que colocar dentro da tag voc agora est aprendendo algo novo. Coloque o JS antes de fechar a tag . Motivo: o JavaScript no carrega simultaneamente com o css. Ento carregue primeiro o seu design e depois o JS. Coloque o css entre as tags Coloque o JavaScript antes do fechamento do Se for usar bibliotecas JS como Jquery, Mootools e outros. Utilize bibliotecas que esteja hospedado em outro site (exemplo Dropbox). Assim os usurios no precisam carregar o script, j vai estar no cache. O Google fornece essa biblioteca externa: http://code.google.com/intl/ptBR/apis/ajaxlibs/documentation/index.html

14


11. Reduzir uso de scripts externosQuando seu blog carrega lentamente, voc deve pensar seriamente e remover os Widgets de Pginas de Fs, ltimas atualizaes do Twitter, botes do Twitter, pois estes esto fazendo que o carregamento de seu site dependa de outro site. Se voc vai usar tweet Button procure usar o plug-in ao invs de um script externo. Confira um exemplo prtico: A maioria dos blogueiros utilizar o Tweet Button para os usurios publicarem seus artigos no Twitter. Normalmente adicionamos ao cdigo do Wordpress o seguinte cdigo do Twitter:

Documents

Guia de Otimização Wordpress