Precargar, preconectar, precargar: mejore el rendimiento de su sitio con sugerencias de recursos

Los navegadores web modernos utilizan todo tipo de técnicas diferentes para mejorar el rendimiento general de su sitio web, desde priorizar los recursos más importantes y buscarlos primero hasta adivinar qué página visitará el usuario a continuación.

Sin embargo, no debe confiar en los navegadores, por avanzados que sean, para tomar todas las decisiones con respecto al rendimiento de su sitio.

Como propietario de un sitio web, usted es quien sabe qué recursos son más cruciales y cuál es el viaje real del usuario en su sitio. Y para mejorar el rendimiento general, la velocidad percibida y la experiencia del usuario de su sitio web, podría usar ese conocimiento para ayudar a los navegadores a cargar sus páginas más rápido.

Ahí es donde entran las sugerencias de recursos.

En las siguientes líneas, los veremos y cómo utilizar sus ventajas de la mejor manera posible.

Sumerjámonos en ello.

Cómo funcionan los navegadores (en pocas palabras)

Para comprender mejor las sugerencias de recursos y dónde se aplican, echemos un vistazo rápido a cómo los navegadores realmente cargan contenido.

Podríamos dividir todo el proceso de un navegador cargando una página en tres pasos:

• Estableciendo conexión;
• Descargar, analizar y renderizar el código;
• Hacer que la página sea interactiva;

Durante la primera etapa, el navegador necesita establecer una conexión con el servidor para poder descargar los recursos. Eso incluye buscar el nombre de dominio y resolverlo en una dirección IP, establecer una conexión con el servidor y cifrar la conexión por seguridad.

Una vez que todo está hecho, el navegador puede continuar con la descarga y el análisis de la información, la construcción del Modelo de objetos del documento (DOM) y el Modelo de objetos CSS (CSSOM), y luego representar el contenido.

La última parte es hacer que la página sea interactiva. Todos los procesos mencionados anteriormente tienen lugar en el subproceso principal. Entonces, después de que el hilo principal del navegador haya terminado de analizar, representar y pintar la página, es hora de ocuparse de los archivos JavaScript diferidos para que la página esté disponible para desplazarse, tocar y otras interacciones.

En pocas palabras, ese es el proceso detrás de escena cada vez que se carga una página.

Veamos cómo puede impactar positivamente en cada una de estas etapas al integrar las sugerencias de recursos.

Sugerencias de recursos: captación previa, conexión previa, carga previa

Como sugiere el nombre, las sugerencias de recursos son sugerencias o instrucciones que le indican al navegador cómo debe manejar recursos o páginas web específicos. En otras palabras, este conjunto de instrucciones le permite ayudar al navegador a priorizar los orígenes o los recursos que deben obtenerse y procesarse.

Todas las sugerencias de recursos usan el atributo rel del elemento de enlace que encontrará en el encabezado de sus documentos HTML.

La integración de esos fragmentos de código HTML en su sitio web permitirá que el navegador comience a cargar los archivos seleccionados antes que si el navegador los encuentra durante el curso normal de carga de la página.

Y ahora que hemos dejado atrás los conceptos básicos, pasemos a la parte por la que está aquí: descripción general de las sugerencias de recursos, sus beneficios y cuándo usarlos.

captación previa

link rel=prefetch es una sugerencia de recurso de baja prioridad que permite que el navegador busque recursos que podrían ser necesarios más adelante y los almacene en la memoria caché del navegador.

Debido a que la captación previa establece una prioridad muy baja, no utilice esta sugerencia para archivos de gran importancia .

Uno de los grandes casos de uso es utilizar la captación previa para mejorar el tiempo de carga de las páginas posteriores. Por ejemplo, puede aplicar la directiva de captación previa durante la autenticación de un usuario. De esta manera, puede aprovechar el tiempo que les lleva ingresar sus credenciales para precargar los recursos necesarios para la página que verán a continuación.

Al anticipar los pasos de sus visitantes en su sitio y precargar los recursos, puede mejorar métricas como First Contentful Paint y Time to Interactive. Algo que hizo Netflix y redujo su Time to Interactive en un 30%.

Todo lo que mencionamos hasta este punto se relaciona con la captación previa, también conocida como captación previa de enlaces. Pero hay otros dos tipos de captación previa que son igualmente importantes, y tenemos que mencionar:

1. Precarga de DNS
El navegador debe realizar una búsqueda de DNS para convertir un nombre de host (la URL) en una dirección IP antes de conectarse al host (servidor de origen).

Aunque esto generalmente toma solo milisegundos, si un sitio web carga archivos desde un nombre de dominio de terceros, algo que hacen la mayoría de los sitios web, el navegador debe realizar una búsqueda de DNS para cada dominio. Algunos sitios (p. ej., sitios web de noticias) usan muchos recursos externos, lo que significa que puede haber docenas de búsquedas de DNS requeridas por página.

En estos casos, el uso de la sugerencia dns-prefetch podría ahorrar algunos milisegundos, ya que la instrucción le indica al navegador que inicie ese proceso de inmediato, en lugar de que la necesidad se descubra más adelante en el proceso de carga.

Como se sugiere en Web Almanac 2021, una buena práctica es combinar dns-prefetch con la sugerencia de preconexión para obtener resultados óptimos. Puedes ver por qué en la sección donde hablamos de preconexión .

2. Prerenderizado
La representación previa es muy similar a la obtención previa en el sentido de que optimiza los recursos a los que el usuario puede navegar a continuación. La diferencia es que la representación previa en realidad representa la página completa en lugar de recursos específicos.

Preconectar

Al igual que dns-prefetch , la directiva de preconexión ayuda al navegador a establecer conexiones tempranas antes de enviar una solicitud inicial al servidor.

Sin embargo, la sugerencia de preconexión lo lleva un paso más allá. Si bien realiza búsquedas de DNS, también incluye negociaciones TLS y protocolos de enlace TCP. Esto, a su vez, elimina la latencia de ida y vuelta y ahorra aún más tiempo.

Pero aquí viene la pregunta:

Si preconnect hace todo lo que hace dns-prefetch y más, ¿por qué usaría dns-prefetch en primer lugar?

En la mayoría de los casos, la preconexión es la opción preferible a dns-prefetch , pero el problema es que algunos navegadores no admiten la preconexión :

Fuente: caniuse.com

Lo bueno es que puedes usarlos juntos para sacarles el máximo partido. Puede beneficiarse de la preconexión en los navegadores que la admiten con una alternativa a dns-prefetch :

Según Google:

En 2019, Chrome logró mejorar su tiempo de interacción en casi 1 segundo al conectarse previamente a orígenes importantes.

Precarga

Antes de explicar cómo funciona la directiva de precarga , tenemos que dejar algo claro.

Aunque la precarga se menciona regularmente como una "Sugerencia de recursos", no lo es. La precarga es una búsqueda declarativa y es obligatoria para los navegadores , por lo que es más un comando que una sugerencia.

Dicho esto, la precarga se usa para obligar al navegador a descargar un recurso antes de que el navegador lo descubra porque es crucial para la página.

La directiva de precarga funciona mejor en recursos que forman parte de la ruta de representación crítica pero que el navegador no detecta fácilmente. Por ejemplo, fuentes, CSS o JavaScript crítico.

Otra diferencia con las sugerencias dns-prefetch y preconnect es que, si bien solo necesitan los atributos rel y href , la precarga es más complicada. Debe agregar el atributo as , que indica el tipo de contenido del recurso que desea precargar.

Según Addy Osmani, gerente de ingeniería de Google, es obligatorio proporcionar un atributo as cuando la carga previa es obligatoria:

Aquí hay una lista completa de los valores que puede especificar:

Incluir el atributo as ayuda al navegador a establecer la prioridad del recurso precargado de acuerdo con su tipo y determinar si el recurso ya existe en el caché.

Consulte el documento Prioridades y programación de recursos de Chrome para obtener más información sobre cómo se priorizan los diferentes tipos de recursos.

Para algunos recursos, como las fuentes, también debe incluir el atributo crossorigin .

El atributo crossorigin establece el modo de la solicitud en una solicitud HTTP CORS. CORS (Cross-Origin Resource Sharing) es un mecanismo que permite a un servidor indicar cualquier origen distinto al suyo desde el cual un navegador debería permitir la carga de recursos. No profundizaremos en esto ya que no es el enfoque de este artículo, pero puede encontrar más información aquí.

Y de manera similar al atributo as , la precarga de fuentes sin crossorigin se recuperará dos veces. Aquí hay otro extracto del artículo de Addy Osmani sobre el tema:

Más sugerencias de recursos, más problemas

Al leer todo hasta ahora, puede comenzar a pensar que usar tantas sugerencias de recursos como sea posible solo conducirá a que los navegadores carguen sus páginas a la velocidad de la luz.

Por desgracia, este no es el caso.

Estos son algunos de los contratiempos que debe tener en cuenta al integrar las sugerencias de recursos:

1. La captación previa podría aumentar el consumo de datos

Aunque prefetch establece una prioridad de descarga baja, eso no significa que sea inofensivo. Su uso puede aumentar el consumo de datos en su sitio, lo que puede presentar problemas tanto para usted (aumento del tráfico en su servidor) como para sus usuarios (consumo excesivo de recursos innecesario). Además, puede terminar cargando bytes adicionales que podrían no usarse eventualmente. Así que piénsalo dos veces antes de integrarlo.

2. La renderización previa puede provocar un despilfarro de ancho de banda

La apuesta con prerender es incluso mayor que prefetch , ya que descarga páginas enteras por adelantado. Esto hace que la sugerencia consuma muchos recursos y puede causar un desperdicio de ancho de banda, especialmente en dispositivos móviles. Y lo peor es que es posible que los usuarios ni siquiera vean el efecto de la sugerencia si no solicitan la página.

3. La preconexión podría generar un uso adicional de la CPU

Aunque la preconexión es una sugerencia con baja prioridad, aún puede dañar el rendimiento de su sitio web. Si una conexión establecida no se usa rápidamente (dentro de los 10 segundos en Chrome), la directiva de preconexión solo agrega un uso adicional de la CPU y el navegador la cerrará automáticamente. Además, debe usar la preconexión con moderación, ya que el tamaño de los certificados de cifrado es de alrededor de 3 KB, lo que competiría con el ancho de banda por otros recursos importantes.

4. La precarga anula las prioridades establecidas por el analizador del navegador

preload es una instrucción poderosa ya que le permite hacer que el navegador descargue inmediatamente un recurso. Sin embargo, los navegadores web modernos son bastante buenos para priorizar los recursos, por lo que el uso excesivo de la precarga puede generar resultados negativos. Por ejemplo, si agrega una directiva de precarga que coincida con una URL de recurso asíncrona, el navegador la buscará más rápido, por lo que la analizará más rápido, anulando el efecto de su atributo asíncrono al interrumpir el hilo principal muy temprano en la carga de la página.

Resumen

Hemos cubierto mucho terreno en este artículo, así que hagamos un resumen rápido de los puntos más esenciales:

• dns-prefetch y preconnect se utilizan para priorizar los nombres de dominio (p. ej., https://example.com).
• prefetch y preload se utilizan para priorizar la carga de recursos. Si bien la captación previa se usa para mejorar el tiempo de carga de las páginas posteriores, la carga previa funciona mejor en recursos críticos para la página actual.
• prerender hace referencia a una página completa (por ejemplo, blog.html).
• prefetch , prerender y preconnect son sugerencias de recursos y se ejecutan cuando el navegador lo considera adecuado. La directiva de precarga es un comando que es obligatorio para los navegadores.
• Cuando use preload , no olvide proporcionar los atributos as y crossorigin para evitar la doble búsqueda.
• Aunque las sugerencias de recursos son instrucciones de baja prioridad, aún representan una amenaza para el rendimiento de su sitio. Úsalos con moderación y solo cuando sea necesario.
• preload es una poderosa directiva que puede anular las prioridades del analizador del navegador. No olvide que los navegadores modernos son bastante buenos para priorizar los recursos, así que use la "pista" de precarga con moderación.

Utilice los conocimientos recién adquiridos sobre las sugerencias de recursos para acelerar la entrega de contenido y activos y mejorar el rendimiento general de su sitio. Y no olvide probar su sitio web en el mundo real (concéntrese en los datos de campo) cada vez que realice un cambio.