Quando se trata de analisar o desempenho da página, o guia de fluxo de rede de sua ferramenta de monitoramento HTTP favorito (por exemplo, Chrome Dev Tools, Firebug, Fiddler etc.) é sem dúvida a ferramenta mais útil à nossa disposição. Agora, não seria bom se pudéssemos exportar o fluxo de melhores relatórios de bugs, monitoramento de desempenho, ou posteriores análises em profundidade?

Bem, boa notícia,  é precisamente para isso que o formato de dados HTTP Archive (HAR) de dados foi criado. Ainda melhor, as chances são de que a sua ferramenta de monitoramento favorito já saiba como falar em HAR, o que abre uma série de possibilidades – vamos explorar.

O “HAR Show” em GDL

A melhor parte de trabalhar com dados HAR é o número de ferramentas gratuitas disponíveis para analisá-los, visualizá-los, e até mesmo torná-los uma tendência com o tempo. Para destacar algumas dessas aplicações, Peter Lubbers e eu gravamos um episódio GDL sobre demos impressionantes. Assista no vídeo acima ou (e) continuar a ler para alguns destaques.

HAR 101: o formato de dados

Um arquivo HAR é codificado com um formato JSON simples, o que é facilmente criado e consumido. Cada arquivo HAR contém uma lista de páginas carregadas, e uma lista de entradas para cada recurso solicitado para cada página – veja o exemplo. Por sua vez, cada recurso armazena o tempo de início do pedido, o método de pedido, todos os cabeçalhos, cookies, e o tamanho do payload. Da mesma forma, o objeto de resposta contém todos os dados de resposta associados, incluindo dados de tempo de resposta, tais como data e hora para DNS, SSL handshakes, conexão TCP, e os tempos de espera, entre outros.

Em outras palavras, o arquivo HAR contém todos os metadados que você precisa para criar o fluxo de rede. A única omissão notável é o próprio corpo de resposta – por padrão, a maioria das ferramentas só vai guardar os metadados.

Mas, chega de teoria, como é que vamos obter um arquivo HAR? Simples, no Chrome, abra a aba Network em Dev Tools, clique com o botão direito em fluxo, e aí está: Save all as HAR. Note que você também pode exportar um pedido individual, ou simplesmente copiar os dados JSON em um clipboard.

Analisando arquivos HAR

Ótimo, nós podemos exportar o fluxo de rede em formato HAR, e agora? Bem, para começar, você pode guardá-lo para análise posterior, ou anexá-lo a um relatório de bug – com certeza é melhor anotar screenshots do cronograma. Mas você também pode alimentar os dados em HAR Viewer, para ter uma linha do tempo interativa diretamente no seu navegador:

O HAR Viewer é um aplicativo gratuito e de código aberto (PHP + JavaScript), em que você pode se hospedar, ou utilizar a versão hospedada: cole os dados HAR que você copiou anteriormente, e você pode ver a linha do tempo. Alternativamente, se você precisa de uma forma rápida de visualizar um arquivo HAR local, em seguida, o har Ruby gem é indispensável:

[code]

gt;gem install har
gt; har /path/to/waterfall.har

Merging HARs…done.
Creating viewer…done.
Starting server…
[2012-08-26 10:18:55] INFO  WEBrick 1.3.1

[/code]

O gem vai instalar um servidor locar e abrir automaticamente uma aba no navegador para o visualizador de fluxo HAR – mamão com açúcar.

Otimização de desempenho e tendências

O melhor de ser capaz de exportar dados de rede detalhados para qualquer página é que isso nos permite automatizar o processo, captar tendências de longo prazo e identificar regressões e anomalias. Vamos usar PhantomJS, que é um navegador WebKit sem cabeçalho com total suporte para JavaScript, para capturar o fluxo de rede diretamente do CLI:

[code]

# download, and unpack PhantomJS: http://phantomjs.org/download.html
gt;phantomjs examples/netsniff.js http://www.igvita.com/ > igvita.har

gt; npm install yslow -g
gt; yslow –info basic –format plain igvita.har
size: 67.0K (67000 bytes)
overall score: A (94)
url: http://www.igvita.com/
# of requests: 9
ruleset: ydefault
page load time: 821

gt; yslow –info all –format json igvita.har
…

[/code]

Assim que temos o arquivo HAR, também o alimentamos para o YSlow para marcar a execução e construir um breve relatório. De forma alternativa, o YSlow também pode fornecer um JSON completo, ou análise XML com respeito a todas as regras internas. Se você é um fã de PageSpeed, você pode baixar e compilar o SDK, que lhe dará um binário har_to_pagespeed para análise similar.

Com isso, agora você pode adicionar um passo extra no seu CI Build para capturar o fluxo de rede, checar regressões e disparar os alarmes necessários. Agora, que tal algumas tendências ou análise histórica? Nós podemos fazer isso também, com a ajuda de uma ferramenta gratuita e de código aberto: HAR Storage. A ferramenta foi construída usando Pylons e MongoDB, o que permite fazer log de medições, comparar, executar análises agregadas e muito mais.

Uma suíte de desempenho open source em três passos simples: capturar HAR com PhantomJS, analisar com YSlow para anomalias, exportar automaticamente para HAR Storage para tendências.

Dicas avançadas: PCAP e traços de servidor

O navegador é uma forma conveniente para capturar e exportar HARs, mas não é a única maneira. Contanto que você possa configurar o aplicativo de seu cliente para usar um proxy, como Charles Proxy (Mac) ou Fiddler (Windows), então você pode exportar os mesmos dados. Mas e se você não controlar o cliente, ou não houver nenhuma maneira fácil de forçar um proxy? A maioria dos telefones móveis se enquadra nessa categoria. Não seria bom se pudéssemos registrar, visualizar e analisar os dados para esses dispositivos também?

Bem, aqui está o truque: execute um hotspot Wi-Fi a partir do seu computador, conecte-se a ele através do seu aparelho móvel, e capture o fluxo de tráfego TCP com sua ferramenta favorita (tcpdump, Wireshark, ou similar). Com o arquivo pcap na mão, podemos convertê-lo em um arquivo HAR com pcap2har, ou visualizá-lo diretamente no HAR Viewer com pcapperf!

Finalmente, por que limitar dados HAR para navegação na web? Afinal, muitos servidores de aplicação seguem o mesmo padrão: a solicitação chega, nós despachamos os pedidos para bancos de dados ou outros serviços, agregamos, retornamos resposta. No processo, nada impede de criar um traço de execução do servidor simples e formatado em HAR. Na verdade, aqui está um exemplo trivial:

A solicitação veio para o mais recente feed RSS, o que provocou um pedido de busca para uma lista de artigos mais recentes e, em seguida, buscou um paralelo para cada ID de artigo. Você pode instrumentar o código ou usar o truque pcap acima para capturar os mesmos dados, visualizá-los, prová-los, e torná-los tendência com o tempo. Você está agora a um passo de construir o seu próprio Google Dapper!

Invista em ferramentas e instrumentação

Boa instrumentação é a chave para boas práticas de desempenho. Encontrar a causa raiz de uma regressão após a ocorrência do problema, e sem os dados de desempenho passados, é frequentemente como tatear no escuro. A boa notícia é que, como vimos acima, temos todas as peças necessárias: um formato de dados flexível e fácil de interpretar, uma larga adoção e uma abundância de grandes ferramentas existentes para ajudar a analisar os dados.

***

Artigo traduzido pela Redação iMasters, com autorização do autor. Publicado originalmente em http://www.igvita.com/2012/08/28/web-performance-power-tool-http-archive-har/