103 primeros consejos: qué es y cómo implementarlo
Publicado: 2022-07-16103 Early Hints es el nuevo código de estado HTTP que ayuda a los navegadores a decidir qué contenido precargar antes de que la página comience a llegar.
Después de que Cloudflare lo mencionara por primera vez a fines del año pasado, ahora Google anunció oficialmente que Early Hints está disponible en la versión 103 de Chrome con soporte para precarga y preconexión para comenzar:
En las siguientes líneas, aprenderá qué es exactamente Early Hints y cómo puede implementarlo en su sitio web para mejorar el rendimiento.
Pero antes de eso, haremos un repaso rápido de cómo funcionan los navegadores y por qué se necesitaban Early Hints en primer lugar.
En pocas palabras: navegadores, servidores y servidor Think-Time
Para poder cargar esta página (o cualquier otra página) y leer el contenido, su navegador necesitaba instrucciones sobre qué renderizar y qué recursos (como imágenes, fuentes, archivos JavaScript) deben obtenerse para completar su pintura.
Básicamente, su navegador envía una solicitud a un servidor, y las instrucciones sobre qué cargar provienen de la respuesta del servidor.
Desafortunadamente, podría haber una latencia de un par de cientos de milisegundos hasta que el servidor reúna todos los recursos necesarios para compilar toda la página web y enviarla de regreso al navegador.
Este período se conoce como "tiempo de reflexión del servidor".
Durante este tiempo de reflexión del servidor, el navegador simplemente se sienta allí y espera sin mostrar ningún contenido. Y creo que podríamos estar de acuerdo en que nadie quiere mirar una pantalla en blanco.
Ahí es donde entran en juego los Primeros Consejos.
¿Qué es Early Hints?
Una forma de mejorar el rendimiento de la página es usar sugerencias de recursos. Como sugiere su nombre, le dan al navegador "sugerencias" sobre qué recursos podría necesitar más adelante, por ejemplo, precargar archivos específicos o conectarse a un servidor diferente.
Si está interesado en el tema y desea obtener más información, consulte nuestro artículo sobre sugerencias de recursos y su implementación.
Por muy bueno que parezca usar sugerencias de recursos, hay una trampa. Para que el navegador actúe sobre ellas, el servidor debe enviar al menos una parte de la página.
Ingrese las primeras sugerencias.
Early Hints aprovecha el "tiempo de reflexión del servidor" para enviar de forma asíncrona instrucciones al navegador para comenzar a cargar subrecursos críticos (como hojas de estilo, archivos JavaScript críticos, etc.) o establecer una conexión con los orígenes que probablemente se usarán en el página mientras el servidor está compilando la respuesta completa.
Sin pistas tempranas
En términos más simples:
Con Early Hints habilitado, el servidor envía dos respuestas: la primera (código de estado HTTP 103 Early Hints) para indicarle al navegador qué puede comenzar a cargar de inmediato, y la segunda (código de estado HTTP 200) es la respuesta completa con el resto. información.
Con sugerencias tempranas habilitadas
Al enviar estas sugerencias al navegador antes de compilar la respuesta completa, el navegador puede averiguar qué debe hacer para cargar la página web más rápido para el usuario.
El final resulto:
Tiempos de carga de página más rápidos y latencia percibida por el usuario reducida.
Si está buscando una explicación más formal, Cloudflare hizo un gran trabajo brindándola:
Implementación de sugerencias tempranas en su sitio web
Debe seguir varios pasos para implementar Early Hints en su sitio web con éxito.
Paso 0: considere usar el enlace rel=preload o el enlace rel=preconnect en lugar de Early Hints
Este es el paso 0 porque si su servidor puede enviar una respuesta 200 inmediatamente, agregar Early Hints es inútil . En su lugar, si desea acelerar la respuesta 200, incluso más, puede utilizar las sugerencias de recursos link rel=preload o link rel=preconnect .
La forma más fácil de determinar qué tan rápido su servidor envía la respuesta 200 es usar la herramienta de prueba de rendimiento de KeyCDN. Todo lo que tiene que hacer es insertar la URL de su sitio y obtener los datos:
Paso 1: identifica tus páginas principales
En caso de que el paso 0 no sea válido para usted y su servidor necesite tiempo para generar la respuesta, tiene todos los requisitos previos para continuar con la integración de Early Hints.
El primer paso es identificar sus principales páginas de destino, o en otras palabras, la página donde sus usuarios comienzan su viaje en su sitio. Estos puntos de entrada son más importantes que cualquier otra página porque la efectividad de Early Hints disminuye a medida que los visitantes navegan por sus sitios web .
Esto se debe a que los navegadores modernos son bastante buenos para adivinar qué página visitará el usuario a continuación, y es probable que tengan todos los subrecursos que necesitan en la segunda o tercera navegación posterior.
Paso 2: Identificar los orígenes críticos y los subrecursos que más contribuyen a las métricas de rendimiento clave
Una vez que haya identificado sus principales páginas de destino, debe pasar a identificar qué orígenes y subrecursos son buenos candidatos para las sugerencias de preconexión o precarga. Estos serían los orígenes y los recursos que contribuyen de forma masiva a las métricas clave, como la mayor pintura con contenido y la primera pintura con contenido.
Más específicamente, le gustaría buscar subrecursos que bloquean el renderizado, como JavaScript síncrono, hojas de estilo o incluso fuentes web.
Puede identificarlos ejecutando su sitio web a través de una herramienta de prueba como WebPageTest y verificando el gráfico de cascada. Todos los recursos de bloqueo de procesamiento tendrían una "X" delante de ellos:
La forma más fácil de identificar los subrecursos adecuados para Early Hints es si sus recursos principales ya están usando el enlace rel=preconnect o el enlace rel=preload . Estos son los candidatos perfectos.
Y así es como puede agregar manualmente Early Hints a su sitio web.
Pero, ¿qué sucede si no tiene las habilidades técnicas para hacerlo usted mismo?
Bueno, hay una manera más fácil.
Habilitación de sugerencias tempranas con su cuenta de Cloudflare
Si es usuario de Cloudflare, puede habilitar Early Hints a través de su tablero, siguiendo los siguientes pasos:
- Inicie sesión en su panel de control de Cloudflare y seleccione su dominio.
- En el panel, haga clic en Velocidad > Optimización.
- En Entrega optimizada, habilite Sugerencias anticipadas.
Como sabrá, Cloudflare también proporciona la CDN integrada de NitroPack. Esta transición nos abrió la puerta para comenzar a trabajar en una nueva función de almacenamiento en caché de borde de HTML que, cuando se lance, nos permitirá brindar a todos nuestros clientes la posibilidad de habilitar Early Hints sin tener una cuenta de Cloudflare.
Estamos inmersos en el proceso de desarrollo y trabajando arduamente para liberar el almacenamiento en caché perimetral de HTML lo antes posible. Así que asegúrese de suscribirse a nuestro boletín y seguir nuestro blog para ser el primero en saber cuándo lo anunciamos.