Si quieres optimizar WordPress, algunas medidas son muy claras, conocidas y de probada eficacia, pero incluso los sitios web que supuestamente están optimizados hasta el final, a menudo siguen teniendo potencial. Por eso vale la pena mirar más allá de Google PageSpeed Insights y similares. Porque muchas herramientas de rendimiento proporcionan verdaderas minas de oro de datos que permiten un análisis muy completo, si sabes qué buscar.

Herramientas sencillas de rendimiento como la de Google Test My Site o Google PageSpeed Insights principalmente arrojan una lista de acciones recomendadas como resultado. Esto puede estar bien para el comienzo. Pero si quieres supervisar tus proyectos WordPress de forma eficiente y optimizarlo de forma significativa, tarde o temprano deberás utilizar una herramienta de rendimiento que también muestre el tiempo de carga de tu sitio web y te muestre exactamente cómo se comporta tu blog, tienda o el sitio web de tu empresa al cargar.

Entre ellos se encuentran, por ejemplo, Pingdom, GTMetrix o Webpagetest. Suelen proporcionar el llamado diagrama de cascada. Estos conjuntos de datos, algo voluminosos, apenas son percibidos por muchas personas, pero si trabajas profesionalmente con WordPress, deberías entender cómo funcionan. Motivo: no hay ninguna otra fuente de datos que te muestre lo rápido que se carga tu sitio web, lo bueno que es tu proveedor de hosting web, la eficacia con la que se carga tu sitio web y dónde tu web se encuentra en obras.

Y con un poco de práctica puedes analizar cualquier sitio web de un vistazo y en (a mano) 7 segundos 😉 ¿Cómo lo haces? ¡Hoy te lo enseñaré paso a paso!

Optimizar WordPress: Sin un diagrama de cascada solo se rasca la superficie

Quizás ahora te estés preguntando: "¿Qué sentido tiene todo este esfuerzo?" Hay grandes herramientas de rendimiento que ya me muestran todas las medidas de optimización importantes. Además, suele limitarse a los siguientes puntos:

• Almacenamiento en caché: en el lado del servidor o a través de un plugin
• Optimización de la imagen: consulta, por ejemplo, nuestra comparación de plugins.
• Comprimir y fusionar CSS y JavaScript
• Hosting
• CDN

Por supuesto, si has aclarado y optimizado estos puntos, habrás creado una muy buena base para un sitio web realmente rápido. Por eso, estas razones se recogen (con razón) en todas las guías de buen rendimiento.

Por ejemplo

• La guía completa de rendimiento de WordPress de Hootproof
• De Trabbi a Porsche - 7 trucos para hacer WordPress más rápido por WP-Ninjas
• 13 medidas para hacer que WordPress sea apto para grandes cargas - por nuestro antiguo Jefe de Producto Matthias.

Y estas razones también encabezan repetidamente la lista de los frenos más frecuentes al tiempo de carga de los sitios web de WordPress.

Sin embargo, nuestra experiencia de cientos de análisis sistemáticos de rendimiento con Webpagetest y comprobaciones exhaustivas del sitio muestra que, incluso en sitios web de WordPress supuestamente "optimizados a fondo", siempre hay trampas de rendimiento. Y aquí es exactamente donde entra el diagrama de cascada. Puedes hacer algo especial: te muestra cómo se carga tu sitio web, qué elementos se cargan y a qué velocidad lo hace todo.

Cómo acceder al tesoro de datos

Todos los buenos análisis de rendimiento ofrecen también gráficos de cascada. Si utilizas Pingdom Tools, por ejemplo, solo tienes que desplazarte hacia abajo lo suficiente.

En Pingdom Tools, primero tienes que desplazarte un poco para llegar al diagrama de cascada. La sección correspondiente aquí se llama File Requests. Tanto Webpagetest como GT-Metrix tienen sus propias pestañas para los diagramas. Sin embargo, para captar toda esta información correctamente, tienes que saber cómo leer correctamente los diagramas de cascada.

Cómo leer correctamente los diagramas de cascadas

La densidad concentrada de información significa que los diagramas de cascada no se conocen exactamente por su claridad. De hecho, sólo necesitas saber cuatro cosas para entender los conjuntos de datos:

• El tiempo se representa en el eje X. Los diagramas de cascada se estructuran cronológicamente: utilizando el eje X, puedes ver exactamente cuándo empieza a cargarse un elemento y cuánto tarda en hacerlo. Es precisamente esta estructura cronológica la que hace que un diagrama de cascada sea tan valioso. De este modo, puedes ver exactamente dónde se pierde tiempo de carga y qué procesos debes abordar para optimizar tu velocidad de carga.
• El eje Y registra cada petición HTTP. En la mayoría de los diagramas de cascada, puedes hacer clic en los elementos del eje Y para obtener información adicional sobre ellos.
• Una leyenda muestra el tipo de recurso cargado. Webpagetest marca el HTML, el CSS, las imágenes, el Flash, etc. en color, Pingdom utiliza en este caso símbolos.
• Un sistema de codificación adicional proporciona información sobre cómo se ejecutan las solicitudes individuales: por ejemplo, cuánto tiempo tarda en conectarse al servidor o si se utiliza HTTPS.

En la siguiente ilustración encontrarás las cuatro áreas que acabamos de describir.

Optimizar WordPress con el análisis de 7 segundos

Ahora está claro cómo se lee un diagrama de cascada, pero ¿qué ideas puedes extraer de este?

El análisis de 7 segundos ha demostrado su eficacia: el diagrama te da información sobre siete factores importantes para la velocidad de carga de un solo vistazo. Estos siete trucos te ayudarán a entender exactamente cómo y a qué velocidad se renderiza tu sitio web. Muestran dónde hay potencial para hacerlo más rápido, solucionar problemas o mejorarlo aún más.

Consejo nº 1: El tamaño importa

Cuanto más larga sea la cascada (es decir, cuantos más elementos se lleven hacia abajo en el eje Y), más peticiones habrá que procesar y más lenta será la carga del sitio web. Sin embargo, una cascada larga no tiene por qué ser necesariamente mala. Hay funciones y recursos externos de los que simplemente no puedes o no quieres prescindir. En nuestro caso, por ejemplo, el chat en vivo es una herramienta de este tipo. Por supuesto, cargar el programa de chat ralentiza nuestro sitio web. Sin embargo, la asistencia rápida a través del chat es una parte central de nuestro hosting. Así que no podemos prescindir del plugin.

El HTTP/2 también asegura que el mero número de solicitudes ya no tenga el mismo significado que hace unos años.

Con el nuevo estándar web, las peticiones pueden procesarse simultáneamente en lugar de una tras otra. Además, con HTTP/2, el servidor ya envía archivos HTML al navegador como medida de precaución. Por lo tanto, la nueva norma compensa las desventajas que pueda tener un gran número de peticiones HTTP. Sin embargo, para beneficiarse de HTTP/2, tu sitio web debe cargarse mediante HTTPS, es decir, debe tener un certificado SSL.

En cualquier caso, nuestra experiencia ha demostrado que no existe una correlación directa entre la longitud de una cascada y la velocidad de carga real. Al menos hasta un cierto límite: con bastante más de 100 solicitudes, sin duda hay potencial de ahorro en la mayoría de los casos.

Si tu web supera este umbral, deberías examinar más detenidamente tus peticiones HTTP. Nuestra página web, por ejemplo, se carga con más de 130 peticiones HTTP. Por lo tanto, aquí hay posibilidades de optimización. Si tu web contiene más de 100 solicitudes, fíjate bien de cuáles puedes prescindir.

Consejo nº 2: Reconoce el tiempo de carga

El valor máximo en tu eje X es esencial para el análisis de la velocidad de carga: aquí puedes leer cuánto tiempo transcurre hasta que tu sitio web se renderiza completamente. Cuanto más pequeño sea este valor, mejor.

Si el valor máximo de tu eje X está por encima de 10, deberías mirar definitivamente la velocidad de carga de tu sitio web. El tiempo total de carga de tu sitio web debe ser inferior a 10 segundos.

Consejo nº 3: Reconoce el tiempo de carga percibido

A la mayoría de los/as usuarios/as no les importa realmente lo que las herramientas de análisis de valores escupen. Lo único que cuenta para ellos/as es la rapidez con la que creen que se carga el sitio web.

Por lo tanto, cuando operas un sitio web, es importante mejorar esta sensación de velocidad tanto como sea posible. Puedes conseguirlo mediante el almacenamiento óptimo en caché, la optimización por encima de la página o -si tus clientes/as se encuentran en el extranjero- el uso de una red de distribución de contenidos (CDN).

Pero, afortunadamente, también puedes llegar al fondo de este tiempo de carga percibido muy bien a través de los diagramas de cascada. Que sepamos, Webpagetest es la única herramienta gratuita que diferencia entre el tiempo de carga medido técnicamente y el tiempo de carga percibido por el/la usuario/a.

Todo el diagrama representa el tiempo de carga técnica -menos importante-. El tiempo de carga percibido está oculto entre las líneas azul y verde del diagrama.

La línea verde indica el momento en que se carga el primer elemento visual del sitio web (se denomina punto de "inicio de renderización"). La línea azul indica el momento en que el/la usuario/a percibe que el sitio web está totalmente cargado: en este punto, la probabilidad de interactuar con el sitio web aumenta significativamente. Estas dos líneas deben estar lo más a la izquierda y lo más juntas posible.

La zona naranja muestra la fase en la que no hay contenido visible. Hasta el final de esta fase el visitante sólo ve una página blanca. El área azul marca el lapso de tiempo entre el rendimiento inicial y el tiempo de carga, durante el cual el visitante puede percibir un proceso de renderización visible (por ejemplo, un reloj de arena). Ambos juntos forman el tiempo de carga percibido.

Webpagetest es la única herramienta que te proporciona estos datos. No sabemos esto sobre Pingdom Tools o GTMetrix. Por tanto, esta regla solo se aplica si utilizas Webpagetest: la línea verde debería aparecer al cabo de unos 2 ó 3 segundos, y la línea azul al cabo de 7 segundos como máximo.

Consejo nº 4: HTTP/2 vs. HTTP/1

HTTP/2 ofrece una ventaja decisiva sobre HTTP/1: los sitios web se cargan mucho más rápido con el nuevo estándar web. Sin embargo, además de un certificado SSL, también dependes de que tu proveedor de hosting te proporcione este servicio. Muchas personas no están seguras de si esto es realmente su caso o no.

Una de las mayores ventajas de HTTP/2 es el procesamiento simultáneo de múltiples peticiones. Y esto es exactamente lo que puedes ver claramente en tu diagrama de cascada. Como las peticiones se procesan cronológicamente, varias barras comienzan en el mismo punto del eje X cuando se utiliza HTTP/2.

A la izquierda puedes ver el comportamiento típico de carga de un sitio web WordPress sin HTTP/2. Las peticiones HTTP individuales se ejecutan una tras otra. A la derecha, puedes ver cómo se comporta el mismo sitio web con HTTP/2: las solicitudes individuales se cargan simultáneamente.

Si las peticiones individuales se cargan en paralelo, tu sitio web funciona con HTTP/2.

Consejo nº 5: Reconoce las imágenes demasiado grandes

En un 30% de los sitios web que analizamos, todavía encontramos potencial en cuanto al tamaño de las imágenes. Y esto es así a pesar de que la mayoría de los webmasters suponen que ya han conseguido lo óptimo en este aspecto.

Las imágenes son -según nuestra experiencia- el factor más importante del tiempo de carga de la página, después del almacenamiento en caché. Por cada imagen que subes en el backend, WordPress crea automáticamente toda una serie de archivos adicionales, las miniaturas o imágenes destacadas. La correcta compresión de estos archivos es uno de los métodos más eficaces para reducir el tamaño y, por tanto, la velocidad de carga de tu sitio web.

Cómo optimizar tus imágenes de forma sensata, por ejemplo:

• WPMU DEV:Cómo comprimir y redimensionar correctamente las imágenes para WordPress
• Nuestra comparación de 5 plugins de optimización de imágenes para WordPress
• El fabricante de plug-ins Optimus explica las diferencias básicas entre la compresión con y sin pérdidas.

En el diagrama de cascada, las imágenes pueden ser identificadas rápidamente usando la leyenda: Webpagetest los muestra con barras púrpuras, Pingdom con un icono. Sólo el GTMetrix no identifica las imágenes por separado. En cualquier caso: Si las barras correspondientes son mucho más largas que las barras de las solicitudes restantes, esto indica un largo tiempo de carga de la imagen.

En la ilustración puedes ver un ejemplo extremo pero muy claro de imágenes sin comprimir. Solo algunos de los archivos tardan más de 8 segundos en cargarse, ralentizando todo el sitio web.

En un caso como el anterior, debes mirar de cerca tus imágenes. Haciendo clic en la solicitud correspondiente, normalmente puedes ver en un diagrama de cascada exactamente qué archivos están implicados. Esto facilita mucho la búsqueda de frenos en el tiempo de carga. Las barras de carga largas para los recursos de imagen indican el potencial de compresión.

Consejo nº 6: Rastrea los redireccionamientos

Un gráfico de cascada no solo te ayuda a entender qué elementos se están cargando cuándo y con qué rapidez, sino también cuántos redireccionamientos se han establecido y hacia dónde apuntan. Las solicitudes con redireccionamiento suelen estar resaltadas en color. El diagrama también te indica qué redirección se ha establecido y dónde va.

El sitio web de esta ilustración tiene varias redirecciones 302 seguidas.

Con un diagrama de cascada, puedes ver de un vistazo cuántos y qué redireccionamientos se han establecido. Esto también ayuda a detectar los bucles de reenvío tras un cambio de DNS.

Gracias a las marcas amarillas, ya hemos podido detectar varias veces redireccionamientos innecesarios o incluso perjudiciales.

Consejo nº 7: Reconoce los errores de un vistazo

En ocasiones, los elementos de un sitio web no se muestran correctamente. Esto puede afectar a los marcos de AdSense, por ejemplo, pero también a los mapas y fuentes incrustadas.

En este caso, el diagrama de cascada lanza un mensaje de error y marca en rojo la línea con la solicitud correspondiente. El diagrama también indica cuál es el error y qué recurso lo produce. El sitio web de esta ilustración arroja un error 404.

Las líneas rojas indican errores al renderizar el sitio web.

Todos los consejos de un vistazo con la hoja de trucos

Un gráfico de cascada es probablemente el análisis más valioso que puedes obtener para tu sitios web WordPress. Combina varios datos que debes vigilar: los tiempos de carga, el orden de representación y los mensajes de error. Armado con los consejos de este artículo, puedes reconocer rápida y eficazmente dónde hay todavía potencial de optimización:

• ¿La cascada es demasiado larga (más de 100 solicitudes)?
• ¿El valor máximo del eje X es demasiado grande (mayor que 10)?
• ¿Las solicitudes se cargan en paralelo (mediante HTTP/2)?
• ¿Las imágenes son demasiado grandes (es decir, las imágenes están mal optimizadas)?
• ¿Las líneas verdes y azules están demasiado a la derecha o demasiado separadas (es decir, el usuario percibe el sitio web como lento)?
• ¿Hay líneas amarillas inesperadas (desvíos)?
• ¿Hay líneas rojas (errores)?

Lo admito: la primera vez, puede que te lleve más tiempo analizarlo. Pero con un poco de experiencia, los diagramas de cascada permiten comprender mucho mejor tus proyectos en WordPress y optimizarlos más a fondo.