Leandro Garcia

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.

• 4 comentários
• Comentar
• Permalink
• Compartilhe

Otimizando o JS. Diminuir o uso do getElementById

Anteriormente, eu escrevi a respeito de otimização do css a fim de reduzir tempo de carregamento das páginas e tráfego.

Dando sequência, vamos otimizar o JS.

…

Quando estamos trabalhando em um grande projeto, é comum termos que utlizar diversas vezes a sintaxe getElementById. Porém, ao invés de para cada situação escrevermos toda a sintaxe, podemos criar uma pequena função para isso.

Como?

Não Otimizado

function mudacor(id){

document.getElementById(id).style.color = '#990000';

}

function mudacorTexto(id){

document.getElementById(id).style.color = '#990000';

}

function mudacorspan(id){

document.getElementById(id).style.color = '#990000';

}

Otimizado

function $(id){ return document.getElementById(id); }

function mudacor(id){

$(id).style.color = '#990000';

}

function mudacorTexto(id){

$(id).style.color = '#990000';

}

function mudacorspan(id){

$(id).style.color = '#990000';

}

Explicando

No exemplo acima, ao invés de eu escrever 3 vezes esta sintaxe, escrevi apenas uma. Em um projeto grande, é muito provável que você precise utilizar bem mais vezes essa sintaxe. Com esta simples função, podemos economizar muitos kbytes em trafego, pois reduzimos o tamanho do JS. Porém, não é apenas essa a vantagem, deixando o código mais enxuto, fica mais fácil de, posteriormente, o analisarmos para efetuarmos uma alteração ou correção.

Clique aqui e veja

Download

• 1 comentário
• Comentar
• Permalink
• Compartilhe

CSS Sprites, a arte de posicionar imagens

Dando continuidade na redução do peso das páginas, apresento à vocês uma técnica chamada: CSS Sprites!

Mas o que diabos é isso? É um novo refrigerante?

Não, não é refrigenrante é a arte de fazer uma unica requisição de imagem via CSS para diversos itens.

Como assim?

Vamos começar do básico.

Segundo o Wikipedia

Sprites were originally invented as a method of quickly compositing several images together in two-dimensional video games using special hardware. As computer performance improved, this optimization became unnecessary and the term evolved to refer specifically to the two dimensional images themselves that were integrated into a scene. That is, figures generated by either custom hardware or by software alone were all referred to as sprites. As three-dimensional graphics became more prevalent, the term was used to describe a technique whereby flat images are seamlessly integrated into complicated three-dimensional scenes.

Em português

Sprites foram originalmente inventadas como um método de composição rápida de algumas imagens juntas em jogos de video game em 2d usando hardwares especiais. Como forma de otimizar o careggamento dos softwares….

Creio que Já é o sificiente!

Vamos ao que interessa. Os Sprites em CSS

A técnica é simples e você pode utilizar para quase todas as imagens do seu layout, desde que essas imagens não se repitam dentro de um mesmo elemento ou não tenham tamanho definido. Exemplo: em um background de página você não deverá utilizar o Sprites, pois não há um delimitador de altura e largura para a exibição desta imagem.

Vamos a um exemplo prático:

Façamos um menu.

Briefing: Quatro links, cada um com a cor de fundo diferente, cada um deve ter um degradê.

1º Passo: A IMAGEM

2º Passo: O HTML

<ul class=”sprites”>
<li class=”um”><a href=”#”>1</a></li>
<li class=”dois”><a href=”#”>2</a></li>
<li class=”tres”><a href=”#”>3</a></li>
<li class=”quatro”><a href=”#”>4</a></li>
</ul>

3º Passo: O CSS

*{list-style:none}
.sprites li{float:left; text-align:center; width:50px; height:30px; background:url(http://tutoriais.leandrogarcia.com/sprites/images/sprites.jpg) repeat-x}

.sprites li.um{background-position: 0 0}

.sprites li.dois{background-position: -30px 0x}

.sprites li.tres{background-position: 0 -60px}

.sprites li.quatro{background-position: 0 -90px}

.sprites li a{color:#000;font-weight:bold}

Resultado

• 1
• 2
• 3
• 4

Assim Conseguimos um layout, onde cada um dos itens do menu tem uma imagem de fundo, mas não precisamos requisitar quatro imagens, apenas uma.

Vantagens?

Entre as vantagens, posso citar:

a facilidade de manutenção, uma vez que haverá menos imagens a alterar;

o menor número de requisições HTTP;

maior velocidade de carregamento, uma vez que haverá menos itens a requisitar.

Pra finalizar

Ao utilizar o sprites, nós possíbilitamos ao usuário uma maior velocidade no carregamento. Uma página carregada mais rápido, deixa o usuário mais feliz, um usuário mais feliz, tende a voltar mais vezes, desde que o conteúdo seja relevante

Veja em funcionamento: link

Download: Sprites

• 1 comentário
• Comentar
• Permalink
• Compartilhe