¿Tu web es demasiado lenta y quieres saber qué elemento de la interfaz puede estar afectando a la velocidad de carga?
La velocidad percibida por los usuarios al acceder a un sitio web es un factor determinante a la hora de causar una buena impresión o, por el contrario, desencadenar su abandono prematuro. Los aspectos que más influyen en el tiempo transcurrido entre la petición inicial del usuario y el momento en que puede interaccionar con el sitio son, fundamentalmente, el número y tamaño de las hojas de estilos, las imágenes y los módulos JavaScript, pero también en dónde van colocados y cómo se invocan.
Una de las herramientas que podemos utilizar para analizar la carga de una página y simular diferentes condiciones la tenemos directamente en el navegador: la pestaña Network de las herramientas del desarrollador (DevTools). En esta herramienta, lo básico es inspeccionar la cantidad de conexiones efectuadas, que dependerá del número de elementos distintos a transferir, y el tiempo que se tarda en cada una de ellas, además de los recursos que bloquean la carga de otros. Es fácil también apreciar los recursos que se solicitan en paralelo.
En el siguiente vídeo, perteneciente al curso de Interfaces web responsive con HTML5, Flexbox, CSS Grid y Bootstrap, nuestro tutor José Manuel Alarcón te explica cómo utilizar esta herramienta para analizar la carga de las páginas, su rendimiento, simular conexiones de distinto tipo y, en general, entender cómo funciona y qué debemos mejorar.
Nota: es interesante probar el acceso al sitio en una configuración lo más cercana posible a la real, a ser posible en el servidor real que se usará, y no cargando directamente desde un servidor local en el mismo equipo (aunque luego en el vídeo lo hagamos así como demostración).
Fecha de publicación: