Webpagetest. org es probablemente la mejor y más completa herramienta gratuita para medir el tiempo de carga de tus sitios y páginas web. Por desgracia, proporciona muchos datos muy complejos. Hoy te mostraré lo que tienes que configurar, cómo poner orden en el caos de datos y qué parámetros necesitas para un análisis profesional. Solo si sabes cómo se cargan los sitios web podrás optimizarlos al máximo.
Tu propio sitio web debe ser seguro... y rápido. Por supuesto, porque del tiempo de carga dependen muchos puntos clave: la tasa de conversión, la percepción de seguridad de la persona ante el dispositivo final y tu clasificación en Google. Sin embargo, muchos ni siquiera llegan a ser capaces de determinar correctamente el tiempo de carga de su propio sitio web.
Por ejemplo, algunas personas ni siquiera saben qué herramientas utilizar para analizar correctamente su sitio web. O no saben qué ajustes tienen que hacer para conseguir resultados realmente buenos. Para que no cometas los mismos errores, hoy te mostraré cómo puedes obtener una visión rápida y significativa con (en nuestra opinión) la mejor herramienta de medición gratuita de todas. De este modo sabrás exactamente la velocidad de carga de tu web y si necesitas optimizarla y dónde.
Para entender exactamente cómo funcionan los distintos pasos del análisis, te aconsejo que mires los conjuntos de datos enlazados en los puntos importantes o que analices al mismo tiempo tu propio sitio web. Poner orden en este caos de datos no es nada fácil. Como recompensa por el esfuerzo, recibirás algunos de los mejores datos que hayas recopilado tú mismo/a sobre el sitio web, especialmente si trabajas por cuenta ajena o ganas dinero con tus proyectos WordPress, el esfuerzo merece la pena.
Webpagetest es la mejor herramienta que conocemos
Hay que reconocerlo: en este artículo elogiamos efusivamente a webpagetest.org. Quizá demasiado efusivamente, pero no sin razón. Webpagetest es la única herramienta que conocemos que te permite determinar de forma fiable el tiempo de carga absoluto y percibido de tu sitio web. Es una herramienta completamente gratuita, sin barreras de pago, sin modelo de suscripción, simplemente datos valiosos y una API que te permite automatizarlo todo: así es como debe ser.
Hay que decir, no obstante, que también se obtienen buenos resultados de medición con Pingdom y GTmetrix, pero no tan buenos resultados como con Webpagetest. Por supuesto, esto no significa que no puedas y debas validar tus resultados con varias pruebas en diferentes herramientas ni tampoco significa que no debas medir con Pingdom o GTmetrix. Solo puedo recomendarte que al menos eches un vistazo a Webpagetest.
Casi se ha convertido en un mantra para nosotros: herramientas como Google PageSpeed Insights no son suficientes para medir el tiempo de carga de los sitios web. Esto se debe a que solo determinan el potencial de rendimiento del sitio. Por supuesto, estos datos siguen siendo valiosos (desde el punto de vista del rendimiento y del SEO), pero sencillamente no te permiten sacar ninguna conclusión sobre lo que ocurre realmente cuando se accede a tu web.
Pero eso es exactamente lo que quieres saber y es exactamente lo que necesitas saber para determinar si una medida de optimización es eficaz.
Por desgracia, Webpagetest no solo ofrece datos que no son precisamente bonitos, sino también resultados de pruebas muy extensos. Por ello, hoy te mostraré cómo utilizar Webpagetest y cómo interpretar los resultados.
Webpagetest era originalmente un proyecto de AOL y estaba destinado a uso interno. En 2008, sin embargo, el programa se convirtió en software de código abierto y ahora es mantenido y desarrollado principalmente por Google. Toda la documentación de Webpagetest se puede encontrar en GitHub y también se puede descargar y utilizar localmente.
Mientras que PageSpeed Insights te muestra dónde están los potenciales de optimización del sitio web, Webpagetest puede hacer mucho más. Te muestra no solo cómo puedes mejorar tu sitio web, sino también directamente qué efectos tienen las medidas de optimización de sobre el tiempo de carga de tu sitio web.
A diferencia de Pingdom y GTmetrix, no hay ninguna empresa detrás de Webpagetest que quiera vender un servicio de pago (vale, excepto Google, pero al menos el servicio no se vende directamente). Más bien se podría decir que Webpagetest forma parte del plan de Google para hacer la web más rápida en general. Sea como sea que uno quiera evaluar los esfuerzos de Google en este contexto.
4 pasos para obtener datos realmente significativos sobre el tiempo de carga
Sí, Webpagetest es más complejo que otras herramientas. ¡Pero no dejes que eso te desanime! En este caso, la complejidad es buena. Esto se traduce en la obtención de grandes datos sobre tu sitio web, e incluso si utilizas la herramienta por primera vez, obtendrás la información relevante con bastante rapidez.
Mediante los siguientes cuatro pasos:
Paso 1: Establecer los parámetros de la prueba
Paso 2: Obtener una visión general
Paso 3: Análisis detallado
Paso 4: Análisis del tiempo de carga percibido
Paso 1: Establecer los parámetros de la prueba
Webpagetest ofrece opciones de configuración muy rigurosas para probar tu sitio web. Cuatro de estos ajustes son especialmente importantes para obtener buenos resultados de medición:
- El servidor con el que se hará el test,
- el navegador con el que se hará el test y
- los ajustes avanzados de la prueba, de los que hablaré con más detalle más adelante.
El servidor que elijas para la prueba simula un acceso al sitio web desde allí. Si seleccionas el servidor por defecto en EEUU, el resultado de la prueba se emitirá para una visualización de página desde Texas. En la mayoría de los casos, sin embargo, esto no es necesariamente lo que quieres. Por tanto, este ajuste es muy importante. Puede distorsionar enormemente el resultado global y debe ajustarse en consecuencia, según la aplicación.
Los dos casos de uso más comunes son:
- Determinar el tiempo de carga de un usuario perteneciente a tu grupo objetivo
- Comparar los tiempos de carga tras una medida de optimización
Si quieres saber cómo se percibe el tiempo de carga de tu sitio web, la ubicación del servidor debe corresponder lo más posible a la ubicación típica de las visualizaciones. Para un blog europeo, esto significa que debes elegir un servidor en Europa.
Si quieres saber lo que ha provocado una medida de optimización, en principio no importa la ubicación del servidor que utilices. Lo único importante es que debes utilizar la misma ubicación de servidor para la prueba antes y después de la optimización. De lo contrario, no podrás comparar correctamente los datos de medición. Por supuesto, aquí también recomiendo un servidor de pruebas europeo. Esto simplemente proporciona los resultados más realistas.
El navegador utilizado
Webpagetest ofrece muchas opciones de configuración para simular determinadas técnicas de transmisión y navegadores. Por ejemplo, puedes definir que el sitio web se cargue a través de una conexión 3G y Firefox. Para empezar, sin embargo, basta con elegir el navegador que tu grupo destinatario utiliza más a menudo.
Puedes encontrar información sobre esto en Google Analytics o Piwik, por ejemplo. Raidboxes, por ejemplo, es visitado mayoritariamente a través de Chrome.
Muy importante: ¡Los ajustes avanzados determinan la calidad final de tus datos de medición!
Además de los dos parámetros que determinan cómo se realiza la prueba, es decir, la ubicación del servidor y el navegador utilizado, Webpagetest también ofrece la posibilidad de establecer lo que la prueba debe mostrar al final. En los ajustes avanzados puedes, por ejemplo, definir que solo se emitan determinados valores o que la medición se detenga automáticamente después de un tiempo determinado. En este sentido hay dos ajustes que son especialmente importantes para obtener datos razonablemente completos y fiables: el "number of tests to run" y la "repeat view".
En principio, siempre debes medir más de una vez el tiempo de carga. De lo contrario, corres el riesgo de medir valores atípicos y posiblemente buscar un problema que no existe. Y créeme: ya lo hemos experimentado unas cuantas veces. Recomiendo al menos tres pruebas consecutivas.
Además, debes acordarte de medir siempre también la versión en caché de tu sitio web. Puedes conseguirlo utilizando la opción "repeat view".
Una vez hayas introducido tu URL, por ejemplo, https://raidboxes.de y configurado los parámetros de la prueba (es decir, el servidor, el navegador, el mínimo de 3 repeticiones y la repeat view), podrás iniciar la prueba. Dependiendo de cuántas pruebas se estén ejecutando en ese momento, el análisis puede tardar unos minutos.
Es importante tener en cuenta que Webpagetest solo comprueba el sitio web accesible bajo la URL, no en su conjunto. Esto significa que debes probar tu página de inicio, todas las landing pages y, si procede, también tu resumen de productos individualmente.
En esta guía, trabajo con los datos del análisis de nuestra página de inicio, raidboxes.io.
Paso 2: Obtener una visión general
Lo primero que ves es el Performance Summary, el resumen de rendimiento, y el elemento "Opportunities y Experiments", oportunidades y experimentos. Aquí obtienes una visión general del potencial que tiene tu sitio web en determinados aspectos, o si el sitio web ya funciona bien en estos aspectos. Webpagetest también te da resultados similares a los de Google PageSpeed Insights.
(1) Cuanto más verde, mejor
En la segunda zona, se enumeran de nuevo los parámetros de la prueba para su comprobación. El verde indica un buen grado de optimización, el naranja indica un potencial de optimización utilizable y el rojo indica la necesidad urgente de actuar.
Aquí se te presentan todos los datos clave relevantes del tiempo de carga de la página para la versión en caché y sin caché de tu sitio web. La First View no se almacena en caché y la Repeat View se almacena en caché. Lo importante aquí es: en la vista general, Webpagetest solo muestra los valores de una de las tres pruebas. El texto entre paréntesis que aparece directamente junto a las etiquetas First View y Vista Repeat View te indica de qué prueba se trata. Por tanto, "Run 2" es el resultado de la segunda ejecución de la prueba.
A continuación te explico los dos parámetros importantes:
- First Byte: tiempo hasta que se transmite el primer byte de datos entre el cliente y el servidor web. Este valor debe ser, a ser posible, inferior a 200 milisegundos y es una indicación importante del rendimiento de tu hosting.
- Start Render: este valor describe el tiempo que tarda en cargarse un sitio web hasta que se muestra el contenido por primera vez. Hasta ese momento, el sitio web permanece completamente blanco para el usuario. Por supuesto, este valor también debe ser lo más bajo posible. Este valor, junto con la duración total de la construcción visual de la página, constituye la norma de evaluación de la velocidad percibida del sitio web. Start Render marca el inicio de la carga visible de tu sitio web.
Lo siguiente se aplica a todos estos valores: cuanto más pequeños, mejor. Como orientación puedes recordar lo siguiente:
- El tiempo hasta el primer byte debe ser inferior a 200 milisegundos.
- El inicio de la representación no debe ser superior a 2,5 segundos.
- El diseño visual completo de la página no debe durar más de cinco segundos.
Por supuesto, estos valores son solo reglas empíricas. Siempre depende del sitio web: una web de tienda con 50 productos (es decir, 50 o más imágenes y textos descriptivos) se carga naturalmente más despacio que una página de impresión compuesta solo por texto.
Por tanto, aconsejo que pruebes los sitios web de tus competidores directos y de los que consideres tus modelos a seguir. Esto te dará valores comparativos dentro del sector.
Promedio: Ahora se trata de lo más importante
Lamentablemente, la visión general explicada anteriormente solo muestra los resultados de una única medición. Y recuerda: los valores únicos y aislados pueden llevarte por mal camino. Por eso tomaste al menos tres medidas consecutivas para la prueba de tu sitio web, y los valores medios de estas tres mediciones son los mejores valores aproximados que puedes obtener para el tiempo de carga de tu sitio web.
¡No te desesperes! Crear los valores medios solo requiere pulsar un botón:
Antes de continuar, debes marcar en la parte superior las casillas First y Repeat.
Ahora conseguirás una cantidad de datos inicialmente confusa de los llamados "plots". Estos son exactamente los resultados que quieres tener. En principio, esta nueva visión general es la misma para todos los valores. Así que, una vez que entiendes cómo leerlos, son cualquier cosa menos confusos.
Como puedes ver, los tres valores medidos (1-3) se representan aquí en un diagrama. Encima del gráfico está el valor al que se refiere el diagrama. El número de la columna Mean describe ahora el valor medio del tiempo de carga en las tres mediciones. Este valor medio es la información más valiosa que puedes obtener sobre tu sitio web.
Por cierto: haciendo clic en Repeat, también puedes hacer que se muestren aquí los valores del tiempo de carga con y sin almacenamiento en caché. Y si quieres encontrar los resultados de los otros valores busca "First Byte" e "Start Render" a través de la búsqueda de tu browser (CTRL+F para PCs y cmd+f para Macs).
Conclusión provisional: Mucho trabajo para datos especialmente valiosos
Lo reconozco, mucha información en poco tiempo...., y muchos pasos. Especialmente en comparación con los métodos de prueba simples, pero el esfuerzo merece la pena, porque lo has visto en las cifras de los gráficos: a veces, dos pruebas con los mismos ajustes pueden tener una diferencia de un segundo entero. En determinadas circunstancias, es el azar el que decide si inviertes o no tiempo y dinero en seguir optimizando tu sitio web. Si, además, ganas dinero con WordPress, ya sea con tu propia tienda, un negocio de diseño web o tu propia agencia, deberías tener la mejor base de datos para tomar una decisión de este tipo.
De hecho, sin embargo, aún no hemos llegado al final. Ahora conoces los parámetros de rendimiento más importantes de tu sitio web, por lo que sabes lo rápido que carga y si aún hay potencial de optimización, pero aún no sabes dónde se puede mejorar con más precisión. Por eso continuamos con el tercer paso, el del análisis detallado.
Paso 3: Análisis detallado
La visión general ya te dice mucho sobre el sitio web. Puedes ver si aún hay margen de mejora en determinadas áreas, lo rápido que carga realmente tu web y si podría cargar un poco más rápido. Sin embargo, aún no podrás identificar las causas de los problemas. Puedes encontrarlos en los informes detallados:
- los diagramas de cascada
- el análisis del potencial
Los diagramas de cascada enumeran cada una de las peticiones HTTP que un navegador hace al servidor web. A primera vista, estos diagramas parecen muy complejos y confusos, pero, si sabes cómo, puedes obtener muchos detalles gracias a un diagrama de cascada con solo un vistazo. Aquí te mostramos cómo leer correctamente los diagramas de cascada y cómo puedes utilizarlos para optimizar aún más tu sitio web.
La regla básica es que un sitio web rápido tiene un diagrama de cascada corto con pocas y breves peticiones. Esto significa que la longitud del diagrama y la longitud de las barras en las líneas individuales son especialmente relevantes.
En la revisión del rendimiento (Performance Review) encontrarás información detallada sobre lo bien optimizado que está ya el rendimiento de tu sitio web. Esta revisión detallada contiene:
- Una lista de comprobación de optimización (optimization checklist), que puedes encontrar en la opción de menú "Opitimization".
- Un desglose detallado de la prueba de rendimiento.
En la Lista de control de optimización encontrarás los criterios de evaluación individuales que se aplican a cada una de las peticiones HTTP. Una marca verde significa que se cumple el requisito, un triángulo amarillo indica que es necesario mejorarlo y una cruz roja significa que falta la medida de optimización propuesta.
Por último, en la sección de detalles encontrarás una descripción de las advertencias y las medidas de optimización que faltan. Webpagetest describe las optimizaciones que aún son posibles para cada recurso. En el caso de las imágenes, por ejemplo, muestra el volumen de datos que se puede guardar.
Tendrás que dedicar algún tiempo a estas evaluaciones detalladas, pero con su ayuda podrás hacerte una idea detallada de tu sitio web y de su potencial de optimización.
Como se trata básicamente de la misma información que escupe PageSpeed Insights, puedes, por supuesto, ejecutar un análisis de PageSpeed en paralelo. Esta prueba es mucho más bonita y está mejor preparada.
Paso 4: Análisis del tiempo de carga percibido
A diferencia de todas las demás pruebas que conocemos, Webpagetest es la única que muestra gratuitamente el tiempo de carga percibido del sitio web. La vista de tira de película te permite ver un vídeo de la carga de la página. De este modo, puedes ver exactamente lo que se ve al cargar y evaluar aún mejor si hay que optimizar tu web y cómo.
El tiempo de carga percibido es probablemente la métrica más importante acerca del tiempo de carga de la página. Influye en que se abandone prematuramente tu sitio web, en la probabilidad de conversión y en la experiencia general sobre tu sitio web. Especialmente para las tiendas, la velocidad percibida del sitio web es, por tanto, un punto de referencia importante. Por supuesto, el tiempo de carga percibido debe ser siempre el menor posible.
Además de la vista filmstrip, recuerda lo siguiente:
La filmstrip view te muestra con exactitud de décimas de segundo cómo se muestra tu sitio web y qué procesos se están llevando a cabo en cada momento. A menudo ocurre que no pasa nada durante varios segundos y, de repente, el sitio web tiene un aspecto casi idéntico al que tiene en su estado final. Esto da la impresión de que el sitio web ha terminado de cargarse en ese tiempo. O mejor dicho, ya tienes la sensación de que puedes interactuar con el sitio web.
Por tanto, la filmstrip view es una herramienta muy valiosa, especialmente cuando se prioriza el contenido visible de la página.
Conclusión
Bien, después de leer este artículo ya deberías ser capaz de elegir los ajustes adecuados para una prueba de página web. Ahora también debes saber qué factores clave interpretar y cómo evitar interpretaciones erróneas debidas a valores atípicos. También sabes dónde encontrar información detallada sobre tu sitio web y cómo determinar y mostrar el tiempo de carga percibido del mismo.
Ya conoces los aspectos básicos importantes para tener una visión realmente completa sobre tu sitio web, y ya sabes dónde obtener la información que te permita llenar de vida los resultados de las mediciones y sacar conclusiones significativas para tu sitio web.
Pero, ¿por qué volvía a ser importante? Es sencillo: sin una medición razonable del estado real de tu sitio, no puedes evaluar correctamente cómo se está cargando. Por otro lado, te falta información para optimizar el tiempo de carga.
¿Tienes algún otro consejo para utilizar Webpagetest? ¡Perfecto, entonces escribe un comentario en este post!
