Optimizar WordPress: Cómo analizar tu página web en 7 segundos

Jan Hornung Última actualización 12.10.2020
9 min.
Con estos consejos y nuestra hoja de trucos puedes analizar tus WordPress páginas en sólo 7 segundos e incluso mejor que Google PageSpeed Insights
Última actualización 12.10.2020

Si quiere optimizar WordPress , algunas medidas son clarísimas, conocidas y de probada eficacia. Pero incluso las páginas supuestamente optimizadas a menudo siguen teniendo potencial. Por lo tanto, vale la pena mirar más allá de Google PageSpeed Insights y compañía. Porque muchas herramientas de rendimiento ofrecen verdaderas minas de oro de datosque permiten un análisis muy completo, si se sabe qué buscar. Hoy voy a mostrarte 7 consejos que pueden ayudarte a analizar tusdatos en sólo 7 segundos.

Herramientas sencillas de rendimiento como la de Google Probar mi sitio o Google PageSpeed Insights principalmente arrojan una lista de acciones recomendadas como resultado. Esto puede estar bien para el comienzo. Sin embargo, si quiere supervisar los proyectos de tu WordPress de forma eficiente y optimizar WordPress de forma significativa, tarde o temprano deberá recurrir a una herramienta de rendimiento que también arroje el tiempo de carga tus sitio y le muestre exactamente cómo se comporta el blog tu , la tienda tu o el sitio de la empresa tu al cargar.

Entre ellos se encuentran, por ejemplo, Pingdom, GTMetrix o Webpagetest. Éstas suelen ofrecer el llamado gráfico de cascada. Estos conjuntos de datos algo voluminosos apenas son percibidos por muchos usuarios. Pero si trabajas profesionalmente con WordPress , deberías entender cómo funcionan. Porque: no hay ninguna otra fuente de datos que le muestre la rapidez de carga de tu sitio , la calidad de tu hoster , la eficiencia de carga de tu sitio y la ubicación de las obras tus sitio .

Y con un poco de práctica, puedes analizar cada página de un vistazo y en 7 segundos 😉

¿Cómo se hace eso? Hoy te mostraré el paso a paso.

Optimizar WordPress: Sin un diagrama de cascada sólo se rasca la superficie

Tal vez te lo estés preguntando ahora: ¿Qué sentido tiene todo esto? Hay una gran número de herramientas de desempeño, que ya me muestra todas las medidas de optimización importantes. Además, de todos modos se limita a los siguientes puntos:

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

Por ejemplo

Y también con los frenos de tiempo de carga más frecuentes de WordPress - lados estas razones aterrizan una y otra vez en los primeros lugares.

Sin embargo, nuestra experiencia de cientos de análisis sistemáticos de rendimiento con Webpagetest y extensas comprobaciones del sitio muestra: incluso en páginas supuestamente "optimizadas a fondo" WordPress , se pueden encontrar una y otra vez fallos de rendimiento. Y aquí es exactamente donde el diagrama de cascada resulta útil. Porque puede hacer algo especial: te muestra cómo se carga tu sitio , qué elementos se cargan y a qué velocidad va todo.

Así es como se llega al tesoro de datos

Todos los análisis de buen funcionamiento también dan como resultado diagramas de cascada. Por ejemplo, si utilizas las herramientas de Pingdom, sólo tienes que desplazarte hacia abajo lo suficiente.

Optimizar WordPress la cascada de Pingdom
En Pingdom Tools, primero hay que desplazarse un poco para llegar al gráfico de cascada. La sección correspondiente aquí se llama Solicitudes de Archivos. Webpagetest y GT-Metrix tienen cada uno sus propias pestañas para los diagramas.

Pero para obtener toda esta información correctamente, necesitas entender cómo leer correctamente los gráficos de cascadas.

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:

  1. El tiempo se representa en el eje X.
    Los diagramas de cascada se estructuran cronológicamente: Utilizando el eje X, puede ver exactamente cuándo empieza a cargarse un elemento y cuánto tarda en hacerlo. Es esta estructura cronológica la que hace que un gráfico en cascada sea tan valioso. De este modo, podrá ver exactamente dónde se pierde tiempo de carga y qué procesos debe abordar para optimizar la velocidad de carga de tu .
  2. En el eje Y, se registra cada solicitud HTTP.
    En la mayoría de los diagramas de cascada, puede hacer clic en los elementos del eje Y para obtener información adicional sobre ellos.
  3. Una leyenda muestra el tipo de recurso cargado.
    Webpagetest marca HTML, CSS, imágenes, Flash, etc. con colores, Pingdom utiliza iconos para ello.
  4. 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.
Optimizar WordPress: Cómo analizar tu página web en 7 segundos
Optimizar WordPress las áreas de un diagrama de cascada
En esta figura encontrará las cuatro áreas descritas anteriormente.

Optimizar WordPress con el análisis de 7 segundos

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

Para el análisis del rendimiento, el análisis de 7 segundos nos ha demostrado su eficacia: El gráfico le ofrece información sobre siete factores importantes para la velocidad de carga de un solo vistazo. Estos siete trucos le ayudarán a entender exactamente cómo y con qué rapidez se renderiza el sitio web tu . Y muestran dónde hay potencial para hacerlo más rápido, solucionar problemas o mejorarlo aún más.

Nota

Por cierto, en nuestros ejemplos siempre nos referiremos a los diagramas de cascada de Webpagetest, porque en realidad siempre utilizamos esta herramienta, sin importar si es manual o automatizada.

Consejo nº 1: El tamaño importa

Cuanto más larga sea la cascada (es decir, cuantos más elementos se eliminen en el eje Y), más solicitudes tendrán que ser procesadas y más lenta será la carga de la página. Sin embargo, una larga cascada no tiene por qué ser necesariamente mala. Hay características y recursos externos de los que simplemente no puedes o no quieres prescindir. Con nosotros, por ejemplo, el chat en vivo es una de esas herramientas. La carga del programa de chat ralentiza nuestro sitio, por supuesto. Pero el soporte rápido vía chat es una parte central de nuestro hosting. Así que no podemos prescindir de el 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 como antes. Además, bajo HTTP/2 el servidor ya envía archivos HTML al navegador como precaución. Por lo tanto, la nueva norma compensa cualquier desventaja que pueda tener un gran número de peticiones HTTP. Sin embargo, para beneficiarse de HTTP/2, tu debe cargarse a través de HTTPS, es decir, debe tener un certificado SSL.

De todos modos, nuestra experiencia ha demostrado que no existe una correlación directa entre la longitud de una cascada y la velocidad de carga real. Almenos hasta un cierto límite: con bastante más de 100 solicitudes, en la mayoría de los casos existe un potencial de ahorro.

Si tu sitio web excede este umbral, deberías mirar más de cerca tus peticiones HTTP. Por ejemplo, nuestro sitio web se carga con más de 130 peticiones HTTP. Así que hay un potencial de optimización aquí.

Si tu cascada contiene más de 100 peticiones, mira de cerca de cuál de ellas puedes prescindir.

Consejo #2: Detectar el tiempo de carga

El valor máximo en el eje tus X es esencial para el análisis de la velocidad de carga: Aquí se puede ver cuánto tiempo pasa hasta que tu sitio web está completamente renderizado. Cuanto más pequeño sea este valor, mejor.

Si el valor máximo del eje tus X está por encima de 10, definitivamente deberías mirar la velocidad de carga de tu sitio web.

El tiempo total de carga de tu sitio debe ser inferior a 10 segundos

Consejo nº 3: Detectar el tiempo de carga percibido

A la mayoría de los usuarios no les importa lo que las herramientas de análisis de valores arrojen. Lo único que les importa es la rapidez con la quesienten las cargas de sitio .

Por lo tanto, para ti, como operador del sitio, es importante mejorar esta sensación de velocidad tanto como sea posible. Esto puede lograrse, por ejemplo, mediante un almacenamiento en caché óptimo, una optimización por encima de lo normal o, si tus clientes se encuentran en el extranjero, el uso de una Red de Entrega de Contenido (CDN).

Pero, afortunadamente, también se puede llegar al fondo de este tiempo de carga percibido muy bien a través de los gráficos de cascada. Hasta donde sabemos, Webpagetest es la única herramienta gratuita que puede distinguir entre el medido técnicamente tiempo de carga y el percibido por el usuario tiempo de carga.

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 de la página web (es el punto de "inicio de la renderización"). La línea azul indica el momento en que el usuario percibe que sitio está totalmente cargado: en ese momento, la probabilidad de interactuar con sitio aumenta considerablemente. Estas dos líneas deben estar lo más a la izquierda y lo más juntas posible.

Optimizar WordPress la cartografía del tiempo de carga percibido
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 le proporciona estos datos. Esto no lo sabemos por Pingdom Tools o GTMetrix. Por lo tanto, esta regla sólo se aplica si se utiliza Webpagetest:

La línea verde debería aparecer al cabo de unos 2 o 3 segundos, la línea azul al cabo de 7 segundos como máximo.

Consejo #4: HTTP/2 vs. HTTP/1

HTTP/2 ofrece una ventaja decisiva sobre HTTP/1: Con el nuevo estándar web, los sitios se cargan mucho más rápido. Sin embargo, además de un certificado SSL, también depende de que tu hoster proporcione este servicio. Muchos operadores de sitios web no están seguros de si este es realmente el caso para ellos o no.

Una de las mayores ventajas de HTTP/2 es que puede gestionar varias peticiones a la vez. Y esto se puede ver claramente en su diagrama de cascada. Dado que las peticiones se procesan aquí cronológicamente, varias barras comienzan en el mismo punto del eje X cuando se utiliza HTTP/2.

Optimizar WordPress el comportamiento de carga de un sitio en WordPress con y sin HTTP/2
A la izquierda, el típico comportamiento de carga de uno sin sitio en WordPress HTTP/2. Las peticiones HTTP individuales se ejecutan una tras otra. A la derecha se ve cómo se comporta la misma página con HTTP/2: Las solicitudes individuales se cargan aquí simultáneamente.

Si cargan las solicitudes individuales en paralelo,tu sitio funciona con HTTP/2.

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

En aproximadamente el 30% de los sitios web que analizamos, aún encontramos potencial en cuanto al tamaño de las imágenes. Y esto, aunque la mayoría de los webmasters asumen que ya han logrado lo óptimo aquí.

Las imágenes son, según nuestra experiencia, el factor más importante del tiempo de carga del sitio después del caching. Por cada imagen que subes al backend, se crean en WordPress automáticamente un montón de otros archivos, las miniaturas o imágenes destacadas. La correcta compresión de estos archivos es una de las formas más efectivas de reducir el tamaño y por lo tanto la velocidad de carga de tu sitio.

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

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.

Optimizar WordPress esto es lo que parece cuando las imágenes son realmente demasiado grandes
Un ejemplo extremo pero muy ilustrativo de imágenes sin comprimir. Sólo algunos de los archivos tardan más de 8 segundos en cargarse, lo que ralentiza toda la web sitio.

En un caso como el anterior, deberías mirar de cerca tus fotos. Haciendo clic en la solicitud correspondiente, se puede ver en un diagrama de cascada qué archivos están involucrados. Esto hace que la búsqueda de los frenos de tiempo de carga sea mucho más fácil.

Las barras de carga largas para los recursos de imagen indican el potencial de compresión.

Consejo nº 6: Localice los redireccionamientos

Un gráfico de cascada no sólo le ayudará 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 le indica qué redirección está configurada y dónde va.

Optimizar WordPress el reenvío de la identificación
Este sitio tiene varias redirecciones 302 seguidas.

Con un diagrama de cascada, puede ver de un vistazo cuántos y qué redireccionamientos se han establecido. Por cierto, esto también ayuda a detectar los bucles de reenvío después de un cambio de DNS. Gracias a los marcadores amarillos, hemos podido detectar en varias ocasiones redireccionamientos innecesarios o incluso perjudiciales.

Las líneas amarillas marcan los desvíos.

Consejo nº 7: Reconozca los erroresde un vistazo

Ocasionalmente sucede que los elementos de una página web no se renderizan correctamente. Esto puede afectar a los marcos de AdSense, por ejemplo, pero también a los mapas y fuentes incrustadas.

Optimizar WordPress en el diagrama de cascada, los errores se identifican con líneas rojas
Este sitio arroja un error 404.

En este caso, el diagrama de cascada expulsa un mensaje de error y marca la línea con la consulta correspondiente en rojo. El diagrama también indica qué error está involucrado y qué recurso está produciendo el error.

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

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 puede obtener para las páginas de tu WordPress . Combina varios datos que usted, como propietario del sitio, debe vigilar: Tiempos de carga, orden de renderización y mensajes de error. Con los consejos de este artículo, podrá reconocer rápida y eficazmente y efectivamente donde todavía hay potencial de optimización:

  • ¿Es la cascada demasiado larga (más de 100 solicitudes)?
  • ¿El valor máximo del eje X es demasiado grande (superior a 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)?
  • ¿Están las líneas verdes y azules demasiado a la derecha o demasiado separadas (es decir, el usuario percibe sitio 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.

RAIDBOXER desde el inicio y Jefe de Apoyo. En el bar y WordCamps le gusta hablar de PageSpeed y del rendimiento de los sitios web. La mejor manera de sobornarlo es con un expreso o un pretzel bávaro.

Artículos relacionados

Comentarios sobre este artículo

Escribe un comentario

La dirección de correo electrónicotu no se publicará. Los campos obligatorios están marcados con *.