Como deixar seu site mais rápido

É fato que eu um bom servidor de hospedagem de sites é essencial para garantir a qualidade e velocidade ao acesso de seu site. Mas você pode otimizar ainda mais o uso do servidor adotando algumas boas práticas de otimização de seu site, veja algumas delas.

Estes são os passos para otimizar seu site;

  1. Escolha um bom serviço de hospedagem para o seu site.
  2. Crie índices para otimizar suas consultas SQL.
  3. Utilize um serviço de cache.
  4. Utilize o cache do navegador do visitante de seu site.
  5. Utilize a compressão GZip para melhorar o carregamento de conteúdos estáticos.
  6. Teste seus códigos HTML, JS e CSS.
  7. Reduza o tamanho dos seus códigos.
  8. Otimize suas imagens.
  9. Utilize <TABLE> apenas quando necessário, prefira sempre o <DIV>
  10. Evite excesso de códigos de terceiros, use APIs.
  11. Teste a velocidade de seu site e faça novos ajustes.
  12. Teste a velocidade com o Google varre a sua página e faça novos ajustes.

Agora, vamos explicar cada tópico.

 

1. Escolha um bom serviço de hospedagem para o seu site.

O serviço de hospedagem de sites é responsável por 50% da performance do seu site. É importante saber os limites de processamento, memória e I/O que o servidor oferece, estas questões devem ser tratadas com o suporte da empresa de hospedagem antes da contratação.

Existem empresas, como a inVettor, que possuem servidores otimizados para aplicações mais pesadas e também para blogs WordPress que exigem mais recursos do servidor.

Se você tiver dúvidas se o seu atual provedor de hospedagem oferece recursos suficientes para executar as aplicações de seu site, experimente os 15 dias de testes na inVettor escolhendo um dos planos de hospedagem disponíveis.

 

 

2. Crie índices para otimizar suas consultas SQL.

Vamos começar pelo mais chato, o banco de dados é o grande vilão em vários sites que demandam grande volume de visitantes. Qualquer tabela de banco de dados pode ser otimizada com o uso de índices, os índices permitem melhorar a performance de consultas consideravelmente.

Por exemplo; se você tem uma query em seu site que busca por nome de produtos, crie um índice para o campo que armazena o nome do seus produtos na tabela, essa simples ação irá resultar em mais performance. Você pode criar seus índices usando o próprio PhpMyAdmin.

Como testar a velocidade do banco de dados.

O site http://sqlfiddle.com/ permite que você conecte as ferramentas de testes disponíveis no site ao seu banco de dados e você poderá criar várias querys para que ele possa medir a velocidade dos resultados. Para utilizar este recurso, é necessário que o acesso remoto ao seu banco de dados esteja ativado, veja aqui; http://blog.invettor.com.br/acessar-mysql-remotamente/

Usa WordPress? Saiba como otimizar o banco de dados do WordPress.

Para usuários do WordPress, o plugin WP-Optimize é uma excelente opção, capaz de melhorar a performance entre 5% a 30% dependendo do volume de dados. Após instalado, o plugin oferece as seguintes opções;

 

 

Outro plugin de performance que também atua direto no MySQL / Maria BD é o Index Autoload que cria um índice na tabela wp_options e resulta em uma melhora significativa no carregamento da página inicial do site. O plugin Index não requer nenhuma configuração especial da sua parte, basta apenas instala-lo.

Ambos os plugins podem ser utilizados simultaneamente.

 

 

3. Utilize um serviço de cache.

Serviços como do CloudFlare ou da Incapsula permite ao seu site utilizar um eficiente serviço de caching, de modo que todos os elementos mais comuns como arquivos CSS, JS e imagens sejam distribuídos em vários servidores espalhados pelo mundo tornando o carregamento destes elementos mais rápidos (também chamado de CDN), além disso, estes serviços gratuitos oferecem firewall e outros recursos para proteção de seu site.

inVettor oferece gratuitamente o serviço de configuração do CloudFlare, acione o nosso suporte para maiores informações.

 

Plugins de Cache para WordPress, funcionam?

Mas se você usa WordPress, a dica é; utilize plugins de cache apenas se você ainda não for um usuário da CloudFlare ou Incapsula e mantenha o uso do plugin apenas se notar melhora no carregamento do seu site. Você pode usar o Google PageSpeed Insights mostrado no item 11 deste artigo.

Se você notar que o plugin de cache que você escolheu não apresentou melhorias ao seu site, é recomendado remove-lo, pois eles normalmente exigem um volume de processamento e memória maior, portanto, você deve ter um bom servidor com recursos sobrando para executar um plugin de cache.

Existem vários plugins de cache para WordPress de modo que inviável afirmar qual é melhor ou pior, muitas vezes apenas testando para descobrir. O nosso favorito é o WP Fastest Cache que mostrou usar menos recursos do servidor e oferece opções simples de otimização de modo que você pode escolher o que exatamente você quer otimizar.

No Blog da inVettor, o WP Fastest Cache é usado apenas para otimizar o uso do cache do navegador, demais recursos não precisam ser otimizados pois já utilizamos o serviço de cache da CloudFlare.

 

 

4. Utilize o cache do navegador.

Este é um truque antigo. Armazenar informações na pasta temporária do navegador do visitante pode ser uma boa opção, tanto para você como para o próprio visitante.

Sobre este assunto, a inVettor preparou um artigo especial para desenvolvedores web e também para usuários do WordPress, veja aqui – Como implementar o cache do navegador para otimizar o seu site.

 

 

5. Ative a compressão GZIP em seu site.

Mas se por algum motivo CloudFlare ou Incapsula não lhe atendem como você espera, você pode optar por ativar o recurso de otimização de seu site usando compressão GZIP disponível no seu CPanel. Desta forma, todo o conteúdo do seu site será compressado e isso pode representar uma melhoria de até 70% no tamanho do conteúdos de seu site.

Em seu CPanel basta procurar pelo item Otimizar site.

otimizar-site-gzip

Para ver o volume de compactação do GZIP, acesse o site https://checkgzipcompression.com. Veja na imagem o resultado da compreensão do site da inVettor.

 

 

6. Teste seus códigos HTML, JS e CSS

Erros de código também implicam diretamente na performance do seu site, uma vez que navegador consome fatias de tempo tentando resolver os erros. Você pode analisar eventuais erros de HTML no site https://validator.w3.org/, de CSS no site http://www.css-validator.org/ e de javascript utilizando o console do navegador, normalmente pressionando o conjunto de teclas Ctrl + Shift + I .

 

 

 

7. Reduza seus códigos

Se você possui arquivos JS e CSS, verifique o que realmente é utilizado nestes arquivos, até mesmo para aqueles que desenvolvem sites usando Boostrap, apenas a inserção do bootstrap.min.css já é suficiente para a maioria dos casos.

Utilizar editores HTML também pode gerar muito lixo em seu código e isso merece uma revisão.

Outra alternativa é compressar seus códigos CSS; o site http://csscompressor.com/ oferece este serviço gratuitamente, porém, mantenha sempre uma cópia não compressada em seu computador caso necessite fazer novas edições em seus arquivos. Entenda que o excesso de espaços em branco, quebra de linhas também tomam tempo do navegador, então é sensato removê-los e a compressão faz justamente este trabalho.

O site https://jscompress.com/ também faz o mesmo trabalho, porém para arquivos JS e é claro, temos também o https://htmlcompressor.com/

 

8. Otimize suas imagens

Evite redimensionar suas imagens diretamente pelo código, embora isso seja cômodo isso gera um processamento extra no navegador e também faz com que uma imagem maior seja carregada. Softwares como Photoshop auxiliam no redimensionamento das imagens e no Photoshop, sempre prefira a opção “Save for Web & Devices” na hora de salvar qualquer imagem.

 

GIF, JPG ou PNG?

Uma dúvida cruel, mas simples. Utilize GIF apenas em animações, PNG apenas para imagens onde o fundo transparente se faz necessário e JPG para as demais, sempre com a opção progressivo ativada na hora de salvar o arquivo . Optar pelo JPG permite gerar arquivos com maior compreensão, no Photoshop por exemplo, ao salvar uma imagem JPG é possível definir a qualidade do arquivo dentro de uma escala de 1 a 12, normalmente, o valor 6 ou 8 são suficientes para gerar imagens de boa qualidade com um tamanho bem reduzido do arquivo.

 

CSS Sprite

CSS sprite é uma técnica onde pequenas imagens são agrupadas em um único arquivo, dessa forma, o navegador irá tratar apenas um arquivo ao invés de vários. Essa técnica é eficiente para ícones.

 

Você usa WordPress? Saiba como otimizar as imagens do WordPress.

O badalado plugin WP Smush sem dúvidas é o melhor de todos! Após instalado ele irá otimizar suas imagens, porém, na versão gratuita ele otimiza apenas 52 imagens por vez, mas isso não é um problema pois basta esperar terminar a primeira leva de otimizações para iniciar a segunda logo em seguida.

Outra vantagem de usar o WP Smush é que ele otimiza automaticamente todas as imagens que foram adicionadas na galeria de Mídia do WordPress.

 

9. Utilize tabelas somente quando necessário

Prefira sempre usar <DIV> ao invés de <TABLE>. Utilize tabelas somente quando necessário, por exemplo; exibir dados de uma consulta ao MySQL.

Estrutura de tabelas usam muito código e demandam tempo do navegador para processar o volume de linhas colunas.

 

10. Evite o excesso de códigos de terceiros

Usar códigos do Facebook, Google, entre outros, por incrível que pareça pode resultar na perda drástica de performance de seu site. Se você é um desenvolvedor fanático, opte por criar seus próprios códigos usando as APIs destes serviços ao invés de usar códigos prontos.

 

11. Teste a velocidade de seu site

O site webpagetest.org sem dúvidas é a melhor opção para testar o seu site, ele mostra um relatório completo de cada item carregado no seu site apontando o tempo de carregamento de cada um, e o melhor de tudo, que o site realiza 3 testes seguidos para lhe oferece uma margem ainda mais segura.

Ao analisar cada item do relatório você poderá verificar quais deles estão impactando diretamente no tempo de carregamento do seu site.

teste-de-velocidade-site

 

12. Teste a velocidade com que o Google varre a sua página.

PageSpeed Insights é uma ferramenta da Google que mostra o tempo de carregamento e o erros encontrados durante o processo, é excelente para você possa encontrar falhas no código e resolvê-los. Teste também a velocidade do carregamento em dispositivos móveis.

 

Nota 5

5 de 5

(baseado em 3 votos)

Deixe seu comentário