|
|
|
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 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.
Discuss Adicionar link a... Bury
|
|
|
|
Digga é um sistema de notícias e artigos colaborativo, onde os conteúdos são enviados pelo próprio usuário. Essas notícias e artigos enviados podem ser votados por outros usuários da comunidade Digga e ao alcançar uma determinada pontuação, esta notícia/artigo ficará na página principal de nosso sistema, oferecendo mais tráfego aos blogs e sites que enviaram a mesma.
Comments