1. Adie o carregamento de conteúdo quando possível

Ajax nos permite construir páginas da web que podem ser atualizadas de forma assíncrona a qualquer momento. Isso significa que, em vez de recarregar uma página inteira quando um usuário executa uma ação, podemos simplesmente atualizar partes dessa página. Podemos usar uma galeria de imagens como exemplo.

Os arquivos de imagem são grandes e pesados; eles podem diminuir a velocidade de carregamento de páginas da web. Em vez de carregar todas as imagens quando um usuário visita a página da Web pela primeira vez, podemos apenas exibir miniaturas das imagens e, quando o usuário clicar nelas, podemos solicitar de forma assíncrona as imagens em tamanho real do servidor e atualizar a página. Dessa forma, se um usuário quiser apenas ver algumas fotos, ele não terá que sofrer esperando o download de todas as fotos.

Esse padrão de desenvolvimento é chamado de carregamento lento . Bibliotecas de desenvolvimento Ajax/web como jQuery, Prototype e MooTools podem facilitar a implementação do carregamento de conteúdo adiado.

2. Use arquivos JS e CSS externos

Quando o usuário carrega sua página da web pela primeira vez, o navegador armazenará em cache recursos externos, como arquivos CSS e JavaScript. Assim, em vez de arquivos JavaScript e CSS embutidos, é melhor colocá-los em arquivos externos. O uso de CSS embutido também aumenta o tempo de renderização de uma página da Web; ter tudo definido em seu arquivo CSS principal permite que o navegador trabalhe menos na renderização da página, pois já conhece todas as regras de estilo que precisa aplicar.

Como bônus, o uso de arquivos JavaScript e CSS externos facilita a manutenção do site porque você só precisa manter arquivos globais em vez de códigos espalhados em várias páginas da web.

3. Use sistemas de cache

Se você achar que seu site está se conectando ao seu banco de dados para criar o mesmo conteúdo, é hora de começar a usar um sistema de cache. Ao ter um sistema de cache, seu site terá que criar o conteúdo apenas uma vez, em vez de criar o conteúdo toda vez que a página for visitada por seus usuários. Não se preocupe, os sistemas de armazenamento em cache atualizam periodicamente seus caches dependendo de como você o configura – para que até mesmo páginas da Web em constante mudança (como uma postagem de blog com comentários) possam ser armazenadas em cache.

Sistemas populares de gerenciamento de conteúdo, como WordPress e Drupal, terão recursos de cache estático que convertem páginas geradas dinamicamente em arquivos HTML estáticos para reduzir o processamento desnecessário do servidor. Para WordPress, confira o WP Super Cache (um dos seis plugins críticos do WordPress que o Six Revisions instalou). Drupal tem um recurso de cache de página no núcleo.

Existem também sistemas de cache de banco de dados e scripts do lado do servidor que você pode instalar em seu servidor web (se você tiver a capacidade de fazê-lo). Por exemplo, o PHP tem extensões chamadas aceleradores PHP que otimizam o desempenho por meio de cache e vários outros métodos; um exemplo de acelerador PHP é o APC . O cache de banco de dados melhora o desempenho e a escalabilidade de seus aplicativos da Web, reduzindo o trabalho associado aos processos de leitura/gravação/acesso ao banco de dados; O memcached , por exemplo, armazena em cache as consultas de banco de dados usadas com frequência.

4. Evite redimensionar imagens em HTML

Se uma imagem é originalmente de 1280x900px de dimensão, mas você precisa ter 400x280px, você deve redimensionar e salvar novamente a imagem usando um editor de imagem como o Photoshop em vez de usar HTML widthe heightatributos (ie <img width=”400″ height=”280″ src=”myimage.jpg” />). Isso ocorre porque, naturalmente, uma imagem grande sempre será maior em tamanho de arquivo do que uma imagem menor.

Em vez de redimensionar uma imagem usando HTML, redimensione-a usando um editor de imagens como o Photoshop e salve-a como um novo arquivo.

5. Pare de usar imagens para exibir texto

Não apenas o texto em uma imagem se torna inacessível para leitores de tela e completamente inútil para SEO , mas o uso de imagens para exibir texto também aumenta o tempo de carregamento de suas páginas da web, porque mais imagens significam uma página da web mais pesada. Se você precisar usar muitas fontes personalizadas em seu site, saiba mais sobre CSS @font-face para exibir texto com fontes personalizadas com mais eficiência. Escusado será dizer que você precisa determinar se a exibição de arquivos de fonte seria mais ideal do que a exibição de imagens.