Como deixar meu site mais rápido?

Você já deve ter acessado algum site onde tudo parece estar carregando de maneira mais demorada que o esperado. Este mal funcionamento pode arruinar as chances de determinado leitor voltar a procurar seu site.

Há muitos motivos que podem estar deixando sua página na web lenta, e esta lentidão pode ocasionar que seu cliente, leitor ou até amigo, abandone a pesquisa por conta de imagens que demorem à carregar, texto lento e desfigurado, enfim, uma tragédia.

Além do conteúdo expressado de forma clara, o rápido carregamento de seu website deve ser prioritário para o bom funcionamento do mesmo e para que ele lhe dê o retorno desejado.

Então que tal algumas dicas para otimizar seu site, torna-lo mais rápido? Em resumo, você precisa reduzir o número de requisições HTTP, este é um dos motivo para seu site estar carregando com demasiada lentidão.

Tamanho das imagens

A medida mais drástica a ser tomara, seria: Não use imagens em seu site. Já pensou?

As imagens podem deixar seu site interativo e qualificado, pois não limita seu leitor apenas ao texto. Mas cuidado, tente comprimir as imagens do site de forma que elas fiquem com qualidade aceitável em tamanho utilizável.

Tente criar padrões para as imagens de seu site: Thumbnails, imagens no corpo da mensagem, imagem de capa, imagem de tag, etc. Esta medida não impede que você crie galerias de imagens, cotando que ela não tenha 5mil imagens seja moderada e padronizada.

Outra ferramenta que pode ser sua aliada na hora de salvar as imagens em seu site, é o photoshop através da opção "save for web". (Shift+Crtl+Alt+S). Como próprio nome já diz, ela salva as imagens em qualidade boa (definida por você) e tamanho desejável.

CSS Sprite

Fazer um "Sprite" em seu site, é uma boa alternativa para acelerar o processamento de busca de imagens no seu servidor e subitamente diminuir o número de requisições ao servidor, por exemplo: As imagens utilizadas como Logo do site, botões de compartilhar em redes sociais, comentários, etc. Se toda vez que que acessada uma página em seu site, o sistema precisar buscar cada imagem separadamente no servidor, este tempo pode modificar a rapidez e eficácia de seu site.

O Sprite é usado para nestes casos, unir grupos destas pequenas imagens em uma imagem só. Fazendo assim, você determina no código qual são as dimensões da imagem que você quer buscar. Acompanhe o exemplo a abaixo:

Ex:

HTML

CSS

.facebook2 {width: 35px; height: 35px; float:left;
background: url(url_da_imagem.png) -84px -111px}

Escolhemos o botão para o Facebook2 como exemplo de um sprite no CSS. Como você pôde ver, devemos informar as dimensões para qual o trecho da imagem estamos requerendo. Neste caso, solicitamos um quadrado de 35 por 35 pixels, começando do ponto -84 da esquerda para a direita, e -111px de cima para baixo.

Em se tratando de melhorar o tempo de carregamento do seu site, esta prática pode ser determinante para o bom sucesso da nossa otimização. Use-a.

Hotlinks nas imagens

Outro problema que pode deixar seu site mais lento são os hotlinks. Mas afinal, o que é hotlink?

O site X publicou uma foto recentemente com a nominação Foto.jpeg. Então o site M inseriu em um post seu, a imagem publicada no site X, ele copiou a imagem e mesmo sem querer, linkou seu site ao site X através da imagem que acabara de copiar.

Sendo assim, quando um leitor acessa a página do site M, ele busca aquela Foto.jpeg do site X para o leitor. Estes acontecimentos freiam a rapidez do site X, que supostamente não tem nada a ver com o site M. Entendeu?

CSS em dia

O CSS é utilizado em muitos e muitos sites na web de hoje. Se você utiliza, faça uma varredura de vez em quando para que seu site esteja estilizado em sem espaços inúteis. Esta é outra opção que pode tornar seu site mais rápido, afinal, códigos desnecessários geram um trabalho também desnecessário ao seu servidor.

Estilos na cabeça, JS no rodapé

Colocando as folhas de estilo na parte superior do código, entre as tags ... , a página pode renderizar progressivamente causando uma ideia de que o site está carregando mais rápido.

Por sua vez, o JavaScript sendo colocado no rodapé da página, faz com que o esta renderização de página não seja bloqueada pela chamada dos scripts.

Utilize CDNs

Usar CDN (Content Delivery Network) ajuda na entrega mais rápida do site, com o CDN você pode ao invés de carregar 4 requisições por vez (padrão dos navegadores), carregar 8 ou 12 requisições, de que forma? Usando um subdomínio. Você utiliza este subdomínio para chamar imagens, assim o navegador vai carregar as 4 requisições do domínio principal, mais as 4 requisições do subdomínio, assim serão 8 requisições carregadas ao mesmo tempo, sua escala de carregamento praticamente dobra.

Entretanto, este recurso pode exigir um maior uso da banda de download do usuário, se ele possuir uma internet ruim, o carregamento da página pode piorar. Por isto, dose entre 4, 8 ou 12 requisições por vez, aumentando um ou dois subdomínios. A sua cascata de download é variável. O que realmente importa é que com 8 requisições por vez, você terá um bom desempenho de carregamento do site.

Estas são apenas algumas práticas que podem acelerar o carregamento de seu site, use-os de forma que seu leitor ou cliente tenha o máximo conforto ao visitar seu domínio sem deixar o layout do site sem vida e monótono. O sucesso de seu site depende do equilíbrio que você usa na hora de gerir o design e o conteúdo. Boa sorte.