Como deixar seu site mais rápido


É fato que eu um bom servidor é 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.

1. Crie índices para otimizar suas consultas MySQL.

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.

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; https://blog.invettor.com.br/acessar-mysql-remotamente/

2. 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.

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

3. Ative o GZIP.

Mas se por algum motivo CloudFlare ou Incapsula não lhe atendem como você espera, você pode optar por ativar o recurso de 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é 80% 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.

 

3. 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 .

 

4. 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/

5. 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.

6. 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.

7. 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.

8. 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

9. 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