Nesse artigo você vai descobrir maneiras surpreendentes de deixar o seu site mais rápido.
Afinal de contas, apenas um segundo de atraso no carregamento pode te custar:
- 11% menos visualizações de páginas.
- 16% menos satisfação do consumidor (em lojas online)
- 7% menos conversão (em vendas ou capturas de e-mail).
Pense comigo: se apenas um segundo é capaz de fazer tudo isso, imagine muito mais tempo...
Entretanto, fique tranquilo. Tenho certeza que depois desse artigo seu site vai carregar muito mais rápido, seus visitantes ficarão mais satisfeitos e você vai aprender a usar o seu servidor de hospedagem para tornar toda essa missão muito mais simples.
Mas antes, é necessário entendermos mais a fundo o porquê a velocidade de carregamento de um site é importante.
Porque deixar o seu site mais rápido é importante
De forma bem resumida.... seu site precisa ser rápido porque isso afeta diversos resultados que você poderia ter.
Por exempo, de acordo com o KissMetrics, 47% dos consumidores (praticamente metade) esperam que os sites carreguem em dois segundos ou menos. Além disso, 40% desses visistantes vão abandonar a página se demorar três ou mais segundos para o conteúdo ser mostrado.
Em outras palavras, se o seu site demora 3 ou mais segundos para carregar, você perde quase metade dos seus visitantes antes mesmo deles visualizarem o seu conteúdo.
Isso se torna ainda pior no Brasil, em que bons provedores de internet só estão nas grandes cidades.
Outra pesquisa importante também indicou que 79% dos consumidores disseram que não retornariam a um site com má performance. E em reafirmação a esses dados, 44% afirmaram que contam sobre má experiências com sites para amigos.
Mas ao invés de focarmos apenas em dados isolados, vamos a um pequeno estudo de caso.
Estudo de caso sobre velocidade de carregamento de um site: o que a Walmart fez (e como lucrou muito mais com isso)
A própria Walmart, multinacional estadunidense de lojas de departamento, fez um estudo sobre a velocidade de carregamento do seu site. No final da otimização, ela anunciou os seguintes resultados:
- Para cada um segundo de otimização eles experimentaram um aumento de 2% nas conversões. Para uma empresa, do porte deles, isso significa alguns milhares de reais a mais no final do mês.
- Para cada 100ms (para comparação, isso é um décimo de segundo, cerca de 0,1 segundo) eles aumentaram o faturamento em 1%.
Em outro estudo, a relação direta entre tempo de carregamento e a capacidade de conversão mostrou 25% de queda nas conversões por causa de um único segundo a mais de espera.
Claramente, essas situações te mostram a necessidade imensa de aumentar a velocidade no seu site.
Isso porque nem falamos ainda do motivo mais importante de todos ainda...
... a Google!
Como a velocidade do seu site altera a forma com que o Google olha para ele
Não é novidade que o Google leva em consideração a velocidade de carregamento de um site quando se trata de SEO (otimização para os sistemas de busca).
Em outras palavras, deixar seu site rápido aumenta as chances de alcançar a primeira página.
Isso se tornou, particularmente, mais efetivo a partir da indexação mobile first, uma atualização do Google que priorizava sites com versões mobile bem otimizadas.
A indexação mobile first foi necessário porque a Google notou que depois de 2015 as pesquisas mobile superaram as pesquisas em desktop. Logo, nada mais justo que seguir o mercado.
Agora, fizeram isso para seguir a modinha do momento? Não. Para priorizar o usuário.
Se o usuário mobile é maioria, a experiência mobile (em que conexões são mais lentas, devido ao uso de 4G e 5G) deve ser priorizada.
Mantenha isso em mente quando fizermos as alterações que vão deixar seu site rápido.
Mas antes... para comparação, precisamos saber a velocidade atual dele, não é mesmo?
Como saber o estado de carregamento do seu site?
Existem várias ferramentas que podem medir a velocidade com que seu site é mostrado para o usuário.
Ao invés de utilizar várias delas, como o objetivo é, de forma indireta, ter mais resultados no Google, vamos usar a Google Page Insights.
Basta acessar a ferramenta, digitar a URL do seu site e apertar enter. Você verá o tempo de carregamento e diversas sugestões de como deixar seu site rápido.
Para fins de exemplo, usaremos o site do Olhar Digital.
Na versão mobile o desempenho dele está fraquíssimo, muito em conta devido ao fato de ser um portal de notícias com muitas propagandas e conteúdo, se comparado a um blog, por exemplo.
Ao analisar as métricas vemos que:
- O desempenho geral está em 44 (de 100). Essa é a métrica que resume todas as outras.
- O primeiro conteúdo demora 1 segundo para aparecer.
- Demora até 11,6 segundos para interagir, de verdade, com a página.
- Demora até 9,1 segundos para mostrar a maior parte do conteúdo.
Já, quando analisamos a versão desktop do site, ela aparece um pouco melhor.
O que podemos analisar:
- O desempenho geral subiu de 44 para 83. Isso se deve, também, ao fato de notebooks e desktops terem mais poder computacional para gerar páginas. É muito comum uma página carregar maravilhosamente no computador e horrível no smartphone.
- O primeiro conteúdo aparece em 0,3 segundos.
- O maior conteúdo demora 2,9 segundos para ser exibido (é o único item em vermelho, mostrando que deve ser corrigido).
- O tempo para a página ficar pronta para interação é de apenas 2,3 segundos.
- E o tempo que o contéudo do site fica bloqueado é apenas de 90 milisegundos, cerca de 0,09 segundos.
O que fazer para melhorar sua pontuação no Google Page Insights
Primeiro de tudo, seguir as recomendação dadas no final da página de análise.
Essas recomendação serão mais ou menos assim (afinal de contas, varia de site para site).
Fique tranquilo. É comum não entender nenhuma dessas recomendações (se trata de um conhecimento bem médio/avançado em desenvolvimento web mesmo).
No entanto, é interessante saber o quanto seu site ainda pode ser otimizado no quesito velocidade.
Ainda nesse artigo você verá sugestões capazes de aumentar sua pontuação no Google Page Insights e eliminar esses itens em vermelho no relatório.
Por enquanto, pense nesse resultado como um diagnóstico da necessidade (ou não) de otimização das suas páginas.
Dito isso, vamos ao passo a passo para deixar seu site rápido.
1. Escolha um bom servidor de hospedagem
O básico do básico para ter um site com alta performance é, naturalmente, ter um servidor de alta performance.
Se o seu site for simples, como apenas um blog ou algo institucional, os planos básicos das seguintes empresas vão te servir:
No entanto, se você possui uma loja virtual, recomendo um plano mais potente como um servidor dedicado.
Na HostGator, por exemplo, o mais básico (embora bem mais poderoso que uma hospedagem tradicional) no plano bienal custa R$393 por mês.
Esse é um investimento que só deve ser feito, logicamente, se o seu faturamento já abrir margem para ele.
No entanto, lembra do estudo feito pela Walmart? Em resumo, quanto mais rápido o site abrir, mais vendas você terá e muito mais lucro.
Nada te impede também de começar por um plano básico e assim que seu site crescer você incrementar a hospedagem de forma gradual.
Por que escolher o tipo de servidor é importante?
A maioria dos donos de sites procuram a opção mais barata possível (nós já escrevemos um artigo te ensinando a economizar muito com hospedagem), o que não é errado, mas ao mesmo tempo limita as opções de perfomance.
Basicamente, quando você precisa escolher uma hospedagem, você tem 3 opções.
- Hospedagens compartilhadas.
- Hospedagens VPS (Virtual Private Server).
- Servidores dedicados.
Como funcionam hospedagens compartilhadas
As hospedagens compartilhadas (a opção mais barata) são perfeitas para sites com pouco tráfego, mas por serem compartilhadas, os picos de acesso de outro site (de outras pessoas) que estão no mesmo servidor podem impactar o desempenho do seu.
Por exemplo, se você possui o site "lojadebeterrada.com.br" e outra pessoa possui o site "materiaisdeconstrução.com.br" que determinado servidor alocou em conjunto (sem vocês saberem claro, e por isso essa opção é mais barata) e o site de materiais de construção recebeu mais visitantes hoje por causa de uma promoção... você pode ter seu site carregado de forma mais lenta.
Injusto? Pode parecer, mas não é. Servidores compartilhados fazem isso como forma de reduzir custos e oferecer acesso a um valor considerável.
Como funcionam as VPS
As VPS funcionam de forma parecida com as hospedagens compartilhadas. Você ainda tem outros sites no mesmo servidor que o seu.
Entretanto, a diferença principal é que, mesmo tendo outros sites, você tem recursos dedicados apenas para você. Ou seja, você protege o seu site de outros sites interferirem o desempenho dele, mas sem o valor elevado de uma hospedagem dedicada.
Uma analogia interessante é pensar no seguinte: hospedagens compartilhadas são como dividir um apartamento (o que os outros fazem reduzem sua liberdade lá dentro). E VPS são como morar em um condomínio (vocês ainda mora no mesmo local que outras pessoas, mas tem seu próprio espaço separado lá).
Como funciona um servidor dedicado
Seguindo a analogia acima, um servidor dedicado seria uma espécie de mansão apenas sua. Você é dono de tudo, você mora sozinho e você decide de que forma os espaços são alocados.
Por ser tão exclusivo assim, servidores dedicados tendem a ser muito caros e exigem conhecimento técnico para otimização e uso.
No entanto, do ponto de vista de performance, é a melhor escolha.
Sugestão: escrevemos um artigo completíssimo mostrando as principais diferenças entre servidor VPS e servidor dedicado.
Dito tudo isso, sabemos que dificilmente você precisaria de um servidor dedicado imediatamente, então vamos focar em outras soluções para aumentar a velocidade de carregamento da sua página, sem gastar rios de dinheiro com isso.
2. Minimize as requisições HTTP
De acordo com o Yahooo, 80% do tempo de carregamento de uma página é gasto com o download de diferentes partes do conteúdo. Sejam eles imagens, estilos, scripts, etc.
Por exemplo, imagine que você possui um site que possui 5 folhas de estilo, normalmente pesadas (o famoso CSS), 7 scripts (Javascript), também normalmente pesados.
Ou seja, você tem 12 arquivos de tamanho considerável para fazer download só para mostrar uma página do seu site.
Como otimizar isso? Basta unificar os arquivos iguais. Como? Juntando todos os arquivos CSS e juntando todos os arquivos Javascript. Assim, ao invés de 12, você teria apenas 2 arquivos para fazer o download, otimizando o tempo entre cada requisição HTTP.
Agora... se o seu site for em WordPress, você sabe que, por conta de plugins e por causa da forma com que o tema foi construído, juntar os arquivos iguais não é simples de fazer.
A solução, como praticamente tudo no WordPress, é utilizar um plugin. Qual? Você tem várias opções como o:
- WP Fastest Cache (recomendado se você não tiver experiência com otimização de sites, por só sugerir checkboxes para serem marcadas).
- WP Super Cache.
- W3 Total Cache (recomendado para usuários experientes em otimização, devido ao grande número de modificações possíveis).
Para fins didáticos, utilizaremos o primeiro plugin sugerido, o WP Fastest Cache. O usaremos como base para todas as alterações sugeridas nesse artigo, então se for usar outro plugin, por favor, tente replicar, na medida do possível, o que fizermos aqui.
A tela inicial do WP Fastest Cache é essa abaixo. Como você pode ver, é apenas usado checkboxes para clicar e já ter a otimização pronta no seu site.
Entretanto, é importantíssimo dizer que algumas alterações podem quebrar o seu site (não de forma definitiva, claro). Mas dependendo de como o tema que você usa foi feito ou de quais plugins você utiliza, o site pode apresentar:
- Espaços em branco.
- Ausência de imagens.
- Comportamentos esquisitos.
O ideal é testar cada uma dessas opções uma por uma em aba anônima e de uma vez.
Para isso, marque a primeira checkbox e desmarque todas as outras, ficando assim:
E para eliminar a quantidade de requisições HTTP, como já vínhamos falando, basta marcar os três itens:
- Minificar CSS.
- Combinar CSS.
- Combinar JS.
Feito isso, abra o seu site numa aba anônima e verifique se está tudo bem com ele. Se estiver, parabéns! Sua nota no Page Insights já vai ter melhorado bastante.
Entretanto, se estiver alguma coisa errada com seu site, ao invés de marcar essas 3 checkboxes de uma vez, marque uma por uma e descubra qual está dando problema.
A que causar problemas, não a selecione mais. Você perde em otimização, mas melhor um site não tão otimizado que funciona, do que um site super rápido, porém quebrado.
Além do mais, com essa estratégia, você não está reduzindo apenas o número de requisições. Está também eliminando as linhas de código em branco, que acabam por pesar na versão final. Isso reduz o peso dos seus arquivos, o que coopera para que a página carregue com mais velocidade.
3. Ative o Gzip
O Gzip, resumidamente, é um formato de dados compactados. O nome vem de "GNU Zip".
Quando essa função está ligada no seu servidor, é possível fazer o download das informações de um site de forma mais rápida porque o volume de dados ficou menor devido a essa compactação.
Normalmente, isso é utilizado mais para textos (ou hipertextos, se levarmos ao pé da letra), porque outros tipos de conteúdos como imagens, por exemplo, costumam ter outras formas de otimização e serem naturalmente compactadas (falaremos sobre isso em breve).
Essa compactação é feita através de algoritmos impressionantes (pela carga matemática envolvida) que procuram padrões de repetição, frequência e redundância.
Em sites estáticos (instituicionais, em maioria) o Gzip é super útil, uma vez que os conteúdos não são alterados numa frequência regular. Mas em sites muito dinâmicos pode ser que a utilização do Gzip não influencia tanto.
O que fazer? Testar! Principalmente quando se trata do diagnóstico do Page Insights.
Para utilizar essa função, basta acessar o WP Fastest Cache e ativar essa opção abaixo.
É importante fazer um comparativo. Veja a nota do seu site no Page Insights... Ative o Gzip e reveja a nota. Se ela aumentou, mantenha o Gzip ativado. Se diminuiu, desmarque o checkbox e parta para a próxima alteração.
4. Use cache (o segredo para deixar seu site rápido)
A cache do navegador tem inúmeras funções, dentre as principais, aumentar o desempenho de carregamento das páginas e até mesmo melhor a experiência que os visitantes do seu site tem com ele.
Mas como a cache funciona?
É bem simples. Imagine que todas as vezes que um visitante acessa seu site ele precisa baixar os arquivos do seu site no navegador, certo? Por exemplo:
- Imagens.
- Scripts.
- Estilos.
- Metadados.
- etc.
Se em todas as páginas dos seus sites os mesmos arquivos são usados todas as vezes, não faz sentido ter que ficar baixando eles de novo... e de novo... e de novo... concorda?
A cache é, em resumo, um espaço de memória do navegador que deixa esses arquivos mais utilizados previamente baixados.
Assim, cada vez que você acessa uma página nova de um site, você só precisa baixar o conteúdo novo, já que o conteúdo repetido já está salvo no seu navegador.
Qual o resultado? Muito mais velocidade para abrir as paginas e, por consequência, um carregamento extremamente otimizado.
Para ativar a cache do seu site no navegador dos visitantes, é só ativar as duas funções abaixo no WP Fastest Cache:
A primeira opção faz com que uma cache de todo o site seja feito assim que o usuário acessa a página. Isso pode fazer com que o carregamento demore um pouco, mas torna a experiência do usuário muito mais otimizada, porque independente da página acessada, já terá uma cache dela no navegador.
Veja se vale a pena ativar essa função. Faça o comparativo usado o Page Insights.
A segunda opção faz com que a mesma página seja carregada de forma quase instantânea quando o usuário acessá-la pela segunda vez. O que é muito útil para páginas recorrentes como a inicial do seu site.
As duas opções em conjunto garantem uma velocidade maior de carregamento, mas apenas os testes dirão se elas fazem sentido no seu tema e no seu servidor, em específico.
No entanto, em quase 100% dos casos, a utilização da cache acelera suas páginas de maneira absurda.
5. Diminua o tamanho das suas imagens
Mais do que textos e elementos em HTML, o maior peso das páginas em sites vêm das imagens utilizadas. Afinal de contas, é muito fácil uma simples imagem ter mais de 100KB.
Para fins de comparação, o Jquery, framework Javascript, comprimido pesa apenas 88KB na versão 3.6.
Imagine um artigo longo com 15 ou 20 imagens... O usuário acaba tendo que baixar mega e não kbytes de dados.
Para evitar esse carregamento massivo de imagens, uma forma simples de fazer isso é otimizá-las. Ou seja, apagar todos os metadados e diminuir um pouco a qualidade delas, de forma que o peso para o usuário final seja mínimo.
Para fazer isso temos 3 opções.
Opção 1: Fazer tudo isso manualmente
Se o seu site não funciona através do WordPress, para otimizar as imagens será necessário fazer isso manualmente através de programas compressores em massa.
Os mais conhecidos são:
- PNGGauntlet (desktop).
- Compressor.io (online).
- Caesium (desktop).
Basta usar uma dessas ferramentas, converter a imagem em um formato menor e reenviar ao servidor via FTP (veja o artigo sobre FTP, caso não conheça esse protocolo de envio).
Opção 2: Utilizar um plugin para esse objetivo
Se você utiliza o WordPress, é possível instalar o WP Smush, um plugin que atualiza todas as imagens já enviadas para a biblioteca de mídia.
Ele simplesmente converte cada uma para um formato menor, para que a velocidade de carregamento da sua página seja otimizada. Além do mais, ele oferece recursos como o Lazy Load (que só carrega as imagens segundos antes do usuário descer até elas no conteúdo), o que possibilita um carregamento bem mais otimizado.
Opção 3: Converter suas imagens para WEBP
Um arquivo PNG tende a ser mais pesado que um arquivo JPG (claro que existem exceções). Mas já pensou se existisse um formato muito menor que apresentasse as imagens do mesmo jeito?
Esse formato existe e é o WEBP. De forma geral, ele é um formato moderno que comprime as imagens convencionais e as deixa otimizada especificamente para o uso na internet.
O formato WEBP lossless (com pouquíssima perda de qualidade de imagem) é 26% menor que o PNG e o formato WEBP Lossy (com alguma pequena perda de qualidade de imagem) é de 25 a 34% menor que imagens em JPG.
Além de todas essas vantagens, ele pode possuir suporte a transparência (como o PNG) com um peso bem menor.
Para utilizar o formato WEBP no seu site convencional, você pode usar um conversor online como o Cloud Converter.
Caso você utilize o WordPress, existem plugins com esse objetivo como o WEBP Express ou Converter for Media.
6. Experimente o formato de páginas AMP
AMP é uma sigla para Accelerated Mobile Pages (páginas mobile aceleradas). É um projeto feito pela Google com o objetivo de ajudar os sites a serem carregados com mais velocidade em dispositivos como smartphones e tablets (e esse passo vai muito mais além do que a responsividade).
Como eles fizeram isso? Criando um novo formato de páginas que remove diversos conteúdos desnecessários (visualmente falando) de páginas convencionais, as fazendo carregar de maneira otimizada.
O mais interessante é que sites em AMP tendem a serem destacados nos resultados (afinal de contas, você está utilizando um formato que o próprio Google inventou, claro que isso conta pontos positivos).
No entanto, é importante destacar que o AMP é uma versão muito simplificada do site convencional. Então você abre mão dos seus estilos e funcionalidades para permitir velocidade de carregamento ao usuário.
Como forma de testar o AMP para deixar o seu site rápido, a empresa WIRED resolviu fazer um pequeno teste.
Resultado? Eles aumentaram a taxa de cliques orgânicos (apenas pela pesquisa comum do Google) em 25%. Além do mais, conseguiram adicionar as histórias AMP (um recurso de visualização rápido de página, similar aos stories do Instagram) para mais de 100 mil artigos.
Outro exemplo claro da utilidade dos páginas AMP é o Gizmodo. Em resumo, ao utilizar o AMP, eles conseguiram um aumento de 100 mil visitantes diários, páginas 3x mais rápidas e 50% de aumento nas impressões do site (vezes que usuários viram as páginas).
Depois de te falar tudo isso, resta a dúvida...
Como implementar o AMP no seu site?
Se for um site convencional em HTML, existe um guia (em inglês) te ensinando a fazer isso.
Entretanto, se utiliza o WordPress, você pode usar o AMP for WP.
7. Repense o seu conteúdo
Convenhamos... Boa parte dos conteúdos visuais e estéticos dos sites atuais podem não ser necessários.
Você vê muitos elementos, muitas imagens e principalmente scripts e plugins desnecessários que instalamos por causa de alguma funcionalidade que consideramos relevante.
Entretanto, é necessário refletir sobre qual a verdadeira intenção do usuário ao acessar o seu site. Por exemplo, você está lendo esse artigo em uma única coluna. Muitos sites possuem duas ou até 3 com diversos Widgets.
Mas se o seu objetivo é deixar seu site rápido, por que eu adicionaria mais informações?
Um bom exemplo de site clean (e para muitos, exagerado) é o Zen Habtis do escritor Leo Babauta.
Logicamente, você não precisa deixar tudo tão clean assim. Mas reflita: "esse elemento é realmente necessário ou eu apenas coloquei porque achei 'bontinho'?"
Eliminar uma imagem, um widget ou um pop-up já reduz o tempo de carregamento e pode te permitir ter mais resultados com seu site.
O ideal é sempre focar em oferecer a solução para seus visitantes sem rodeios.
Conclusão: como deixar seu site mais rápido!
Nesse artigo você viu como acelerar a velocidade de carregamento das suas páginas através de dicas bem simples.
Com elas, você conseguirá ter:
- Mais visitantes.
- Mais faturamento (caso você venda algo).
- Mais conversões.
Lembre-se que, para isso, você precisa de um ótimo servidor de hospedagem. Sugiro os 3 principais:
Existem também outros passos mais avançados para garantir a nota máxima no Google Page Insights. Entretanto, muitas vezes se abre mão de muitos recursos para alcançar essa pontuação, então não se preocupe.
Só com os passos explicados aqui você conseguirá deixar seu site rápido (bastante) e colher os resultados disso.
Um forte abraço!
