¿Qué es un gráfico de cascada y cómo se lee?

La velocidad y el rendimiento del sitio son una parte fundamental de cualquier sitio web. Si su sitio no se carga lo suficientemente rápido, la gente se irá.

Un sitio web rápido de WordPress no solo le ayuda a tener un buen desempeño en los motores de búsqueda, sino que también mejora su tasa de conversión.

Para conocer la velocidad de su sitio web de WordPress, utilice herramientas como GTMetrix, Chrome Devtool o Pingdom.

Sin embargo, estas herramientas pueden pasar por alto muchas cosas, y es ahí donde entra en juego el diagrama de cascada.

¿Qué es un gráfico de cascada?

El gráfico de cascada muestra el comportamiento de carga de un blog, solicitud por solicitud. Incluye scripts, archivos multimedia y recursos de terceros solicitados por su página web.

En pocas palabras, hace que optimizar una página web sea más sencillo.

Un gráfico de cascada es un informe que muestra la cantidad de solicitudes de URL que se procesan en el back-end mientras se carga una página en el front-end. Aquí, hemos utilizado GTMetrix, pero cualquier otra herramienta de prueba de rendimiento de sitios web disponible es válida.

Nota: Un sitio web rápido mostrará un gráfico con barras pequeñas (representación rápida) y menos solicitudes de recursos, etc.

La mayoría de los retrasos se pueden solucionar desde el servidor (comuníquese con su proveedor de alojamiento/dominio).

Pero si crees que hay una cadena lenta en alguna parte, el gráfico de cascada puede descubrirlo.

Todo lo que necesitas es buscar las solicitudes que tardan más en cargarse. Puedes revisar HTML, CSS, JS, XHR, fuentes, imágenes y más para descubrir el problema.

Cómo leer un diagrama de cascada

Los gráficos de cascada se diferencian en cinco columnas.

1. URL: la primera columna indica el recurso que se está cargando. Estos archivos revelan qué tipo de recursos son. Por ejemplo, .jpg (imágenes), .css (hojas de estilo) o .js (javascript).

2. Estado: la siguiente columna indica la respuesta del código de estado HTTP.Actualizadosignifica que todo está bien, peroErrores 4xx o 5xxdenotan solicitudes fallidas.

3. Dominio: te informa sobre el servidor desde el que se carga el recurso. En la mayoría de los casos, verás tu dominio, pero los nombres de host pueden cambiar si estás usando recursos de terceros.

4. Tamaño: Busque los archivos que consumen 1 MB o más. Puede encontrar varios recursos que consumen más espacio.

5. Cronología: esta columna contiene la información más útil del diagrama. Puede obtener información sobre las diferentes fases de carga de recursos y qué fases ralentizan el sitio.

5.1 Recepción: la primera frase de la línea de tiempo es recepción. Es el tiempo que lleva descargar archivos. Los archivos grandes (imágenes no optimizadas, por ejemplo) aumentan el tiempo de descarga y consumen más ancho de banda, lo que retrasa un sitio web.

La mejor forma de solucionarlo es optimizar los medios, reducir el tamaño de las imágenes, infografías creadas en línea o videos sin reducir su calidad. Herramientas como Optimole (Image CDN) son útiles y mantener las imágenes en un servidor en la nube mejora la disponibilidad del ancho de banda.

5.2 Tiempo de espera: el tiempo de espera es el tiempo que tarda el servidor en generar una respuesta. Un tiempo de espera prolongado indica que el código es ineficiente o que hay cuellos de botella (red sobrecargada) en el servidor.

Los desarrolladores corrigen el código ineficiente. A menudo, códigos como PHP se combinan con SQL para la gestión de bases de datos en CMS como WordPress.

En algunos casos, como la instalación de complementos o la personalización de temas, el código se vuelve ineficiente. Un desarrollador los encuentra y modifica el código para solucionar un servidor lento.

Otra forma de reducir el tiempo de espera es una utilidad de almacenamiento en caché. Los servicios de caché de WordPress reducen la cantidad de solicitudes generadas. Para obtener el mejor rendimiento, cambie de un alojamiento compartido a un alojamiento dedicado.

El hosting compartido está vinculado entre varios usuarios y la disponibilidad de recursos es limitada. Sin embargo, el hosting dedicado tiene mayor disponibilidad de recursos y un excelente hardware personalizado para un gran rendimiento.

5.3 Bloqueo: el bloqueo también se conoce como solicitud en cola. Incluye conexiones HTTP/HTTP2 disponibles, ejecución de JavaScript o CSS, tiempo de conexión SSL y autenticación HTTP.

5.4 Conexión: aquí es donde se crea el Protocolo de control de transmisión/Protocolo de Internet entre el servidor y un host. Depende de la red y del sistema asociado.

5.5 Envío: es el tiempo que tarda el navegador en enviar una solicitud al servidor.PONER y POSTLas solicitudes tienen un plazo de envío mayor.

5.6 Búsqueda de DNS: La búsqueda de DNS incluye el tiempo que tarda el DNS en resolverse.

Si observa el gráfico de cascada de su sitio con GtMetrix, notará algo sorprendente: la mayoría de los scripts se ralentizan debido a la búsqueda de DNS.

El DNS es como una guía telefónica de Internet. Cuando un usuario solicita una página web, un dominio específico convierte el nombre de host en una dirección IP compatible con el ordenador. De forma similar a cómo utilizamos una dirección para encontrar una calle en particular, la web utiliza una dirección IP para localizar un dominio.

Aquí es dondeNube de llamasentra en acción. En lugar de ralentizar el tiempo de carga mediante una recuperación de DNS lenta, acelera este proceso. Cloudflare es uno de los servicios de búsqueda de DNS más rápidos y se esforzará porAcelera tu sitio.

Incluso puedes instalar un complemento como WPRocket para reducir las seis fases de la línea de tiempo. Aquí tienes todo lo que hace:

• Compresiones Gzip
• Carga perezosa
• Almacenamiento en caché
• Optimización de bases de datos
• Optimización de fuentes de Google
• Optimización de Google Analytics

En estas frases es donde radica el verdadero problema, por lo que discutiremos el apartado de la línea de tiempo con un poco más de detalle en otra ocasión.

Resumiendo

Ya sea que uses GTMetrix, DevChrometools u otra herramienta de prueba de rendimiento, encontrarás un gráfico en cascada. Úsalo para encontrar problemas específicos en el tiempo de carga e incluso para minimizar scripts con más tiempo de carga.

Además, siempre recibirás consejos junto con las herramientas para acelerar tu sitio web de WordPress. Aquí tienes todo resumido.

• Problema: El servidor funciona con lentitud. Solución: envíe un correo electrónico a su proveedor de servicios.
• Problema: Enlace de seguimiento de la página. Solución: elimine o desinstale la herramienta de seguimiento que utiliza.
• Problema: Tema voluminoso o personalización del tema sin uso. Solución: Contrate a un desarrollador web.
• Problema: Búsqueda de DNS lenta. Solución: utilice Cloudflare.
• Problema: Error debido a los complementos. Solución: desinstale los complementos.

Si nos olvidamos de algo esencial sobre el gráfico de cascada, háganoslo saber en la sección de comentarios.