Visão Geral

Um problema de renderização de página web ocorre quando uma página não é exibida ou não funciona corretamente no dispositivo de um usuário. Esse problema pode se manifestar de várias formas, como imagens incompletas ou distorcidas, layout quebrado, tempos de carregamento lentos ou funcionalidades que não respondem. A causa desses problemas pode originar-se de vários fatores. 

HTTP Archive (HAR) é uma ferramenta que pode ajudar a diagnosticar e resolver problemas de renderização de páginas web. HAR permite que administradores de rede capturem e analisem dados de tráfego de rede, incluindo solicitações, respostas e tempos, gerados quando um usuário acessa uma página web. Esses dados podem fornecer insights sobre como uma página web está carregando e desempenhando, identificar quaisquer gargalos ou erros, e ajudar a identificar a causa raiz dos problemas de renderização.

Este artigo discutirá como podemos usar dados HAR para solucionar problemas de renderização de páginas web.

Ambiente

Dados HAR são obrigatórios.

Instruções

Colete os dados HAR enquanto replica o problema. Para instruções sobre como coletar dados HAR, consulte este artigo. Vamos analisar como utilizar os dados HAR coletados para revelar problemas, observando os códigos de status HTTP bem como o tempo de resposta das solicitações HTTP.  

Códigos de Status HTTP

Códigos de status HTTP fornecem informações sobre o status de uma solicitação do cliente para um servidor, ajudando a diagnosticar e a solucionar quaisquer problemas que possam surgir durante o processo de comunicação. Abaixo estão os códigos de status HTTP comuns e o que eles significam. Consulte a Definição de Código de Status HTTP/1.1 para obter os detalhes.

• 200 - Sucesso
• 404 - Página não encontrada / Solicitação incorreta
• 401 - Não autorizado
• 403 - Proibido 
• 304 - Não Modificado (O conteúdo está em cache)
• 500 - Erro Interno do Servidor

Passos

1. Carregue os dados HAR coletados no analisador HAR do Google
2. Filtre as solicitações por códigos de status HTTP.
   Exemplo
   Abaixo mostra um arquivo HAR que foi carregado no analisador HAR do Google. Esta conexão é uma tentativa de navegar pelo Facebook na qual o conteúdo não carregou corretamente. Filtrando por códigos de status HTTP não bem-sucedidos (não-2xx), podemos ver que há várias respostas 403 (proibido) para o nome do domínio x.x.fbcdn.net (marcado em amarelo). O próximo passo seria investigar mais aprofundadamente por que essas solicitações são proibidas. 
   
   
   
3. Para países onde o acesso ao Google é restrito (por exemplo, China), acessar o analisador HAR do Google não é possível. Neste caso, você pode carregar os dados HAR na mesma ferramenta de desenvolvimento em que os dados foram coletados e, em seguida, ordenar pelo código de status HTTP em ordem descendente.
   

Longo Tempo de Carregamento de Página Web

Um dos problemas mais prevalentes encontrados com aplicativos da web é o carregamento lento ou, em alguns casos, a falha ao carregar a página web por completo. Utilizando os dados HAR coletados, podemos explorar os detalhes de cada solicitação e identificar quais estão experimentando atrasos significativos no carregamento. É possível que certas solicitações estejam presas em um estado de carregamento perpétuo, contribuindo para a lentidão geral da aplicação. Analisando os dados HAR podemos identificar essas solicitações problemáticas e tomar as medidas apropriadas para resolvê-las.

Passos

1. Carregue os dados HAR coletados no analisador HAR do Google

2. Clique na solicitação com demora na resposta (tipicamente a barra mais longa visualizando o tempo total)

3. Verifique qual é o principal contribuidor para o atraso (Bloquear, Espera ou Recepção)
   Campos de Tempo Importantes
   Tempo Bloqueado - Tempo que a solicitação passou esperando antes de poder ser enviada pelo navegador.
   Tempo de espera - Quantidade de tempo esperando pelo Servidor para responder. Se este valor for alto, isso pode significar que o servidor está ocupado ou enfrentando um problema de desempenho. Abaixo podemos ver que há cerca de 5 segundos de tempo de espera do servidor:
   Tempo de recepção - Este é o tempo usado pelo servidor para transferir as informações necessárias para o Cliente. Normalmente, é aqui que detectamos que há um problema de rede. 
   
   NOTA: O campo de tempo também está disponível ao usar a ferramenta de desenvolvimento no Chrome, fornecendo uma divisão semelhante das fases de tempo. Para uma explicação detalhada das fases de decomposição do tempo, consulte a visualização do tempo.
   

4. Para países onde o acesso ao Google é restrito (por exemplo, China), acessar o analisador HAR do Google não será possível. Neste caso, você pode carregar os dados HAR na mesma ferramenta de desenvolvimento em que os dados foram coletados.
5. A análise seria similar à etapa 2, onde nos concentramos em identificar as conexões com os tempos de resposta mais longos. Para ilustrar, na captura de tela fornecida abaixo, na Seção de Visão Geral, podemos observar várias conexões que estão experimentando atrasos significativos no carregamento. Destacando essas conexões na Seção de Visão Geral, podemos identificar algumas solicitações que levam mais de 30 segundos para carregar. Selecionar uma dessas conexões revela que é uma solicitação para app.launchdarkly.com.
   
6. Uma vez identificadas as solicitações que apresentam longos tempos de carregamento, uma investigação mais aprofundada pode ser realizada para descobrir a causa subjacente do atraso. Um fator potencial a ser explorado é a presença de firewalls locais que podem estar bloqueando essas solicitações.
7. Em certas regiões, como China, é um problema conhecido que algumas solicitações pendentes prolongadas dentro de aplicações possam ser atribuídas a rastreadores embutidos. Para mais detalhes, consulte China | Problemas de Renderização de Páginas Web.