Métodos Avançados

Se você seguiu todas as dicas anterior 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:

1. 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.
2. Animações em CSS3 são mais fáceis de se escrever.
3. 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.

← Métodos básicos

1 2 3 4

Métodos radicais →