WordPress optimizar: Cómo analizar su sitio web en 7 segundos

Jan Hornung
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 en

Si quieres WordPress optimizar, 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 Insightsy Co. Porque un gran rendimientoHerramientas entrega verdaderos datos de la mina de oron, que permiten un análisis muy completo, si sabes qué buscar. Hoy te enseño 7 consejos, por el cual el análisisy en sólo 7 segundos.

Una simple actuaciónHerramientas como Googles Pruebe mi sitioGoogle PageSpeed Insights resultan principalmente en una lista de recomendaciones para la adopción de medidas. Esto puede estar bien para empezar. Cuando tengas tu WordPress pero supervisar eficientemente los proyectos y WordPress tarde o temprano deberías utilizar una herramienta de rendimiento que también muestre el tiempo de carga de tu página y te muestre exactamente cómo se comporta tu blog, tu tienda, la página de tu empresa al cargar.

Esto incluye, por ejemplo Reino Unido, GTMetrixPrueba de la página web. Estos suelen proporcionar un llamado Diagrama de la cascada con. Estos conjuntos de datos algo voluminosos apenas son notados por muchos usuarios. Pero si trabajas con WordPress ellos profesionalmente, deberías entender cómo funcionan. Porque: No hay ninguna otra fuente de datos que le muestre la rapidez con la que se carga su sitio, la calidad de su sitioproveedores de hosting , la eficiencia con la que se carga su sitio y dónde se encuentran los sitios de construcción de su sitio.

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

¿Cómo se hace eso? ¡Hoy te mostraré paso a paso!

ebook: Mida el rendimiento de su sitio como un profesional

WordPress optimizar: 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 actuaciónHerramientas , que ya me muestra todas las medidas de optimización importantes. Además, de todos modos se limita a los siguientes puntos:

Claro, si has aclarado y optimizado estos puntos, has creado una muy buena base para un sitio realmente rápido. 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 WordPress -páginas estas razones siempre salen a relucir.

Sin embargo, nuestra experiencia de cientos de análisis sistemáticos de rendimiento con pruebas de páginas web y extensas comprobaciones de sitios muestra: Incluso en las páginas supuestamente "completamente optimizadas"WordPress , los problemas de rendimiento se pueden encontrar una y otra vez. Y aquí es exactamente donde el diagrama de la cascada ayuda. Porque puede hacer algo especial: Te muestra cómo se carga la página, 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 utiliza las Herramientas del Reino, sólo tiene que desplazarse hacia abajo lo suficiente.

WordPress  optimizar la cascada del Reino Unido
Con las Herramientas del Reino tienes que desplazarte un poco primero para llegar al diagrama de la cascada. La sección correspondiente aquí se llama Solicitudes de Archivo. 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 las cascadas.

Cómo leer correctamente los diagramas de las cascadas

La densidad concentrada de la 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 un objeto comienza a cargarse 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 debes 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, puede 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.
WordPress  optimizar: Cómo analizar su sitio web en 7 segundos
WordPress  optimizar las áreas de un diagrama de cascada
En esta figura se encuentran las cuatro áreas descritas anteriormente.

WordPress optimizar 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 7 segundos de análisis probado: El diagrama le da información de un vistazo sobre siete factores importantes para la velocidad de carga. Estos siete hackeos te ayudan a entender exactamente cómo y cuán rápido se renderiza tu sitio 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 puede o no quiere 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 alojamiento. PluginAsí que no podemos prescindir de ella.

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

Porque 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 las desventajas que pueden surgir de un gran número de solicitudes de HTTP. Sin embargo, para beneficiarse de HTTP/2, su 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 su sitio web excede este umbral, debería mirar más de cerca sus peticiones HTTP. Por ejemplo, nuestra página web se carga con más de 130 peticiones HTTP. Así que hay un potencial de optimización aquí.

Si su cascada contiene más de 100 peticiones, mire de cerca de cuál de ellas puede prescindir.

Consejo #2: Detectar el tiempo de carga

El valor máximo en el eje x es esencial para analizar la velocidad de carga: Aquí puedes 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 de su eje X es superior a 10, definitivamente debe considerar la velocidad de carga de su página.

El tiempo total de carga de su página 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 escupen el análisisHerramientas . Lo único que cuenta para ellos es: lo rápido que se siente la carga de la página.

Por lo tanto, para usted, como operador del sitio, es importante mejorar esta sensación de velocidad tanto como sea posible. Esto puede lograrse mediante un almacenamiento en caché óptimo, una optimización por encima de lo normal o, si sus clientes se encuentran en el extranjero, el uso de una red de entrega de contenidos (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 medido 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 página web (esto se llama el punto "Start Render"). La línea azul indica cuando el usuario percibe que la página está completamente cargada - en este punto, la probabilidad de interactuar con la página aumenta significativamente. Estas dos líneas deben estar tan a la izquierda y tan cerca como sea posible.

WordPress  optimizar 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.

Prueba de la página web es la única herramienta que puede darte esos datos. De las Herramientas del Reino o de la GTMetrix no sabemos esto. Por lo tanto, esta regla sólo se aplica si Webpagetest utiliza:

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 en comparación con HTTP/1: Con el nuevo estándar web, las páginas se cargan mucho más rápido. Sin embargo, además de un certificado SSL, también depende de su proveedores de hosting proveedor para proporcionar este servicio. Muchos operadores de sitios web no están seguros de si este es realmente el caso con 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.

WordPress optimizar el comportamiento de carga de un WordPress sitio  con y sin HTTP/2
A la izquierda, el típico comportamiento de carga de uno sin WordPress sitio 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.

Cargue las solicitudes individuales en paralelo, su página se ejecutará 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 de la página después del caching. Por cada imagen que subes al backend, se crea 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 su página.

La forma de optimizar tus fotos sensiblemente te muestra, por ejemplo:

En el diagrama de la 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.

WordPress  optimizar esto es lo que parece cuando las imágenes son realmente demasiado grandes
Un ejemplo extremo pero muy vívido de imágenes sin comprimir. Algunos de los archivos tardan más de 8 segundos en cargarse, ralentizando toda la página.

En un caso como el anterior, deberías mirar de cerca tus fotos. Al hacer clic en la solicitud correspondiente, normalmente se puede ver en un diagrama de cascada exactamente 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.

WordPress  optimizar el reenvío de la identificación
Esta página tiene varias 302 redirecciones en una fila.

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 ADN. 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 incrustados.

WordPress  optimizar en el diagrama de la cascada, los errores se identifican con líneas rojas
Esta página expulsa un error 404.

En este caso, el diagrama de la 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 errores al renderizar la página.

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 WordPress páginas. Combina varios datos que usted, como propietario del sitio, debería 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á 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 (por lo que el usuario percibe la página como lenta)?
  • ¿Hay líneas amarillas inesperadas (redirecciones)?
  • ¿Hay líneas rojas (errores)?

Concedido: la primera vez, puede que te lleve más tiempo analizarlo. Sin embargo, con un poco de experiencia, los diagramas de cascada le permiten comprender mucho mejor sus WordPress proyectos y optimizarlos más a fondo.

Artículos relacionados

Comentarios sobre este artículo

Escriba un comentario

Su dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con * marcado.