Uma introdução a performance

bob — Fri, 12 Dec 2008 19:19:53 +0000

Um assunto muito discutido entre os feeds aqui na Fishy é a perfomance dos sites, principalmente aqueles que possuem muitos backgrounds e usam títulos que usam uma fonte que não é padrão do sistema. O Muqueca é um bom exemplo disso. Sempre analisamos como podemos otimizar o site para um carregamento mais rápido e eficiente, fazendo com que o usuário não espere muito tempo até que o site esteja apresentável.

Mas o que vem a ser performance?

Podemos dizer que é o tempo que a página que está sendo aberta, demora para ter todos os seus arquivos carregados. Dependendo da página isso pode levar alguns segundos, ou até minutos.

E em que isso influencia?

Olhando rapidamente, observamos apenas a demora para que aquela página seja carregada, mas ao aprofundarmos um pouco mais nessa questão, vemos que esse assunto vai mais além do que a espera do usuário. Basta pensar em sites como globo.com, yahoo.com, google.com e lembrar que eles têm milhões de acessos por dia. Olhando mais embaixo, concluímos que números de acesso acarretam em mais downloads dos mesmos arquivos, aumentando a banda que é consumida pelo site e com isso o dinheiro que é gasto para manter o site no ar.

Isso é apenas um dos pontos que uma boa performance pode resolver.

Se tudo der certo, próxima semana iremos começar a otimizar um site :]
até lá

iepngifx.htc

bob — Thu, 11 Dec 2008 19:15:45 +0000

Hoje falaremos um pouco sobre essa gambiarra que é utilizada quando precisamos usar uma imagem png em algum site para que ela apareça corretamente no IE6, já que ele não possui suporte para tal tipo de imagem.
Vamo nessa..

Mas o que é um arquivo .htc?

Trata-se de um arquivo que contém instruções em javascript que são interpretados apenas pelos IE’s. Nesse caso específico, tal arquivo torna possível o suporte a transprânciea de arquivos png de 24bits. Mas usar tal arquivo requer um pouco de atenção, já que seu uso em grandes sites pode acarretar em uma sobrecarga no servidor. Ele é ‘ativado’ através de uma chamada no css, como no exemplo abaixo:

div{behavior:url("iepngfix.htc");}

E aí, o que faço para isso não acontecer?!?

Simples, ao invés de setar que o comportamento htc para todas as divs e imagens, uma coisa realmente desnecessária, devemos setar apenas para as divs que realmente irão necessitar de tal gambiarra. Assim evitamos um processamento desnecessário já que nem todos os elementos da página utilizarão uma imagem png. Para otimizar o uso do .htc basta seguir o exemplo abaixo:

#all{behavior:url("iepngfix.htc");}

Utilizei essa gambiarra no site de Natal do Plaza