14 Regras Básicas Para Aplicações WEB

quinta-feira, 14 de agosto de 2008.

(Comente)

Recebi uma indicação de Saulo Dourado, designer gráfico do CESAR, de um livro chamado “High Performance Web Sites” que contém uma lista de 14 “regras” para o desenvolvimento de frontends eficientes, estas mesmas 14 regras são usadas no YSlow, que abordei em “Dicas: Firebug e YSlow“.

O autor do livro e do YSlow é Steve Sounders um guru na arte e ciência de performance em aplicações WEB.

As 14 regras são:

Regra 1: Minimize HTTP Requests

Problema) 80-90% do tempo navegando em uma página WEB é gasto em requisições HTTP, requisições estas que envolvem Imagens, Scripts, CSS, Flash que são referenciados no HTML.

Solução 01) Use Image Maps

Imagem Maps é uma técnica que mapeia uma imagem, ao invés de carragar cada imagem individualmente como fazemos de costume, criamos uma imagem unica e mapeamos cada parte da imagem via javascript.

Exemplos: http://stevesouders.com/examples/imagemap.php, http://en.wikipedia.org/wiki/Image_map

Solução 02) Similar ao Image Maps só que com CSS

Exemplo: http://css-tricks.com/css-sprites-what-they-are-why-theyre-cool-and-how-to-use-them/

Regra 2: Use CDN´s (Content Delivery Network)

Assim como descrito na 1º Regra “80-90% do tempo navegando em uma página WEB é gasto em requisições HTTP.”

CDN´s são servidores que hospedam conteúdo estático em servidores separados da sua aplicação, ou em caso de portais de grande porte, este conteúdo não somente é de conteúdo estático, como tambem de todo o conteúdo do site, que seria distribuído baseado na região de onde a requisições foi feita.

Regra 3: Use “Expires Header“

Problema) Browsers usam cache para reduzir a quantidade de HTTP requests.

Solução) “Expires Headers” fala por quanto tempo um componente deve ser armazenado em cache.

Regra 4: Utilize Gzip

Problema) Excesso de HTTP Requests, causado pelos componetes de uma aplicação (imagens, css, etc)

Solução) Comprima seus arquivos usando gzip. A maioria dos browsers disponíveis no mercado suportam compressão de aquivos via o ‘Accept-Encoding’.

Gzip é o mais popular e eficiente método de compressão atualmente.

Exemplos) http://www.weberdev.com/get_example-3993.html

Regra 5: Mova CSS para o topo

Problema) CSS no final provoca demora no carregamento da página.

Solução) Esta prática, acredito que todos fazem a contento, pelo menos desde que comecei a trabalhar com WEB costumo por os CSS no topo, mas para aqueles que o inserem no final da página, vai ai o alerta, isso afeta o carregamento de suas páginas, a explicação é bastante óbvia, quando o browser recebe uma solicitação, ele procura primeiro quais elementos gráficos carregar para depois carregar o conteúdo da página, tornando o CSS no final um equívoco.

Regra 6: Mova scripts para baixo

Ao contrário do CSS, os scripts em sua maioria devem ser movidos para o final da pagina, deixando os scripts no <HEAD> podem afetar o carregamento gradual da página, movendo os scripts para final, permite a paralelização do download do conteúdo do site.

Regra 7: Evite expressões em CSS

Muitos utilizam expressões em CSS para definir um background-color que mudem dinamicamente, a cada hora, isso é um exemplo de uso desnecessário de expressões em CSS, neste caso, isto poderia estar em um script em javascript, php, C#, etc… .

Regra 8: ‘Inlined’ JavaScript e CSS

Não consegui uma tradução para esta regra, mas irei explicar do que se trata.

‘Inline’ Javasctipt e CSS diz respeito a incluir os CSS e o Javascript inteiro na página ao invés de deixa-los em arquivos externos, como fazemos de costume.

Regra 9: Minimize Domínios

Algumas aplicações precisam fazer verificações de DNS, tente reduzir isso ao máximo.

Regra 10: Minimize JavaScript

Trata-se de uma boa prática em relação a confecção de CSS. Esta boa prática diz respeito a nomenclatura usada nos elementos.

Reduzir ao máximo o nome dos elementos, ou seja, fazer um refactoring no CSS.

Regra 11: Evite Redirecionamentos

Redirecimentos são usados para rotear uma URL para outra URL, está prática, por motivos claros reduzem o tempo de carregamento das páginas.

Regra 12: Remova Scritps Duplicados

Da mesma forma que temos que fazer refactoring periódicos, no código de nossas aplicações, devemos fazer refactoring  tambem no código do nosso front-end.

Muitas vezes esquecemos que o front-end tambem tem código ;)

Regra 13: Desabilite ETags

ETags é um mecanismo que webservers e browsers usam para determinar se o componente do cache do browser combina com com o que está no servidor.

O problema com ETags é qu eles são tipicamente construidos usando atributos que os tornam únicos para o servidor que hospeda o site, logo eles nunca vão combinar com o cache do browser.

Regra 14: Cache AJAX

Como a própria regra fala, permita que o AJAX utilize o cache so seu browser

Todos os exemplos acima estão muito bem organizados aqui, o autor destas regras é o Steve Sounders, eu apenas traduzi para o português algumas partes importantes das 14 regras.

Estas regras, não se aplicam em todos os casos, mas é importante termos a consciência de que elas existem e que a não adoção de muitas destas regras, implicará em redução da performance de sua aplicação.


    


Gostou? assine o feed | Discordou? opine! ou entre em contato

6 Opinioes

     
    Gravatar





    Silvio Blauth
    20-08-2008

    ≈up≈
     
  1.  
    Gravatar





    Claudio
    28-10-2008

    ≈up≈ Valeu!! Muito bom!
     
  2.  
    Gravatar





    Antonio carlos
    01-06-2011

    ≈up≈
     
sites que referenciam este post (trackbacks e pingbacks)

  • Eudes via Rec6
    14 Regras Básicas Para Aplicações WEB | ...zezologs... Lista de 14 regras a serem utilizadas em projetos de desenvolvimento de aplicações ...

  • eudescosta no diHITT
    14 Regras Básicas Para Aplicações WEB ... Lista de 14 regras definidas por Steve Sounders, a serem utilizadas em projetos de ...

  • www.digga.com.br
    14 Regras Básicas Para Aplicações WEB... Recebi uma indicação de Saulo Dourado, designer gráfico do CESAR, de um livro chamado “High ...



    • Opine!




    Caso possua um site, preencha este campo que ele sera exibido na pagina inicial na aba "+ leitores".