Nos últimos tempos, tenho investigado várias formas de optimizar o desempenho dos sites onde colaboro.
A velocidade de carregamento é muito importante para um projecto online. Aqui ficam alguns motivos:
- em sites de e-commerce, cada segundo adicional de carregamento traduz-se em vendas perdidas;
- o algoritmo do Google tem a velocidade em conta (ou seja, um site rápido é beneficiado a nível de SEO);
- os utilizadores acedem cada vez mais aos sites através do smartphone ou do tablet, muitas vezes com ligações relativamente lentas, como o 3G.
Na verdade, as páginas Web são cada vez mais pesadas. Em 2013, uma página de e-commerce demorava 7.7 segundos a carregar – agora demora 9.3. Uma diferença de 21%.
A Web, em geral, está mais lenta, porque os conteúdos são mais pesados. E tal não é surpresa quando vemos as resoluções dos Macbooks e dos smartphones a subirem todos os anos, vídeos a passarem de SD para Full HD e cameras em telefones de 41 mega pixéis. Os processadores e as ligações à web tentam acompanhar esta tendência, mas nem toda a gente tem condições para um upgrade de 2 em 2 anos.
Para não excluir ninguém, o melhor que temos a fazer é procurar desenvolver o site mais rápido possível.
#1: O Speedtest
Antes de nos darmos ao trabalho de investigar possíveis melhorias no site, o melhor será entender a situação actual.
Será que o site está muito lento? Será que vale a pena contratar um freelancer para optimizar a performance do meu site?
Estas respostas podem ser rapidamente respondidas com um speedtest.
Existem inúmeros serviços que fazem este tipo de testes e uma boa parte são grátis.
Alguns já foram abordados anteriormente, mas aqui vai uma pequena lista:
Estes testes demoram, na maioria, menos de 1 minuto a correr e criam o relatório de imediato. A única excepção foi o Load Impact que demorou 6 minutos a completar (o teste é mais exaustivo).
Pessoalmente, gosto bastante do Pingdom e do GT Metrix; o primeiro pelo design e pela simplicidade, o segundo por agregar a informação fornecida pelo PageSpeed e pelo YSlow e por permitir o download do relatório em PDF.
Para além de uma classificação e de alguns números (como o peso da página ou o tempo de carregamento), quase todos fornecem algum tipo de sugestão de como estes tempos podem descer – mas já lá vamos.
O que é importante referir é que estes testes são excelentes para nos darem uma ideia, mas não os podemos levar totalmente a sério.
Se corrermos o teste várias vezes seguidas, teremos provavelmente resultados bem diferentes (mesmo se utilizarmos o mesmo serviço) e nem sempre as sugestões estão correctas.
Podemos comprovar isso mesmo nas 3 imagens em baixo, que dizem respeito a uma análise a este site no Pingdom, GT Metrix e YSlow, respectivamente.
Pingdom
GT Metrix
YSlow
Sobre as sugestões
Muitas destas sugestões são bastante técnicas. Minify Javascript? Use a CDN? Compress components with GZip? Algumas serão abordadas aqui, mas as boas notícias é que muitas vezes basta clicar nelas para saber mais sobre o que pode ser feito para minimizar os tempos de carregamento.
Algumas poderemos resolver sozinhos em minutos, enquanto outras necessitarão ou de muito tempo no Google ou da ajuda de alguém que perceba verdadeiramente da matéria (e de dinheiro).
Neste artigo, falarei sobretudo dos quick fixes para um site mais rápido sem grandes (ou nenhumas) despesas e pouco tempo despendido.
#2: Os princípios-chave
Antes de avançar com as optimizações, temos de falar um pouco dos alicerces – a base em que o site é construído.
Aqui, destaco 3 pontos:
- Alojamento;
- Tema e plug-ins do site (se utilizarmos um CMS);
- CDN (ou Content Delivery Network).
Alojamento
Ter um site é incrivelmente barato e a maior parte das pessoas apenas precisa de pensar num domínio (algo tipo omeusite.com) e num alojamento (onde o site ficará hospedado e onde poderemos depois inserir imagens, ficheiros etc).
Na altura de comprar um domínio, poderemos optar pelo serviço mais barato, que provavelmente será o Namecheap ou o GoDaddy.
Mas para o alojamento (hosting) não podemos aplicar o mesmo raciocínio.
Se estivermos a pensar num pequeno blog para os amigos visitarem, sinceramente qualquer alojamento servirá. Podemos obter alguns bastante baratos, como o da Dreamhost, que apenas nos custará 3 ou 4 dólares por mês.
O problema é se o nosso site fica popular da noite para o dia e alguém influente o partilha no Facebook, por exemplo. Se muita gente o visitar, este tipo de shared hosting não vai aguentar o tráfego e apesar de prometerem sempre visitas e largura de banda ilimitada, fecharão temporariamente a “torneira” – o que significa que ninguém conseguirá aceder ao site no nosso momento de glória.
Aqui, é aquela velha máxima – you get what you pay for. Se pagarmos $30 por mês, o mais provável será termos melhor serviço e um site mais rápido, que aguentará muito tráfego num dia daqueles. Mas não valerá a pena gastar muito dinheiro se as tuas previsões apontam para apenas umas dezenas de visitas por dia.
A plataforma do teu site também deve ser considerada – se utilizas o WordPress (como 20% da internet), podes utilizar serviços de hosting especializados, como o Pagely, o WP Engine ou este plano da MediaTemple.
No caso deste blog, visto que estou a utilizar o Ghost, recorri ao Ghostify.
Todos estes serviços são consideravelmente mais dispendiosos, mas optimizam o seu hosting para a plataforma em questão, sendo o desempenho superior.
Tema e plug-ins do site (se utilizarmos um CMS)
Se estivermos a utilizar o WordPress, o Joomla, o Ghost ou o Drupal, por exemplo, estamos a utilizar um CMS (Content Management System).
Estes CMS são apelativos não só por nos permitirem inserir conteúdos de forma simples, mas também por terem centenas ou milhares de temas (ou themes) à disposição.
Podem ser gratuitos ou ultrapassar os 50 dólares. Mas apesar de alguns serem muito bonitos, nem todos estão bem programados – e nem todos são rápidos.
Um tema tem enorme impacto na performance do site – a maior parte dos temas disponibilizam um live site para o explorar e podemos utilizar essa página para avaliar o desempenho do theme com uma das ferramentas acima, assumindo que não estão a utilizar algum tipo de caching.
CDN (ou Content Delivery Network)
O último ponto é aquele que é claramente opcional mas que deve ser considerado. Se o nosso site é particularmente pesado em conteúdos (imagens, vídeos, etc) uma CDN poderá contribuir positivamente no desempenho.
Uma CDN é uma espécie de servidor FTP em que podemos arquivar todos os nossos ficheiros, mas com uma diferença importante: a velocidade. Os ficheiros são duplicados por vários servidores por todo o mundo, o que faz com que sejam entregues muito mais depressa consoante a localização do visitante.
Para além disso, são flexíveis – se o nosso site ficar mais popular, o tempo de acesso aos ficheiros não é prejudicado.
Os serviços de CDN mais populares são provavelmente o Cloudfront (da Amazon) e o MaxCDN.
Pessoalmente, estou muito satisfeito com esta solução da Amazon Web Services (utilizo o Cloudfront para as imagens aqui neste blog). O preço é também bastante justo, porque só pagamos o que é gasto – se o blog tiver mais visitas, pagamos mais e a Amazon oferece um Free Tier generoso durante um ano, para vermos se vale a pena.
Nota 1: alguns serviços de hosting mais dispendiosos já trazem uma CDN integrada ou disponibilizam-na se pagarmos um extra mensal.
Nota 2: mesmo com a CDN activada, alguns speedtests podem não reconhecer a existência da mesma.
#3: As várias optimizações que podem ser feitas
Tempo agora de vermos o que pode ser feito para aumentar o desempenho do nosso site.
Como referi acima, aqui vou dar destaque aos quick fixes – aqueles pormenores que podemos resolver em poucos minutos e que baixarão de imediato os tempos de carregamento de cada página.
A maioria será para WordPress, visto que é tão popular, mas também podemos retirar a teoria e aplicá-la ao nosso próprio site ou CMS.
As imagens
Algo que muita gente subestima é o peso que as imagens têm em cada página carregada. Se colocarmos várias fotografias gigantes num blog post, rapidamente atingiremos vários MBs.
Para minimizar esta questão, podemos recorrer a uma ferramenta de compressão de imagens como o já referido Compressor.io.
Antes de fazer upload das imagens para a minha CDN, passo todas as imagens por esta webapp. No meu último post, a imagem de destaque passou de 721 kb para cerca de 132 kb sem praticamente nenhuma perda de qualidade visível.
Activar o Gzip
Quando queremos diminuir o tamanho de um ficheiro, uma das soluções é comprimi-lo com uma ferramenta como o WinZip. O Gzip é igual, mas para páginas Web. E a melhor parte é que não há qualquer desvantagem em fazê-lo.
Podemos ver se o nosso site já está comprimido utilizando esta ferramenta.
Se estivermos a trabalhar num site WordPress, podemos activar essa compressão recorrendo a um plug-in para o efeito ou editando o ficheiro .htaccess e adicionando o seguinte código:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
Re-avaliar o uso de plug-ins
Uma sidebar cheia de plug-ins raramente é boa ideia. À medida que mergulhamos no universo do nosso CMS e conhecemos as centenas de plug-ins disponíveis, maior é a tentação de instalar algo que (se calhar) nem faz assim tanta falta ao nosso site.
Cada plug-in acrescenta mais uma mão-cheia de chamadas à base de dados, o que faz com que o servidor tenha de trabalhar mais. E nem todos foram feitos por excelentes programadores, o que significa que poderão exigir mais recursos do que deviam.
Para WordPress, podemos utilizar o P3 (Plugin Performance Profiler) para entender os recursos que cada plug-in consome. Depois, podemos optar por remover determinado plug-in ou ver se existe alguma alternativa mais leve.
Bons exemplos são os famosos sliders para WordPress e os social buttons para partilha dos conteúdos, que podem pesar bastante no site. Algumas funcionalidades também podem ser alcançadas com a inserção de algum código, sendo por vezes preferível editar 1 ou 2 ficheiros PHP do WordPress em vez de recorrer a mais um plug-in.
Limpar a base de dados
Podemos deixar os plug-ins desactivados no WordPress sem afectar o desempenho, mas a base de dados convém ser limpa visto que, com o tempo, muita coisa deixa de fazer sentido (como manter todas as revisões dos nossos posts ou os itens que entretanto foram para o lixo).
Para resolver esta questão, instalamos o WP-Optimize e limpamos tudo o que está a mais – depois de fazer um back-up à base de dados, claro!
Minificar recursos (HTML, CSS e JavaScript)
Minificar é outro termo para comprimir os ficheiros, removendo símbolos em branco, linhas vazias e comentários. Muitos vão ainda mais longe: agrupam os vários ficheiros de HTML/CSS/Javascript num só.
À medida que o nosso site cresce e mais plug-ins são instalados, o nosso browser terá de aceder cada vez a mais ficheiros para descarregar o site por inteiro. Se concentrarmos tudo isso num só ficheiro e este for optimizado, teremos um site mais rápido.
Como acontece nos casos anteriores, podemos recorrer a várias ferramentas. Exemplo disso mesmo é o Freeformatter para Javascript e CSS, que utiliza o YUI Compressor da Yahoo.
Para WordPress, podemos utilizar o Better WordPress Minify.
Nota: Em themes mais complexos, o Minifiy pode desformatar algumas partes do site. Editar código depois da minificação é virtualmente impossível, pelo que é recomendado um back-up de tudo antes de minificar.
Activar o caching
O problema de usar um CMS e ter um site dinâmico é que a cada visita de um utilizador o servidor terá de pensar tudo outra vez.
Tal é desnecessário, sobretudo em páginas que recebem poucas ou nenhumas actualizações com o passar dos anos. Uma ferramenta de caching guardará uma versão estática da página, servindo depois essa versão aos visitantes, reduzindo a carga no servidor.
O caching é uma das técnicas mais populares: alguns serviços de hosting específico para WordPress já o fazem de raíz e não permitem a instalação de plug-ins adicionais.
Para quem está num alojamento mais barato e ainda assim quer recorrer ao caching, a melhor solução (para WordPress) será o W3 Total Cache ou o WP Super Cache.
Estas são 2 boas soluções que para além do caching permitem a ligação a uma CDN, entre muitas outras funcionalidades (especialmente o W3 Total Cache). Ainda assim, não sou fã destes plug-ins enquanto solução all-in-one, pelo que não os posso recomendar para outras aplicações se não esta.
Nota: Estas ferramentas são bastante avançadas, o que as torna mais complicadas de configurar. O (excelente) site WPBeginner tem artigos para instalar e configurar tanto o W3 Total Cache como o WP Super Cache, pelo que recomendo a leitura antes de mandar o site abaixo!
Conclusão
Prevê-se que no prazo de 1 ou 2 anos, o acesso mobile supere o acesso tradicional via desktop. Por esse motivo, os sites terão, cada vez mais, de pensar na velocidade para entregar uma boa experiência ao utilizador.
Espero que com estas dicas o teu site possa ficar consideravelmente mais rápido! Esqueci-me de alguma importante?
