Importância de ter um site de carregamento rápido
Hoje em dia, ter um site de carregamento rápido é uma obrigação, tanto em termos de facilidade de uso do visitante, quanto em termos de SEO. Mas acelerar o seu site pode ser complicado. Neste artigo, mostrarei minhas dicas favoritas para melhorar a velocidade do seu site com facilidade e eficiência.
Há mais de um ano, o Google anunciou que a velocidade da página se tornou um fator de classificação para sites para celular. Portanto, ao solicitar serviços de desenvolvimento da Web , certifique-se sempre de mencionar a velocidade como um fator-chave para o seu projeto.
E, se você for um desenvolvedor, continue lendo para descobrir dicas úteis sobre como criar um site rápido ou aumentar a velocidade de carregamento de uma página existente.
Teste com as ferramentas certas
Para melhorar a velocidade do seu site, a primeira coisa que você precisa é de uma ferramenta que lhe permitirá saber com que velocidade o seu site está e o que você deve fazer para torná-lo ainda mais rápido.
Muitas ferramentas estão disponíveis. Entre eles, aqui estão os que eu trabalho:
- Google PageSpeed Insights : trazido a você pelo Google, essa ferramenta é muito útil e permite que seu website seja executado de acordo com os padrões do Google, o que é muito importante em termos de SEO.
- Pingdom : Uma ferramenta de teste de velocidade muito popular, o Pingdom oferece uma ferramenta gratuita, bem como opções pagas.
- GT Metrix : Esta ferramenta combina resultados de várias fontes, permitindo que você verifique a velocidade do seu site em profundidade.
Pense primeiro em dispositivos móveis
Atualmente, a maioria das visitas ao website é feita a partir de smartphones e outros dispositivos portáteis. Portanto, agora é sensato pensar primeiro em dispositivos móveis.
Para mais informações sobre o design da web para dispositivos móveis, confira este guia interessante Clique Aqui.
Otimize suas imagens
As imagens geralmente representam 75% do tamanho total de uma página da web. Portanto, para ter um site de carregamento rápido, é essencial que suas imagens sejam adequadamente otimizadas.
Otimizar imagens não é complicado. Se você estiver usando o Adobe Photoshop, certifique-se de usar a função Salvar para a Web e escolha o formato de arquivo apropriado para suas imagens.
.jpg deve ser usado para imagens e imagens. Use .gif se você precisar exibir uma animação ou uma imagem com poucas cores diferentes, como um logotipo. Se você precisar de transparência, .png é o formato de arquivo que você deve usar.
Para mais informações e dicas sobre otimização de imagens, sinta-se à vontade para consultar este artigo.
Manipular recursos adequadamente
Depois de imagens, ativos ( .js e .css arquivos, PDFs, etc.) são uma grande parte do tamanho total de um site. Portanto, é vital lidar com eles adequadamente.
A primeira coisa a fazer é minimizar as solicitações HTTP . Não divida seu CSS e JavaScript em vários arquivos – pelo contrário, tente usar .js um único .css arquivo e um único.
Sua velocidade de carregamento também pode ser aprimorada ao adiar o carregamento de alguns de seus ativos. JavaScript, por exemplo, é considerado um “recurso de bloqueio de analisador”. Isso significa que a análise do próprio documento HTML é bloqueada pelo JavaScript. Quando o analisador atinge uma <code><script></code> tag, seja ela interna ou externa, ela para para buscar (se for externa) e executá-lo.
Para especificar que o script deve ser executado quando a página terminar a análise, use o atributo defer , conforme mostrado abaixo:
<script src = "scripts.js" defer> </ script>
E, finalmente, certifique-se de apoucar seus .jse .css arquivos. Caso você não saiba, a minificação é o processo de remover espaços e comentários extras dos arquivos de recursos, a fim de reduzir seu tamanho. Você pode usar o Minify para fazer isso.
Use técnicas de cache para exibir suas imagens mais rapidamente
Embora isso não seja realmente uma técnica de otimização de imagem em si, o armazenamento em cache de suas imagens é, em geral, uma boa prática e exibirá suas imagens mais rapidamente para os visitantes que retornam.
Aqui está um trecho de código pronto para uso que armazenará vários tipos de arquivos (imagens e também outros tipos de documentos, como pdf ou flv). Este código deve ser colado no .htaccess arquivo do seu site . Certifique-se de ter um backup antes de aplicar essa técnica, caso algo dê errado.
# 1 ANO <FilesMatch "\. (Ico | pdf | flv) $"> Conjunto de Cabeçalhos Cache-Control "max-age = 29030400, public" </ FilesMatch> # 1 SEMANA <FilesMatch "\. (Jpg | jpeg | png | gif | swf) $"> Conjunto de Cabeçalhos Cache-Control "max-age = 604800, public" </ FilesMatch> # 2 DIAS <FilesMatch "\. (Xml | txt | css | js) $"> Conjunto de Cabeçalhos Cache-Control "max-age = 172800, proxy-revalidate" </ FilesMatch> # 1 MINUTO <FilesMatch "\. (Html | htm | php) $"> Conjunto de Cabeçalhos Cache-Control "max-age = 60, private, proxy-revalidate" </ FilesMatch>
Ficou com Dúvida
Entre em contato em nossa página clicando aqui!
