Visión general

Un problema de renderización de una página web ocurre cuando una página no se muestra o funciona correctamente en el dispositivo de un usuario. Este problema puede manifestarse de diversas maneras, como imágenes incompletas o distorsionadas, diseño roto, tiempos de carga lentos o características que no responden. La causa de estos problemas puede deberse a varios factores. 

HTTP Archive (HAR) es una herramienta que puede ayudar a diagnosticar y resolver problemas de renderización de páginas web. HAR permite a los administradores de red capturar y analizar datos de tráfico de red, incluyendo solicitudes, respuestas y tiempos, generados cuando un usuario accede a una página web. Estos datos pueden proporcionar información sobre cómo se carga y funciona una página web, identificar cuellos de botella o errores, y ayudar a identificar la causa raíz de los problemas de renderización.

Este artículo discutirá cómo podemos usar los datos HAR para solucionar problemas de renderización de páginas web.

Entorno

Se requieren datos HAR.

Instrucciones

Recopile los datos HAR replicando el problema. Para obtener instrucciones sobre cómo recopilar datos HAR, consulte este artículo. Analizaremos cómo utilizar los datos HAR recopilados para revelar problemas observando los códigos de estado HTTP así como el tiempo de respuesta de las solicitudes HTTP.  

Códigos de Estado HTTP

Los códigos de estado HTTP proporcionan información sobre el estado de una solicitud del cliente a un servidor, ayudando a diagnosticar y solucionar cualquier problema que pueda surgir durante el proceso de comunicación. A continuación se presentan los códigos de estado HTTP comunes y lo que significan. Consulte la página de Definición de Código de Estado HTTP/1.1 para obtener los detalles.

• 200 - Éxito
• 404 - Página no encontrada / Solicitud Incorrecta
• 401 - No autorizado
• 403 - Prohibido 
• 304 - No Modificado (El contenido está en caché)
• 500 - Error Interno del Servidor

Pasos

1. Cargue los datos HAR recopilados en Google HAR analyzer
2. Filtre las solicitudes por códigos de estado HTTP.
   Ejemplo
   A continuación se muestra un archivo HAR que se cargó en el analizador HAR de Google. Esta conexión es un intento de navegar por Facebook en el que el contenido no se cargó correctamente. Filtrando por códigos de estado HTTP no exitosos (no-2xx), podemos ver que hay muchas respuestas 403 (prohibido) para el nombre de dominio x.x.fbcdn.net (marcadas en amarillo). El siguiente paso sería investigar más a fondo por qué estas solicitudes están prohibidas. 
   
   
   
3. Para el país donde el acceso a Google está restringido (por ejemplo. China), no es posible acceder al analizador HAR de Google. En este caso, puede cargar los datos HAR en la misma herramienta de desarrollo en la que se recopilaron los datos y luego ordenar por el código de estado HTTP en orden descendente.
   

Tiempo de Carga Prolongado de la Página Web

Uno de los problemas más frecuentes encontrados con aplicaciones web es su carga lenta de página web o, en algunos casos, la falla en cargar la página web por completo. Utilizando los datos HAR recopilados, podemos profundizar en los detalles de cada solicitud e identificar cuáles experimentan retrasos significativos en la carga. Es posible que ciertas solicitudes estén atrapadas en un estado de carga perpetuo, contribuyendo a la lentitud general de la aplicación. Analizar los datos HAR nos permite identificar estas solicitudes problemáticas y tomar medidas apropiadas para abordarlas.

Pasos

1. Cargue los datos HAR recopilados en Google HAR analyzer

2. Haga clic en en la solicitud que demora en responder (típicamente la barra más larga viendo el tiempo total)

3. Verifique cuál es el principal contribuyente a la demora (Bloqueo, Espera o Recepción)
   Campos de Tiempo Importantes
   Tiempo de bloqueo - Tiempo que la solicitud pasó esperando antes de que pudiera ser enviada por el navegador.
   Tiempo de espera - Cantidad de tiempo esperando a que responda el servidor. Si este valor es alto, podría significar que el servidor está ocupado o experimentando un problema de rendimiento. Abajo podemos ver que hay un tiempo de espera de alrededor de 5 segundos desde el servidor:
   Tiempo de recepción - Este es el tiempo usado por el servidor para transferir la información requerida al cliente. Típicamente aquí es donde detectamos que hay un problema de red. 
   
   NOTA: El campo de tiempo también está disponible al usar la herramienta de desarrollo en Chrome, proporcionando un desglose similar de las fases de tiempo. Para una explicación detallada de las fases del desglose de tiempo, consulte timing-preview.
   

4. Para el país donde el acceso a Google está restringido (por ejemplo. China), no será posible acceder al analizador HAR de Google. En este caso, puede cargar los datos HAR en la misma herramienta de desarrollo en la que se recopilaron los datos.
5. El análisis sería similar al paso 2, donde nos enfocamos en identificar conexiones con los tiempos de respuesta más largos. Para ilustrar, en la captura de pantalla proporcionada a continuación, en la Sección de Visión General, podemos observar varias conexiones que están experimentando retrasos significativos en la carga. Al resaltar estas conexiones dentro de la Sección de Visión General, podemos identificar algunas solicitudes que tardan más de 30 segundos en cargarse. Seleccionar una de estas conexiones revela que es una solicitud a app.launchdarkly.com.
   
6. Una vez que se han identificado las solicitudes que experimentan tiempos de carga prolongados, se puede llevar a cabo una mayor investigación para descubrir la causa subyacente del retraso. Un posible factor a explorar es la presencia de firewalls locales que podrían estar bloqueando estas solicitudes.
7. En ciertas regiones, como China, es un problema conocido que algunas solicitudes pendientes prolongadas dentro de aplicaciones puedan atribuirse a rastreadores incrustados. Para obtener más detalles, consulte China | Problemas de Renderización de Páginas Web.