Hay Muchos métodos para mejorar el rendimiento web. Uno de ellos es la prerenderización de contenido que se requerirá más tarde. Prefetching de CSS, prerenderización de la página completa o resolución de nombres de dominio. Hacemos todo por adelantado y luego mostramos el resultado instantáneamente. ¡Suena genial!

Aún más genial es que esto es muy fácil de implementar. Cinco etiquetas <link rel> le dan al navegador la orden de realizar acciones preliminares:

<link rel="prefetch" href="/style.css" as="style" />
<link rel="preload" href="/style.css" as="style" />

<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />

<link rel="prerender" href="https://example.com/about.html" />

En resumen, describiremos lo que hacen y cuándo utilizarlas.

Ir a: preload · prefetch · preconnect · dns-prefetch · prerender

preload

<link rel= "preload"> indica al navegador que cargue y almacene en caché el recurso (por ejemplo, un script o una hoja de estilos) lo antes posible. Esto es útil cuando el recurso será necesario unos segundos después de que se cargue la página, y desea acelerar el proceso.

El navegador no hace nada con el recurso después de cargarlo. Los scripts no se ejecutan, las hojas de estilos no se aplican. El recurso simplemente se almacena en caché y está disponible inmediatamente a solicitud.

Sintaxis

<link rel="preload" href="/style.css" as="style" />

href indica el recurso que desea descargar.

as puede ser cualquier cosa que se pueda descargar en el navegador:

style para hojas de estilos,
script para scripts,
font para fuentes,
fetch para recursos que se cargan mediante fetch() o XMLHttpRequest,
lista completa en MDN.

Es importante especificar el atributo as – esto ayuda al navegador a establecer prioridades y planificar la carga adecuadamente.

Cuándo usar

Utilice la precarga cuando el recurso se necesite en breve. Por ejemplo:

Fuentes personalizadas desde un archivo externo:
```

<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
funciona hasta que se finalice manualmente. Por lo tanto, puede ser útil la opción comic-sans.woff2 comenzará a cargarse solo después de que se cargue y analice index.css. Para no esperar tanto, puede cargar la fuente antes con <link rel= "preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```
Si divide sus estilos de acuerdo con el enfoque Critical CSS en dos partes, crítica (para el renderizado inmediato) y no crítica:
```
<style>
/* Estilos críticos en línea */
</style>

<script>
/* JS personalizado que comienza a descargar estilos no críticos */
loadCSS('/app/non-critical.css');
</script>
```
Con este enfoque, los estilos no críticos comenzarán a cargarse solo cuando se ejecute JavaScript, lo que puede suceder unos segundos después del renderizado. En lugar de esperar a JS, utilice <link rel= "preload">, para comenzar la carga antes:
```
/* Estilos críticos en línea */
```

No abuse de la precarga. Si carga todo de una vez, el sitio no se acelerará mágicamente; de hecho, podría obstaculizar la planificación del trabajo del navegador.

No confunda con el prefetching. No utilice <link rel= "preload">, si no necesita el recurso inmediatamente después de cargar la página. Si lo necesitará más adelante, por ejemplo, para la siguiente página, utilice <link rel= "prefetch">.

Detalles

Esta es una etiqueta obligatoria para la ejecución del navegador (si lo admite), a diferencia de todas las demás etiquetas relacionadas con la precarga. El navegador debe cargar el recurso indicado en <link rel="preload">. En otros casos, puede ignorar la precarga, por ejemplo, si está en una conexión lenta.

Prioridades. A diferentes recursos (estilos, scripts, fuentes, etc.), los navegadores generalmente les asignan diferentes prioridades para cargar primero los más importantes. En este caso, el navegador determina la prioridad según el atributo as. Para el navegador Chrome, puede ver la tabla completa de prioridades.

prefetch

<link rel= "prefetch"> solicita al navegador que cargue y almacene en caché el recurso (por ejemplo, un script o una hoja de estilo) en segundo plano. La carga se realiza con baja prioridad, por lo que no interfiere con los recursos más importantes. Esto es útil si el recurso se necesitará en la siguiente página y desea almacenarlo en caché de antemano.

Aquí también, el navegador no hace nada con el recurso después de cargarlo. Los scripts no se ejecutan, las hojas de estilo no se aplican. El recurso simplemente se almacena en caché y se proporciona inmediatamente bajo demanda.

Sintaxis

<link rel="prefetch" href="/style.css" as="style" />

href indica el recurso que desea descargar.

as puede ser cualquier cosa que se pueda descargar en el navegador:

style para hojas de estilos,
script para scripts,
font para fuentes,
fetch para recursos que se cargan mediante fetch() o XMLHttpRequest,
lista completa en MDN.

Es importante especificar el atributo as — esto ayuda al navegador a establecer correctamente las prioridades y planificar la carga.

Cuándo usar

Para cargar recursos de otras páginas, si necesita un recurso de otra página y desea precargarlo para acelerar el renderizado de esa página más tarde. Por ejemplo:

Tienes una tienda en línea, y el 40% de los usuarios se van de la página principal a la página del producto. Utiliza <link rel= "prefetch">, cargando archivos CSS y JS para renderizar páginas con el producto.
Tienes una aplicación de una sola página y diferentes páginas cargan diferentes paquetes. Cuando un usuario visita alguna página, se pueden precargar los paquetes para todas las páginas a las que se hace referencia.

Probablemente, esta etiqueta se pueda usar de manera segura en cualquier cantidad.. Los navegadores suelen planear el prefetch con la menor prioridad, por lo que no interfiere con nadie. Solo ten en cuenta que se consume el tráfico del usuario, lo que puede costar dinero.

No para solicitudes urgentes. No utilice <link rel= "prefetch">, cuando el recurso se necesita en unos segundos. En este caso, aplica <link rel= "preload">.

Detalles

Etiqueta opcional. El navegador no está obligado a seguir esta instrucción y puede ignorarla, por ejemplo, en una conexión lenta.

Prioridad en Chrome. En Chrome <link rel= "prefetch"> se ejecuta generalmente con la prioridad mínima (ver la tabla completa de prioridades), es decir, después de cargar todo lo demás.

preconnect

<link rel= "preconnect"> pide al navegador que se conecte de antemano al dominio cuando deseas acelerar el establecimiento de la conexión en el futuro.

El navegador debe establecer una conexión si extrae recursos de un nuevo dominio externo. Por ejemplo, si carga fuentes de Google Fonts, React desde un CDN o solicita una respuesta JSON desde un servidor API.

Establecer una nueva conexión suele tardar unos cientos de milisegundos. Se realiza una vez, pero aún así toma tiempo. Si estableces la conexión de antemano, ahorrarás tiempo y cargarás más rápido los recursos desde ese dominio.

Sintaxis

<link rel= "preconnect" href="https://api.my-app.com" />

href indica el nombre de dominio para el cual se debe determinar la dirección IP. Se puede especificar con prefijo (https://domain.com) o sin él (//domain.com).

Cuándo usar

Usa para dominios que se necesitarán pronto para cargar estilos, scripts o imágenes importantes desde allí, pero aún no conoces la URL del recurso. Por ejemplo:

Tu aplicación está alojada en my-app.com y hace solicitudes AJAX a api.my-app.com: no sabes de antemano las solicitudes específicas porque se realizan dinámicamente desde JS. Aquí es bastante adecuado usar la etiqueta para la preconexión con el dominio.
Tu aplicación está alojada en my-app.com y utiliza fuentes de Google Fonts. Se cargan en dos etapas: primero se carga el archivo CSS desde el dominio fonts.googleapis.com, luego este archivo solicita las fuentes desde fonts.gstatic.com. No puedes saber qué archivos específicos de fuentes se fonts.gstatic.com necesitarás, hasta que cargues el archivo CSS, por lo que de antemano solo podemos establecer una conexión preliminar.

Usa esta etiqueta para acelerar un poco algún script o estilo de terceros. por medio de la configuración previa de la conexión.

No abuses. Establecer y mantener una conexión es una operación costosa tanto para el cliente como para el servidor. Usa esta etiqueta como máximo para 4-6 dominios.

Detalles

Etiqueta opcional. El navegador no está obligado a seguir esta instrucción y puede ignorarla, por ejemplo, si ya se han establecido muchas conexiones o en algún otro caso.

Qué incluye el proceso de conexión. Para conectarse a cada sitio, el navegador debe realizar los siguientes pasos:

Resolución de DNS. Encontrar la dirección IP del servidor (216.58.215.78) para el nombre de dominio especificado (google.com).
Handshake TCP. El intercambio de paquetes (cliente → servidor → cliente) para iniciar una conexión TCP con el servidor.
Handshake TLS (solo para sitios HTTPS). Dos rondas de intercambio de paquetes (cliente → servidor → cliente → servidor → cliente) para iniciar una sesión segura de TLS.

Nota: HTTP/3 mejorará y acelerará el mecanismo de handshake, pero todavía está muy lejos.

dns-prefetch

<link rel= "dns-prefetch"> pide al navegador que resuelva anticipadamente el DNS para el dominio, si pronto vas a conectarte a él y deseas acelerar la conexión inicial.

El navegador debe determinar la dirección IP del dominio si va a extraer algún recurso de un nuevo dominio de terceros. Por ejemplo, cargar fuentes de Google Fonts, React desde un CDN o solicitar una respuesta JSON del servidor API.

Para cada nuevo dominio, la resolución de registros DNS generalmente toma alrededor de 20-120 ms. Esto solo afecta la carga del primer recurso desde dicho dominio, pero aún representa una demora. Si se realiza la resolución DNS por adelantado, ahorraremos tiempo y cargaremos el recurso más rápido.

Sintaxis

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href indica el nombre de dominio para el cual se debe establecer la dirección IP. Puede especificarse con el prefijo (https://domain.com) o sin él (//domain.com).

Cuándo usar

Usa para dominios que se necesitarán pronto para cargar desde allí recursos que el navegador no conoce de antemano. Por ejemplo:

Tu aplicación está alojada en my-app.com y hace solicitudes AJAX a api.my-app.com: no sabes de antemano las solicitudes específicas porque se realizan dinámicamente desde JS. Aquí es bastante adecuado usar la etiqueta para la preconexión con el dominio.
Tu aplicación está alojada en my-app.com, y utiliza fuentes de Google Fonts. Se cargan en dos etapas: primero se carga el archivo CSS desde el dominio fonts.googleapis.com, luego este archivo solicita las fuentes desde fonts.gstatic.com. No puedes saber qué archivos específicos de fuentes se fonts.gstatic.com necesitarás, hasta que cargues el archivo CSS, por lo que de antemano solo podemos establecer una conexión preliminar.

Usa esta etiqueta para acelerar un poco algún script o estilo de terceros. por medio de la configuración previa de la conexión.

Ten en cuenta características similares en <link rel= "dns-prefetch"/> y <link rel= "preconnect">. Usar juntos para un dominio generalmente no tiene sentido: <link rel= "preconnect"> ya incluye <link rel= "dns-prefetch"/> y mucho más. Esto se puede justificar en dos casos:

Desea mantener navegadores antiguos. <link rel= "dns-prefetch" /> es compatible a partir de IE10 y Safari 5. <link rel= "preconnect"> fue compatible durante un tiempo en Chrome y Firefox, pero se añadió en Safari solo en 11.1 y todavía no es compatible en IE/Edge. Si necesita soportar estos navegadores, use <link rel= "dns-prefetch" /> como alternativa para <link rel= "preconnect">.

Desea acelerar la conexión a más de 4-6 dominios. La etiqueta <link rel= "preconnect"> no se recomienda utilizar con más de 4-6 dominios, ya que establecer y mantener la conexión es una operación costosa. <link rel= "dns-prefetch" /> consume menos recursos, por lo que si es necesario, utilícelo.

Detalles

Etiqueta opcional. El navegador no está obligado a seguir esta instrucción, por lo que puede no realizar la resolución de DNS, por ejemplo, si hay muchas de estas etiquetas en la página o en algún otro caso.

Qué es DNS. Cada servidor en Internet tiene una dirección IP única que se ve como 216.58.215.78. En la barra de direcciones del navegador generalmente se introduce el nombre del sitio (por ejemplo, google.com), y los servidores DNS (Sistema de Nombres de Dominio) lo emparejan con la dirección IP del servidor (216.58.215.78).

. Para determinar la dirección IP, el navegador debe realizar una consulta al servidor DNS. Esto toma de 20 a 120 ms al conectarse a un nuevo dominio externo.

DNS se almacena en caché, aunque no de manera muy fiable. Algunos sistemas operativos y navegadores almacenan en caché las consultas DNS: esto ahorra tiempo en solicitudes repetidas, pero no se puede confiar en la caché. En Linux, generalmente no funciona en absoluto. Chrome tiene una caché DNS, pero solo dura un minuto. Windows almacena las respuestas DNS durante cinco días.

prerender

<link rel= "prerender"> pide al navegador que cargue la dirección URL y la muestre en una pestaña invisible. Cuando el usuario hace clic en el enlace, la página debería mostrarse de inmediato. Esto es útil si está seguro de que el usuario visitará una página específica y quiere acelerar su visualización.

A pesar de la excepcional eficacia de esta etiqueta (o debido a ella), en 2019 <link rel= "prerender"> es mal soportada por los principales navegadores. Más detalles en abajo.

Sintaxis

<link rel="prerender" href="https://my-app.com/pricing" />

href indica la URL para la que desea activar el renderizado en segundo plano.

Cuándo usar

Cuando realmente está seguro de que el usuario irá a una página específica. Si tiene un «túnel» por el cual el 70% de los visitantes de la página A pasan a la página B, entonces <link rel= "prerender"> en la página A ayudará a mostrar muy rápidamente la página B.

No abuses. El renderizado previo es extremadamente costoso en términos de tráfico y memoria. No use <link rel= "prerender"> más de una página.

Detalles

Etiqueta opcional. El navegador no está obligado a seguir esta instrucción y puede ignorarla, por ejemplo, en una conexión lenta o si hay poca memoria disponible.

Para ahorrar memoria, Chrome no realiza un renderizado completo, y solo precarga NoState. Esto significa que Chrome carga la página y todos sus recursos, pero no realiza el renderizado ni ejecuta JavaScript.

Firefox y Safari no admiten este tag en absoluto. Esto no infringe la especificación, ya que los navegadores no están obligados a cumplir con esta instrucción; pero aún es decepcionante. Un bug de implementación en Firefox se descubrió durante siete años. Hay informes de que Safari tampoco admite este tag.

Currículum

Usa:

<link rel= "preload"> — cuando necesite un recurso en unos segundos
<link rel= "prefetch"> — cuando necesite un recurso en la próxima página
<link rel= "preconnect"> — cuando sepa que necesitará un recurso pronto, pero aún no sepa su URL completa
<link rel= "dns-prefetch"> — de manera similar, cuando sepa que necesitará un recurso pronto, pero aún no conozca su URL completa (para navegadores antiguos)
<link rel= "prerender"> — cuando esté seguro de que los usuarios irán a una página específica y desee acelerar su visualización

Fuente: habr.com