Práticas recomendadas e dicas de melhoria para velocidade de carregamento de sites

Quando se trata de usuários online hoje, eles querem o que querem e querem agora. Todos nós já passamos por uma situação em que um recurso online tem uma velocidade de carregamento de site muito lenta e simplesmente clicamos nele. Graças às mídias sociais, TV e todas as outras tecnologias modernas, os humanos hoje não são exatamente conhecidos por sua paciência e foco.

A velocidade é o assassino silencioso de sites. Quase metade de todos os usuários de sites espera que seu site carregue em 2 segundos ou menos. Isso pode parecer loucura, mas é verdade que mesmo alguns segundos de carregamento lento assustarão os usuários sem pensar duas vezes. A realidade é que você precisa que seu site carregue de forma adequada e rápida.

Práticas recomendadas para velocidade de carregamento de sites

Você pode não perceber como o seu site é realmente lento, a menos que teste por si mesmo. Felizmente, você pode fazer isso gratuitamente no Google PageSpeed. É uma ferramenta baseada na web para localizar seus tempos de carregamento e encontrar áreas problemáticas. Como é o tempo de carregamento do seu site? Se precisar de algum trabalho, não se preocupe. É mais fácil do que você pensa melhorar o tempo de carregamento do seu site com apenas alguns cliques. Aqui estão algumas dicas adicionais para você começar.

Use a compactação Gzip para obter melhor velocidade de carregamento do site

A compressão Gzip é uma ferramenta poderosa que reduz o tamanho da resposta em cerca de 70%, o que é impressionante. Gzip é algo que é feito por meio do seu host, então você precisará perguntar ao seu host se ele usa essa compactação em seus servidores. Com o Gzip, você reduz o tempo de resposta sem comprometer a qualidade de seus vídeos, imagens ou outros elementos.

Você pode executar um teste para ver se o seu site é GZIPPED e executar um teste de compactação Zip. Como o Gzipping funciona é reduzindo o tamanho da resposta HTTP. Em última análise, altera o peso da página.

Armazene seus arquivos em cache

Cache é quando uma versão do seu site é armazenada nos navegadores dos usuários. Dessa forma, quando eles visitarem seu site novamente, há uma versão anterior que será carregada até que a nova versão possa ser atualizada. O armazenamento em cache pode reduzir o tempo de carregamento de mais de 2 segundos para menos de 1 segundo. É um grande salto e com o qual você deve se preocupar. Felizmente, é fácil configurar o cache do seu site. Se você usa o WordPress, pode usar o plugin W3 Total Cache gratuito. O cache é uma necessidade hoje para adicionar aquele impulso extra ao desempenho de carregamento do seu site.

Além do cache do lado do servidor, você também deve habilitar o cache do navegador. Esta é essencialmente uma forma de instruir os navegadores a armazenar uma cópia de arquivos estáticos, como imagens, CSS e arquivos JS no navegador, para que os visitantes não precisem esperar que esses arquivos sejam baixados novamente quando visitarem seu site novamente. Você pode ler mais nesta coleção de informações sobre o cache do navegador do WordPress.

Atualize seu host de site

Ter o host certo para seu site pode afetar o desempenho de sua página. Você pode fazer quantas alterações quiser em seu site, mas se não notar muitas melhorias, a culpa pode ser do seu host. É tentador escolher a opção de hospedagem mais barata ao lançar seu site pela primeira vez. Embora isso possa ser bom por um tempo, você provavelmente vai superar isso se estiver hospedando muitos arquivos ou se estiver tendo um tráfego maior.

Planos mais baratos provavelmente são compartilhados, e isso significa que quaisquer problemas nos sites de seus vizinhos também afetarão os seus. Ter um servidor dedicado permite evitar qualquer um dos problemas que podem ocorrer se você estiver em um servidor compartilhado. Você também terá mais opções de atendimento ao cliente se precisar de ajuda com o tempo de resposta.

Comprar hospedagem

Verifique o tema do seu site

A forma como o seu site foi projetado também afetará a qualidade e a rapidez com que ele aparecerá para os visitantes. A troca de temas pode ser suficiente para liberar alguns segundos preciosos no tempo de carregamento do seu site.

O uso de um criador de páginas ou tema profissional garantirá que seu site não fique sobrecarregado com códigos desnecessários e confusos. É por isso que é essencial examinar mais do que apenas a estética do modelo, tema ou construtor de seu site. Além disso, considere fazer login em seu site ou aplicativo da web. O registro do site ajuda você a descobrir problemas antes que eles ocorram e pode evitar que o seu site tenha problemas. Como alternativa, você pode enviar mensagens de log diretamente com uma ferramenta como o Papertrail App.

Reduza seus arquivos Java e CSS

A maioria dos sites hoje usa muitos arquivos Javascript e CSS, e esses arquivos podem ser tratados individualmente nos navegadores dos seus usuários. Ter muitas solicitações ao mesmo tempo diminuirá a velocidade de carregamento do seu site. Se você conseguir minimizar todos esses arquivos, não adicionará tanto peso ao tempo de carregamento do seu site.

Ter seus arquivos Java e CSS carregados externamente em vez de restringir todas as páginas é uma ideia inteligente. Então, os usuários só precisam carregar os arquivos conforme eles aparecem, não sempre que alguém visita uma nova página em seu site. Não confunda os navegadores dos usuários com muitos arquivos.

Transporte sua carga pela rede

Se você está tendo alto tráfego, precisa levar sua rede a sério. Um serviço Content Delivery Network (CDN) traz os arquivos para seus usuários diretamente, usando servidores em muitas áreas geográficas diferentes. Isso significa que há menos tempo entre os locais para que seu site carregue mais rápido. O CDN mais conhecido é o Amazon CloudFront e é fácil integrá-lo ao seu site atual.

Experimente plataformas de hospedagem externa

Semelhante ao CDN, você pode hospedar seus arquivos em plataformas de hospedagem externas para evitar diminuir o tempo de carregamento. Isso é mais comum para arquivos de vídeo. Os vídeos são muito grandes e enviá-los diretamente para o seu site vai ocupar muito espaço. Eles podem facilmente ter mais de 100 MB, então não é uma jogada inteligente hospedar vídeos ou outros arquivos grandes em seu próprio servidor.

É uma ideia melhor hospedar esses arquivos externamente. YouTube e Vimeo são ótimas opções para arquivos de vídeo. A partir daí, você pode incorporar o vídeo em seu site. Economiza espaço e não diminui o tempo de carregamento. Também é muito mais fácil!

Usar o YouTube, em particular, abre seu conteúdo para um público totalmente novo. Na verdade, o YouTube é considerado um dos maiores motores de busca que existe e atrai mais de um bilhão de usuários mensais. O uso é gratuito e você pode enviar vídeos de até 15 minutos (ou mais se enviar uma solicitação). Você simplesmente não pode dar errado.

Verifique suas solicitações HTTP

O Yahoo afirma que 80% do tempo de carregamento de um site vem do download de todas as diferentes partes de uma página. Embora já tenhamos discutido as práticas recomendadas quando se trata de arquivos Java e CSS, o que acontece com todo o resto? Quanto mais elementos na página precisarem ser carregados, mais tempo demorará para que a página apareça totalmente.

Você pode verificar quantas dessas solicitações estão acontecendo acessando o seu navegador. O Google Chrome vem equipado com ferramentas de desenvolvedor que se concentram em solicitações HTTP. Para acessar essas ferramentas, clique com o botão direito do mouse em sua página no Google Chrome, clique em Inspecionar e navegue até a guia Rede.

Agora, você pode ver quanto tempo cada arquivo leva para carregar na seção “Tempo”. No canto, você também verá o número total de solicitações. Reduzir as solicitações que estão demorando mais é uma maneira fácil de acelerar o tempo de carregamento do seu site. Continue lendo para aprender a melhor maneira de combinar arquivos na próxima dica.

Combine e reduza arquivos HTML

Ao reduzir um arquivo, você elimina qualquer espaço em branco ou código desnecessário. Todas essas pequenas coisas podem não parecer significativas, mas aumentam o tempo de carregamento. O objetivo é ter arquivos HTML o mais enxutos possíveis.

Revise seu site para ver se há páginas desnecessárias que você não está usando mais. Existe algum lugar onde você possa eliminar espaços em branco ou códigos desnecessários? Por fim, combine os arquivos HTML para garantir que não esteja sobrecarregando o tempo de carregamento do seu site.

Use CSS Externo

CSS é como você inclui o estilo e os elementos de design de sua página. Seu site pode acessar um arquivo externo que carrega antes de sua página ou acessar o estilo embutido. Incluir seu CSS em seu próprio documento HTML adiciona muito código. Como dissemos antes, isso não é bom.

Em vez disso, você deve usar um CSS externo que é carregado no cabeçalho do seu HTML. Não coloque CSS em seu HTML se puder evitá-lo. Isso significa especialmente divs ou cabeçalhos. É muito mais limpo e enxuto se você usar uma folha de estilo externa. Também é muito mais fácil de editar.

Se você não tiver certeza sobre o status do seu CSS, use as ferramentas de entrega de CSS para ver como seus arquivos CSS estão empilhados. Isso permitirá que você saiba onde seu arquivo externo está localizado e se você possui algum elemento embutido em seu HTML. Quando possível, use apenas um arquivo CSS externo. Você provavelmente pode combinar arquivos se tiver mais de um.

Adie o carregamento do seu Javascript

Ao adiar um arquivo, como o JavaScript, você está garantindo que o restante do seu site seja carregado corretamente antes de carregar os elementos Java adicionais. Às vezes, adiar o java é tão simples quanto usar um plugin. Outras vezes, você precisará adicionar manualmente um script HTML para permitir que o site saiba que você deseja carregar o Java por último.

Este script pede um arquivo JavaScript externo. Há um tutorial completo aqui para adiar o seu Java. Embora não seja uma grande diferença, isso pode fazer seu papel parecer carregar mais rápido.

Reveja o seu tempo para o primeiro byte

Seu tempo para o primeiro byte (TTFB) é quanto tempo um navegador espera antes de começar a carregar seu primeiro byte de dados. De acordo com o Google, seu TTFB deve ser inferior a 200 ms. No entanto, essa é uma preocupação do lado do servidor, portanto, é fácil para mais desenvolvedores da Web ignorarem.

Quando os usuários visitam seu site, ele não começa a carregar automaticamente. Embora possa parecer um processo instantâneo, há três etapas que acontecem primeiro. Seu navegador envia uma solicitação HTTP inicial ao servidor que hospeda o site e, a partir daí, as etapas são pesquisa de DNS, processamento do servidor e resposta.

Mais uma vez, as Ferramentas do desenvolvedor do Chrome mostrarão quanto tempo esse processo leva em sua página da web. Isso também dependerá muito da força da conexão com a Internet. Uma conexão lenta tem um TTFB mais lento. Verifique seu TTFB para ter certeza de que está abaixo de 200 ms. Se não for, é hora de conversar com seu anfitrião sobre a solução certa. Você pode não ter espaço suficiente ou pode estar tendo muito tráfego.

Conteúdo acima da dobra primeiro

Às vezes, você tem páginas longas que demoram um pouco para carregar. Isso é uma realidade. No entanto, certificar-se de que as informações acima da dobra sejam carregadas primeiro pode economizar alguns visitantes. Melhore a experiência do usuário garantindo que todo o conteúdo da parte superior da página apareça rapidamente.

Esse é um processo chamado “carregamento lento” e o nome faz sentido. É como carregar lentamente para baixo na página, mas começa no topo, onde os usuários estão mais focados. Com o carregamento lento, seus usuários podem ver o conteúdo principal e aumentar a velocidade de carregamento do site sem ter que esperar o restante da página carregar. Esta é uma ótima ideia, porque imagine ter mais de 10 fotos em toda a página. Você não gostaria que seus visitantes esperassem até que todas as imagens carregassem para começar a ler.

O carregamento lento usa o jQuery.sonar para carregar apenas imagens visíveis. Existem muitos plug-ins que facilitam a adição de carregamento lento às suas páginas, mas aqui está um tutorial completo para fazer isso manualmente. Seus usuários ficarão satisfeitos por não ter mais que esperar por conteúdo acima da dobra.

Verifique os tamanhos das suas imagens

É fácil fazer upload de imagens sem verificar o tamanho do arquivo. Isso pode funcionar de vez em quando, mas pode facilmente tornar seu site mais lento se você não tomar cuidado. Ao salvar suas imagens, tente salvá-las com a opção “Salvar para web”. Isso está disponível com ferramentas como Photoshop ou Fireworks. Com “Salvar para web,” o tamanho da imagem pode ser reduzido sem perder a nitidez da imagem.

Em geral, evite tamanhos de arquivo maiores. PNG ao salvar suas fotos. Você pode verificar as propriedades da imagem para ver se elas estão chegando a tamanhos maiores. Finalmente, se você já tem imagens grandes em seu site, use um plugin ou compacte manualmente esses arquivos para melhorar a velocidade de carregamento do seu site.

Exclua extras desnecessários para melhorar a velocidade de carregamento do site

Às vezes, adicionamos coisas novas aos nossos sites e esquecemos delas. Ou mudamos para outra coisa ou não precisamos mais de uma solução anterior. Seja qual for o motivo, certifique-se de verificar seu site com frequência para ter certeza de que não está desperdiçando espaço em nada que não está usando. Isso se aplica a todos os seguintes:

• Imagens;
• Plugins;
• Elementos de navegação;
• Elementos de design;
• Páginas;
• Postagens de blog arquivadas.

Não importa o quão pequeno seja, eles afetarão negativamente a velocidade de carregamento do seu site. Além disso, eles podem criar áreas fracas na segurança do seu site, especialmente com plug-ins. Eles são facilmente danificados e isso pode diminuir sua segurança. Adquira o hábito de revisar regularmente seu site em busca de extras desatualizados.

Limite seus botões de compartilhamento social

Os botões de compartilhamento social são uma ótima maneira de incentivar o envolvimento nas redes sociais. No entanto, deve haver um limite. Esses botões às vezes são altamente eficazes. No entanto, eles também podem ser um fracasso. Podemos concordar que esses botões de compartilhamento social usam vários JavaScripts externos e tornam seu site mais lento.

O Facebook, em particular, tem sido o grande culpado disso. Os scripts do Facebook podem diminuir o desempenho do site com seus botões de compartilhamento. Considere se esses botões de compartilhamento realmente valem a pena. Você ainda pode mantê-los, mas apenas aqueles que comprovadamente têm o melhor desempenho.

Entrega Assíncrona

Falando em códigos de terceiros, há muitas coisas que podem dar errado. Se o terceiro passar por uma interrupção ou ficar mais lento de repente, sua página pode facilmente travar ao tentar carregar esse recurso, seja um botão de compartilhamento social ou um script de análise de rede.

A entrega assíncrona é a solução para essa desaceleração. Com isso habilitado, se sua rede de terceiros sofrer uma interrupção, seu próprio site não será afetado. Você pode habilitar a entrega assíncrona de várias maneiras, todas descritas aqui.

Instale o Google PageSpeed

O Google PageSpeed ​​é um módulo de servidor de código aberto que otimiza a velocidade de carregamento do seu site. Ele foi projetado pelo Google para tornar o seu site mais rápido e é fácil de usar. Basicamente, ele faz modificações diferentes nos arquivos do servidor e do site. Você não precisa fazer nada manualmente e seu site terá um desempenho melhor.

É o mais próximo de uma solução única para todos que você encontrará no que diz respeito ao desempenho do seu site. Você mesmo pode instalar o Google PageSpeed ​​em seu gerenciador de arquivos ou pode pedir ao seu host ou desenvolvedor para ajudá-lo com a instalação. Você pode configurá-lo e esquecê-lo.

Combine Imagens de Fundo

Muitos temas usam várias imagens de fundo para criar uma imagem única e completa. Embora isso possa parecer ótimo e simultâneo, pode estar reduzindo o desempenho do seu site. Como os navegadores de seus usuários precisarão fazer várias solicitações diferentes para carregar as fotos de fundo, isso agrega tempo ao processo de carregamento.

Em vez disso, combine suas imagens em uma única para aumentar a velocidade de carregamento do seu site. Dessa forma, seus usuários só precisam fazer uma única solicitação, e não muitas. Seu site ficará mais rápido, pois não há mais várias solicitações de ida e volta para que o segundo plano seja carregado corretamente.

Pare de Hotlinking de Imagens

Hotlinking é a prática de incorporar uma foto de outro site ao seu próprio sem carregá-la no servidor. Isso é simples com um pouco de código, mas é uma prática ruim que pode levar à lentidão do site, entre outras coisas.

Hotlinking não só prejudica o seu site, mas também é tecnicamente roubado se você fizer isso sem permissão. Os proprietários de sites pagam pelo espaço para hospedar esses arquivos e, quando você coloca esse mesmo arquivo em seu próprio site por meio de um código de incorporação, está pegando seus recursos sem permissão.

Embora existam alguns sites que permitem o upload de imagens diretamente com a intenção de compartilhá-las, isso ainda não é uma boa ideia. Quando esses sites estão lentos ou apresentam alto tráfego, eles podem diminuir a velocidade de carregamento do seu site se você os incorporar. Além disso, a menos que você esteja pagando pelo espaço, esses arquivos podem ser excluídos a qualquer momento sem aviso prévio.

Sim, o hotlinking pode economizar um pouco de largura de banda, mas é mais provável que deixe seu site mais lento a longo prazo. Sempre hospede suas imagens em seu próprio servidor em vez de fazer hotlinking. Em caso de dúvida, é melhor comprar mais espaço em seu próprio servidor para que você possa carregá-los. Você deve usar pequenos arquivos de imagem de qualquer maneira, então não deve ser um problema.

Aumente a velocidade de carregamento do seu site hoje mesmo

Você está pronto para levar seu site a novas alturas? É hora de aumentar a velocidade de carregamento do seu site. Se você tem uma velocidade de carregamento de site lenta, é fácil perder visitantes involuntariamente. Pense em como você se sente frustrado quando um site demora muito para carregar. Um atraso de um segundo no tempo de carregamento do site resultará em uma redução de 7% nas conversões e 11% nas visualizações de página. Não faça isso com seus usuários levando a sério as dicas acima.

Acelerar seu site não é complicado, caro ou confuso. É uma das maneiras mais simples e rápidas de melhorar seu SEO e causar um impacto positivo em seus usuários. Se você deseja que seu site funcione melhor e impressione seus usuários, vale a pena investir nas dicas acima.

Desde evitar hotlinks e links quebrados até atualizar sua hospedagem na web, até mesmo as pequenas etapas acima têm um grande impacto. Se você estiver confuso, comece testando a velocidade de carregamento do seu site. A partir daí, você terá uma boa ideia de quantas melhorias você precisa fazer para garantir que seu site esteja funcionando em seu nível de desempenho máximo. Seu site pode precisar apenas de alguns ajustes para se adequar aos padrões do Google. Seus usuários estão cansados ​​de esperar, então é hora de trabalhar.

Vetor de velocidade de carregamento de site criado por ibrandify