Muitas vezes nos deparamos com uma página que demora milênios para carregar — e, quase todas essas vezes, perdemos a paciência de esperar e logo partimos para outra página, não é mesmo? Isso não é errado; na verdade, é comum não termos a paciência diante de tanta informação rápida da qual estamos acostumadxs nos dias atuais. Desta forma, precisamos ter nossos blogs otimizados ao máximo para não ser “desistido”
(ai que palavra feia, mas não achei outra melhor que encaixe neste momento, haha) 
diante de tanta coisa sendo carregada, não é mesmo? Neste post falarei sobre como otimizar o nosso blog dando
várias dicas de como deixar a página mais rápida tanto para blogger quanto wordpress e ajudar xs leitorxs a navegar lindamente com poucos travamentos.
É grandinho o post, mas vale a pena! Dê uma conferida no menuzinho abaixo e navegue entre os tópicos clicando nos títulos que desejar e salve este post como seu filho e
compartilhe cozamigxs.
Índice de otimização:
- Imagens — dicas de como deixa-las mais leves e métodos que requer menos do servidor
- CSS — como ter um CSS magrinho e leve
- Scripts — scripts rápidos e eficientes
- HTML — como ter um código menor e levinho
- Posição dos elementos de layout — quando a ordem dos tratores alteram o viaduto
- Cache — quando o navegador e HTML se amam sem precisar de um servidor como cupido
Vale lembrar que estas são dicas básicas de otimização, pois, há outros inúmeros processos e formas de melhorar nossos códigos e imagens que já vão muito além do que simples diminuições de códigos. Estas dicas que reuni foi pensando em nós, blogueirxs, que não possuem uma noção muito avançada de programação ou de desenvolvimento — mas que, mesmo assim, já são essenciais para melhorar o desempenho de nossos bloguitchos!
Antes de tudo: teste a velocidade e desempenho de seu blog
Antes de mais nada, precisamos saber se precisamos e o que precisamos melhorar. Vamos testar a velocidade de nosso blog e ver como ele anda sendo lido pelos navegadores? Os sites abaixo são perfeitos para diagnosticar problemas em um site e falam onde pode ser melhorado.
Agora que você testou o seu blog e caso tenha percebido pelos relatórios que ele demora um pouquinho para carregar, você pode ajudar a melhorar o carregamento nas seguintes formas:
1. Otimizando imagens
Uma das coisas que mais pesa em um site são as imagens. E os blogs são ricos em imagens tanto em layout quanto nos posts e isso soma-se também os sliders, banners, lista de relacionados… e mais um monte de itens que um layout possua que envolva comunicação visual. E há duas formas de otimizar essas imagens. São:
Por tamanho
Temos aquela imagem incrível mas ela é quase o tamanho de uma música MP3 e só falta a gente se matar de tão pesada, né? Relaxa, o site
TinyPNG é ótimo para otimizar imagens em formato de PNG e reduz o tamanho em Kbps do arquivo de 50 a 75%! As imagens JPG podem perder um pouco da qualidade e ficar um pouco pixeladas neste site, então recomendo que você salve no seu editor de imagem o seu JPG com cerca 65% a 70% de qualidade que, para a web, possui a mesma resolução de uma 100%. Mas a qualidade do PNG não perde em absolutamente nada!
Para GIF o melhor site que encontrei que otimiza é o
ezgif.com.
Por código Data URL (base64)
Todo requerimento de servidor leva tempo, e quanto menos requerimentos, melhor para o blog e mais rápido fica. O método de otimização que codifica a imagem e a transforma em um código seria, em suma, a representação da mesma em sua forma textual. Este método de codificação chama-se base64. Ele apenas acelera o processo de visualização do código de uma imagem e requer absolutamente nada do servidor para lê-la, ao contrário do que aconteceria se utilizássemos a URL dessa mesma imagem hospedada no servidor de nosso blog ou qualquer outro servidor na web. Seria um descanso para o servidor e deixamos todo o papel para o navegador, melhorando assim o carregamento e ele por si só interpreta todas as informação da imagem. A conversão de uma imagem para base64 seria mais ou menos assim:
Essa seria forma antiga da URL da imagem acima:
Enquanto em base64 seria assim:
3 | background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAH8AAABjCAIAAAA9y0ikAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpERjREMThGOUVBMDcxMUU0QkFEOUNERkM1OUU2OTJGQSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpERjREMThGQUVBMDcxMUU0QkFEOUNERkM1OUU2OTJGQSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkRGNEQxOEY3RUEwNzExRTRCQUQ5Q0RGQzU5RTY5MkZBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkRGNEQxOEY4RUEwNzExRTRCQUQ5Q0RGQzU5RTY5MkZBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YUmgAAAADI9JREFUeNrsXVlQ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'); |
O mesmo equivale para a tag <img> de imagem, substituindo uma imagem comum pelo base64.
F.A.Q básico sobre base64
- Como gero este código maluquete?
R: Você gera este código no site base64-image.de em apenas 2 passos: 1) faça o upload da imagem e; 2)pega o código. SÓ ISSO. E use no lugar da imagem que você substituiu.
- Funciona para blogger ou wordpress?
R: Funciona para ambos! Inclusive para qualquer plataforma de blog!
- Tem como evitar ou encurtar este código?
R: Não, ele terá de ficar assim, gigantão — ou então você volta ao formato PNG/JPG/GIF (que você deve ter em seu computador guardado) e otimiza-lo nos sites que recomendei acima. Infelizmente a URL direta do base64 da imagem não funciona em encurtadores de links.
Quando eu devo usar o método de otimização de imagem ou base64?
O base64 é legal de ser usado nas imagens de seu layout, tanto como background como imagens de rodapé ou de sidebar. Nos posts recomendo os sites de otimização que comentei acima porque ninguém merece trilhões de linhas de código (a não ser que você tenha paciência para ver aquilo tudo, haha), pois, além disso, o navegador salva as imagens nos arquivos temporários de seu PC (o nome disso é cache, que você saberá o que é no final deste artigo). Imagens codificadas em base64 não são salvas no navegador (apesar de depender apenas dele para serem mostradas), então é melhor fazer isso no layout para evitar o requerimento de servidor sempre que o layout for carregado e deixar isso para as imagens dos posts.
E blogs com muitas fotos?
Blogs fotográficos sofrem muito com carregamento pois, muitas vezes, a pessoa posta TODAS as fotos de um evento e, além de gerar aquela barra de rolagem gigantesca, deixa o blog praticamente inavegável temporariamente (ou infinitamente rs) de tanta imagem a ser carregada. Nestes casos, em vez de deixar vários posts na página inicial, deixe no máximo dois e invista em posts relacionados para manter x leitxr interessadx nos outros posts. Ou então, já pensou no quanto aquele botãozinho de “leia mais” pode ajudar? Não tenha preconceito deste botãozinho (sei que muitxs blogueirxs odeiam), haha. É só saber utiliza-lo ao seu favor
É só fazer um post interessante com uma boa introdução e algumas fotos que x leitxr não terá preguiça de clicar no “leia mais”. Depois disso, use e abuse de suas fotografias que elx terá a paciência de ver.
Para blogs wordpress
O plugin
WP Smush.it promete reduzir o tamanho das imagens hospedadas no próprio servidor sem alterar a qualidade de imagem. Vale a pena testar!
2. Otimizando o CSS
A folha de estilo do CSS pode ser escrita de forma linear ou identada. Veja abaixo as diferenças.
2.1 Código identado
Seria uma linha para cada configuração com espaços e tudo bem mais organizado.
2.2 Código identado otimizado
Onde várias configurações podem ser economizadas, como paddings, margins, onde sempre é iniciado a contagem no sentido horário (topo, direita, baixo e direita) e, caso haja repetição nos sentidos horizontal e vertical, o número nem precisa ser repetido. Assim vale também para duas configurações iguais, onde podemos deixar a mesma configuração para itens diferentes separando-os por vírgulas.
1 | section, aside {background: #fff} |
9 | margin: 20px 10px 20px 35px; |
2.3 Código compacto
Onde cada item possui suas configurações em uma linha.
1 | section, aside {background: #fff} |
2 | section {background:#ffffff; margin: 20px 40px; padding: 0 12px 0 0; float:left; width: 650px;} |
3 | aside {margin: 20px 10px 20px 35px; float:right; width: 300px;} |
2.4 Código comprimido
Onde todo o CSS é composto por uma só linha.
1 | section, aside {background: #fff}section {background:#ffffff; margin: 20px 40px; padding: 0 12px 0 0;float:left; width: 650px;}aside {margin: 20px 10px 20px 35px; float:right; width: 300px;} |
Engraçado como o mesmo código pode ser escrito de várias formas, né? Quando menor e mais compactado o código for, menor ele fica em tamanho de Kpbs e mais rápido ele é lido pelo browser. Ao contrário do que imaginamos, os espaços em branco e quebras de linhas também alteram no tamanho do arquivo. Uma forma legal de trabalhar com CSS compactado é trabalha-lo dividindo-o em dois arquivos onde:
- Em um arquivo escrevemos nosso CSS de forma identada ou da forma como nos sentimos mais à vontade e;
- No arquivo CSS oficial de nosso blog, onde apenas salvamos o CSS compactado por um gerador.
Por exemplo, em minha pasta do meu layout do wordpress tenho o arquivo style.css, que é o CSS oficial do layout (que será o compactado e lido pelo browser) e também um arquivo chamado style_original.css, que é onde eu guardo um CSS mais organizado e identado para eu ver onde estou mexendo, testo no layout e depois compacto.
Como compactar o CSS?
Você pode compactar o seu CSS nos geradores
CSS Compressor do site CSS Drive e também no
CSS Minifier do site Clean CSS. Todos estes sites são ótimos e otimizam bastante o tamanho de seu CSS.
E para você organizar o seu código CSS identado o melhor gerador de organização de código é o
Jota Query.
3. Otimizando os scripts
Assim como o CSS o Javascript também pode ser identado e otimizado de forma compacta. Veja o exemplo do script que uso para o botãozinho de “subir ao topo”.
1 | $(document).ready(function () { |
2 | $('a[href=#top]').click(function () { |
3 | $('html, body').animate({ |
E assim ficaria ele compactado, utilizando o gerador
jsCompress, que adoro — porque, além dele comprimir o script, ele também organiza as funções e colocando-as da melhor forma tudo automaticamente.
1 | $(document).ready(function(){$("a[href=#top]").click(function(){return $("html, body").animate({scrollTop:0},1100),!1})}); |
4. Otimizando o HTML
Assim como o CSS e Javascript, o HTML também pode ser otimizado. Isso é legal de ser utilizado no blogger, com aquele mundo enorme de códigos XML
(só lembre-se de guardar o seu modelo com os códigos originais para você conseguir se organizar e enxergar o código). O gerador
HTML Compressor é ótimo para minifcar o código!
Para blogs wordpress
Para wordpress pode utilizar o plugin
WP Minify que ele fará isso de forma automática (e, se eu não me engano, também possui sistema de otimização automática de scripts e css).
Ou então utilize um plugin de cache (que explicarei o que é mais para frente neste artigo).
Outra dica para otimizar o HTML do seu blog é evitar ao máximo possível plugins desnecessários, pois eles implementam vários códigos no HTML que você não sabe e podem comprometer o carregamento. Plugins de segurança e otimização são altamente recomendados (em breve escreverei um post sobre várias dicas de segurança para o seu blog wordpress), mas para outras funções busque fazer ao máximo utilizando funções dentro de seu tema.
5. Posição correta dos elementos
Todo o código de um blog é lido de forma linear. Ou seja, o navegador começa a interpretar o código de nossos blogs através do topo para, por último, interpretar os códigos do rodapé. Pensando nesta forma de leitura do navegador, podemos ajuda-lo a ler mais rápido as coisinhas seguindo as seguintes dicas:
- Crie o seu CSS pensando exatamente a leitura de seu navegador. Ou seja: comece o seu estilo pelo cabeçalho, depois crie a área de posts (isso inclui também comentários e paginação), a coluna lateral (sidebar) e, por fim, o rodapé.
- Sempre coloque os scripts no rodapé de seu blog, a não ser que um seja especificado para colocar no topo. Isso acontece porque geralmente os scripts são um pouco mais pesados de serem interpretados e se colocar todos no topo isso pausa um pouco no carregamento do restante da página. Por isso, é melhor que os scripts fiquem por último pois assim a página será lida mais rapidamente.
6. Utilizando recurso de cache
Cache são os dados que são armazenados de forma temporária de um meio de acesso mais lento. Podem ser salvos tanto pelo servidor como pelo navegador, onde este último já possui um sistema de cache automático. Sabe aquele site que demorou mil anos para carregar em seu browser, mas quando você entrou nele novamente o carregamento foi bem mais rápido? Isso significa que o seu navegador guardou os dados desta página para que ela possa abrir mais rápido e requerer menos do servidor em que ela está hospedada.
Em blogs wordpress também podemos fazer isso, só que utilizando plugins. Sabemos que o wordpress possui um requerimento de servidor maior do que o blogger por ser mais complexo, tanto no quesito de linguagem (que é a PHP), como requerimento de dados. Desta forma, um plugin de cache ajuda a ter menos requerimento transformando todo o código em HTML comum, em vez de ler todo o código PHP novamente, deixando-o estático e se atualizando apenas de tempos em tempos — e não atualizando toda vez que a página é acessada.
O melhor plugin de cache que encontrei até hoje é o
W3 Total Cache, pois, além de ser eficiente no quesito de armazenar os arquivos, ele também tem opção de mininificar o código HTML. Converse com o sistema de suporte ao seu servidor e verifique se eles já possuem sistema de cache integrado em seus serviços e de otimização, e assim você nem precise utilizar plugins de cache!
Agora que você já possui estas dicas, você pode investir novamente em toda a reformulação de seu blog e testar novamente nos sites de teste de velocidade que eu recomendei no início deste post. Espero muito que este artigo tenha te ajudado e que sirva como um mini-manual para você visitar sempre que precisar!
E ai, já otimizou o seu blog hoje? O que achou da experiência? Conhece alguma outra dicas de otimização que poderia ser acrescentada neste posts? Comente se gostou do artigo e se o achou útil. Ou então, caso tenha dúvida, deixe-a nos comentários.
0 comentários: