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

Jan Hornung Actualizado por última vez el 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
Actualizado por última vez el 12.10.2020

Si quieres optimizar WordPress, algunas medidas son claras, conocidas y de eficacia probada. Pero incluso las páginas supuestamente optimizadas a fondo a menudo todavía tienen potencial. Por eso vale la pena mirar más allá del horizonte de Google PageSpeed Insights y Co. Porque muchas herramientas de desempeño entregan verdaderos datos que valen oro, que permiten un análisis muy completo, si sabes qué buscar. Hoy te enseño 7 consejos, con los cuales el análisis se haceen sólo 7 segundos.

Simples herramientas de desempeño como Google Test My SiteGoogle PageSpeed Insights resultan principalmente en una lista de recomendaciones para la adopción de medidas. Esto puede estar bien para empezar. Pero si quieres supervisar tus WordPress proyectos de manera eficiente y optimizar WordPress con sensatez, tarde o temprano deberías recurrir a una herramienta de rendimiento que también muestre el tiempo de carga de tu sitio y te muestre exactamente cómo se comporta tu blog, tu tienda, tu sitio de la empresa al cargar.

Esto incluye, por ejemplo Pingdom, GTMetrixWebpagetest. Estos suelen proporcionar un llamado Diagrama de cascada con. Estos conjuntos de datos algo voluminosos apenas son notados por muchos usuarios. Pero si trabajas con WordPress profesionalmente, deberías entender cómo funcionan. Porque: No hay ninguna otra fuente de datos que muestre lo rápido que carga tu sitio, lo bueno que estu hoster, lo eficiente que es la carga de tu sitio y dónde se encuentran las piezas clave de tu 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é 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:

Claro, una vez que has aclarado y optimizado estos puntos, has sitio creado una muy buena base para una muy rápida. Es por eso que estas razones están (con razón) cubiertas en todas las guías de buen desempeño.

Por ejemplo

Y también con los más frecuentes Frenos de tiempo de carga de sitios en WordPress estas razones siempre salen a relucir.

Sin embargo, nuestra experiencia de cientos de análisis sistemáticos de rendimiento con pruebas de sitios web y extensas comprobaciones de sitios muestra: Incluso en los sitios supuestamente "completamente optimizados" para WordPress, los problemas de rendimiento se pueden encontrar una y otra vez. Y aquí es exactamente donde el diagrama de cascada ayuda. Porque puede hacer algo especial: Te muestra cómo se carga tu sitio, qué elementos se cargan y a qué velocidad se realiza todo.

Así es como se accede 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
Con las herramientas del Pingdom tienes que desplazarte un poco primero para llegar al diagrama de cascada. La sección correspondiente aquí se llama File Requests. Webpagetest y GT-Metrix tienen cada una 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 traza en el eje X.
    Los diagramas de cascada están estructurados cronológicamente: El eje X muestra exactamente cuándo comienza a cargarse un objeto y cuánto tiempo tarda en cargarse. Es esta estructura cronológica la que hace que un diagrama de cascada sea tan valioso. Puedes ver exactamente dónde se pierde el tiempo de carga y con qué procesos tienes que empezar para optimizar tu velocidad de carga.
  2. Cada solicitud de HTTP se registra en el eje Y.
    Para la mayoría de los diagramas de cascadas, puedes hacer clic en los elementos del eje Y para obtener información adicional sobre ellos.
  3. Una leyenda muestra qué tipo de recurso se carga.
    Webpagetest marca HTML, CSS, imágenes, Flash, etc. con colores, Pingdom utiliza símbolos para este propósito.
  4. Un sistema de codificación adicional proporciona información sobre la forma en que se ejecutan las solicitudes individuales, por ejemplo, el tiempo que se 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 se encuentran las cuatro áreas descritas anteriormente.

Optimizar WordPress con el análisis de 7 segundos

Así que ahora está claro cómo se lee un diagrama de cascada, pero ¿qué conclusiones se pueden sacar de él?

En el análisis de rendimiento tenemos Análisis en 7 segundos probado: El diagrama te da información de un vistazo sobre siete factores importantes para la velocidad de carga. Estos siete hacks te ayudan a entender exactamente cómo y cuán rápidotu se presentan las sitios web. Y te muestran dónde hay potencial para hacerlo más rápido, arreglar problemas o mejorarlo aún más.

Nota

Por cierto, en nuestros ejemplos siempre nos referiremos a los diagramas de cascada de Webpagetest, ya que en realidad siempre utilizamos esta herramienta, ya sea manual o automáticamente.

Consejo #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 de la web, las solicitudes pueden ser procesadas simultáneamente en lugar de una tras otra como antes. Además, el servidor envía archivos HTML al navegador bajo HTTP/2 como medida de precaución. Por lo tanto, la nueva norma compensa cualquier desventaja que pueda surgir de un gran número de solicitudes de HTTP. Sin embargo, para beneficiarse de HTTP/2, tu sitio web debe ser cargado a través de HTTPS, es decir, a través de un Certificado SSL orden.

En cualquier caso, la experiencia ha demostrado que no existe una correlación directa entre la longitud de una cascada y la velocidad real de carga. Al menos hasta cierto límite: A más de 100 consultas en la mayoría de los casos, hay 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 #3: Detectar el tiempo de carga percibido

A la mayoría de los usuarios no les importa mucho qué valores dan las herramientas de análisis. Lo único que cuenta para ellos es: lo rápido que se siente la carga de la página.

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).

Afortunadamente, uno también llega a conocer muy bien este tiempo de carga por medio de los diagramas de cascada. Hasta donde sabemos, Webpagetest es la única herramienta gratuita que puede ser usada entre medida técnicamente tiempo de carga y el percibido por el usuario El tiempo de carga es diferente.

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

La línea verde indica cuando se carga el primer elemento visual de la redsitio (esto se llama el punto "Start Render"). La línea azul indica cuando el usuario percibe que el elemento sitio visual está completamente cargado - a partir de este punto, la probabilidad de sitio interactuar con él aumenta significativamente. Estas dos líneas deben estar tan a la izquierda y tan cerca como sea 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 puede darte esos datos. De las herramientas de Pingdom o de la GTMetrix no sabemos esto. Por lo tanto, esta regla sólo se aplica si utilizas Webpagetest:

La línea verde debería aparecer después de unos 2 o 3 segundos, la línea azul después 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 del HTTP/2 es el procesamiento simultáneo de múltiples solicitudes. Y puedes ver esto claramente en tu diagrama de la cascada. Dado que aquí las peticiones se procesan cronológicamente, varias barras empiezan en el mismo punto del eje X cuando se usa 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 #5: Reconocer las imágenes que son demasiado grandes

En alrededor del 30 por ciento de los sitios web que analizamos, todavía encontramos potencial en términos de tamaño de imagen. Y esto a pesar de que la mayoría de los webmasters asumen que ya han sacado el máximo provecho de este potencial.

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 claro de imágenes sin comprimir. Algunos de los archivos tardan más de 8 segundos en cargarse, lo que ralentiza todo el procesositio.

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 largas barras de carga de los recursos de imagen indican el potencial de compresión.

Consejo #6: Seguimiento del reenvío

Un diagrama de cascada ayuda no sólo a entender qué elementos se cargan cuándo y a qué velocidad, sino también cuántas redirecciones se han establecido y hacia dónde apuntan.

Las solicitudes con reenvíos suelen estar resaltadas en color. El diagrama también muestra qué reenvío se ha establecido y a dónde conduce.

Optimizar WordPress el reenvío de la identificación
Esto sitio tiene varios 302 reenvíos seguidos.

Así que con un diagrama de cascada puedes ver de un vistazo cuántas y cuáles redirecciones 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 las marcas amarillas, ya hemos podido detectar varias veces redireccionamientos innecesarios o incluso dañinos.

Las líneas amarillas marcan el avance.

Consejo #7: Detectar errores de 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
Esto sitio expulsa 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 sitio indican errores durante la representación.

Con el Hoja de trucos todos los consejos a la vista

Un diagrama de cascada es probablemente la evaluación más valiosa que puedes obtener para tus sitios en WordPress. Combina varios datos que tú, como propietario del sitio, deberías vigilar: Los tiempos de carga, el orden de renderización y los mensajes de error. Armado con los consejos de este artículo, rápidamente reconocerás y efectivo donde todavía hay espacio para mejorar:

  • ¿Es la cascada demasiado larga (más de 100 solicitudes)?
  • ¿Es el valor máximo del eje X demasiado grande (mayor de 10)?
  • ¿Cargar peticiones en paralelo (vía 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 (sitio por lo que el usuario las percibe como lentas)?
  • ¿Hay líneas amarillas inesperadas (redirecciones)?
  • ¿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

Escriba un comentario

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