Yslow (Porque está devagar) – Como medir performance de carregamento das páginas…
Volto eu aqui para escrever sobre performance de websites.
No mundo atual, as pessoas tem cada vez menos tempo e paciência para esperar por alguma coisa, muito menos se o que devem esperar é uma página ser carregada. Motivo este pelo qual nós, desenvolvedores para internet, devemos pensar na praticidade e velocidade que a página é carregada pelo usuário.
Existem algumas práticas que podem fazer com que seu código mais rapidamente carregado:
Diminua a quantidade de requisições http.
Em cada requisição que um site faz ao servidor, seja qual for (CSS, JS, Imaem, etc), há um trafego de informações, ou seja, sua página envia uma requisição e depois recebe a resposta do servidor, quanto menos requisições você fizer, menor será esse trafego, logo, mais rápido seu site carregará;
Você pode diminuir a rquisição de imagens background através de CSS sprites, já expliquei como fazê-los neste post.
Utilizar o menor número possível de arquivos CSSs, O ideal é usar apenas um, eventualmente um segundo, mas evitar o terceiro, o quarto a todo custo.
Se possível utilizar apenas um arquivo JS.
Cachear a página ou Header Expires
A inconveniência deste é que ele é server-side, ou seja, é feita através do servidor, mas serve para guardar na memória do usuário os arquivos das páginas que ele visitou, ou seja, um re-acesso ao site seria bem mais rápido.
Compressão de componentes (Gzip Components)
Esta é uma outra técnica de redução server-side. Com ela, o servidor entende que deve comprimir (ou “zipar”) os código, os CSSs os JSs e, inclusive o HTML.
Colocar as folhas de estilo no Header
Uma outra maneira eficaz de ganhar tempo no carregamento das páginas é, além de usar uma única folha de estilos, chamá-la de um arquivo externo e através da tag link posicionada dentro do header
Colocar os Scripts na parte inferior
O ideal é colocar os scripts logo antes da tag </body>, pois desta a página é carregada mais rapidamente. Quando o script está no header, a página primeiro carrega o script depois as demais informações, agora quando esle está posicionado abaixo, a página tem toda a informação carregado e só após isso os scripts são carregados.
Evite expressões em CSSs
Embora existam, as expressões em CSS não são a maneira mais eficaz de criar o seu layout, pois exigem demasiado tempo para serem entendidas pelos navegadores.
ex. background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
Folhas de Estilo (CSS) e Scripts (JS) externo
Evite colocar estilos e scripts em qualquer lugar no HTML, prefira sempre chama-los através de um arquivo externo. CSSs e JSs, são geralmente caheados pelo browser, o que significa que em uma próxima vista o usuário já terá esses arquivos preveamente carregados.
Otimize seus CSSs e JSs.
Quanto menor for seus códigos, menor tamanho eles terão, logo, mais rápido serão carregado.
Neste link, eu escrevi como se pode otimizar os códigos CSSs
Evite redirecionamentos
Evite ao máximo que suas páginas redirecionem para uma outra, pois desta maneira seu usuário terá que carregar duas ou mais páginas ao invés de uma.
Remova scripts duplicados
Remova todos os scripts duplicados, afinal, não há a necessidade de se carregar duas vezes a mesma coisa.
Reduza o número de DOMs
Reduza ao máximo as “firulas” via DOM do seu código.
Iframes
Se necesário for utilizá-los, utilize o menos possível, pois um ifram,e é uma outra página a ser carregada.
Escolha <link> ao invés de @import
Há duas maneiras de se carregar uma folha de estilo externa, através das tags <link> e @import. Prefira sempre a <link>, pois o @import se comporta da mesma maneira como se você colocasse o <link> lá embaixo.
E tem várias outras maneiras.
O Yahoo, disponibiliza um link onde eles explicam maneiras de se melhorar a performance. Além dessas que eu listei acima, há algumas outras. O line é este.
Como verificar como está o carregamento de meu site?
Não sei dizer quantas maneiras há para se fazer isso, a única que eu conheço, e acredito que a mais eficaz, é o YSLOW (Uái islou) (Porque está devagar).
O YSLOW, é um complemento para o Firefox que pode ser encontrado neste link.
No Próximo Post eu vou explicar como funciona o Yslow.
Enviado por: leandro garcia - Categoria(s): Complementos do Firefox, CSS, JavaScript, Praticas Tags relacionadas: Complementos do Firefox, CSS, css sprites, JavaScript, Praticas, redução de peso, redução do tamanho