Como deixar seu site mais rápido

Existem diversos pontos que devem ser levados em consideração no desenvolvimento de um website, sendo um dos mais importantes o tempo de carregamento. Mesmo com o aumento do uso da banda larga e da velocidade das conexões em dispositivos móveis, as pessoas não gostam de esperar mais que oito segundos. Quando não são atendidos, buscam em outros sites o que procuram. Existem também outros dois fatores que forçam a otimização de sites: posicionamento no Google e o crescente do uso de redes de dados móveis, como os smartphones e tablets.

site_rapido_lento

Veja algumas ferramentas online que avaliam a velocidade de um site e dicas a respeito de como deixar seu site mais rápido:

Oferece teste de ping on-line gratuito rápido de vários locais em todo o mundo. Geralmente o site pode ter um tempo de carregamento menor quando o cliente está mais próximo do servidor, e vice-versa. Se a maioria dos seus usuários (isso dá para descobrir pelo Google Analytics) está no Brasil, é importante que o servidor esteja no país ou em algum lugar da América. Veja no final do post alguns links para ajudar a saber o IP do seu site, localização geográfica do servidor, as rotas feitas a partir de diferentes cidades do mundo, etc.

Avaliam individualmente os elementos que fazem parte do site, oferecendo recomendações e dando prioridades.

Avalia diversos pontos de rapidez e acessibilidade do site, tanto para celular como desktop. Também alterações a serem efetuadas e como realizá-las. Dentre os pedidos mais comuns, estão:

- Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda

Centralize todas as suas funções JavaScript que não são usadas pelo documento antes do evento onload em um arquivo JS separado e os códigos CSS em outro arquivo separado, permitindo uma agilidade maior no carregamento. Se o código for pequeno, prefira colocá-lo diretamente no arquivo da página. Por fim, para evitar que o JavaScript bloqueie o carregamento da página, faça o carregamento dos scripts de forma assíncrona através da seguinte tag (sem as barras invertidas):

<\script async defer src="meu-arquivo.js"><\/script>

Evite também conteúdos em Flash ou Quicktime que rodem automaticamente quando a página é carregada - deixe que iniciem apenas quando o botão Play é pressionado. Algumas definições e dicas de plugin estão no site Seo Hacker.

- Compactar CSS, HTML e JS

Reduza o tamanho do seu código removendo os espaços em branco. Remova-os manualmente ou utilize alguns programas específicos para compactação que funcionam online, como por exemplo, o CleanCSS que otimiza o seu código CSS e o YUI Compressor desenvolvido pela Yahoo! Developer Network para a redução do código javascript. Evite páginas com muito conteúdo HTML, dividindo-o em páginas menores e linkando-as entre si. Widgets, tabelas e códigos desnecessários devem ser evitados, assim como um design muito pesado.

- Otimizar imagens

Existem formas de reduzir o tamanho dos arquivos de imagens sem afetar significativamente a qualidade visual. Geralmente a visualização da imagem na página exige poucos pixeis, sendo desnecessário um arquivo muito grande. É possível executar a otimização básica em qualquer programa de edição de imagens, como o GIMP, ou também utilizar ferramentas específicas para a compactação, como jpegoptim e o OptiPNG (instaláveis através do "apt-get" no Linux). Veja mais no link Edição de imagens no Linux.

Use GIFs/PNGs para imagens muito pequenas ou simples e JPGs para todas as imagens com estilo fotográfico - não use BMPs ou TIFF. Também não use muitas figuras em uma só página. Defina as dimensões da imagem no código HTML: coloque largura (width) e altura (height) das imagens para que o browser identifique esta informação mais rapidamente. Uma técnica, conhecida como CSS Sprite, agrupa várias imagens em uma única imagem e depois a manipula através do CSS.

- Aproveitar cache do navegador

Consiste em definir uma data de validade nos cabeçalhos de HTTP para recursos estáticos, instruindo o navegador a carregar os recursos baixados anteriormente a partir do disco local, não através da rede. Uma forma comum de fazer isso é usar as Meta Tags Expires, Pragma e Cache-control no cabeçalho do documento ou gerá-las com o PHP - veja exemplo a seguir:

<meta http-equiv="expires" content="Tue, 05 Jan 2013 12:12:12 GMT">
<meta http-equiv="cache-control" content="public" /> <!-- reconhecida pelo HTTP 1.1 -->
<meta http-equiv="Pragma" content="public"> <!-- reconhecida por todas as versões do HTTP -->
header("Expires: " . date(DATE_RFC822,strtotime("30 day")));
header("Cache-Control: private, max-age=10800, pre-check=10800");
header("Pragma: private");

Uma forma melhor seria através da edição do arquivo .htaccess em servidores Linux (veja tópico mais abaixo). Por exemplo, define-se arquivos estáticos para o cache por 24 horas da seguinte forma:

<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|js|css|pdf)$">
Header set Cache-Control "max-age=28800"
</FilesMatch>

Veja mais opções de Como aproveitar o cache do navegador clicando no link.

- Ativar compactação e Priorizar o conteúdo visível

Muitos servidores compactam arquivos no formato gzip antes de enviá-los para download, seja chamando um módulo de terceiros ou utilizando rotinas incorporadas. Isso pode reduzir a quantidade de tempo exigida para fazer o download dos recursos necessários para processar o site. Para ativá-la, use o mod_deflate no Apache ou o HttpGzipModule no Nginx. Para ativar a compressão de dados usando o Gzip, edite o arquivo .htaccess - veja o que deve ser configurado programa/biblioteca que utiliza o algoritmo deflate clicando no link. Caso o PHP tenha habilitado o Zlib Compression (geralmente aparece como opção no CPanel em alguns serviços de hospedagem), é possível utilizar essa forma de compactação incluindo as duas linhas no arquivo header.php antes do HTML (veja também no link anterior).

- Evitar redirecionamentos da página de destino

Os redirecionamentos desencadeiam um ciclo adicional de solicitação-resposta HTTP e adicionam tempo de latência no envio de dados.

- Reduzir o tempo de resposta do servidor

Aparece quando o tempo de resposta do servidor é superior a 200 ms. Existem vários fatores que podem influenciar nisso, como lógica lenta do aplicativo, consultas lentas ao banco de dados, falta de recursos do CPU e até localização do servidor. Escolha um bom servidor de hospedagem de sites que disponha de hardware adequado e infraestrutura de rede e energia corretas.

Arquivo htaccess

Os arquivos ASCII "htaccess" servem de orientação/leitura pelo servidor Apache nas hospedagens da plataforma Linux. Um arquivo, contendo uma ou mais diretrizes de configurações, é colocado em um diretório em particular, e as diretrizes se aplicam para aquele diretório e todos os seu subdiretórios subsequentes. Devem ser usados em casos onde os provedores de conteúdo do site precisem fazer mudanças na configuração do servidor por diretório, mas não tem acesso root ao sistema do servidor. ".htaccess" é a extensão do arquivo, e por começar por ponto, permanece oculto em listagens comuns de arquivos.

Talvez seja necessário mudar as permissões do arquivo usando CHMOD para 644 ou (RW- R-- R--), permitindo que o arquivo seja utilizável pelo servidor, mas impede que ele seja editável/executável por um navegador e comprometer seriamente a sua segurança. Incluindo/editando linhas específicas, é possível definir permissões de acesso e autenticação de páginas e diretórios, bloquear usuários por IP, redirecionamento, controlar como o servidor irá reagir quando uma página web não é especificada (listagem de arquivos), respostas de erros customizadas (muda a página a ser mostrada quando um erro ocorre no lado do servidor, por exemplo HTTP 404 Not Found), cache control, etc.

Veja mais sobre o Apache e gerenciamento de acesso e sobre o arquivo htaccess na documentação do Apache clicando nos respectivos links.

Principais erros HTTP do Apache

Principais erros HTTP do Apache

Para finalizar, mais alguns links interessantes:

Compartilhe o link desse texto, mas se for copiar algum trecho, cite a fonte. Valorize nosso trabalho.
Mais informações na licença de uso do site.
  • Ótimo post!
    Bem útil pra mim. =)

    • Vinicius

      Que bom que ajudou, essa é a ideia 🙂 E o Google também quer uma internet mais rápida, pra levar adiante os planos de conquistar o … digo, os planos dela 😛