Una cadena de solicitudes críticas es una serie de solicitudes que dependen entre sí y son fundamentales para cargar la página. Sigue el Critical Rendering Path, que determina el orden en que se procesan y ejecutan las solicitudes.
Las cadenas largas de solicitudes críticas, especialmente las que incluyen recursos importantes, pueden ralentizar significativamente la carga de tu página porque bloquean el renderizado. Reducir la cantidad de estas cadenas disminuye la latencia y acelera el tiempo de carga.
- El encadenamiento de solicitudes críticas puede provocar tiempos de carga más lentos y peores tiempos de respuesta en tu sitio web.
- Todos los recursos vitales se renderizan en el orden especificado en tu código HTML, lo que puede retrasar la primera visualización de contenido en las pantallas de los visitantes, según el tamaño de los recursos y la longitud de la cadena.
Esta guía explora distintos métodos para evitar el encadenamiento de solicitudes críticas en tu sitio. Empecemos por lo básico.
Cómo afectan las cadenas de solicitudes críticas a la velocidad del sitio web
Al inicio del proceso de carga, el navegador lee el HTML y gestiona las solicitudes críticas según sus niveles de prioridad. Normalmente, el HTML se prioriza primero, seguido por el CSS, las imágenes y el JavaScript.
Las cadenas largas de estas solicitudes críticas pueden ralentizar tu sitio web aumentando la latencia y prolongando los tiempos de carga. El retraso total es la suma del tiempo necesario para descargar todos los recursos de la cadena de solicitudes críticas más larga.
- Puedes mejorar el rendimiento y la experiencia del usuario reduciendo la cantidad de estos recursos críticos.
- Esto puede lograrse retrasando su descarga, eliminándolos por completo o acortando los caminos críticos.
Entendiendo las solicitudes críticas: la perspectiva de Lighthouse
Una solicitud crítica incluye cualquier recurso necesario para renderizar la página. Lighthouse define una solicitud crítica como:
- No precargada
- Bloqueante del renderizado
- Declarada con prioridad media, alta o muy alta.
Estas solicitudes suelen incluir elementos como el titular de un artículo o las imágenes del hero banner, que deben aparecer en la pantalla del visitante de inmediato.
Análisis de solicitudes críticas con GTmetrix
GTmetrix describe una solicitud crítica como:
- Bloqueante del renderizado
- No precargada
- Declarada con prioridad media, alta o muy alta.
Cuando existe al menos una de estas cadenas, GTmetrix inicia una auditoría. Después muestra la cadena de solicitudes críticas más larga, detallando cada solicitud y mostrando la latencia máxima del camino crítico.
Cómo evitar el encadenamiento de solicitudes críticas
Para mejorar el rendimiento de tu sitio web evitando el encadenamiento de solicitudes, puedes adoptar la técnica de precargar las solicitudes esenciales. Esta técnica indica qué archivos deben cargarse al principio del proceso porque son críticos para renderizar la parte visible de la página.
Aquí tienes cómo implementarlo de forma eficaz:
Nota: Es una buena idea hacer una copia de seguridad de tu sitio antes de hacer cualquier cambio. Si algo sale mal, podrás restaurar rápidamente tu sitio al estado anterior*. Puedes usar WP Staging para realizar copias de seguridad automáticas con facilidad. Consulta la guía de copia de seguridad y restauración para más ayuda.*
Precargar las solicitudes clave
Identifica los recursos más críticos que afectan a la carga de tu página. Suelen incluir archivos CSS, JavaScript, fuentes e imágenes "above the fold".
Usa el atributo rel= "preload" en la sección <head> del HTML para indicarle al navegador que cargue estos recursos cuanto antes. Esto es fundamental para recursos como CSS y JavaScript, que bloquean el renderizado.
Especifica correctamente el tipo de contenido que se precarga mediante el atributo as (por ejemplo, as= "script" para JavaScript). Esto ayuda al navegador a priorizar estos recursos de forma efectiva.
Plan B: usar WP Rocket para precargar
Si prefieres un enfoque más sencillo basado en plugins, WP Rocket es una herramienta muy recomendable para automatizar la precarga de solicitudes esenciales.
WP Rocket facilita la precarga de fuentes y otros recursos críticos directamente desde tu dominio, asegurando que estos recursos se carguen rápido para reducir el bloqueo del renderizado.
Además, WP Rocket ofrece funciones como la optimización de la entrega de CSS, incluyendo opciones para eliminar el CSS no utilizado y cargar el CSS de forma asíncrona. Esto mejora aún más el rendimiento del sitio al reducir el impacto del CSS que bloquea el renderizado.
Reducir la cantidad de recursos críticos
Acelera tu sitio minimizando el CSS y JavaScript esenciales necesarios para el contenido "above the fold". Optimiza la carga retrasando el CSS y JavaScript no críticos o eliminándolos por completo. Esta estrategia ayuda al navegador a cargar el contenido importante más rápido al evitar recursos innecesarios como CSS y JS no utilizados.
Para reducir la cantidad de recursos críticos en tu sitio usando el plugin WP Rocket, sigue estos pasos para habilitar opciones de optimización específicas en la pestaña "File Optimization":
- Minify CSS Files: Activa esta opción para comprimir tus archivos CSS eliminando espacios en blanco y comentarios innecesarios. Esto reduce el tamaño del archivo y acelera la carga.
- Optimize CSS Delivery: Selecciona esta opción para eliminar el CSS bloqueante en tu sitio, lo que ayuda a renderizar la página más rápido. Recuerda que solo puede seleccionarse un método dentro de los ajustes de optimización de CSS.
- Minify JavaScript Files: Activa esta opción para comprimir tus archivos JavaScript eliminando espacios y comentarios.
- Combine JavaScript Files: Si tu sitio no usa HTTP/2, considera combinar archivos JavaScript internos y de terceros para reducir las peticiones HTTP.
- Load JavaScript Deferred: Activa esta opción para diferir la carga de los archivos JavaScript hasta después del análisis del HTML, lo que puede mejorar notablemente los tiempos de carga.
Evitar el encadenamiento de solicitudes con ‘font-display‘
Para evitar el encadenamiento de solicitudes y mejorar el rendimiento de tu sitio, puedes usar la propiedad font-display para controlar cómo se muestran las fuentes web durante la carga. Aquí tienes los pasos y valores que puedes utilizar:
Define los valores de font-display:
- Auto: Usa la estrategia predeterminada del navegador.
- Block: Muestra un marcador invisible hasta que la fuente carga.
- Swap: Usa una fuente alternativa hasta que la fuente web carga y luego la cambia.
- Fallback: Oculta el texto brevemente y luego usa una fuente alternativa hasta que la fuente web carga.
- Optional: Similar a fallback, pero el navegador puede decidir no usar la fuente web.
Para la mayoría de los navegadores modernos, se recomienda usar font-display: swap; ya que evita el Flash of Invisible Text (FOIT).
- Implementar font-display: Añade la propiedad font-display a tus reglas @font-face en el CSS:
@font-face {
font-family: 'Your Font';
src: url('your-font.woff2') format('woff2');
font-display: swap;
}- Precargar fuentes: Usa la etiqueta
<link rel="preload">en el<head>del HTML para asegurarte de que las fuentes se cargan al principio del proceso de renderizado:
<link rel="preload" href="your-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">Precargar fuentes con WP Rocket
Cargar las fuentes rápido es importante para evitar desplazamientos del diseño en tu sitio. WP Rocket, un popular plugin de WordPress, ayuda con esto. Así puedes precargar fuentes:
Haz clic en la pestaña "Preload" para acceder a los ajustes relacionados con la precarga de fuentes.
Desplázate hacia abajo hasta encontrar la sección "Preload Fonts". Pega las URLs de las fuentes que identificaste antes en el campo provisto, asegurándote de que cada URL esté en una línea nueva. Luego haz clic en el botón "Save Changes".
Precargar fuentes con WP Rocket ayuda a que tu sitio cargue de forma más fluida, reduciendo el CLS y mejorando la experiencia del usuario.
Resumen
- Entender y mitigar el impacto del encadenamiento de solicitudes críticas es clave para mejorar el rendimiento de tu sitio.
- Abordar estos problemas puede aumentar significativamente la velocidad de carga y ofrecer una experiencia más fluida y receptiva.
- Esto mejora la satisfacción de los usuarios y afecta positivamente al posicionamiento SEO, haciendo que tu sitio sea más favorable para los motores de búsqueda.
Artículos relacionados
- Cómo solucionar el error "Sidebar Not Appearing" en WordPress
- Por qué WordPress es lento + Cómo solucionarlo
- ¿Por qué son necesarias las copias de seguridad y la recuperación ante desastres en WordPress?
- Cómo reparar y optimizar la base de datos de WordPress
- Cómo deshacer cambios en WordPress (revisiones, autoguardados, snapshots)
