como medir o desempenho do sítio web utilizando ferramentas de desenvolvimento do Google Chrome

este artigo descreve como utilizar as ferramentas de desenvolvimento do Google Chrome para medir e monitorizar o desempenho de um sítio Web.

Usando o google Chrome Developer Tools

O navegador de internet Google Chrome inclui Ferramentas de Desenvolvedor, um recurso que ajuda os desenvolvedores da web depurar problemas com HTML, CSS e JavaScript:

• Para acessar Ferramentas do Desenvolvedor do Microsoft Windows ou Linux, pressione Ctrl+Shift+I.
• Para acessar as Ferramentas de Desenvolvedor na Apple Mac OS X, pressione Option+Command+I.

a imagem A seguir mostra as Ferramentas de Desenvolvedor abrir a página inicial do Google:

Na Rede guia do Desenvolvedor do painel Ferramentas, o google Chrome lista todas as ligações da página actual. Para testar uma página específica, abrir Ferramentas de desenvolvimento e navegar para a página que você deseja testar. Alternativamente, se você quiser testar a página atual, basta atualizar a página.

o Chrome mostra informações para cada recurso de página e para o seu pedido:

nome: o nome ou URL do recurso pedido.

Method: the HTTP method (GET or POST).

Status: o código de estado HTTP devolvido pelo servidor.

tipo: o tipo MIME do recurso.

Iniciador: o remetente enviado para o servidor; este é normalmente o URL da página que está a ver.

Tamanho: O tamanho do Recurso recebido pelo navegador (se a página foi comprimida pelo servidor, este valor é menor que o tamanho real do arquivo).

tempo: o tempo total para recuperar o recurso, incluindo o tempo de pesquisa e download do DNS.

Timeline: the timeline is a “waterfall” time-lapse view of each request. Se passar o seu cursor do rato por cima de uma barra na cachoeira, aparece uma dica com uma repartição detalhada do tempo de download:

• bloqueio: isto inclui o tempo para a pesquisa do DNS, o aperto de mão SSL e fazer uma ligação ao servidor.
• envio: Isso inclui tempo para enviar a solicitação com todos os dados de solicitação para o servidor, e para receber a confirmação do servidor de que ele recebeu a solicitação.
• espera: isto inclui tempo para o servidor tornar o conteúdo a ser servido, e para começar a enviá-lo para o navegador.
• receber: isto inclui o tempo que leva para baixar o conteúdo.

a combinação dos tempos de espera e de recepção é o factor mais importante na determinação da velocidade do local. No entanto, a velocidade de conexão à internet também pode afetar o desempenho, por isso você deve sempre comparar os tempos a partir do mesmo local quando você está estabelecendo padrões de desempenho do site.

na parte inferior da Página de rede está um resumo do processo de carga da página. Este resumo inclui o número total de Pedidos, o tamanho total de toda a página, incluindo os seus recursos, e uma repartição do tempo gasto a renderização da Página no navegador.

o valor da primeira vez é o tempo total gasto a carregar todo o conteúdo da página. Este valor inclui o conteúdo carregado pelo JavaScript após a Página ter renderizado; como resultado, este número pode mudar se os pedidos ocorrem em segundo plano.

os dois valores de Tempo dentro dos parênteses são eventos importantes para a otimização do site:

• carregar: Este evento é o momento de carregar a página, incluindo todos os arquivos JavaScript, CSS e imagem que estão no documento HTML original. Este evento geralmente leva mais tempo do que o evento DOMContentLoaded.
• DOMContentLoaded: este evento representa o tempo percebido por um usuário para carregar a página. É a hora de renderizar a página como descrito no documento original antes que JavaScript solicite recursos adicionais. Este tempo é armazenado quando o navegador dispara o evento DOMContentLoaded em JavaScript. (Um exemplo de um recurso que é solicitado fora do DOM é o Google Analytics.)