Aprender a revisar la velocidad de un sitio web no tiene que ser desalentador. En esta pequeña guía veremos lo básico y el camino a seguir. También puede ver los consejos que dimos hace unos días, 5 pasos para mejorar la velocidad de una web.
Cuantas métricas existen
Si algo es medible es necesario conocer que magnitud se utiliza, que métricas son las que indican si un valor es mejor o peor que otro. Pero en el caso de una web tenemos que entender que no existe una métrica o medición única para la «velocidad». No hay un número simple que se pueda utilizar para medir la rapidez con la que se cargan tus páginas. Veremos que si hacemos varios test obtendremos resultados dispares.
Piensa en lo que sucede cuando cargas un sitio web. Hay muchas etapas diferentes y muchas partes diferentes que se pueden medir. Si la conexión de red es lenta, pero las imágenes se cargan rápidamente, ¿es «rápido» el sitio? Son muchas las variables que pueden afectar a la velocidad de carga.
Si nos empeñamos en dar un número para el cálculo de la velocidad, tendremos que ajustar los parámetros para ello, por ejemplo, para simplificar todo, nos podemos preguntar cual el tiempo que lleva hasta que se cargue por completo una página. Incluso en este caso es difícil dar un número, depende del estado de la red en ese momento, de la carga del servidor, incluso del navegador del visitante.
Por ejemplo, una página que tarda más en «finalizar la carga» puede proporcionar una versión funcional «ligera» mientras la página completa todavía se está descargando en segundo plano. ¿Es eso ‘más rápido’ o ‘más lento’ que un sitio web que se carga más rápido, pero que no puedo usar hasta que termine de cargarse?
Como ves, no podemos dar una respuesta concreto, todo depende de cada situación pero tenemos a nuestra disposición mucha formas de medir la velocidad de carga, aunque no tengamos un número concreto.
Entender el proceso de carga
Desde el momento que haces clic en un enlace comienza un proceso que consta de varios pasos hasta que se carga la página que quieres ver.
En este proceso están involucramos muchos pasos que podemos agrupar para entenderlo mejor en la siguiente imagen:
1. Qué parte depende de la Red
Primero, el hardware físico de tu dispositivo necesita conectarse a Internet. Por lo general, eso implica mover datos a través de cables de fibra transatlánticos. Eso significa que está limitado por la velocidad de la luz y la rapidez con que tu dispositivo puede procesar la información.
¡Es difícil medir o impactar esta parte del proceso!
2. Qué parte depende de del servidor
Aquí tu dispositivo le pide a tu servidor una página, y el servidor prepara y devuelve la respuesta.
Esta sección puede ser un poco técnica, ya que se centra en el rendimiento del hardware del servidor, las bases de datos y los scripts. Es posible que debas solicitar ayuda a su proveedor de hosting o equipo técnico.
Podemos medir el rendimiento del servidor con herramientas como NewRelic o DataDog , que monitoriza cómo se comporta tu sitio y como responde desde el «interior».
Tendrás datos donde indican si tu alojamiento cumple y está a la altura o es necesario hacer cambios o cambiar de hosting.
En el caso de tener WordPress instalado tienes un plugin muy bueno que te dará este tipo de datos, Query Monitor. Te dará la información suficiente de las partes que necesitan mejoras que hacen que tu web sea lenta.
3. Qué pare depende del navegador
Aquí ya estamos en la etapa donde la página necesita ser construida, diseñada, coloreada y mostrada. La forma en que se cargan las imágenes, en la que se procesan JavaScript y CSS, y cada etiqueta HTML de tu página afecta la rapidez con que se carga dicha página.
Ahora ya podemos monitorizar desde fuera hacia en interior con herramientas que puedes escaener tu sitio web y medir como se cargar.
Existen múltiples herramientas para medir estos datos, cada una de ellas lo hace «a su manera», prueba varias de ellas entendiendo los parámetros que están midiendo para poder sacar conclusiones correctas. Por ejemplo puedes comprobar tu sitio web con:
- WebPageTest es excelente para proporcionar una vista ‘en cascada’ del sitio web y cómo se cargan todos los activos. Puedes indicar la ubicación desde donde realizar las pruebas.
- Google PageSpeed Insights muy simple pero es de Goolge. Proporciona «métricas de usuario reales» de tu sitio web.
- Lighthouse for Chrome una extensión para Chrome que porporciona un análisis completo del rendimiento y el comportamiento del sitio.
- El informe de velocidad en Google Search Console muestra qué tan rápido o lento se cargan las páginas en un momento dado.
Métricas universales
Es muy interesante conocer esos parámetro o métricas a la hora de ver los datos que ofrecen las distintas herramientas cuando optimizas tu web. Estos son:
- Tiempo hasta el primer byte: tiempo que tarda hasta que el servidor responde con cierta información. Mide con Query Monitor o NewRelic para comprobar el dato.
- Tiempo hasta First Contentful Paint (comienza a ser visible la web): tiempo que tarda en aparecer en la pantalla el contenido visual. Comprueba con Lighthouse para Chrome .
- Tiempo hasta que sea interactivo: tiempo que tarda en ser visible y reaccionar a mi aportación. Comprueba con Lighthouse para Chrome .
Conclusión
Como resumen, vamos a ver los pasos que debes de seguir para ver la velocidad de carga de tu web
- Utilizar una herramienta como WebPageTest para generar un diagrama en cascada de cómo se carga el sitio web.
- Identificar los cuellos de botella con los servidores. Busca tiempos de conexión lentos, SSL lentos y cargas de DNS lentas. Un plugin como Query Monitor, te ayudará a diagnosticar el motivo de la lentitud de tu web. Realiza cambios necesarios en el servidor, tanto a nivel de hardware, software como de de script.
- Identificar cuellos de botella desde el navegador. Buscar tiempos de carga y procesamiento lentos en imágenes, scripts y hojas de estilo. Para ello herramientas como Google PageSpeed Insights o Lighthouse for Chrome te ayudaran con sugerencias sobre cómo optimizar la carga de la página.
- Utilizar Lighthouse for Chrome para medir las métricas clave , como el tiempo hasta la carga inicial y el tiempo hasta la interactividad.
