Como melhorar a velocidade da página para mais tráfego e conversões

Acelere seu site e maximize sua receita. Siga estas dicas de como melhorar a velocidade da sua página e aumentar o tráfego e as conversões.

Como melhorar a velocidade da página para mais tráfego e conversões?

Velocidade da página é um fator crítico no marketing digital hoje. Tem um impacto significativo em:

• Quanto tempo os visitantes ficam no seu site.
• Quantos deles se convertem em clientes pagantes.
• Quanto você paga com base no CPC na pesquisa paga.
• Onde você classifica na pesquisa orgânica.

Inegavelmente, a maioria dos sites tem um desempenho ruim quando se trata de velocidade da página, e isso tem um impacto negativo direto em sua receita.

Assim, há um número quase infinito de coisas que podemos passar nossos dias fazendo como profissionais de marketing digital, e nunca há tempo suficiente para fazer todas elas.

Como resultado, o segundo plano recebe algumas coisas. Por exemplo, a otimização da velocidade da página que com mais frequência adia o seu desempenho.

Isso é fácil de entender, porque a maioria das pessoas não compreende realmente a importância desses detalhes frequentemente negligenciados, para que eles não vejam o valor de investir tempo e dinheiro para melhorá-lo em alguns segundos ou menos.

Dessa maneira, o que pode parecer uma quantidade inconsequente de tempo para alguns profissionais de marketing, incluindo aqueles que se concentram apenas na otimização de mecanismos de pesquisa, provou ser monumental por dados de gigantes do setor até nossos próprios dados analíticos.

Suponho que você seja como eu e queira maximizar seus resultados e, claro, sua receita, certo? Então vamos começar a tornar seu site mais rápido que o ranho untado! (Isso é bastante visual, não é?)

1. Abandone a hospedagem na Web

Hoje em dia, todos estamos tentando economizar dinheiro, afinal, essas assinaturas de Raven, SEMrush, Moz e todas as outras ferramentas que usamos diariamente são importante incluí-las.

É quase como ter um filho extra.

Pois bem, uma maneira de muitas pessoas tentarem economizar dinheiro é escolhendo o tipo de compartilhamento barato hospedagem que amontoa o maior número possível de sites em um servidor, como um monte de palhaços empilhados em um único carro.

Claro, seu site estará disponível na maioria das vezes, como faria com a maioria dos hosts da web, mas o carregamento da página é tão lento que seus visitantes ficarão frustrados sem nunca se converter em compradores.

As pessoas querem ficar no seu site por tempo suficiente para fazer o que vieram fazer, se isso significa obter uma resposta, comprar um produto ou algum outro objetivo específico.

Se você os atrasar um pouco, é provável que eles odeiem sua experiência e saiam sem converter.

Pense assim:

A maioria das pessoas ama seus próprios filhos incondicionalmente. Mas o filho de outra pessoa gritando, jogando coisas, interrompendo a noite em um restaurante? Eles odeiam aquele garoto. É o mesmo com o seu site.

Veja também:

Estrutura Básica Do HTML
Introdução rápida sobre CSS
Introdução rápida sobre Python
Introdução rápida sobre JavaScript
JavaScript: acelere seu site Usando a Tag script

Quanta diferença realmente faz?

No tema como melhorar a velocidade da página uma pesquisa encontrou um dado interessante em relação ao carregamento da página, vejamos.

De acordo com um estudo realizado por Amazonas, uma diferença de apenas 100ms — uma unidade de tempo que um humano não consegue nem perceber, foi suficiente para reduzir suas vendas em 1%. Walmart encontrou resultados semelhantes.

Se essa pequena unidade de tempo tiver tanto impacto direto nas vendas, que tipo de impacto você acha que um segundo ou mais extra terá?

Mas isso não para por aí, porque a rapidez com que o (ou lentamente) é carregado pelo site também afeta a classificação da pesquisa orgânica e os custos de pagamento por clique.

Em outras palavras, se o seu site carregar a página lentamente, você não deve esperar que seus concorrentes que investiram nessa área crítica durmam.

Conclusão: pule a hospedagem da web com orçamento limitado. Se eles o estão vendendo como uma mercadoria (baseada principalmente no preço), também tratam seus clientes como uma mercadoria.

Existem muitos hosts da Web otimizados quanto à velocidade, principalmente para sites WordPress, e alguns deles têm preços semelhantes às opções de orçamento.

Portanto, pergunte, faça alguns testes e invista em um host que lhe dará o desempenho para satisfazer seus visitantes e o Google.

2. Reduzir chamadas HTTP

Todo arquivo necessário para uma página da Web renderizar e funcionar, como HTML, CSS, JavaScript, imagens e fontes, requer uma solicitação HTTP separada. Quanto mais solicitações forem feitas, mais lenta essa página será carregada.

Agora, se você é como a maioria das pessoas com quem converso, provavelmente está pensando em “Oh, não preciso me preocupar com isso.

Isso pode ser parcialmente verdade. Você não pode adicionar um monte de lixo inchado ao seu site, mas para 90 +% dos sites que encontro — ainda estão lá de qualquer maneira.

Esse inchaço não está lá porque a Bloat Fairy o colocou enquanto você dormia. Está lá porque a maioria dos web designers, independentemente de habilidade ou experiência, não faz da velocidade da página uma prioridade. A triste verdade é que a maioria nem sabe como.

Aqui é onde o problema começa:

Dessa forma, a maioria dos temas carrega um ou mais arquivos CSS e vários arquivos JavaScript. Alguns, como Jquery ou FontAwesome, geralmente são carregados remotamente de outro servidor, o que aumenta drasticamente o tempo que leva para carregar uma página.

Isso se torna ainda mais problemático quando você considera os arquivos CSS e JavaScript adicionais adicionados pelos plug-ins. É fácil acabar com meia dúzia ou mais de solicitações HTTP apenas de arquivos CSS e JavaScript.

Quando você considera todas as imagens em uma página, cada uma delas requer uma solicitação HTTP separada, ela fica rapidamente fora de controle.

• Mesclar arquivos JavaScript em um arquivo.
• Mesclar arquivos CSS em um arquivo.
• Reduza ou elimine plugins que carregam seus próprios arquivos JavaScript e / ou CSS. Em alguns casos, como nos Gravity Forms, você tem a opção de desativá-los de serem carregados.
• Use sprites para imagens usadas com frequência.
• Use uma fonte como FontAwesome ou Ionic Icons em vez de arquivos de imagem sempre que possível, porque apenas um arquivo precisa ser carregado.

3. Inclua a barra de fuga

A omissão da barra final nos links que apontam para o seu site, seja de fontes externas ou de dentro do seu próprio site, tem um impacto adverso no tema como melhorar a velocidade da página.

Veja como:

Quando você visita um URL sem a barra final, o servidor da web procura um arquivo com esse nome. Se não encontrar um arquivo com esse nome, ele o tratará como um diretório e procurará o arquivo padrão nesse diretório.

Em outras palavras, ao omitir a barra final, você está forçando o servidor a executar um redirecionamento 301 desnecessário.

Embora possa parecer instantâneo para você, leva um pouco mais de tempo e, como já estabelecemos, cada pedacinho se soma.

https://example.com (isso é ruim)

ou

https://example.com/services (isso também é ruim)

vs.

https://example.com/ (isso é bom)

ou

https://example.com/services/ (isso também é bom)

4. Ativar compactação

A ativação da compactação GZIP pode reduzir significativamente a quantidade de tempo necessária para baixar seus arquivos HTML, CSS e JavaScript, porque eles são baixados como arquivos compactados muito menores, que são descompactados quando chegam ao navegador.

Não se preocupe —, seus visitantes não precisarão fazer nada extra, porque todos os navegadores modernos suportam o GZIP e o processam automaticamente para todas as solicitações HTTP.

5. Ativar cache do navegador

Com o cache do navegador ativado, os elementos de uma página da web são armazenados no navegador’ dos visitantes, para a próxima vez que visitarem o site ou quando visitarem outra página, o navegador pode carregar a página sem precisar enviar outra solicitação HTTP ao servidor para qualquer um dos elementos em cache.

Depois que a primeira página é carregada e seus elementos são armazenados no cache do usuário, apenas novos elementos precisam ser baixados nas páginas subsequentes. Isso pode reduzir drasticamente o número de arquivos que precisam ser baixados durante uma sessão de navegação típica.

6. Minify Resources

Minificar seus arquivos CSS e JavaScript remove espaço em branco e comentários desnecessários para reduzir o tamanho do arquivo e, como resultado, o tempo necessário para baixá-los.

Felizmente, isso não precisa ser um processo manual, porque existem várias ferramentas disponíveis on-line para converter um arquivo em uma versão menor e minificada.

Além disso, existem também vários plugins disponíveis para o WordPress que substituirão os links no chefe do site pelos arquivos CSS e JavaScript regulares por uma versão minificada deles sem modificar seus arquivos originais, incluindo plugins de cache populares, como:

• Cache total W3
• WP Super Cache
• WP Rocket

Pode ser necessário um pouco de esforço para obter as configurações corretas, pois a minificação geralmente pode quebrar o CSS e o JavaScript; portanto, depois de extrair tudo, não deixe de testar seu site completamente.

7. Priorizar o conteúdo acima da dobra

Seu site pode aparecer para o visitante carregar mais rapidamente se for codificado para priorizar o conteúdo acima da dobra — em outras palavras, o conteúdo visível antes que um visitante role.

Isso significa garantir que todos os elementos que aparecem acima da dobra também estejam próximos do início do código HTML, para que o navegador possa fazer o download e renderizá-los primeiro.

Também é fundamental incluir qualquer CSS e JavaScript necessários para tornar essa área embutida, e não em um arquivo CSS externo.

8. Otimizar arquivos de mídia

Dessa forma, como os dispositivos móveis com câmeras de alta qualidade são comuns e os modernos sistemas de gerenciamento de conteúdo, como o WordPress, tornam conveniente o upload de imagens, muitas pessoas simplesmente tiram uma foto e a carregam sem perceber que, muitas vezes, a imagem é pelo menos quatro vezes maior do que o necessário.

Isso atrasa consideravelmente o seu site —, especialmente para usuários móveis.

A otimização dos arquivos de mídia em seu site tem o potencial de melhorar tremendamente a velocidade da página, e isso é relativamente fácil, por isso é um bom investimento do seu tempo.

Otimizando imagens

• Opte pelo formato ideal. O JPG é perfeito para imagens fotográficas, enquanto o GIF ou PNG é melhor para imagens com grandes áreas de cor sólida. Os arquivos PNG de 8 bits são para imagens sem um canal alfa (fundo transparente) e os arquivos de 24 bits são para imagens com um canal alfa.
• Verifique se as imagens são dimensionadas corretamente. Se uma imagem for exibida com 800 pixels de largura no seu site, não haverá benefício em usar uma imagem de 1600 pixels de largura.
• Comprima o arquivo de imagem. Além de ser o principal programa de edição de imagens, o Adobe Photoshop possui incríveis recursos de compactação de imagem e começa em $ 9,99 / mês. Você também pode usar plugins gratuitos do WordPress –, como WWW Image Optimizer, Imsanidade, e TinyJPG – que compactam automaticamente imagens carregadas.

Otimizando vídeo

• Escolha o formato ideal. O MP4 é melhor na maioria dos casos porque produz o menor tamanho de arquivo.
• Sirva o tamanho ideal ( dimensões ) com base no tamanho da tela dos visitantes ’.
• Elimine a faixa de áudio quando o vídeo está em segundo plano como um elemento de design.
• Comprima o arquivo de vídeo. Uso o Adobe Premiere na maioria das vezes, mas o Camtasia também é uma escolha sólida.
• Reduza a duração do vídeo.
• Considere o upload de vídeos para o YouTube ou Vimeo em vez de atendê-los localmente e use seu código de incorporação iframe.

Você não deve parar por aí, porque isso apenas arranha a superfície.

Pois bem, para otimizar verdadeiramente a mídia em seu site, você precisa servir as imagens de tamanho adequado com base no tamanho da tela, em vez de simplesmente redimensioná-las.

Existem duas maneiras de lidar com isso, com base na implementação de uma imagem.

• As imagens no HTML do seu site usam o src set com vinculo, que permite ao navegador selecionar, baixar, e exiba a imagem apropriada com base no tamanho da tela do dispositivo que um visitante está usando.
• As imagens via CSS – normalmente como imagens de fundo podem ser veiculadas usando consultas de mídia para selecionar a imagem apropriada com base no tamanho da tela do dispositivo que um visitante usa.

9. Utilizar cache e CDNs

O cache permite que seu servidor da web armazene uma cópia estática de suas páginas da web para que possam ser entregues mais rapidamente ao navegador de um visitante, enquanto uma CDN permite que essas cópias sejam distribuídas para servidores em todo o mundo, para que o navegador de um visitante possa baixá-las do servidor mais próximo de sua localização. Isso melhora drasticamente o tema de como melhorar a velocidade da página.

Então é isso pessoal, espero ter ajudado de alguma forma. Não pare de estudar e continue navegando no nosso site que tem mais conteúdo como esse. Bons estudos e até a próximo.

Veja o primeiro artigo do Roadmap: Passo a passo de como funciona a internet

Conclusão

Você percebeu nesse artigo que ter em mente a resposta da pergunta: como melhorar a velocidade da página, atrás uma série de soluções e problema quando o carregamento é muito lento.

Então você sempre der uma atenção a velocidade para não perde cliente e por conseguinte perder vendas.

Afim, bons estudos, espero ter ajudado e até o próximo artigo.

Perguntas frequentes