Early Hints

Early Hints es un estándar web que puedes implementar para mejorar los tiempos de carga de las páginas hasta en un 30%. Esta norma web define un nuevo código de estado HTTP: 103 Early Hints.

Cuando la función Early Hints está activada, y un visitante carga tu sitio en un navegador compatible, se envían respuestas 103 al navegador (antes de las respuestas 200) con información sobre activos enlazados que pueden aparecer en la respuesta final del servidor. Con esta información, el navegador puede empezar a preparar la página antes de recibir la respuesta 200 OK del servidor. Esto permite al navegador preparar más eficazmente la página para cargarla mientras el servidor está «pensando»

El mecanismo Early Hints se puede usar con cualquier tipo de encabezado Link o recurso hint, como preload y preconnect. Ayuda a mejorar el rendimiento de las páginas web permitiendo que los navegadores empiecen a descargar o preparar recursos antes de recibir la respuesta final.

Como parte de la integración de Kinsta con Cloudflare, Early Hints se puede habilitar para tu sitio de WordPress en MyKinsta, siempre que uses un dominio personalizado. No se puede usar Early Hints con un dominio temporal kinsta.cloud.

Preload y preconnect

Early Hints está diseñado principalmente para funcionar con indicaciones de recursos (resource hints) como preload y preconnect. Se puede utilizar para aumentar la efectividad de preload y preconnect enviándolos al navegador tan pronto como se realiza la solicitud inicial.

• Preload: Indica al navegador que cargue un recurso lo antes posible. Early Hints envía estas indicaciones de preload al navegador de forma anticipada, lo que permite que empiece a descargar recursos críticos (por ejemplo, CSS, JavaScript) de inmediato. Esto reduce los tiempos de bloqueo de renderizado y mejora el rendimiento.
• Preconnect: Establece conexiones anticipadas con orígenes externos importantes. Early Hints envía estas indicaciones de preconnect de forma anticipada, lo que permite al navegador realizar búsquedas DNS y negociaciones TLS por adelantado. Esto reduce la latencia cuando se hacen las solicitudes reales, acelerando el tiempo de carga de la página.

Para usar preload y preconnect de manera efectiva, debes añadir encabezados de enlace específicos a los activos que deseas marcar para la precarga. Puedes utilizar un plugin de WordPress para añadir encabezados preload o preconnect a tus activos en WordPress, como WP Rocket, Perfmatters o Pre* Party Resource Hints.

Notas Importantes

1. Tu sitio necesitará tener el Link: cabecera de respuesta con el tipo relpreload o preconnect para indicar los recursos que quieres incluir en la respuesta de Early Hints. Puedes utilizar un plugin de WordPress para añadir encabezados preload o preconnect a tus activos en WordPress.
2. El código de estado 103 Early Hints es compatible con las últimas versiones de Chrome, Edge, Safari y Firefox. Si un navegador no admite Early Hints y recibe un encabezado 103, no pasa nada: simplemente lo ignorará.
3. Si tu sitio tiene más de 20 dominios, activar Early Hints puede tardar como mínimo 5 minutos, dependiendo del número total de dominios.
4. No puedes usar Early Hints con un dominio temporal kinsta.cloud.

Activar Early Hints

1. Para activar Early Hints, inicia sesión en MyKinsta y ve a Sitios WordPress > nombre del sitio > Herramientas.
2. En Early Hints, haz clic en el botón Activar.

Aparecerá una notificación en la esquina superior derecha indicando que Early Hints está activado.

Prueba de Early Hints

Para confirmar que Early Hints está funcionando, inspecciona las cabeceras HTTP de una página de tu sitio y busca cualquier Link: cabecera con el tipo rel de preload o preconnect que hayas añadido. Para inspeccionar las cabeceras HTTP de tu sitio, puedes utilizar cualquiera de las siguientes opciones:

• Nuestro comprobador gratuito de estado HTTP y redirecciones.
• Las herramientas de desarrollo integradas en tu navegador web.
• El comando curl en Terminal (línea de comandos), sustituyendo la URL al final de este ejemplo por la URL de la página que quieres comprobar:

curl -L -s -o /dev/null -D - https://kinstaexample.com

Desactivar Early Hints

1. Para desactivar Early Hints, entra en MyKinsta y ve a Sitios WordPress > nombre del sitio > Herramientas.
2. En Early Hints, haz clic en el botón Desactivar.

En la esquina superior derecha aparecerá una notificación indicando que Early Hints está desactivado.