Como viene siendo habitual, seguimos repasando algunas de las APIs que acompañan a la especificación de HTML 5. Esta semana me gustaría contaros algunos detalles sobre una API poco conocida llamada Navigation Timing, la cual nos proporciona información realmente útil para conocer la velocidad y el rendimiento del sitio web. En la especificación se indica que existen dos interfaces disponibles:

PerformanceTiming

Encargada de proporcionarnos los tiempos de diferentes acciones, como pueden ser la carga de la página, una redirección, la descarga del anterior documento, tiempo de respuesta de una petición al servidor, etcétera.

PerformanceNavigation

Relacionada con la navegación: Nos facilita información sobre en qué condiciones se ha navegado: a través de una navegación desde un link o introduciendo una URL, recargando la página, moviéndonos a través del histórico de la ventana o ninguna de las anteriores (también se contempla ;))

Para acceder a ambas interfaces haremos uso de window.performance.

Os dejo algunos ejemplos de lo mencionado anteriormente:

Calcular el tiempo de carga de la página

Uno de los usos más comunes que podemos darle a esta API es conocer el tiempo que tarda una página en concreto en cargar el contenido. Para ello, podríamos utilizar el siguiente código:

        window.onload = function () {
            var result = new Date().getTime() - window.performance.timing.navigationStart;
            console.log(new Date(window.performance.timing.navigationStart));
            console.log(result + 'ms');
        };

A diferencia de las técnicas utilizadas hasta ahora, gracias a window.performance.timing.navigationStart nos devuelve el tiempo inmediatamente después de que el navegador haya terminado con la anterior acción unload. Si no hubiera una página cargada anteriormente donde se iniciara dicho evento, la propiedad devolverá el mismo valor que otra llamada fetchStart, la cual devuelve el tiempo desde el cual el navegador comenzó a recuperar un recurso.

Para tener una perspectiva más amplia sobre a qué punto corresponde cada medida que nos proporciona el navegador, la imagen que muestra la W3C nos puede dar una visión lo suficientemente completa:

Conocer el tipo de navegación que está realizando el usuario

Otra característica curiosa que podemos auditar es conocer bajo qué circunstancias se ha navegado a esa página:

window.onload = function () {
    var msg;
    switch (performance.navigation.type) {
        case 0:
            msg = 'action by the user such as clicking a link or entering a URL in the browser address bar';
            break;
        case 1:
            msg = 'page reload';
            break;
        case 2:
            msg = 'navigation by moving back or forward through history';
            break;
        default:
            msg = 'unknown';
    }
    console.log(msg);
};

En el sitio Test Drive de Microsoft, podemos visualizar la siguiente demo donde podemos ver de una forma muy visual los valores aportados por esta API.

Espero que sea de utilidad 🙂

¡Saludos!