Monthly Archives: November 2011

HTTP WPO

Content Delivery Network – CDN, Você ainda vai usar uma

26/11/2011 – 9:00 pm

Uma CDN (Content Delivery Network) é uma rede de computadores distribuídos geograficamente com cópias de conteúdos a serem acessados.

A CDN tem dois grandes objetivos o primeiro é tornar mais próximo o conteúdo que esta sendo distribuído e solicitado (Imagens, Stylesheets, Scripts, Flashs, Músicas, PDF’s e etc) dos usuários assim diminuindo o tempo de resposta e latência destes componentes, o segundo é diminuir custos com banda/tráfego de dados (do site que esta utilizando a CDN) e por conseqüência diminuir a quantidade de requisições diretas ao servidor real do site desafogando e muito a infra “local”.

É normal um site sendo acessado de uma país ter grandes diferenças no tempo de resposta das páginas quando acessado de um país vizinho, até mesmo diferenças entre cidades ou bairros. Isto ocorre devido ao roteamento entre as requisições e os servidores que estão sendo solicitados que dependendo do link ou região que o usuário se encontra os saltos são maiores ou menores e com velocidades diferentes também.

Uma solução interessante seria entregar para cada usuário ou região o conteúdo que esteja mais próximo da requisição que esta sendo feita e é justamente ai que uma CDN faz a diferença melhorando incrivelmente a experiência do usuário e o tempo de resposta dos componentes que estão sendo solicitados pelo usuário.

Existem CDN’s comerciais ou pagas e CDN’s gratuitas abaixo listo algumas bem famosas e recomendadas pela indústria.

CDN’s Comerciais:
Akamai
EdgeCast Networks
Limelight Networks

Curiosidade

Daniel M. Lewin um dos fundadores da Akamai estava em um dos vôos do 11 de setembro de 2001 e faleceu.

Conclusão

Aumente a performance do tempo de resposta dos componentes de suas páginas, faça os usuários mais felizes e ainda diminua alguns gastos com o alto tráfego que você tem hoje sem uma CDN pra te dar uma força.

Tags | Comment (1)
Mercado WPO

Web Performance Optimization – WPO

26/11/2011 – 8:52 pm

A cada dia novas startups surgem com idéias inovadoras em ramos diferentes, mas o que todas elas têm em comum é que normalmente praticamente toda sua operação e infraestrutura vivem na Web, a “lojinha”, o “ganha pão” está e somente é acessível através de uma URL.

Isto requer um investimento menor já que é mais barato no começo criar um site do que montar por exemplo uma loja física (comparando a outros negócios).

Uma vez que a empresa vive através da World Wide Web é fundamental que o tal site esteja otimizado afim de garantir entre outras coisas um rápido atendimento (e a qualquer momento, afinal acho que essa é uma vantagem da Web), satisfação do cliente, um baixo (ou o mais baixo possível) custo para manter a “lojinha” aberta (o site do ar), fidelização da clientela, aumento da taxa de conversão, uma fácil descoberta de seus produtos ou serviços por potenciais interessados (SEO), etc etc etc.

WPO – Web Performance Optimization é uma recente área de estudo e otimização pra Web Sites e deve ser observada e utilizada cada dia mais por todos aqueles que pretendem trabalhar ou até viver de internet (no caso dos empreendedores). WPO é parecido com SEO do ponto de vista que também traz mais trafego para o site, mas não para por aí, de acordo com alguns cases que veremos abaixo também melhora a experiência do usuário, aumenta receita e diminui custos operacionais.

Parece ridículo, mas apenas 1 segundo a mais ou a menos no tempo de carregamento de uma página faz muita diferença dependendo de qual site estamos falando, veja alguns exemplos:

Bing – 2 segundos a mais no tempo de resposta de suas páginas é igual a 4,3% de receita a menos por usuário.

Google – 400 milisegundos de delay é equivalente a 0,59% de buscas a menos por usuário.

AOL – Atestou que usuários que carregam páginas rápidas navegam 50% mais que usuários com páginas com carregamentos mais demorados (50% de páginas a mais por usuário)

ShopZilla – Diminuiu o tempo de carregamento das páginas de 7 segundos para 2 segundos e conseguiu aumentar de 7% para 12% em receita e diminuir em 50% os custos com hardware e banda.

Fonte: Gomez Inc

Empresas sérias que tem milhares ou milhões de acessos diariamente devem sem sombra de dúvidas melhorar a performance de suas páginas, simplesmente você ganha mais e gasta menos! veja que maravilha!

Há varias formas e técnicas para aumentar a performance das páginas de nossos sites, mas isso é assunto para um outro post. (em breve postarei algumas coisas.)

Importante: Não poderia deixar de dizer que o Google já há algum tempo vem utilizando o fator “velocidade/performance” como critério para o resultado de suas buscas, ou seja, agora páginas rápidas ou performáticas são melhor indexadas pelo maior mecanismo de buscas do planeta.

Conclusão

Melhorar a performance de nossas páginas diminui custos de operação com hardware e banda (pois se trafega menos dados e diminui em manutenção dos servidores, por exemplo), aumenta tempo de navegação e pageview por usuário (logo da pra vender mais, aumentando a receita), fortifica a marca afinal sites rápidos são adorados pelos usuários e eles recomendarão com certeza, etc e tal!

Tags | Comment (0)
Front-end

Cuidado com os Cookies, use cookie-free domains

18/11/2011 – 9:16 pm

Post rápido prometo. Piadinhas de cookie a parte :D a coisa é bem séria.

É muito comum nós Web Developers guardarmos informações em cookie(s) no(s) browser(s) do(s) usuário(s), certo? Sim certo!

As vezes até “sem querer” fazemos isso (até sem saber), por exemplo, vários frameworks web (inclusive o ASP.NET) armazena no cookie informações para fazer a autenticação dos usuários na aplicação.

Ok, mas e daí!?

Bom, e daí que não é através de mágica que nós conseguimos acessar lá no SERVER os dados do cookie que fica no BROWSER do usuário.

A toda request feita para o servidor pelo browser o cookie do usuário (sem piadinhas aqui ok? :D ) vai junto, é trafegado na request. Sério? Sim, sério.

A grande questão aqui é que o cookie é baseado em subdomínio, ou seja, se eu gero um cookie qualquer para www.meusite.com.br, toda request feita para o “www” levará o cookie junto (sem piadas novamente), inclusive requisições para imagens, arquivos css e javascript e tudo que estiver apontando para o subdomínio “www”.

Agora cá pra gente, por que raios a gente precisa trafegar os cookies para imagens e arquivos estáticos em geral? Não precisamos! Não serve pra nada, nem pra gente e nem para o servidor, é um grande desperdício!

O que eu faço então?

Use cookie-free domains, se nós criarmos um novo subdomínio, por exemplo, static.meusite.com.br e fizermos com que todos os arquivos estáticos apontem para este subdomínio bingo! Os cookies não serão trafegados porque eles foram gerados para o “www” e não para o “static”, dessa forma conseguimos economizar alguns Kilobytes no final do mês no tráfego geral do site :) , chique não?

Qualquer dúvida ou sugestão, deixe-me saber nos comentários

Abraços

Comment (0)
Front-end

DOMContentLoaded vs load

15/11/2011 – 10:51 pm

Olá pessoal,

Resolvi escrever este pequeno post para explicar a diferença entre dois (famosos) eventos que são disparados quando uma página é carregada, são eles:

  • DOMContentLoaded;
  • load

Estes eventos são muito importantes e devemos saber a real diferença entre eles, assim usaremos cada um deles de maneira apropriada :)

DOMContentLoaded

Também conhecido em JQuery como: $(document).ready

Este evento é disparado quando o documento HTML é carregado e parseado (analisado), neste momento o DOM (Document Object Model) é construído e esta pronto para ser acessado.

Não há a necessidade de esperarmos todo o resto da página ser carregado para acessarmos a estrutura de objetos e fazermos manipulações :) .

Load

Também conhecido em JQuery como: $(window).load

Este evento por sua vez é disparado quando TODOS os componentes da página são carregados: Imagens, CSSs, JavaScripts, Frames, Flashs e etc.

Devemos usar este evento somente quando quisermos fazer algo depois do carregamento COMPLETO da tal página.

Exemplo de DOMContentLoaded vs load


Tirei a imagem acima do FireBug uma extensão do Firefox.

Perceba duas linhas verticais uma azul e outra vermelha, que representam os eventos DOMContentLoaded e load respectivamente. No tooltip ainda conseguimos ver a quantidade de tempo que se passou até que esses eventos fossem disparados, interessante não?

Quanto mais perto uma linha da outra mais rápido sua página esta sendo carregada!

Componentes de terceiros – CUIDADO!

Sim! Botões do Facebook, coisas do Twitter e etc, tudo que for de terceiro que estiver “pindurado” em sua página vai interferir ou postergar o evento load de sua página, portanto cuidado!

O ideal nesses casos é carregar tais componentes de modo assíncrono, mas isso é assunto para um próximo post :) .

Espero ter contribuído de alguma forma

Abraços!

Comment (0)