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 é:

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

A) 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:

Utilize JPG para fotografias
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.

B) Métodos Avançados

Se você seguiu todas as dicas acima e suas páginas agora estão bem menores, parabéns. Mas isso não significa que seu trabalho já terminou. Ainda há algumas opções para se conseguir aquela economia final que irá aliviar o seu servidor, agradar seus visitantes e satisfazer os padrões exigidos pelo Google.

1. Remova botões sociais

Você tem botões de compartilhamento para Facebook, Twitter, Google+, Reddit, LinkedIn e tudo mais na sua página? Você não sabe, mas este conteúdo aparentemente inofensivo e útil obriga seus usuários a carregarem quase 600Kb a mais de conteúdo, sem contar o número de requisições HTTP adicionais e a eventual quebra de privacidade. Para complicar ainda mais o cenário, muitas redes exigem que seu JavaScript fique localizado no topo do código, obrigando que ele seja carregado e executado antes mesmo do seu conteúdo aparecer.

Se você acredita que o tráfego gerado através do compartilhamento fará falta, saiba que é perfeitamente possível adicionar seus próprios botões de compartilhamento muito mais leves que as soluções padronizadas.

Botões simplificados não irão exibir estatísticas, mas você pode conseguir a mesma informação utilizando com sabedoria o Google Analytics ou suas alternativas.

2. Verifique todos os widgets terceirizados

É tentador: são tantos plugins, widgets, addons e outras parafernálias que estão disponíveis na Internet e podem ser adicionadas com facilidade à sua página… Mas cada um deles tem um custo oculto de carga: eles puxam quilobytes de dados, como JavaScript, CSS e imagens e, frequentemente, não são otimizados e trazem mais códigos do que uma boa solução que seja focada no seu conteúdo e desenvolvida internamente.

Avalie se aquele aditivo é realmente necessário para o seu negócio e, se a resposta for positiva, escolha com cuidado aquele que seja leve, permita ser carregado ao final da página e não faça requisições demais.

3. Considere utilizar carregamento progressivo

Não é porque o usuário visitou sua página que significa que ele está interessado em todo o conteúdo da página. É possível que a informação que ele busca já esteja no topo do código e todas aquelas imagens carregadas do meio para diante foram carregadas sem necessidade.

Considere também o caso em que a página hospede um vídeo. Mesmo que o vídeo esteja armazenado em outro serviço e não faça nenhuma transferência até o usuário apertar o botão de PLAY, ainda assim a API e outros recursos exigidos pelo provedor do vídeo são carregados, mesmo que o usuário não tenha qualquer interesse no conteúdo.

Para tais casos, você deveria considerar o uso de um método de carregamento progressivo, onde os elementos da página são requisitados na medida em que o visitante rola a página.

4. Substitua imagens por efeitos em CSS3

Você ainda gera e fatia imagens para criar gradientes, bordas arredondadas e sombras de elementos? Todos esses métodos do passado podem e devem ser substituídos com CSS3.

Os efeitos não irão funcionar no Internet Explorer 8 ou inferior, mas não apenas esses navegadores ultrapassados agora representam uma fatia minguante do mercado como tampouco gradientes, sombras e bordas arredondadas são determinantes para o pleno funcionamento de uma página. Se o navegador não conseguir renderizar o efeito em CSS3, ele não fará falta.

Resista à tentação de tentar oferecer esse tipo de efeito para navegadores antigos através de hacks, imagens transparentes, CSS extra ou JavaScript. Você estará apenas acrescentando peso à página perseguindo uma compatibilidade total que nunca existiu (0u nunca deveria existir).

5. Substitua JavaScript por efeitos e animações em CSS3

Se o poder do jQuery ou outro framework deixou você mal-acostumado com construções como (“#x”).fade() ou $(“#y”).slideDown() para se conseguir efeitos, é bom saber que agora também já é possível se obter efeitos similares usando o poder do CSS3 e suas animações, transições e transformações.

O CSS3 também tem algumas vantagens sobre o JavaScript, além da óbvia redução de peso do código:

Animações em CSS3 são suportadas nativamente pelo navegador. Bem escritas, são muito mais rápidas e suaves do que aquelas conseguidas com JavaScript.
Animações em CSS3 são mais fáceis de se escrever.
CSS3 possui suporte a transformação 3D, que são extremamente complicadas de se obter com JavaScript.

Assim como no caso dos efeitos da dica acima, se os navegadores antigos não conseguirem renderizar, não deverá haver uma perda significativa de usabilidade.

6. Considere adotar Scalable Vector Graphics (SVGs)

Se você está utilizando muitos GIFs ou PNGs simples em seu layout, talvez seja um bom momento para adotar o formato SVG. Não se trata de um novo tipo de imagem, mas uma imagem gerada por código, usando pontos, linhas e formas vetoriais em XML. Por se tratarem de vetores, são perfeitos para design responsivo, uma vez que escalam sem perda de qualidade e são menores que uma imagem comum.

SVGs não são adequados para todas as situações. Fotografias e imagens complexas serão sempre melhor servidas como JPG ou PNG. Entretanto, logotipos, diagramas e gráficos podem perfeitamente ser gerados através do SVG. Ao contrário de imagens reais, SVGs também podem ser manipulados no navegador, se alterando através do CSS ou do JavaScript.

Existem ferramentas que convertem imagens bitmap para formato vetorial, mas você aprenderia muito começando do zero.

7. Substitua imagens por fontes de ícones

Eu sei que uma das dicas básicas é reduzir o número de fontes que sua página carrega. Mas existe uma exceção a esta regra: fontes de ícones. Um único arquivo de fonte pode conter centenas de ícones vetoriais que podem receber qualquer cor e serem renderizados em qualquer tamanho.

Você pode escolher uma fonte dedicada ou mesmo montar seu próprio pacote de ícones usando ferramentas como Fontello, IcoMoon ou Flaticon.

8. Use sprites de imagens

Se o CSS3, o SVG e os ícones não foram soluções satisfatórias para o seu projeto e você realmente tem que utilizar imagens bitmap que são reaproveitadas com frequência, uma ótima técnica é gerar um único arquivo, chamado de sprite, que contém todas essas imagens, que são depois solicitadas via CSS.

Com este método, você condensa diversas requisições HTTP e uma única requisição para carregar o sprite. Além disso, um único arquivo sprite, geralmente é menor do que a soma de todas as imagens individualmente. A terceira vantagem do método é agilizar a carga e o cache das imagens na página.

Você pode criar os sprites manualmente no seu editor de imagens e no código CSS, ou usar uma ferramenta específica como o Gerador de Sprites, Sprite-Cow ou Instant Sprite.

C) Métodos Radicais

Dietas são caprichosas, você pode até perder peso rápido, mas, se não tomar cuidado e voltar às velhas práticas, a sua página vai inchar novamente.

As técnicas a seguir são controversas e podem não servir para todos os casos.Use por sua conta e risco.

1. Nunca confie no código de terceiros

Você daria acesso total a um desenvolvedor desconhecido ao código-fonte do seu site? Então, por que raios você confia em código terceirizado? Plugins e outros widgets podem representar um risco de segurança e muito provavelmente são montados pensando em todos os cenários, o que significa um bocado de código (e peso) redundante ou que não se aplica ao seu site em específico.

2. Uma biblioteca JavaScript é mais do que suficiente

É bem provável que você esteja usando jQuery. Nós usamos. Mas talvez você esteja usando Prototype. Ou YUI. Sem problemas. Mas, lembre-se: não misture.

Uma vez que você escolha seu framework de coração, pergunte a si mesmo:

É possível montar um build customizado apenas com as funcionalidades que você precisa?
Existem alternativas mais leves como o Zepto.js ou Minified.js que oferecem compatibilidade com as principais APIs e métodos?
Você realmente precisa dessa biblioteca? Será que você não está usando ela apenas por causa de inconsistências com navegadores que nem existem mais ou puro comodismo?

3. Cuidado com templates

Um template de WordPress ou outro CMS qualquer parece, à primeira vista uma boa escolha, sejam pagos ou gratuitos. Afinal, porque contratar um desenvolvedor para codificar tudo para você gastando uma nota preta quando existem tantas opções prontas na web, é só escolher?

Bem, existe um custo escondido que deve ser mais ou menos óbvio se você leu até aqui: uma solução focada para todo tipo de cenário certamente terá mais código do que o necessário. Mas há outros agravantes: não é porque um template é bonito na tela que isso significa que seu criador seja um ás do código e tenha criado um HTML ou um CSS compactos. Templates genéricos também existem dentro de um universo extremamente competitivo, seja por popularidade seja por clientes e para atrair usuários é comum que seus desenvolvedores adicionem todo tipo de funcionalidade que não serão necessariamente aquelas que você tem em mente (ou deveria ter em mente).

4. Corte a gordura do framework

Frameworks de desenvolvimento de sites como Bootstrap ou Foundation são muito úteis como um pontapé inicial para um novo projeto ou quando você não entende o que é necessário para construir uma página. Infelizmente, da mesma foram que templates genéricos, eles vem acompanhados de CSS, JavaScript e outros recursos que talvez você não precise. Além disso, o HTML também tende a ser menos compacto do que poderia ser.

Em um mundo ideal, você criaria o primeiro modelo de página usando um framework e, com o conhecimento necessário, removeria as partes que você não irá usar ou ajustaria o código. Na maioria dos casos, os desenvolvedores web apenas deixam tudo como está e o resultado são páginas inchadas.

5. Adote o aperfeiçoamento progressivo

O conceito é moderno e significa desenvolver sua página primeiro para o menor denominador comum: um dispositivo móvel. Em essência, você estará criando uma experiência simplificada para o usuário, simples, sim, mas funcional. A seguir, de acordo com CSS disparados por media queries ou qualquer outro método de detecção de navegador, você iria entregando uma experiência mais rebuscada, como efeitos ou imagens de qualidade superior de acordo com a capacidade do visitante.

6. Conheça seu código

Pré-processadores de CSS e JavaScript como o Sass, LESS, Stylus, CoffeeScript, TypeScript e Dart podem ter revolucionado sua produtividade. Entretanto, o código original é abstraído do código final gerado. O que sai do pré-processamento só é bom se é bom aquilo que entra e é plenamente possível adicionar inúmeras linhas de código supérfluo se você não sabe o que está fazendo. Sempre cheque se o código de saída é eficiente.

7. Considere o uso do AppCache offline

Aplicações web podem funcionar offline usando a propriedade HTML AppCache. Sua praticidade não se limita a carga de dados. O AppCache também pode funcionar como um complemento ou incremento do cache normal do navegador e armazenar componentes do seu site ou página que são carregadas regularmente.

8. Simplifique seu site

Durante os últimos anos, websites e aplicações removeram sua complexidade para oferecer uma experiência direta e mais focada no consumidor. Mas nem todo mundo entendeu o recado e muitos ainda “enfeitam” suas páginas com badulaques desnecessários. Para ser honesto, simplificação é complexo. Muitos clientes e até profissionais diretamente ligados à produção de páginas confundem mais funcionalidades com mais clientes ou acreditam que possam mostrar trabalho com mais elementos.

Com um pouco de bom senso ou, melhor ainda, testes realizados com uma amostragem real de usuários, podem identificar opções que nunca são utilizadas e que podem ser removidas da página ou substituídas por alternativas mais práticas e leves.

9. Mude seu estilo de desenvolvimento

É fácil criticar o cliente ou o projeto quando sua página atinge ou ultrapassa a absurda marca de 1,7Mb. Mas sabe de quem é a culpa? Dos desenvolvedores. Não importa quem mandou ou aprovou, quando uma página fica obesa é por que algum desenvolvedor permitiu que isso acontecesse.

É a velha fórmula: velocidade, preço e qualidade. Mas você só pode escolher dois destes. Seu cliente, chefe, comitê pode não entender todos os detalhes técnicos mas se você que está lendo isso não destacar as potenciais armadilhas calóricas e explicá-las de forma compreensível, você nunca terá o respeito e as recompensas que merece.

Páginas leves são o resultado direto de práticas de codificação eficientes e começam a existir lá atrás, na hora do planejamento. Infelizmente, em muitos cenários, esse aspecto do desenvolvimento é frequentemente empurrado para depois, assim como SEO e usabilidade, quando, na verdade, todos esses processos devem ser concomitantes.

Para que você se torne mais consciente dessa necessidade, perceba também que nem todo mundo tem os mesmos 30Mb de banda larga que você tem. Limite sua conectividade ou tente carregar sua página em uma área com uma recepçção 3G ruim. Ou experimente o wi-fi sobrecarregado de um restaurante. Ficou frustrado? Sua frustração é compartilhada por muitos usuários. Todos os dias.

Então, considere sempre o peso da página em cada projeto e questione cada elemento adicionado à página. Essa fonte é realmente necessária? Essa imagem de fundo agrega valor? Por que não trocar as animações por CSS3? Flash, vocês estão loucos?Uma vez que o problema de obesidade é epidêmico e poucos desenvolvedores parecem se importar, aqueles que se dedicam ao tema e oferecem aos consumidores uma experiência rápida e leve, com certeza irão se destacar na multidão.

Ferramentas de Medição

O que seria de uma dieta sem um monitoramento constante? Para isso, existem “balanças” específicas que irão avaliar o sucesso de suas técnicas. Todas elas são grátis e consomem apenas alguns segundos para serem executadas:

1. Pingdom

Pingdom revela praticamente tudo que você poderia precisar saber: peso da página, velocidade de download, análise do código, notas para sua performance, sugestões de desenvolvimento e até mesmo um histórico, se você quiser acompanhar sua dieta passo a passo.

2. Firefox Web Developer Add-on

Se você já não usa a barra de ferramentas Web Developer, você está perdendo um verdadeiro canivete suíço para quem trabalha com páginas de Internet. Além de dezenas de outras funções, a Web Developer Toolbar permite que você visualize tanto o peso comprimido quanto descomprimido de uma página, na opção Information | View Document Size (pode demorar um pouco, de acordo com a complexidade da página).

3. GTmetrix

GTmetrix na verdade agrega relatórios do Google PageSpeed Insights e do YSlow sugeridos logo abaixo, mas também informações adicionais como o tamanho total da página e o número de requisições. Neste caso, ele consegue ser mais do que a soma das partes e é uma boa sugestão.

4. Google PageSpeed Insights

Apesar do poder da marca Google, essa ferramenta não exibe nem o peso total da página nem a velocidade de download. Em contrapartida, ela oferece sugestões do que pode ser melhorado tanto para dispositivos móveis quanto para dispositivos desktop. Páginas recebem uma nota de 0 a 100 e você pode acompanhar a evolução do seu trabalho.

5. YSlow

Já o YSlow traz a marca Yahoo e é igualmente uma ferramenta online e um plugin disponível para os principais navegadores. Da mesma forma que o PageSpeed Insights, ele avalia páginas e emite uma nota de A a F, baseada em um amplo espectro de fatores.

6. Firebug

Outro canivete suíço do desenvolvimento web, o Firebug também calcula peso de página e velocidade de download em suas opções. Se você já é usuário, vale experimentar antes de avaliar outras alternativas. Por outro lado, se você ainda não usa o Firebug, pode ser melhor começar com uma ferramenta mais focada na tarefa.

7. PageScoring Website Speed Test

Se você está procurando uma ferramenta rápida e eficiente, encontrou aqui. Ela se concentra no tempo de download mas o tamanho dos arquivos também é exibido, junto com o tempo de download de cada arquivo individual (o que pode fornecer uma boa pista para identificar áreas problemáticas).

8. Uptrends Speed Test

Essa ferramenta vai além da convencional aferição de tamanhos e tempos de download e permite também que você teste o tempo de resposta de acordo com regiões geográficas. Para quem trabalha com CDNs, a ferramenta também destaca a performance de cada domínio envolvido.

9. Web Page Analyzer

Não se assuste com seu visual! O Web Page Analyzer oferece uma boa seleção de dados estatísticos, que vão do tamanho dos arquivos e passam por estimativas de download em modems (começando nos medievais modelos de 14.4K!).