Pingdom, mide tu velocidad de carga

Por fin. Si, por fin nos dignamos a escribir esta entrada. Llevábamos tiempo diciendo mi socio y yo: De esta semana no pasa, ¿eh?. Pues si, pasó de esa semana, y de la siguiente, y de la otra… Joder, cómo me gusta entretenerme en las introducciones. Hoy venimos a hablaros de una página para analizar la velocidad de carga de tu web. Se llama Pingdom. Probablemente habréis escuchado hablar de ella, pero queremos enseñaros paso a paso cómo funciona. Venga va, vamos al lío.

¿Qué es Pingdom?

Pingdom es una herramienta que mide la velocidad de carga de tu sitio web. Hasta ahí bien, pero no es una herramienta cualquiera. Pingdom, a diferencia de Google PageSpeed, te desglosa todos los tiempos de carga de tu sitio web. Esa sería la descripción básica. La descripción ‘avanzada’ es que es una herramienta que te permite saber dónde estás perdiendo tiempo de carga en tu web y cómo podrías reducirlo para mejorar tu posicionamiento SEO.

¿Cómo acceder a Pingdom?

Lo bueno de esta herramienta es que es online, por lo que no es necesario registro. Para acceder tenemos dos opciones: Introducimos en el buscador https://tools.pingdom.com/ o buscamos Pingdom en Google y pinchamos en el primer resultado (lógico y normal). Una vez dentro, en el menú, pinchamos en ‘tools‘. Si vais a utilizarla habitualmente os recomendamos añadirla a marcadores.

¿Cómo analizo mi página?

Una vez hayamos accedido a Pingdom, veremos que… ¡Está en inglés! (qué raro, pocas herramientas están en inglés, dijo con tono irónico el redactor…). No nos va a influir demasiado, pero con todos los hispanoparlantes que somos podrían hacerlas en español… Ignorando esto, que son mis líos mentales, veremos esta pantalla:

Analizarla es la cosa más sencilla del mundo. Introducimos la URL y seleccionamos el lugar más cercano a donde esté alojada la página. Para la gente que tengamos la página alojada en Europa seleccionaremos la cuarta opción: “Stockholm, Sweden”. Si algun monete nos lee desde Sudamérica, deberá seleccionar alguna de las opciones de USA (hay dos). Y si ya nos lee alguien desde Australia sería la leche, pero no creo.

Una vez hayamos introducido la URL y el sitio desde donde queremos que se analice, le damos a ‘start test‘. Deciros que algunas veces hay una pequeña lista de espera, pero nunca nos ha tocado esperar más de dos minutos y la mayoría de las veces es instantáneo. Después de analizar la página, nos saldrá algo así:

Si os han salido números muy altos y tenéis algún plugin de caché, no os asustéis y repetid la prueba. Los números os saldrán bastante mejores. Tranquilos, en el siguiente párrafo os analizaremos todo.

¿Cómo analizo los resultados del test?

Bien, ya nos han salido los resultados del test. Ahora vamos a analizar esta primera parte.

Performance grade: Grado de rendimiento según Google PageSpeed.
Load time: Tiempo que tarda en cargar la página.
Faster than: Más rápida que el (x%) de los sitios.
Page size: Tamaño de la página.
Request: Solicitudes hacia el servidor.
Tester from: Lugar desde donde hemos hecho el test (explicado más arriba).

Con esta primera parte nos podemos hacer una idea de cómo funciona nuestra web de cara a la velocidad. Pero como he dicho al principio, esta herramienta es mucho más completa. Vamos con la segunda parte.

Os**as, vaya cantidad de palabros raros que nos suelta esto en un momento, ¿no?… Va, vamos paso por paso. El primer valor que nos da (letra y número) es el grado de optimización. El segundo es la sugerencia que nos da para solucionar ese ‘problema’.

Remove query strings from static resources: Eliminar cadenas de consulta de recursos estáticos.
Leverage browser caching: Aproveche el almacenamiento en caché del navegador.
Specify a cache validator: Especifique un validador de caché.
Specify a Vary: Accept-Encoding header: Especifique un encabezado variable: Aceptar la codificación (maldito traductor de Google…)
Avoid bad request: Evite malas solicitudes.
Minimize redirects: Minimizar las redirecciones.
Minimize request size: Minimiza el tamaño de la solicitud.
Serve static content from a cookieless domain: Sirve contenido estático de un dominio sin cookies.

Si, he usado el traductor de Google, pero se entiende, ¿no?… Con esto analizamos aún más a fondo los problemas de nuestra web. Pero ojo, que no hemos acabado… Llega la tercera parte. Como apunte: Hay tres tablas explicativas que adjuntaré al final de estos párrafos. En estas explican el significado de cada cosa por colores, tipos de archivo, etc.

Eramos pocos y parió la abuela. Si no quieres caldo, toma dos tazas. Y se me ocurren mil frases más, pero vamos al lío que si no…

Response code: Código de respuesta.
Content size by content type: Tamaño del contenido por tipo de contenido.
Requests by content type: Solicitudes por tipo de contenido.
Content size by domain: Tamaño del contenido por dominio.
Request by domain: Solicitudes por dominio.

Y ya, por último, la cuarta parte.

Voy a omitir la tabla completa porque me podría tirar dieciocho días escribiendo. Pero toda la tabla es así. Y no es que quiera ocultar información, podéis analizar nuestra página y ver la tabla completa vosotros mismos.

¿Qué significa cada palabra, código o color del test?

Aquí os ajunto las tablas explicativas y debajo os explico el significado de cada una de ellas.

State colors (colores de estado)

DNS (rosa): El navegador web está buscando información DNS.
SSL (morado): El navegador web está realizando un protocolo de enlace SSL.
Connect (azul): El navegador web se está conectando al servidor.
Send (naranja): El navegador web está enviando datos al servidor.
Wait (amarillo): El navegador web está esperando datos del servidor.
Receive (verde): El navegador web está recibiendo datos del servidor.

Content types (tipos de contenido)

HTML: Documento HTML.
Javascript: Archivo JavaScript.
CSS: Archivo CSS.
Image: Archivo de imagen.
Text/plain: Documento de texto plano.
Other: Cualquier otro tipo de contenido, por ejemplo archivos flash.
Warning: La solicitud obtuvo una respuesta 4XX, 5XX o no se pudo cargar.
Redirect: La solicitud obtuvo una respiesta 3XX y se redirigió.

Server response codes (códigos de respuesta del servidor)

2XX: El servidor respondió con éxito.
3XX: La solicitud fue redireccionada a otro objetivo.
4XX: Se produjo un error de cliente (404, por ejemplo).
5XX: Se produjo un error en el servidor (500, por ejemplo… Malo malo…).
Error: Error de conexión, sin respuesta del servidor.

¿Por qué es importante analizar la velocidad de carga?

La velocidad es uno de los factores más importantes de cara al amigo Google. Pero no nos vale únicamente con analizarla, también debemos corregir los fallos que hacen que nuestra web no vaya tan rápida como nos gustaría. Por eso es tan importante Pingdom: Nos ‘descuartiza’ los fallos uno por uno y nos da posibles soluciones para solucionarlo.

Conclusión de Pingdom

Para mi gusto es una herramienta imprescindible si queremos posicionarnos en condiciones. Si, hay muchísimos factores para que una web se posicione, pero este es uno de los más importantes. Ya sabéis lo que tenéis que hacer. Espero que os haya gustado. ¡Un saludo!