12 dicas para acelerar seu site

[PamCotton]

Você já trabalhou em um site de ótima aparência que não consegue gerar leads ou atingir os resultados de negócios que você esperava? Em caso afirmativo, aqui está minha próxima pergunta: Quanto tempo leva para um smartphone médio carregar suas páginas?

Essa é uma questão importante ao avaliar os problemas, porque as páginas lentas são um dos principais obstáculos para um site que converte, e a maioria do tráfego da web agora é proveniente de dispositivos móveis. Problemas comuns que têm pouco ou nenhum impacto nas conexões wi-fi residenciais podem causar grandes problemas de carregamento no celular.

De acordo com a pesquisa do Google e da SOASTA, se uma página leva mais de 6 segundos para carregar, a taxa de rejeição aumentará em mais de 100% e a probabilidade de conversões diminuirá em 95%.

Além disso, se o SEO é importante para você (e deveria ser), lembre-se de que o Google considera a velocidade do site um dos muitos fatores essenciais para determinar as classificações. Os sites que carregam mais rápido tendem a ter uma classificação melhor. Essa métrica tornou-se especialmente proeminente quando o Google introduziu o “Índice que prioriza o celular” alguns anos atrás.

Sites lentos não são apenas frustrantes para os usuários, mas também ruins para os negócios. Então, o que você deve fazer a respeito? Aqui estão alguns dos principais problemas que afetam as velocidades de carregamento e 12 dicas para otimizar seu site com o mínimo esforço possível.

Observação : se você hospedar seu site no CMS da HubSpot, muitas dessas otimizações serão tratadas para você automaticamente. Saiba como a HubSpot ajuda a acelerar o seu site nesta postagem.

Principais problemas que afetam a velocidade da página e o que fazer a respeito:

Imagens de grandes dimensões
Carregar fotos otimizadas e amigáveis para a web é a primeira etapa para obter um site de alto desempenho. Imagens grandes afetam substancialmente o tamanho da página, o que torna tudo mais lento. A prática recomendada é encontrar o meio-termo certo entre o tamanho e a qualidade da imagem, aproveitando os seguintes elementos:

Compressão
Uma boa compactação de imagem tornará as imagens mais claras e amigáveis para a web. Em muitos casos, as fotos com qualidade de impressão de alta resolução não ficam melhores em sites, porque as telas HD padrão exibem gráficos com uma densidade de pixel menor do que você imprime. Dê uma olhada nas duas imagens abaixo como exemplo. A imagem da esquerda tinha 197 KB no upload, enquanto a imagem da direita tinha 70 KB (65% menor). Você pode ver alguma diferença entre os dois? Eu não posso.

Dica nº 1: certifique-se de que todos os arquivos de imagem tenham menos de 150 KB. Você pode compactar uma imagem usando “Salvar para a Web” no Photoshop ou uma ferramenta de compactação online, como tinyjpg e compressor.io.

Dimensionamento
Tente manter as dimensões da imagem próximas ao tamanho necessário para a tela de um laptop HD padrão. É um mau hábito fazer upload de imagens grandes e redimensioná-las com CSS, porque as regras de CSS não recortam imagens nem reduzem o tamanho do arquivo. Por exemplo, encontrei 4000 x 4000 imagens que foram exibidas em uma caixa de 400 x 400 com regras CSS. Não é legal.

Dica nº 2: exporte suas imagens no tamanho em que aparecerão em seu site. Use uma tela HD padrão como referência para encontrar as especificações certas para a sua imagem.

Formato
É importante escolher o formato certo para suas imagens. Em muitos casos, um JPG pode ser a melhor escolha, mas nem sempre. Considere estas recomendações ao selecionar formatos:

JPG é melhor para fotos, capturas de tela e outros recursos semelhantes.
PNG é bom para fotos com alto nível de detalhes e transparência, mas também é adequado para logotipos e imagens planas.
GIF é o formato padrão para animações.
O SVG pode ser usado para logotipos e planos de fundo grandes.
WebP tem um tamanho de arquivo menor do que a maioria dos formatos de bitmap e oferece suporte a transparência. (HubSpot CMS aprimora automaticamente imagens de PNG e JPG para WebP para navegadores que o suportam.)

Dica nº 3: certifique-se de selecionar o melhor formato de imagem para cada caso de uso específico.

Cache de recursos
Cada vez que seu navegador renderiza uma página, ele deve baixar todo o conteúdo necessário para exibir as coisas corretamente. Isso inclui arquivos HTML, CSS e JavaScript, além de qualquer imagem / vídeo em uma página. Baixar todos esses ativos sempre que um usuário visita uma página pode resultar em uma experiência frustrante e afetar seriamente a velocidade do site.

Felizmente, os navegadores da web podem salvar o conteúdo das páginas que você visitou em uma pasta local chamada cache e recuperá-lo quando necessário. Isso melhora significativamente o tempo de carregamento da página para usuários recorrentes, porque eles não precisam baixar o mesmo conteúdo novamente. Você pode gerenciar o cache do seu site e por quanto tempo os recursos devem ser armazenados no cache do navegador por meio de um arquivo chamado .htaccess, que está no diretório raiz do seu site.

Mas o cache não está disponível apenas para navegadores, você também pode aproveitá-lo no lado do servidor. Basicamente, isso significa que seu servidor tem uma versão em cache de sua página e pode recuperar dados mais rapidamente. Isso é recomendado principalmente para sites de alto tráfego.

Dica nº 4: seja agressivo ao configurar o cache do navegador. Você pode aproveitar a expiração de até 1 ano para recursos estáticos, como imagens. Este artigo útil explica como configurar o cache corretamente.

Compressão de código
Um navegador deve ler cada linha de código para exibir totalmente uma página. Práticas de codificação inadequadas podem afetar negativamente vários fatores de experiência do usuário, incluindo o tempo de carregamento da página. O Pagespeed Insights do Google mostram as melhores práticas de codificação para evitar problemas de velocidade do site, incluindo:

Minificando arquivos codificados
Minimizar arquivos HTML, CSS e JavaScript ajuda a evitar atrasos na renderização. Esse processo remove ou simplifica o código desnecessário, incluindo comentários, espaços em branco, recuo e regras desnecessárias. Vários arquivos CSS ou JavaScript também podem ser combinados em um único arquivo, que é mais rápido para o download dos navegadores. A imagem abaixo mostra uma comparação entre CSS não compactado e minimizado.

Dica nº 5: reduza os arquivos CSS, HTML e JavaScript. Você pode usar várias ferramentas online gratuitas para reduzir o código, como CSS Compressor e JS Compress.

Compressão Gzip
Junto com a minimização, também é bom ter a compactação Gzip habilitada em seu servidor. Gzip é um formato de arquivo e uma maneira de compactar arquivos em um servidor da web, tornando-os muito menores. Basicamente, o Gzip otimiza a entrega de HTML, CSS e JavaScript, pois compacta os arquivos antes de enviá-los aos navegadores. Este procedimento pode reduzir os dados para download em até 70%. Da mesma forma que o cache, a compactação Gzip é gerenciada por meio de arquivos .htaccess.

Dica # 6: certifique-se de que o seu servidor web tenha a compactação Gzip habilitada (você pode verificar aqui). Se não estiver habilitado, edite seu arquivo .htaccess ou fale com seu provedor de hospedagem.

Render Blocking Elements
Falando sobre maus hábitos, outro é entregar CSS e JavaScript como elementos de bloqueio de renderização. Literalmente, um elemento de bloqueio de renderização (ou bloqueio de analisador) é um script ou uma folha de estilo que impede que sua página seja renderizada visualmente até que o recurso seja totalmente baixado.

O uso intenso deles afeta a velocidade do site, pois você verá uma página "em branco" enquanto o conteúdo carrega ou meia página, dependendo de onde for colocado. Embora alguns arquivos precisem ser bloqueadores de renderização (como a folha de estilo principal), a maioria dos ativos pode ser transformada em elementos de bloqueio sem renderização. Existem duas técnicas diferentes para conseguir isso:

1) Carregamento assíncrono
(Para arquivos .js) Mudar a execução do JavaScript de "sync" para "async" significa que esses arquivos podem ser lidos juntos e não afetam a análise do código. (Você pode ler este guia para referência futura.)

2) Carregamento adiado (para .css e .js)
Você também pode obter uma melhoria de velocidade adiando o carregamento de Javascript e CSS, o que reduz o tempo de carregamento inicial da página. Isso pode ser feito colocando seus scripts e referências de folha de estilo na parte inferior do documento HTML, logo antes de </body>. Além disso, você também pode adiar a execução de alguns scripts em um arquivo externo a ser chamado depois que sua página for totalmente renderizada. (Leia este guia para referências adicionais)

Dica nº 7: evite o uso pesado de scripts e adie a execução do Javascript ou use o carregamento assíncrono. Se sua página tiver muitos scripts, você pode remover alguns deles de sua versão móvel ou substituí-los por conteúdo estático.

Tempo de resposta do servidor
E se você seguisse todas as diretrizes para criar um site rápido, mas o download das páginas ainda demorasse? A resposta pode ser o tempo para o primeiro byte (TTFB). Esta é uma métrica importante que mede a capacidade de resposta do seu servidor web. Tecnicamente, ele representa o tempo desde o momento em que o navegador de um usuário faz uma solicitação HTTP até o momento em que o servidor retorna o primeiro byte de dados.

Assim que o navegador receber o primeiro byte, ele pode iniciar o download de ativos. Quanto mais tempo o servidor demorar para responder, mais tarde uma página começará a ser exibida. De acordo com o Web Page Test e outras ferramentas de teste populares, um bom TTFB não deve exceder 0,5s em média. Lembre-se de monitorar sempre seu TTFB. Você pode encontrar várias ferramentas online para testá-lo, como bytecheck.

Dica # 8: mantenha seu TTFB em torno de 0,5 segundos. Se o tempo para o primeiro byte do seu site for superior a 1 segundo, investigue o motivo com o seu provedor de hospedagem ou considere mudar os planos de hospedagem.

IP compartilhado
Muitos planos básicos de hospedagem usam IP compartilhado. Isso significa que um endereço IP é usado por mais de um site no mesmo servidor da web, gerando atrasos conforme o servidor recupera o site correto para mostrar. Existem duas maneiras de evitar isso:

Comprar um endereço IP dedicado para que o IP corresponda ao seu site
Hospede seu site em um CDN (Content Delivery Network).

Dica # 9: obtenha um IP dedicado e mova seu site em um CDN. O ROI geralmente justifica o custo extra.

Cadeias Redirecionais
Uma cadeia de redirecionamento é um link que inicia vários redirecionamentos 301 para chegar à página ativa real que foi movida várias vezes. Às vezes, isso também pode gerar um loop que impede o navegador de encontrar o caminho. Amplamente reconhecido como um problema para SEO, pois afeta a equidade do link, isso também afeta o carregamento da página, enviando várias solicitações HTTP / HTTPS. O resultado será semelhante a um TTFB lento, com uma tela em branco que dura segundos antes de a página começar a carregar.

Dica # 10: consertar cadeias de redirecionamento. A melhor maneira de consertar uma cadeia de redirecionamento é vincular a fonte original ao último ponto da cadeia. O BFO pode fornecer uma lista de cadeias de redirecionamento como parte de sua auditoria completa de SEO.

Algumas considerações finais
Construir um site de classe mundial não é um caso único. A velocidade de carregamento de sua página pode mudar com o tempo, conforme atualizações adicionais são feitas e novo conteúdo é adicionado. É por isso que é muito importante monitorar e melhorar continuamente o desempenho do seu site.

Dica nº 11: mantenha o tempo de carregamento da página em menos de 5 segundos. Teste. Teste. Teste. Verifique o tempo de carregamento de sua página periodicamente usando uma das muitas ferramentas da web. Você pode começar com o PageSpeed ​​Insights ou GTMetrix.

Conforme mencionado no início deste post, mais pessoas estão usando dispositivos móveis para acessar a web do que nunca. Otimizar seu site especificamente para dispositivos móveis é fundamental, e as Accelerated-Mobile Pages (AMP) são uma ótima maneira de fazer isso. Essas páginas são versões simplificadas do seu site com HTML simples e pouco CSS que carregam quase instantaneamente.

Dica nº 12: experimente AMP se ainda não tiver feito isso, especialmente para publicar seções do seu site, como o seu blog.

Com essas 12 dicas, vocês estão prontos para construir um site muito rápido. Lembre-se de que, se você hospedar seu site no CMS da HubSpot, lidaremos automaticamente com muitas dessas otimizações para você.

Saiba mais sobre como a HubSpot ajuda a tornar seu site o mais rápido possível nesta postagem. Mais dicas para otimizar a velocidade de seu site podem ser encontradas em nosso guia de velocidade. Que comece a corrida!

[danilomota]

Muito boas as dicas e eu sempre busco essas melhorias, principalmente de imagens para telas pequenas. Eu fiz o teste do meu site aqui no GTMetrix e fiquei feliz com o resultado. Segue aí na imagem.

[PamCotton]

Olá @danilomota ! Que legal!

Muito obrigada por compartilhar conosco sobre!

Pam