17 Dicas para deixar seu blog mais rápido e 2 dicas que eu não recomendo
2 de junho de 2009
30 Comentário
À medida que adicionamos plugins, imagens e publicidade em nossos blogs, o seu tempo de carregamento acaba crescendo e, às vezes, atinge proporções intoleráveis, principalmente para usuários de internet discada, que ainda existem em grande número no Brasil. Mas existem 17 grandes e simples passos para sanar esse probleminha.
1. Use um plugin de cache
Esse é o básico do básico. Um plugin desses simplesmente cria versões estáticas de suas páginas, não precisando, assim, acessarem toda vez o banco de dados de seu blog, atrasando o carregamento destas páginas. Além da maior velocidade experimentada pelo usuário, você economiza largura de banda de sua hospedagem. Eu recomendo usar o WP Super Cache ou, talvez, o 1st Blog Cacher que conheci hoje e, segundo o Janio, é muito melhor que os outros.
2. Otimize os códigos do seu blog
Alguns temas Wordpress (ou templates para o Blogger) acabam vindo com alguns espaços desnecessários: eu já vi temas que pulam 3 linhas para cada código diferente. Deixando apenas uma linha você consegue poupar um bom tempo de carregamento sem atrapalhar seu trabalho de edição.
3. Pague por uma hospedagem decente
Muitas empresas por aí (some aqui também todas as hospedagens gratuitas) fazem tremendas sacanagens só para ganhar dinheiro (como usar servidores com pouca potência) e seu blog acaba pagando o pato. Antes de contratar uma empresa, pesquise na internet alguns feedbacks de usuários. Eu, por exemplo, recomendo o Pre-lude por ser a empresa que eu uso e a Porto Fácil, simplesmente porque é do Janio.
4. Fique ligado nos updates do WordPress
Nunca deixe seu blog com uma versão antiga, pois as novas sempre podem vir com atualizações que dinamizam todo o sistema dessa grande plataforma de blogagem, deixando seu blog um pouquinho mais rápido.
5. Delete plugins inúteis
Estes são grandes inimigos da velocidade de carregamento de um blog. Se não usa, por que deixá-lo ativado ou jogado em uma pasta do servidor, ocupando espaço?
6. Diminua o tamanho dos códigos CSS
Esse é um trabalho muito fácil de ser feito. Quando você criar uma nova classe ou id CSS, coloque todas as suas definições na mesma linha: isso geralmente não atrapalha muito o seu trabalho. Veja a diferença deste formato:
body {
background:#BEC3C6 url(img/bg.jpg) repeat-x;
color:#555;
font-family:Sans-serif;
font-size:12px;
}
Para este:
body {background: #BEC3C6 url(img/bg.jpg) repeat-x; color:#555; font-family:Sans-serif; font-size:12px;}
Pode-se trabalhar muito bem com o código, mas poupando muito espaço. Ainda mais se você usar um editor inteligente, como o Notepad++ que deixa tudo com cores diferentes, facilitando a leitura.
7. Troque PHP por HTML
Códigos em PHP carregam muito mais devagar do que simples HTML. E como você pode mudar isso? Substituindo códigos PHP que chamem determinadas funções, por HTML. Veja alguns exemplos no Wordpress:
<title><?php bloginfo (‘name’)><?php bloginfo (‘description’)><title> – nome e descrição do blog.
<link rel=”stylesheet” href=”<?php bloginfo (’stylesheet_url’)>” type=”text/css”> - chama a folha de estilos de seu blog.
<link rel=”alternate” type=”aplication/rss+xml” title=”RSS 2.0″ href=”<?php bloginfo (‘rss2_url’)>“> – seu link dos Feeds RSS.
Tudo isso pode ser substituído por HTML ou simples texto:
<title>Análise Blogueira – Dicas e Críticas da Blogosfera</title>
<link rel=”stylesheet” href=”http://www.analiseblogueira.com/wp-content/themes/inove/style.css” type=”text/css”>
<link rel=”alternate” type=”aplication/rss+xml” title=”RSS 2.0″ href=”http://feeds2.feedburner.com/AnaliseBlogueira“>
Você pode adaptar isso para praticamente todo o seu blog, mudando muita coisa de PHP para HTML e melhorando muito a velocidade de carregamento do blog.
8. Poupe ainda mais tempo de carregamento com PHP
Existem vários snippets em PHP que chamam a mesma coisa. Acontece que alguns fazem esse trabalho muito mais rápido. E encontrei um ótimo site no blog do Daniel Camargo, o PHP Benchmark: ele compara vários códigos que fazem a mesma coisa e mostra qual tem um tempo de carregamento mais rápido que outro. Assim, você pode dar uma bela dinamizada em seu blog (note que este site também é carregado muito rapidamente).
9. Use um servidor do seu país
A conexão de pessoas vindas do mesmo país do servidor fica mais rápida do que se viesse de um outro continente, por exemplo.
10. Comprima seus scripts em Javascript
O Dean Edwards, mestre do Javascript, criou um site que compacta códigos Javascript rapidamente. Atualmente muitos temas Wordpress vêm com algumas funções em Javascript (inclusive o tema que estou usando). E eu não lido muito com estes códigos, então não me importo de compactá-los. E, realmente, eles ficam muito menores. Já estou mudando todos os meus aqui.
11. Acabe com os comentários de códigos
Alguns temas Wordpress vêm com descrições em cada parte do código. Algo do tipo:
<!– header START –> e <!– header END –>
Se você já conhece bem seu código, não precisa mais disso, pode cortar tudo fora.
12. Diminua o tamanho das imagens
Quando puder, use imagens quadradas e pequenas, no estilo 150×150 pixels, como thumbnails. Não precisa colocar um quadrado gigante de imagem que demore anos para carregar. Também utilize imagens em formatos .GIF ou .JPG, os ideais para publicações na Web. No Fireworks, por exemplo, ao exportar uma imagem eu posso escolher que tipo uso e, dependendo do formato desta imagem (se é basicamente uma foto ou apenas texto editado em um fundo colorido), o .JPG pode ficar maior do que o .GIF, ou vice-versa, mesmo com a mesma qualidade. Sempre dê uma estudada para descobrir como pode diminuir o tamanho de suas imagens. Se você sempre usa uma imagem por artigo, imagine quanta coisa pode poupar ao fim de um mês, tanto para a experiência de seus visitantes, quanto para o espaço de sua hospedagem.
13. Diminua o uso de Widgets na barra lateral
Como parafernalhas de Redes Sociais que mostram quem do BlogBlogs te visitou, ou as últimas notícias do diHITT. (Quase) ninguém quer saber isso. E essa dica é especial para o pessoal do Blogger que adora fazer isso (não venham xingar, pois não estou generalizando nada).
14. Utilize apenas Meta Tags principais
Há algum tempo atrás eu falei dessas Tags no meu manual de revisão do SEO. Acontece que você não precisa usar todas, use só as principais: a Meta Tag de Título, de Descrição e de Keywords. O resto é resto.
15. Carregue o cabeçalho e o conteúdo antes da barra lateral
Você pode fazer isso colocando os códigos que chamam a barra lateral e do rodapé depois dos códigos que chamam o cabeçalho e o conteúdo nas suas páginas. Se não souber como fazer isso, me pergunte nos comentários.
16. Coloque o seu código do Analytics no rodapé
Assim, ele só carregará depois que todo o blog carregar. Se colocá-lo no Header.php, ele atrasará o conteúdo do seu blog, que deve ser carregado antes, como digo acima.
17. Diminua o tempo de carregamento do seu blog
Calcule o tempo de carregamento de suas páginas usando esta ferramenta. O ideal é ter um tempo de carregamento médio de, no máximo, 10 segundos. Mas isto pode variar bastante: blogs que utilizam muitas imagens sempre vão demorar a carregar.
Eu não aconselho
1. Deixar todos os códigos de uma página em uma única linha
Isso acaba com seu poder de edição. Claro que poupará um espaço danado, mas você praticamente não conseguirá mais editar seus códigos.
2. Separar comentários por páginas
Pode deixar seu blog mais rápido, mas diminui a experiencia de interação de seus usuários com você. Além disso, os comentários são carregados logo ao fim das páginas, e os visitantes podem ler o seu texto antes de todos os comentários serem carregados completamente.
Créditos da Foto: Brave Heart.
Renato (9)
Bruno (7)
Rafael Avelino (7)
Silvio Junior Wen... (7)
Filipe Santos (4)
Opa, obrigado pela distinção!
Quanto aos plugins de cache, se você ler os posts mais recentes da PortoFácil vai ver que eu recomendo mais, atualmente, o Hyper Cache, que tem melhor performance e mais flexibilidade.
Opa opa, que honra ter você escrevendo aqui, Janio! O primeiro famosão no Análise, hehe.
Obrigado pela dica, vou dar uma olhada, então.
Abração!
Parabéns pelas dicas Alan, certamente elas fazem grande diferença.
Abraços!
valeu mesmo dicas de excelente qualidade…vou aproveitar o maximo possível…fuiiiiiiiiiiii
@Alan Niemies
Famosão, eu?!
Quá-quá-quá-quá!!!
Mas valeu, valeu, adoro gente com senso de humor.
Ahhh, vai dizer que não, Janio? Hehehehe
Eu gostei das dicas e vou revisar meu blog depois dessa aula.
Um abraço!
Fiz um post sobre o mesmo assunto – um pouco mais curto e com menos dicas do que o seu.
http://www.chrisb.com.br/blog/dicas-para-otimizar-a-performance-do-wordpress/
Gostei muito desses! Só faço uma crítica ao título do post: poderia ser mais explícito que é relativo a blogs que usam o Wordpress (pelo menos a maioria das dicas dizem respeito ao WP).
De qq. forma, ficou muito bom!
[]s!
Excelentes dicas!
Estou fazendo uma revisão no meu blog com suas dicas que são ótimas!
Parabéns pelo post!
Bjos,
Luka
Instalei o WP Super Cache, e ele mostra um alerta (Warning! /home/okfera/www/wp-content is writeable!) a qual não compreendi muito bem o que quer dizer, me criando uma dúvida sobre o funcionamento perfeito do plugin, saberia me dizer o que esse alerta quer dizer?
fico agradecido desde já, seu blog é ótimo, estou aprendendo muito com ele!
abraços
@Rodrigo, dei uma pesquisada nos problemas apresentados na página do plugin e encontrei isto: você deve mudar o CHMOD de suas pastas para “755″ e, em seus arquivos, para CHMOD “644″. É apenas uma questão esdrúxula de segurança exigida pelo plugin.
Espero que possa ter ajudado.
Abração!
Há muitas dicas para melhorias em blogs,mas tudo voltado ao wordpress,enquanto isso os usuários do bloguer,estão jogados as moscas.Fazer o que né?Valeu pelas dicas assim mesmo.Abraços.
@Nelson, o Análise é direcionado ao Wordpress, mesmo. Se eu tivesse um conhecimento técnico interessante do Blogger, adaptaria minhas dicas para ele, mas não me arrisco a escrever sobre O Desconhecido.
@Chris, como em tudo, sempre há exceções, né? Gostei do seu ponto de vista.
Abraços aos dois.
É ridículo quando eu vou em blogs e tem aquele carnaval de widgets e aplicações toscas de live traffic entre outros. Sem falar dos blogs populares que são um desastre de organização que nunca seriam populares se não fosse o super esforço de 24 horas que fazem.
Meu blog é todo organizado e relativamente limpo. Homem que homem não fica de nhenhenhém metendo coisinhas toscas só pra ficar ocupando espaço
Valeu cara pela resposta!!
Então, alterei as tais permissões como você indicou, depois dela o acesso as ferramentas, o plugin pelo sistema apresenta o seguinte erro: “Cannot load wpsupercache.” mas isso será que impede o funcionamento do plugin?
Obrigado por ajudar, até mais!
@Alan Niemies
@Rodrigo, acho que não. Experimenta deixar só o cache, e não o super cache…tem uma opção lá pra usar isso. Assim pode ser que funcione (aqui no Análise eu uso só o cache, pois a opção de super cache não funcionou também).
Qualquer coisa é só perguntar! Abração!
@Alan Niemies
Tentei novamente, e funcionou, acho que estava realizando permissões erradas, agora funcionou, estou usando só cache também!!
muito obrigado cara! Vou até relacionar o seu blog depois como recomendado, pois tem informações muito boas para blogueiros!! : )
abraço!!
Opa, Rodrigo, que bom!
Sinta-se livre para divulgar o Análise, hehehe.
Abração! E sabe, né? Precisando, estamos aqui.
LOL!
Realmente tocou em pontos essenciais. Vou dar uma olhada nos plugins de cachê que o Jânio indica, estava usando o WPSuperCache, como eu uso alguns navegadores diariamente como o Flock, firefox2, firefox3, Opera, SeaMonkey, Konqueror… e alguns de texto como o lynx, links, elinks e às vezes até o vi [editor de texto mas dá para navegar ](é que eu tenho que testar páginas em php,AJAX,javascripts…), percebi que principalmente os com Gecko Mozilla “amarravam” segurando a página inicial de meu blog por vários dias, quando desabilitei o WPSC, voltou ao normal.
Em relação à hospedagem: “Ela vale o que se paga por ela”. Quando aconselha hospedagens nacionais eu concordo apenas com relação à velocidade (não totalmente desempenho). O que eu quero dizer é que considerando a relação custo/benefício, creio que apenas algumas unidades das que são nacionais sobrevivem (muitas são revendas das internacionais), pelo menos foi o que constatei quando estava escolhendo uma para mim.
Já quanto à atualização do WordPress, tem uma pequena prática no mundo opensource: caso uma atualização não esteja corrigindo uma falha grave (bug, segurança, melhoramento de código), espere mais algum tempo para atualizar. Não estou querendo dizer para ninguém fazer a atualização (por favor não me entendam mal), só estou expondo uma prática que é corrente. Desde as bibliotecas assim como os programas de SOs *nix like passam por atualizações constantes, em semanas, e dificilmente meses, então é prática aguardar um pouco para ver se não vão surgir bugs na nova versão!
Com relação ao Content.php e Header.php, as dicas que deu é interessante não apenas para carregar mais rápido, mas também para melhorar as técnicas SEO. Eu tinha um template otimizado igual ao seu [estrutura] (só que era feio pra caramba), encontrei o meu template atual (se bem que tive que modificar as colunas pois só tinha uma) que é bonitinho mas não ajuda em nada o conteúdo é quase o último a ser visto em navegadores de texto! Fazer o quê, quiz boniteza ao invés de praticidade!
Abraços.
Veja o último artigo do/da Documentario Embasex em seu blog: Técnicas para Atrair Leitores para o seu Blog (Parte II)
A dica numero 6 foi ótima… Irei fazer isso agora em meu blog…
Eu iria agora lhe perguntar se deixar todas as páginas de códigos em uma única linha seria bom… Ainda bem que tu já tinha respondido… heheheheheh
Veja o último artigo do/da jheison em seu blog: O primeiro vídeo do YouTube?
Acabei de fazer a dica numero 6, o meu blog ficou bem rápido, é claro que não fico aquela coisa que se pode dizer “que blog rápido o daquele menino”, mais fico bem mais rápido do que estava antes ^^… Valeu aí Alan pela dica!!!
Veja o último artigo do/da jheison em seu blog: O primeiro vídeo do YouTube?
Jheison, eu realmente me estressaria pra caramba editando uma linha só. Imagine o sacrifício por alguns milésimos de segundos a menos no carregamento!
Que bom que as dicas ajudaram. Um tempinho a menos sempre é bom.
Abraço!
para quem usa blogger é massa tambem, e uma boa dia: após otimizar o css manualmente ou usando o http://www.cleancss.com/, colocar ele como em um link externo. Diminui em uns 2 segundos para quem usa o blogger.
@Diogo, interessante sua sugestão.
Obrigado pela contribuição e pelos comentários aqui no Análise!
Um grande abraço!
Bah!
Meu blog tá “pesadão”!!
Cheio de bla bla blás nos códigos e cheio de imagens…obrigado pelas dicas, vou arrumar agora mesmo!
[ ]s
@Gizaa, vá arrumando aos pouquinhos que tudo se ajeita!
Boa sorte!
tirei vários espaços do meu html e melhorou um cadinho valeu pelas dicas.
Veja o último artigo do/da Fabiano em seu blog: Desenhos feitos à Lápis
@Fabiano, que bom que funcionou, fico feliz! Realmente, cada segundo é importante aí, principalmente quando queremos que os crawlers dos buscadores acessem nossas páginas e saiam feliz delas, hehe.
Um grande abraço!
Lendo, comentando e aprendendo!
Fiz algumas alterações no meu blog e está ficando bom o negócio!
Participar do seu blog tem sido muito proveitoso para mim!
Só um detalhe, nos seus posts os sub-títulos em vermelho não aparecem no me Google Chrome, mas no Firefox sim!
Veja o último artigo do/da Anderson Aguiar em seu blog: 3 sites que explicam sobre trackbacks e pingbacks
@Anderson, fico feliz que possa aproveitar todos os textos aqui do Análise!
E muito estranho este seu problema. Estas diferenças entre navegadores me deixam cabisbaixo às vezes, também.
Um abraço!