As 10 Melhores Técnicas para Otimizar a Velocidade do Site
Atualizado: 8 de abr.
Se há um local onde as primeiras impressões são absolutamente críticas, esse lugar é o seu site - e não estamos falando só de design e conteúdo. A velocidade de carregamento das suas páginas é um dos fatores determinantes para o seu sucesso.
Um site que demora muito para carregar pode prejudicar a sua reputação, além de acabar custando caro, já que você pode perder conversões. Já o contrário, ou seja, um site com alto desempenho vai ter um efeito dominó positivo no sucesso do seu negócio. Vai atrair mais visitantes, o que por sua vez vai aumentar os “leads” de vendas e acabar por atrair mais consumidores.
O primeiro passo para garantir que seu site carregará rapidamente é usar um bom criador de site, que tenha a melhor tecnologia. No entanto, seu trabalho não acaba depois disso. É sua responsabilidade garantir que o conteúdo que você inclui no seu site não atrapalhará o desempenho.
Você vai precisar encontrar o equilíbrio certo de mídias, escolher onde colocar seus itens e, acima de tudo, saber qual o tipo de conteúdo e extensões usar. Por exemplo, GIFs animados podem dar um estilo às suas páginas, mas geralmente são arquivos pesados e consomem muita largura de banda. E texto carrega mais rápido do que imagens, por isso preste muita atenção na forma como vai ordenar seus elementos.
Há muitos fatores a levar em consideração, mas você certamente dá conta. Além disso, você chegou ao lugar certo. Este artigo traz tudo o que você precisa saber sobre otimização de velocidade e como melhorar o desempenho do site.
O que é otimização da velocidade do site e por que é tão importante?
Uma vez clicado o link do site, a velocidade do website é o tempo que leva para o download das páginas, até que sejam mostradas no navegador e passem a ser receptivas às interações dos usuários.
Esse termo não deve ser confundido com “perceived performance” (desempenho percebido) que é a forma como os visitantes avaliam o desempenho do site com base no que veem primeiro nas suas telas (que não necessariamente são os elementos que carregam primeiro). Uma vez que são dois conceitos diferentes, mas, no entanto, igualmente importantes, você deve trabalhar sempre para melhorar a velocidade do seu site e a “perceived performance” em paralelo - e as dicas mostradas abaixo vão te ajudar a conseguir alcançar tudo isso.
Sua próxima pergunta provavelmente é “o que é considerado como uma boa velocidade do site?”. A resposta para isso depende especificamente do seu meio de atuação profissional, mas é altamente recomendado que, em média, as páginas carreguem em menos de três segundos.
Por fim, você pode até se perguntar: Por que importa a otimização da velocidade do site (à parte do desafio apresentando por nosso extremamente curto período de atenção)? Bem, o tempo de carregamento afeta usabilidade, conversão, engajamento do usuário e visibilidade dos motores de busca.
Impacto na usabilidade: Pode até parecer óbvio, mas quanto mais rápido seu site carrega, mais cedo seus recursos podem ser usados como, por exemplo, itens que ajudam os visitantes a navegar para comprar, falar com o serviço de atendimento ao cliente, ou simplesmente compreender o propósito do seu site. Por isso, permitir que esses recursos fiquem visíveis mais rapidamente vai deixar os visitantes mais felizes, e dispostos a retornar. É simples assim.
Impacto no engajamento do usuário: É mais provável que os usuários se engajem com seu site quando conseguem passar mais rapidamente através dos processos. Por exemplo, se você tem uma loja virtual e cada passo do processo de checkout leva mais do que apenas alguns segundos para carregar, é compreensível que muitos compradores em potencial abandonem o processo por completo. O mesmo princípio serve se você está preenchendo formulários ou saltando de uma página para a outra. Você pode ver aqui como essas questões prejudicam o número de visitantes do seu site e os objetivos gerais do seu negócio.
Impacto na conversão: Um objetivo específico no qual a maioria de donos de sites estão focados é o número de conversões. De fato, um atraso tão pequeno quanto 100 milissegundos na velocidade da página pode levar a uma diminuição de 7% nas taxas de conversão para seu site. Se seus visitantes não conseguem usar rapidamente seus recursos, eles vão partir para outro site sem dúvida nenhuma.
Impacto na visibilidade nos motores de busca: O Google leva em conta a velocidade do site quando os classifica (conhecido como SEO, Otimização dos Motores de Busca). Sendo assim, se você quer que o seu site apareça melhor posicionado nos resultados de busca para uma palavra-chave específica, terá uma chance melhor para cada milissegundo mais rápido que o site carregar e que as páginas fiquem visíveis aos olhos dos usuários.
Agora que você já compreende o que é a velocidade do site e porque ela é importante, é o momento de fazer alguma coisa a respeito do seu site. A seguir, você vai aprender como melhorar o desempenho do seu site para ter a certeza que seus consumidores e o Google estarão felizes.
Dicas comprovadas para melhorar a otimização da velocidade do site:
Não sobrecarregue sua página inicial
Priorize o conteúdo acima da dobra
Evite ter excesso de arquivos mídia no seu site
Otimize o tamanho das suas imagens
Mantenha uma relação texto-imagem consciente
Use texto ao invés de elementos gráficos sempre que possível
Reduza a quantidade e estilo de fontes
Limite o uso de animação
Foque no desempenho em dispositivos mobile
Limite a quantidade de aplicativos externos
01. Não sobrecarregue sua página inicial
Se você decidir implementar uma única coisa desse artigo, então que seja esta dica. Resumindo: mantenha sua página inicial clara e evite homepages longas demais.
Deixar sua página inicial lotada de conteúdo e mídia (texto, imagens, vídeos e animações) pode ter um impacto negativo no sucesso do seu site. Ele pode levar tempo demais pra carregar e também deixar seus visitantes sufocados de tanta informação até chegar em um ponto em que os usuários deixam escapar o conteúdo importante da sua página e saem sem sequer interagir com esse conteúdo.
Uma página inicial organizada com conteúdo mínimo vai permitir que seus visitantes absorvam a informação apresentada desde o momento em que entram no seu site, e isso vai ajudá-los a compreender mais rapidamente a sua mensagem principal.
Se você está preocupado em perder conteúdo pertinente, isso também pode ser resolvido. Você pode espalhar seu conteúdo através de múltiplas páginas. Dessa forma, toda a sua valiosa informação terá seu próprio “espaço” para brilhar. E não se preocupe, com botões para ajudar os visitantes a navegarem, como “Veja Mais” e “Dê uma Olhada em Meu Blog/Galeria”, o conteúdo que está fora da sua página inicial pode ser facilmente acessado pelos usuários.
02. Priorize o conteúdo acima da dobra
“Acima da dobra” refere-se à seção da página inicial do seu site que é visível de imediato quando a página carrega e antes dos visitantes começarem a rolar. É a seção mais importante do seu site, pois é a primeira coisa que qualquer pessoa vai enxergar assim que entrar e é a primeira seção do site a carregar.
Use esta seção de forma estratégica, atraindo o olhar dos visitantes enquanto carrega o restante do conteúdo do site. Você pode fazer isso através de um texto significativo e de fotos relevantes e atraentes. As orientações mais básicas são incluir seu cabeçalho e o texto do subtítulo (como o nome da empresa e o slogan), criar um logo e um botão de CTA (chamada de ação).
Em resumo, exponha as principais informações que seus visitantes precisam saber, mas sempre mantendo a página clara e direta. Há também uma excelente regra de ouro para esta seção que é bom seguir: se o conteúdo está alinhado com sua principal mensagem, pode ficar. Agora, se desvia a atenção dos visitantes dessa principal mensagem, coloque esse conteúdo abaixo da dobra ou em uma outra página do seu site.
No entanto, há uma exceção a essa regra. Você deve se certificar de que o conteúdo acima da dobra tem pouquíssimas animações, pois elas diminuem a visibilidade dos elementos aos quais são aplicadas (saiba mais sobre isso a seguir) e, dessa forma, os usuários conseguem ver mais do seu conteúdo desde o início. Ao invés de animações use texto, imagens ou logos como efeitos visuais.
03. Evite ter excesso de arquivos de mídia no seu site
Além da página inicial, você também deveria fazer essa faxina em todo o conteúdo do seu site. Como sempre, tenha o foco de todos os seus esforços na qualidade em detrimento da quantidade.
Exatamente como um dono de loja física não coloca todo o seu estoque na vitrine da loja, você não deve sobrecarregar seu site. Na realidade, seu site é a sua vitrine e cada item que você coloca ali tem um custo em termos de desempenho.
Falando mais especificamente, algumas formas de mídia são altamente prejudiciais ao desempenho do seu site, já que seu alto uso de banda e de tempo de carregamento afetam o desempenho de todo o restante.
Galerias de fotos com infinitos rolamentos são um dos elementos que carregam lentamente. Qualquer foto - não importa o tamanho do arquivo - vai impactar na velocidade da página. E de qualquer forma, em uma galeria de fotos, essas fotos não são visíveis todas de uma vez. Para fazer os ajustes necessários que vão melhorar a velocidade da sua página, reduza o número de imagens na galeria de fotos e mantenha apenas as mais importantes - especialmente se for na sua página inicial.
Conteúdo embutido é uma outra questão. Um exemplo bem perceptível dessa questão são vídeos do YouTube ou Facebook embutidos. Como são de uma fonte externa, o hospedeiro do seu site (como o Wix.com, por exemplo) não consegue otimizá-los e controlar seu tempo de carregamento. Dessa forma, se os vídeos carregam devagar, ninguém além de você mesmo vai conseguir resolver o problema.
No entanto, isso não significa necessariamente que você deve evitar totalmente conteúdo embutido. Um bom consenso é reduzir a quantidade colocando apenas um ou poucos vídeos no seu site. Uma outra alternativa, especificamente em relação aos vídeos embutidos, é usar a opção de vídeos de background ou adicionar uma videobox. Como o hospedeiro do seu site tem controle sobre esses elementos, eles seu impacto na velocidade do site será reduzido.
Resumindo, quando se trata de adicionar mídia ao site, pergunte-se sempre: Vale a pena? Vai beneficiar meus objetivos em termos de conversão? Se a sua resposta a estas questões for não, então simplesmente retire.
04. Otimize o tamanho das suas imagens
A dica mais simples aqui é usar arquivos JPEG para as imagens ao invés dos arquivos PNG, sempre que possível. Se você não tem ideia do que estamos falando, dê uma verificada nesse guia dos tamanhos de arquivos.
A razão por trás disso é que os arquivos JPEG costumam ser mais otimizados para a internet do que os PNGs, por serem menores e terem download mais rápido, e ainda conseguirem manter a qualidade. A não ser que você precise de imagens transparentes, ou que seja um fotógrafo profissional, os JPEGs têm qualidade e usabilidade suficientes. Há muitas ferramentas na internet para converter suas imagens, como TinyJPG, Compressor.io e ImageOptimizer.
Sites hospedados no Wix.com contam automaticamente com um benefício extra: ter suas imagens convertidas ao formato de imagem WebP. Esse é um formato de imagem relativamente novo lançado pelo Google, que proporciona melhor compressão e, dessa forma, melhor desempenho tanto para arquivos JPEG como para os PNG. O Wix usa o WebP em todos os navegadores que têm suporte para esse formato novo e melhorado. Além disso, para quaisquer imagens que você recorte no editor, o Wix vai automaticamente otimizar o tamanho para as suas páginas da web.
É importante perceber que apesar da nossa plataforma fazer de tudo para proporcionar o melhor desempenho ao seu site, há uma coisa que nós não fazemos: Nós nunca diminuímos a qualidade da imagem. A prerrogativa do aspecto das suas imagens é toda sua, e nós não interferimos nisso.
Há mais um assunto para vocês: “imagens preguiçosas para carregar”. Inicialmente, depois que um site Wix é carregado, as imagens podem parecer como de baixa resolução. Isso é apenas uma reserva de espaço enquanto carregam as imagens de alta resolução. É uma técnica que nós usamos para melhorar tanto a velocidade do seu site como também a “perceived performance”, evitando assim que os visitantes vejam uma página em branco.
05. Mantenha uma relação texto-imagem saudável
Texto e imagens são como ter dois cachorrinhos: por vezes são os melhores amigos e outras brigam um com o outro agressivamente. Portanto, você precisa esquematizar territórios separados para cada um desses elementos, de forma a dar-lhes o espaço necessário para respirar, e deixá-los funcionar juntos em harmonia.
Um exemplo disso é criar contraste. Isso é melhor explicado através de um cenário: um background de cor branca, imagem colorida e texto em branco. Uma vez que texto carrega mais rapidamente do que as imagens, seu texto branco contra um background branco vai parecer invisível para os internautas até a imagem ser carregada. Evite isso levando em conta as cores quando for escolher seus elementos de design.
A outra regra de ouro é a seguinte: evite colocar texto em imagens. A única exceção razoável são os logos. Isso se deve ao fato de texto em imagens carregar lentamente, dessa forma, você perde informação e seus visitantes ficam com um tela preta até seu site estar completamente visível. Além das questões de velocidade de carregamento, texto em imagens não ajuda na acessibilidade do site. Só que isso é fácil de resolver e ao invés de texto em imagens, basta colocá-lo em uma caixa de texto acima das suas imagens e assim todos ficam felizes.
06. Use texto ao invés de elementos gráficos sempre que possível
Como mencionado acima, texto carrega mais rapidamente que imagens e animações. Mas esse não é o único motivo pelo qual você deve focar a atenção do seu design nas suas belas palavras. Um cabeçalho de texto carrega rapidamente e atrai a atenção imediatamente para a principal mensagem do seu site e portanto melhora a experiência geral dos seus visitantes.
A outra razão principal é o SEO (otimização dos motores de busca) ou os esforços que são tomados para garantir que seu site tenha um posicionamento elevado nos resultados de busca para palavras-chave específicas. Sem entrar em detalhes muito técnicos, há uma coisa que você deve saber: texto detalhado e de qualidade vai ajudar o Google (e outros motores de busca) a compreender melhor do que trata seu site e, dessa forma, melhorar diretamente as suas chances de ter uma classificação mais elevada. Arquivos de mídia têm apenas um impacto indireto no SEO, ao melhorar a experiência geral do usuário ou fazer os visitantes ficarem mais tempo na sua página. Portanto, se você quer escolher a melhor forma de conteúdo para trazer mais visitantes para seu site, o texto é o seu caminho.
07. Reduza a quantidade e estilo de fontes
Você deve levar em consideração reduzir o número de famílias de fontes no seu site a apenas duas ou três. Isso vai te ajudar a traçar um estilo consistente para a sua marca, além de transmitir uma aura de limpeza e profissionalismo. Afinal, as primeiras impressões do seu site e do seu negócio não têm volta. No entanto, como você pode imaginar, nós não estamos sugerindo isso baseados apenas no que nossos amigos designers têm a dizer. É também mais uma forma para reduzir o tempo de carregamento do seu site.
Só que não estamos falando apenas da quantidade: o tipo de fonte também importa. Por exemplo, se você quer usar fontes personalizadas, não se esqueça de que elas também são elementos gráficos (como imagens e vídeos), o que significa que é necessário o download delas antes de aparecerem nas suas páginas - e isso pode afetar o desempenho do site.
Por fim, evite demasiado peso na fonte (negrito, sublinhado, itálico, etc.). Estes elementos também necessitam downloads adicionais e, como você pode adivinhar, um tempo maior na velocidade de carregamento do seu site.
Resumindo: Não desista por completo de fontes personalizadas ou de algum peso nas fontes. Preferencialmente escolha com sabedoria onde colocar esses recursos no seu site e só os use onde haja um propósito claro e específico - É isso aí.
08. Limite o uso de animação
Você já ouviu um ditado sobre consumo de alimentos que diz: “Tudo com moderação”? Então, na perspectiva do seu site, isso se refere especificamente ao seu uso de animação. Da mesma forma que as sobremesas, elas também são viciantes e sempre vão te deixar querendo mais - no entanto, animações são arquivos pesados que carregam muito devagar.
Sabemos que não podemos convencer ninguém a deixar de usar animações por completo, porque são arquivos bem atraentes. No entanto, você pode ser seletivo sobre quais vai usar: evite especificamente os GIFs animados. Esses arquivos são monstruosamente grandes e são os mais pesados de todos, mesmo quando são bem pequenininhos. E, quando os GIFs animados são arquivos grandes, eles não apenas carregarão muito devagar, como também vão afetar o desempenha de todo o resto do seu site.
Uma outra excelente prática quando se trata de animação: coloque-as mais para baixo na sua página, abaixo da primeira dobra. Dessa forma, você pode evitar que seus visitantes sintam que você exagerou quando chegarem em seu site, e garante que tenham alguma coisa para ler de imediato e que carrega num tempo razoável.
Por fim, você pode usar ferramentas online como o Conversor de GIF a MP4 para converter as animações do seu site em vídeos. Os vídeos passam a mesma experiência visual que as animações, especialmente GIFs, mas carregam muito mais rápido. Além disso, a reprodução do vídeo acontece imediatamente após o carregamento inicial de dados. Já os GIFs precisam ter o download completo antes da reprodução, o que afeta a “perceived performance” do seu site.
09. Foque no desempenho em dispositivos mobile
Mais e mais pessoas acessam a internet todos os dias a partir dos seus smartphones, e você pode apostar que eles esperam que seu site tenha um aspecto incrível também nas telas do tamanho da palma da mão. O Wix cria automaticamente uma versão do seu site otimizada para mobile, por isso, você não precisa se preocupar em ter que criá-la do zero. No entanto, ter um site mobile é só o primeiro passo. Como seu site é muito menor nos dispositivos mobile do que nos desktops, você precisa tirar o máximo proveito desse espaço. Por exemplo, a sua seção acima da dobra vai ter muito menos informação na sua versão mobile. Por isso, escolha sabiamente o que colocar ali. O básico deve incluir; o nome da sua empresa, logo e uma CTA.
Além disso, certifique-se de ocultar ou até mesmo eliminar todos os elementos que afetam seu desempenho. Estes podem ser de qualquer formato, desde múltiplos estilos e formatos de fontes a imagens, animações, vídeos, efeitos especiais e mais.
Para tirar o máximo proveito desse pequeno espaço de tela, você pode substituir esses elementos que demoram muito para carregar por outros recursos como uma Tela de Boas-Vindas que mostra seu logo ou uma foto enquanto seu site carrega, ou então uma Barra de Ações Rápidas para que todas as suas informações de contato possam ser encontradas com apenas um clique.
10. Limite a quantidade de aplicativos externos
Aplicativos externos (ou TPAs, do inglês Third Party Applications) são recursos que podem ser adicionados às suas páginas, mas que não foram criados pelo hospedeiro do seu site. Por exemplo, Feed do Instagram, Rating Widget ou mapa para mostrar sua localização - muitos dos quais estão disponíveis gratuitamente no Wix App Market.
Os TPAs usam algo que é chamado de iFrames, que essencialmente são navegadores dentro do seu site. Ou seja, quando você usa um TPA, é como se você estivesse tentando carregar um site dentro do seu próprio site - e mais, um que está fora dos limites da otimização do hospedeiro do seu site. Conclusão: TPAs podem aumentar significativamente o tempo de velocidade de carregamento do seu site.
Entretanto, é evidente que TPAs proporcionam uma grande funcionalidade. Você só precisa saber como usá-los com inteligência. Sempre se pergunte se esses aplicativos são realmente necessários para alcançar os objetivos do seu site. Há outros testes que podem ser feitos para você tomar sua decisão. Primeiro, desabilite os aplicativos um a um e veja se nota alguma diferença na velocidade do seu site. Segundo, tente identificar se há sobreposição das funções de diferentes TPAs. Por exemplo, você precisa de uma galeria de fotos e de um Feed do Instagram? Ambos vão mostrar suas fotos, só que a galeria é um elemento que o hospedeiro do seu site desenvolveu, e isso significa que o site vai carregar muito mais rápido.
Como monitorar a velocidade do seu site?
Depois que você fez todas as mudanças necessárias para fazer seu site carregar rapidinho, vai querer mensurar seus resultados. Quem tem site Wix pode verificar o desempenho com o teste de velocidade do Wix.
Para aqueles que não são usuários Wix há vários outros testes de desempenho que podem ser usados. Alguns exemplos dos mais populares são o PageSpeed Insights do Google e o Pingdom Tools. Ambos vão te mostrar a velocidade da sua página e outras informações importantes, como o motivo que está causando a lentidão no carregamento, e como melhorá-lo.
Principais lições
Entender o conceito de “perceived performance”: Também conhecido como "desempenho percebido", significa a velocidade com que os visitantes do seu site percebem o desempenho dele com base no que carrega primeiro nas suas telas. Por exemplo, se o conteúdo da sua página inicial abaixo da dobra carrega antes do conteúdo que fica acima da dobra, os visitantes vão ver uma tela em branco assim que entram em seu site. É por esse motivo que o tipo de conteúdo e sua distribuição são ambos elementos críticos.
Todo item que você adiciona ao site têm um custo no desempenho: Quando você quiser adicionar um elemento - seja texto (tamanho, estilo ou tipo), vídeo, imagem, animação ou aplicativo - pergunte-se: Vale a pena? Está alinhado com meus objetivos mais importantes? Beneficia a taxa de conversão do meu site? Basta responder “não” a apenas uma dessas perguntas para considerar retirar esse elemento, ou então não colocá-lo acima da dobra da sua página.
Não sobrecarregue sua página inicial: Em geral, essa é a primeira página do site que os visitantes vão ver, o que significa que é a primeira página a carregar. A diretiz é deixá-la limpa e clara. Quanto menos itens tiver, e quanto menos arquivos pesados forem usados, mais rapidamente a sua página vai carregar e maiores as chances dos visitantes ficarem no site.
Quer mudar para um provedor de sites otimizado para o mais alto desempenho? Crie um site com Wix hoje mesmo!
