Otimizações para websites não óbvias

A minha idéia nesse post, é apenas fazer uma listagem de otimizações em sites não óbvias. Ir um pouco além do que vemos por ai, e fazer um apanhado de tudo.

Bem rápido, por isso que vai ser em formato de lista.

Imagens

  • Usar sprites
  • Passar imagens pelo SmushIt
  • Declarar as dimensões das imagens no html
  • Usar imagens em base 64
  • Preferir extesões .jpg e .gif(no lugar de png)
  • Usar patterns pequenos nos repeats
  • Usar backgrounds otimizados com media queries

Evitar Imagens

  • Usar códigos para degradês e bordas redondas

Evitar

  • Evitar requisições inválidas

JavaScript

  • Arquivos js no final da página
  • Carregar js de modo assincrono
  • Cache de variaveis
  • Carregar youtube, twitter e facebook via ajax
  • Carregar modais e tooltips via ajax

CSS

  • Evitar regras css com virgulas nos seletores

Talvez

  • Talvez até simplificar o layout, removendo alguma sombra que não cause muita diferença visual, mas estava pesando na implementação
  • Evitar jQuery e plugins de terceiros

Ferramentas

  • Usar ySlow
  • Usar PageSpeed
  • Merge e minify de css, js e html
  • Validar w3c html, css
  • Validar link checker

Servidor

  • Usar mod_deflate e mod_expires

9 Comments

  1. Existe uma opção para usar o SmushIt no Node: https://github.com/colorhook/node-smushit. Eu acho interessante, pois não preciso subir as imagens pro site e depois baixá-las novamente, faço tudo pela linha de comando.

  2. Evandro Oliveira

    março 11, 2013 at 15:34

    Fala, Will. Porque não utilizar vírgula nos seletores???

    • Opa, pq geralmente mostra que estão fazendo algo errado.

      Tornando a manutenção mais difícil, pois “seletores diferentes” com estilos iguais, normalmente é melhor resolvido com classes mais genéricas.
      (isso vale para quando vc começar a observar 3 ou mais seletores com virgulas)

  3. Willian Abreu

    maio 27, 2013 at 11:16

    Muito útil este post!

  4. bom seu ponto de vista.

  5. por que evitar jquery?

  6. Porque “Preferir extesões .jpg e .gif(no lugar de png)”?

    • Faça um teste, e verá que uma mesma imagem em jpg tem tamanho menor que ela em png.
      Pois a compressão e a falta do canal alpha fazem o jpg ser mais compacto.

Deixe uma resposta

Your email address will not be published.

*