La velocidad y el rendimiento son críticos para el SEO, pueden suponer una gran diferencia a la hora de estar correctamente posicionados en los buscadores. Antes de conocer cómo mejorar la velocidad de carga de una web, es necesario conocer las técnicas, herramientas y métricas para comprobar la velocidad web y rendimiento.
En Internet existen muchas herramientas para comprobar la velocidad de carga de una web y su rendimiento, entre las cuales veremos:
- WebPageTest. Herramienta que dispone de un gráfico conocido como Waterfall que nos permitirá ver de manera gráfica el orden de carga de los elementos web así como el tiempo, velocidad y rendimiento de carga de los mismos.
- Google Search Console. Herramienta que dispone de una serie de métricas para evaluar el rendimiento web.
- Google PageSpeed Insights. Similar al anterior, nos permite comprobar la velocidad de una web en base a una serie de gráficos basados en métricas.
WebPageTest y métricas de velocidad
WebPageTest es una web gratuita que nos permite comprobar la velocidad y el rendimiento de una web.
Lo primero que debemos hacer es introducir la dirección de la página, la localización y el navegador con el que queremos realizar el test. Pulsamos sobre “Start Test” y esperamos unos segundos.
A continuación aparecerá una página con muchísima información. Dado que son conceptos avanzados no veremos todos y nos centraremos en unos pocos.
En el encabezado tenemos un resumen de los resultados:
La parte superior derecha es un resumen de la puntuación de la página web en los aspectos clave de rendimiento y velocidad. Todo aquello que no tenga el valor A o B deberíamos investigar a qué se refiere exactamente e intentar solucionar el problema.
A continuación aparecen dos tablas. De ellas vamos a fijarnos en dos valores concretos, “Start Render” y “Document Complete”, más tarde hablaremos de ellos.
A continuación tenemos el “Waterfall web” que es el que nos muestra todos los elementos de la página web que se cargan, el tiempo y el orden de dichas cargas.
Resolución de nombre de dominio DNS
El primer registro del Waterfall es importante, indica el tiempo de resolución de nombre de dominio. Esto también es conocido como resolución DNS e indica el tiempo transcurrido desde que el navegador solicita la dirección ip correspondiente al nombre de la web hasta que la recibe. Si el tiempo de resolución DNS es excesivo puede deberse, entre otros, a dos motivos:
- Que el solicitante DNS se encuentre lejos del servidor DNS que hace la resolución de nombre de dominio.
- Que el dominio y el hosting se hayan contratado a empresas distintas, lo que da lugar a que sea necesaria una comunicación entre ellos que aumenta el tiempo.
Waterfall web análisis de rendimiento
Otros aspectos o métricas importantes del Waterfall web, como hemos comentado antes, son el Start Render (línea verde) y el Document Complete (línea azul).
El Start Render indica el tiempo en el que la página web comienza a pintarse, no debería ser superior a 2-3 segundos.
El Document Complete es el tiempo en el que, prácticamente, la web está cargada en su totalidad (aunque después, como podéis ver, se siguen cargando cosas que no son demasiado importantes).
Otros apartados de WebPageTest
A parte de lo comentado anteriormente conviene que le echéis un vistazo a los distintos apartados de WebPageTest pues son bastante interesantes. Como resumen, tenemos los siguientes:
- Details. Es el Waterfall con un mayor nivel de detalle.
- Performance Review o análisis de rendimiento. Listado con todos los elementos del Waterfall web pero con datos distintos a los anteriores como, por ejemplo, si se ha detectado o no un CDN.
- Content breakdown o desglose de contenido por tipo MIME. Básicamente es el Waterfall dividido por tipo de contenido MIME como, por ejemplo, html, css, js o imágenes.
- Content breakdown by domain. Lo mismo que lo anterior pero el contenido del Waterfall está dividido por dominio.
- Image Analysis o análisis de imágenes. Nos permite comprobar la velocidad de carga de las imágenes que están en la página analizada.
- Request Map o mapa de conexiones. Permite ver un mapa de las peticiones que la web realiza.
Google Search Console métricas web
Google Search Console es una herramienta para comprobar la velocidad de carga de una web y su respectivo rendimiento tanto para móviles como para ordenadores que ya hemos visto en múltiples ocasiones para otros fines como, por ejemplo, enviar el sitemap de una web a Google.
Antes de comenzar es necesario comprobar que tenéis configurada la propiedad de Google Search Console para poder seguir todos los pasos.
Tras hacer login en Google Search Console iremos al panel lateral, Experiencias, Core Web Vitals. Si en este punto no aparece ningún gráfico ni datos y aparece el texto “Hacen falta más datos para este tipo de dispositivo” significa que tendrás que esperar un poco hasta que Google recopile más datos de tu web y, por lo tanto, deberás utilizar el resto de alternativas para comprobar la velocidad de carga web y su rendimiento de este artículo.
Métricas de velocidad en Google Search Console
Antes de proceder al análisis de los datos y gráficos de velocidad es necesario que conozcas las siguientes métricas de velocidad de Google Search Console:
- LCP o Largest Contentful Paint. Tiempo que tarda en renderizar o pintar el elemento con mayor peso de la página, medido en milisegundos.
- FID o First Input Delay. Tiempo que transcurre desde la primera acción del usuario con la web (como, por ejemplo, hacer scroll vertical) hasta que el navegador responde (es decir, la web se desplaza verticalmente). De manera general se mide en milisegundos.
- CLS o Cumulative Layout Shift. Mide el nivel de cambio del diseño de la página desde que entramos en ella hasta que termina de cargarse, medido en un rango de 0 a 1. Cuanto más bajo sea el valor mejor pues, si lo que queremos conseguir es que la experiencia de usuario (UX) sea buena, el diseño de la página no debería cambiar drásticamente mientras ésta se carga.
- FCP o First Content Paint, tiempo que tarda en pintarse el primer elemento de la web, medido en milisegundos.
- INP o Interaction to Next Paint, tiempo medio de respuesta de todas las acciones del usuario en toda la página web, medido también el milisegundos.
- TTFB o Time to First Byte, tiempo transcurrido desde que el usuario accede a la web hasta que se recibe el primer byte, en milisegundos.
Algunas de estas métricas también son utilizadas, como veremos más adelante, en PageSpeed Insights.
Google PageSpeed Insights y métricas
Otra buena herramienta para comprobar la velocidad de tu web es Google PageSpeed Insights. Dispone de una serie de métricas que nos ayudarán a analizar el rendimiento de una web.
A diferencia de Google Search Console esta herramienta nos permite comprobar la velocidad de cualquier web y su rendimiento, no es necesario que sea nuestra.
Una vez introducida la url y, tras pulsar el botón de analizar, veremos dos apartados, el de ordenador y el de dispositivos móviles. Este último es de gran utilidad para la compatibilidad web con dispositivos móviles o mobile friendly.
Métricas y gráficos de Google PageSpeed Insights
Tras elegir una de las opciones anteriores lo primero que observamos es una puntuación general así como la leyenda de los colores. La puntuación de Google PageSpeed Insights se divide en lenta (0-49), normal (50-89) y rápida (90-100).
Antes de continuar es necesario conocer la diferencia entre “Esta url” y “Origen”:
- Esta url. Son los datos y métricas recogidas durante los 28 días anteriores únicamente de la página analizada. Es decir, son métricas de tráfico real durante 28 días, no únicamente del momento en el que se lanza el test.
- Origen. Es lo mismo que el anterior, es decir, métricas y datos de rendimiento y velocidad, pero del dominio completo, no solo de la página analizada.
Otra parte interesante de esta herramienta es que podemos ampliar información pulsando sobre el botón de ampliar vista de Google PageSpeed Insight.
Como podéis observar en estas barras de colores tenemos valores en tiempo y porcentajes. Hay que tener en cuenta que estos datos son acumulados, es decir, datos de experiencias reales de usuarios recogidos a lo largo del tiempo.
Los porcentajes indican cómo de buena o mala ha sido la experiencia de los usuarios en esa métrica concreta a lo largo de 28 días. Siguiendo el ejemplo de la imagen, el 87% de los valores observados a lo largo de 28 días son buenos, el 6% necesitan mejorar y el 6% son malos. Dicho de otra manera, el LCP para 87 de cada 100 usuarios ha sido bueno, para 6 de cada 100 usuarios ha sido medio y para 6 de cada 100 usuarios ha sido malo.
Respecto al tiempo, indica el percentil 75 del LCP el cual podríamos considerarlo como el valor óptimo.
Diagnosticar problemas de rendimiento con Google PageSpeed Insights
Finalmente llegamos a uno de los apartados más interesantes de Google PageSpeed Insights, el diagnóstico de rendimiento. Este, a su vez, se divide en 4 categorías:
- Rendimiento. Temas que tienen que ver con la velocidad y tiempos de carga de la web como, por ejemplo, el FCP o CLS.
- Accesibilidad. Temas relacionados con la accesibilidad como, por ejemplo, el atributo alt en las imágenes.
- Prácticas recomendadas. Varias recomendaciones como, por ejemplo, que el atributo lang del elemento html tenga un valor correcto o que la página tenga un elemento title.
- SEO. Recomendaciones SEO como, por ejemplo, que los enlaces tengan un texto descriptivo.
Como podéis observar, PageSpeed Insight no solo es utilizado para comprobar la velocidad y rendimiento web, también nos permite obtener recomendaciones SEO muy interesantes.
Finalmente, si os habéis quedado con ganas de aprender más acerca de las métricas y recomendaciones de Google PageSpeed Insight, podéis consultar el enlace para obtener más información.
