Reduza agora o peso de páginas web: Métodos básicos


Obesidade não é um problema que afeta apenas pessoas. As páginas web também engordaram e muito de uns anos para cá. No final de 2013, uma página média tinha impressionantes 1,7MB e realizava absurdas 96 requisições HTTP, um exagero sustentado pela difusão da banda larga, mas oneroso em uma época de acesso móvel limitado onde o usuário paga por dados transferidos.

O resultado desta epidemia de páginas colossais é:

  1. Quanto maior o tamanho, maior a demora na experiência, maior o tempo de download e menor a paciência do usuário. Se o visitante não estiver navegando em alta velocidade, ele irá embora, com certeza.
  2. O acesso móvel hoje é responsável por 1 em cada 4 conexões. Em um país como o Brasil, onde 4G é privilégio para poucos, impera a conexão 3G e uma página de 1,7MB demora quase um minuto para carregar completamente. De que adianta o layout ser responsivo se o visitante não vai ficar para ver?
  3. O Google mede a velocidade de carga do seu site e pune as páginas lentas, prejudicando sua estratégia de SEO.

Com um pouco de esforço é possível reverter esse quadro. Apresentamos aqui algumas técnicas básicas para se obter uma redução de peso automática, técnicas avançadas e técnicas mais radicais para quem quer espremer aqueles últimos quilobytes a qualquer custo. Nada disso importaria se você não tivesse como medir a eficácia de seu trabalho e, para isso, terminaremos o guia com uma seleção de ferramentas de medição.

Métodos básicos

As seguintes técnicas são o mínimo que você deveria se preocupar para garantir uma economia de quilobytes em suas páginas.

1. Ative a compressão GZIP

De acordo com dados do W3Techs.com, quase metade de todos os sites do mundo não habilita a compressão no servidor. Em condições normais, seu servidor de hospedagem ou seu webmaster deveria ter feito isso desde o primeiro dia, então cobre deles. Mas não se empolgue e saia comprimindo todos os arquivos: a perda de performance não irá compensar o ganho de banda.

2. Habilite o cache

Se o navegador consegue armazenar o arquivo, ele não irá baixá-lo outra vez. Mantenha as datas do Expires header e do Last-Modified corretas no cabeçalho da página.

Outras vezes, você pode determinar o uso do cache a nível de servidor, instruindo o navegador do usuário a reaproveitar cópias locais de imagens, CSS, Javascript, PDFs e outros formatos.

3. Utilize uma CDN (Content Delivery Network)

A grosso modo, navegadores tem um limite de 4 a 8 requisições HTTP do mesmo domínio rodando simultaneamente. Com uma média de 96 requisições diferentes por página, são necessárias mais de 12 interações com o servidor para carregar tudo (é uma simplificação do processo para que você possa entender melhor – mas as limitações existem).

Ao requisitar arquivos estáticos de outro domínio, você está efetivamente dobrando o número de requisições HTTP simultâneas que o navegador suporta. Dependendo do arquivo, se ele for bastante comum, isso significa também que o usuário já pode ter aquele arquivo armazenado em cache e irá pular a requisição. Por que recarregar toda vez a mesma biblioteca jQuery ou botão do Facebook?

Felizmente, usando a inteligência, é possível ter alternativas econômicas às custosas soluções de CDN disponíveis no mercado.

4. Remova conteúdo desnecessário

Páginas mudam, é de sua natureza. Então, é bem provável que classes e IDs deixem de ser usados, códigos Javascript terceirizados ou nativos não sejam mais necessários. Se você não está mais utilizando uma parte da página, procure remover o CSS e o Javascript vinculados a ele para que o usuário não faça um download inútil. Não é uma tarefa fácil, principalmente se os elementos removidos estão integrados a arquivos que estão sendo de fato usados. Felizmente, existem algumas ferramentas que podem ajudar nesse trabalho: JSLint(para Javascript) e Dust-Me Selectors, CSS Usage e unused-css.com (para CSS).

5. Combine e reduza seu CSS

Em um mundo ideal, o CSS que você mantém em desenvolvimento não é o mesmo arquivo que você usa no ambiente de produção. Aceite isso e você poderá utilizar essa dica.

Embora seja conveniente manter diferentes arquivos CSS para diferentes necessidades (ou navegadores), você estará aumentando o número de requisições HTTP. Na hora de subir para o servidor, entregue para o usuário um único arquivo, unificado e reduzido.

Pré-processadores como Sass, LESS ou Stylus podem automatizar o método para você. Mas, se você não é adepto de nenhuma delas, a boa e velha linha de comando do Windows já pode unir dois CSS em um só:

copy file1.css+file2.css file.css
Ou Mac/Linux:

cat file1.css file2.css > file.css
O arquivo resultante precisa em seguida ser reduzido (removendo espaços desnecessários, redundâncias etc) através de ferramentas como o CSS Compressor.

Não custa lembrar que é uma boa prática carregar sua folha de estilo antes do fechamento da tag <head> para que o navegador não precise recarregar o layout.

6. Combine e reduza seu JavaScript

Uma página média carrega 18 arquivos de script individuais. É muito, é um exagero. Bibliotecas como o jQuery devem ser terceirizadas para CDNs e os demais arquivos devem receber o mesmo tratamento que você deu para seus CSS na dica de cima: serem unificados e reduzidos no servidor de produção.

Neste caso, um ponto e vírgula fora do lugar ou uma concatenação fechada incorretamente pode quebrar o arquivo inteiro, então tome cuidado durante a unificação. Para comprimir o arquivo final (e checar por erros que possam aparecer), recomendamos o uso do JSCompress.

A boa prática determina que a melhor posição para carregar seu arquivo Javascript é no final da página, antes do fechamento da tag <body>. Isso assegura que o conteúdo de sua página é carregado mais rapidamente e está legível antes que alterações sejam executadas.

7. Use o formato correto de imagem

O formato errado de imagem pode aumentar e muito o tamanho de sua página. Guarde essa regra de ouro:

  1. Utilize JPG para fotografias
  2. Utilize PNG para tudo mais

Se você tem um gráfico bem pequeno com poucas cores, pode ser que o GIF comprima melhor. Teste primeiro.

Lembrando que o JPG é um formato onde acontece perda. Quanto menor o arquivo, pior a qualidade. Encontrar o equilíbrio é o que diferencia um bom webdesigner. Na maioria dos casos, 70% de qualidade é imperceptível de 90% em termos visuais e já economiza nos quilobytes.

Em contrapartida, PNGs estão disponíveis em 256 cores ou 24-bits. O segundo modo permite transparência, mas é consideravelmente maior. Se não for utilizar transparências, prefira o modo de 256 cores e vá reduzindo a paleta para um valor aceitável.

8. Redimensione imagens grandes

De nada adianta utilizar o formato certo de imagem se você está tentando publicar uma foto de 4K no espaço onde deveria entrar um thumbnail. Com as câmeras modernas se gabando de tirarem fotos com resolução cada vez maior e com botões de publicação automática, vemos uma profusão de imagens colossais, inapropriadas para a web, sendo usadas sem critério algum.

Por via de regra, as dimensões da sua imagem não devem exceder o tamanho máximo do espaço que irão ocupar. Se o seu layout tem uma largura de 800px, não publique uma foto com mais de 800px de largura. Se você precisa forçar a largura da imagem através do HTML para ela “caber”, não tenha dúvidas de que está errando.

Redimensione as imagens que irá utilizar em um editor de imagens e perceba a economia significativa de peso. Uma alternativa leve e barata é o Prish Image Resizer.

9. Comprima ainda mais suas imagens

Se você está usando o formato correto e o tamanho correto de suas imagens, ainda é possível extrair alguns quilobytes a mais com ferramentas específicas de compactação e otimização.

Para compactar e reduzir o tamanho de seus arquivos PNG, recomendamos aqui o PNGGauntlet. Outras alternativas: OptiPNG, PNGOUT. Para JPGs, você pode utilizar jpegtran e jpegoptim. Uma ferramenta multiuso interessante é o RIOT (Radical Image Optimization Tool) Estas ferramentas são leves e práticas e podem ser instaladas no seu desktop. Se você está procurando por uma opção online que nem precisa de instalação, o Smush.it pode resolver o seu problema.

10. Remova fontes desnecessárias

Fontes web revolucionaram o designe e libertaram os criadores de páginas de ter que usar um editor de imagens para criar títulos. Com títulos e outros elementos agora escritos em forma de texto, o SEO agradece. Até mesmo o número de requisições HTTP diminui se não é mais necessário baixar meia dúzia de GIFs de títulos e elementos gráficos.

Mas, como sempre, ocorrem exageros. Se você está usando mais de duas ou três fontes no seu projeto, não apenas ele virou uma salada tipográfica, como também você acabou aumentando o peso da página uma vez que uma única fonte completa com todos os seus caracteres pode chegar a 200KB.

Reavalie o uso de fontes web, veja se não seria melhor terceirizar a distribuição usando somente fontes do Google, por exemplo, ou repense a ideia de forçar um download deste porte na máquina do usuário para exibir um único título.

  1 2 3 4

Tags: otimização de páginas, Web, melhores práticas, seo
Via codigofonte.uol.com.br

Total de comentários: 0
avatar