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

Querystring

Quem programa em qualquer linguagem backend para internet (ASP, PHP, Colffusion, ,NET…) conhece o que é uma querystring, mas para quem não conhece vou dar uma pequena explicação:

Querystring é a maneira utilizada para passarmos parametros para outras páginas através da barra de endereços sem a necessidade de um formulário.

Como é usado?

A estrutura é simples e não varia de linguagem para linguagem. Veja:

nomedapagina.html?variavel=conteudo&id=1

nomedapagina.html – é o endereço da página, pode ser qualquer extensão Web, PHP, ASP, ASPX…;

? – Esse é o x. É com o ponto de interrogação (?) que dizemos ao browser, ou às linguagens, que a partir dalí não é mais a página, mas sim uma variável;

variavel – é o nome que você dá, pode ser qualquer coisa. É muito comum utilizar “id” para passar um identificador;

conteudo – o que você quer passar para a outra página

& – outro ponto importante, o & indica ao browser, ou a linguagem, que a partir dalí haverá uma outra variável, ou seja, você pode passar mais do que uma variável por este método.

Um conselho: Evite passar variáveins em demasia desta maneira, pois o usuário consegue ver o conteúdo o que em algumas ocasiões deixa as aplicações mais vulneráveis.

Espero que seja útil.

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe

Síndrome da segunda-feira

Talvez você não conheça por este nome, talvez você conheça como síndrome do boa noite do fantástico, etc., mas dúvido que você nunca tenha sentido isso, ou sente.

Você já se perguntou, porquê suas segundas-feira costumam ser logas e chatas (Não estou falando do seu companheiro de trabalho que é alto e foi apelidado de segunda-feira), porquê é o dia típico para você se atrasar ou porquê você já quis chutar tudo e ir vender cocô na praia?

Te respondo, você está mal empregado.

Não é mal empregado apenas no sentido financeiro, mas no sentido psicológico.

Você pode ter um excelênte salário, pode viajar pela empresa, pode trabalhar perto de sua casa, pode ter benefícios, pode ter diversos outros itens que a sociedade julga ser requesitos ideais para se avaliar se você está bem empregado, mas mesmo com tudo isso você ao acordar no domingo sofre ao pensar que amanhã é segunda.

Isso acontece porque você não gosta do que você faz ou não gosta da empresa que você trabalha.

A maior parcela da culpa por isso, é da empresa, ou digamos, da sua fonte de renda. As empresas lentamente estão acordando e percebendo que um funcionário feliz é um funcionário que produz mais, porém a grande maioria ainda trata os funcionários como meros “escravos vendedores de mão de obra” e que se não gostarem de como são tratados haverão outros para tomar seu lugar. Sim haverão outros, mas serão outros que terão o mesmo tipo de problema, não produzirão o que podem…

As empresas precisam acordar e perceber que seus funcionários são a roda matriz de seu negócio, que um funcionário feliz, é um funcionário que trabalha mais e melhor, produz mais e com menos erros.

Lentamente algumas empresas passaram a entender a verdadeira razão da área dos recursos humanos, estão percebendo que o RH não é DP, que o RH cuida do bem-estar dos colaboradores, afinal essas pessoas passam no mínimo 6 horas dentro da empresa.

Quando será que todas as empresas passaram a ver seus funcionários como seres humanos? Dúvido que estarei vivo para ver isso.

Agora, as empresas não são as únicas culpadas pela síndrome da segunda-feira. Você também o é. Uma vez que você tem o poder de mudar seu ambiênte de trabalho ou de empresa, tentem ver sua ocupação não como uma obrigação, mas como uma parte de seu dia. Um dia tem 24 horas, se contarmos que você trabalha 8, mais uma hora de almoço mais 2 horas de trajeto, menos 8 horas de sono, te restam 5 horas para viver, por que não aproveitar as outras horas?

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe

Flash validado pelo W3C

Buenas, assiduos leitores de de vez em quando….

Boa parte de quem desenvolve interface HTML e se preocupa com a validação do código já se deparou com um problema grave: Minha página precisa conter um arquivo em flash, um vídeo do You Tube, porém isso deixa o código impossível de ser validado. Não mais… Eu lhes trago a solução pra isso.

Há duas maneiras de se fazer isso, um por Javascript, onde você inclue o código na página através de um innerHTML, ou através de um código mais suscinto. Abaixo mostro as três maneiras de se por o código.

A gerada pelo flash e o Youtube, porém errada.

<object>
<param name="movie" value="http://www.youtube.com/v/izSOrOmxRgE"></param>
<param name="wmode" value="transparent"> </param>
<embed src="http://www.youtube.com/v/izSOrOmxRgE" type="application/x-shockwave-flash" wmode="transparent" width="390" height="321"> </embed>
</object>

A Gerada por innerHTML

function iniciaFlash(){
var flash = “<object id=’imgflash’ width=’514′ height=’250′ align=’middle’ codebase=’http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0′ classid=’clsid:d27cdb6e-ae6d-11cf-96b8-444553540000′>”+
“        <param value=’sameDomain’ name=’allowScriptAccess’/>”+
“        <param value=’images/imgflash.swf’ name=’movie’/>”+
“        <param value=’high’ name=’quality’/>”+
“        <param value=’#324b2e’ name=’bgcolor’/>”+
“        <param value=’transparent’ name=’wmode’/>”+
“        <embed width=’514′ height=’250′ align=’middle’ pluginspage=’http://www.macromedia.com/go/getflashplayer’ type=’application/x-shockwave-flash’ allowscriptaccess=’sameDomain’ name=’imgflash’ bgcolor=’#324b2e’ quality=’high’ src=’images/imgflash.swf’/>”+
“</object>”
document.getElementById(”imagensflash”).innerHTML = flash;
}

Dentro da função iniciaFlash, crio uma variável com os dados do flash e incluo dentro da div que tem o id “imagensflash”.

Após isso inicio a função dentro do onload do body.

<body onLoad=”iniciaFlash()”>

E a mais simples e talvez a melhor.

<object type=”application/x-shockwave-flash” data=”arquivo.swf” width=”390” height=”321“>
<param name=”movie” value=”arquivo.swf” />
</object>

Agora você pode escolher a que melhor se encaixar no seu projeto.

Abraços e até o próximo Post.

• 6 comentários
• Comentar
• Permalink
• Compartilhe

A importância da redução do peso das páginas

Navegantes,

faz dois meses que mudei de emprego (puxa, sorte sua. Teho mais o que fazer…).

Antes me preocupava apenas em não deixar as imagens ou animações em flash muito pesadas, mas não pensando em trfego, mas no usuário que ia acessar.

Logo que entrei aqui, no **, percebi quão necessário é a otimização dos códigos HTML, CSS, JavaScript e das imagens. Pensava, um kb a mais não fará diferença, mas se a página que você desenvolveu tiver uma regularidade de acessos muito grande, algo como 5 milhões mês, esse 1 kb, se torna mais de 4 gigas de trafego, isso é muito por tão pouco, não acham?

“Garcia, as páginas que costruo nunca passam de 1000 visitas mês, por que preciso me preocupar?”

É simples, trafego custa dinheiro. Em um servidor barato mais 100 mbs de trafego você pagará cerca de R$ 10,00 mês. Ou seja, você estará perdendo cerca de R$ 120,00 mês, simplesmente por que não quer melhorar seus códigos ou diminuir um pouco a resolução da uma imagem. Sem contar que você ajuda aquele que navega, pois carrega mais rápido, conseqüentemente ele acaba voltando. Você ajuda na indexação do seu site no Google, pois um código menor e melhor é melhor visto pelo robo deles. E, por incrível que pareça, você ajuda a natureza. (Como assim? Não vou plantar árvores nem nada) Simples, quanto menos a quantidade de Kbs de uma página mais rápido ela se torna para carregar o que economiza energia de quem está acessando e do servidor, pois trabalha menos.

“Legal, acho que vou tentar, mas como? O que eu posso fazer para diminuir o peso das minhas páginas?”

São Algumas coisas simples que com o tempo se tornam rotineiras pra você.

Vou citar algumas ações dividindo-as por IMG, CSS e HTML.

IMG.

No caso de Imagem, o que você pode fazer é diminuir o tamanho e a qualidade.

Ex. Você tem uma imagem com 500×500, mas vai exibir em 400×400, por que não diminuir o tamanho desta imagem, afinal você não utilizará ela toda.

Já a qualidade da imagem você pode diminuir utilizando um software de edição de imagens como o Photoshop. No caso do Photoshop, você precisa clicar em arquivo e exportar para Web. Selecionar jpg e diminuir a qualidade. Por padrão vem em 100%, mas cerca de 40% é o suficiênte para não perder muita qualidade.

CSS.

Veja este código.

a#link{

color:#000000;

font-size:15px;

font-family:Arial;

font-weight:bold;

margin-top:10px;

margin-left:5px;

margin-bottom:10px;

margin-right:5px;

}

(160 bytes)

tudo em uma linha. Eu costumava pra facilitar a visualização, programar cada propriedade em uma linha diferente. O Simples fato de passar a programar em uma linha diminui o peso do código em cerca de um kb.

Ex. em uma linha:

a#link{color:#000000; font-size:15px; font-family:Arial; font-weight:bold; margin-top:10px; margin-left:5px; margin-bottom:10px; margin-right:5px; }

(148 bytes}

Evitar espaços. Cada espaço consome 1byte, se você tiver em seu código 1024 espaços você terá 1kb em espaços.

Ex. sem espaço.

a#link{color:#000000;font-size:15px;font-family:Arial;font-weight:bold; margin-top:10px;margin-left:5px;margin-bottom:10px;margin-right:5px;}

(140 bytes)

Tirando o ; da última propriedade.

a#link{color:#000000;font-size:15px;font-family:Arial;font-weight:bold;

margin-top:10px;margin-left:5px;margin-bottom:10px;margin-right:5px}

(139 bytes)

Uma única propriedade para vários atributos, quando possível.

a#link{color:#000000;font:bold 15px Arial;margin:10px 5px}

(58 bytes)

Diminuindo para 3 a quantidade de caracteres de uma cor quando tiver os 6 caraceres iguais.

ex.

a#link{color:#000;font:bold 15px Arial;margin:10px 5px}

(55 bytes)

Setando direto a tag quando for sempre igual.

ex.

a{color:#000;font:bold 15px Arial;margin:10px 5px}

(50 bytes)

Viram, apenas com isso reduzi de 160 para 50 bytes esse código, agora imagine em um código de 500 linhas…

HTML.

Não consigo pensar um exemplo assim de cara, mas o simples fato de você setar a tag com as propriedades css fará com que você diminua a quantidades de declaração de classes e de ids.

Concluindo…

Não é dificil. É apenas uma prática, uma prática que se tornará usual a você. Você terá um site mais rápido, um site melhor indexado, um site com possibilidades de mais visitas e de quebra você ainda ajuda a salvar o planeja.

Tem também a identação que pode e deve ser usada no CSS e no HTML, isso eu explico depois.

Abraços

• 3 comentários
• Comentar
• Permalink
• Compartilhe