ProHoster > Blog > administración > Precarga, captación previa y otras etiquetas

Precarga, captación previa y otras etiquetas

Hay Muchas formas de mejorar el rendimiento web.. Uno de ellos es precargar contenido que será necesario más adelante. Preprocesamiento de CSS, renderizado previo de página completa o resolución de nombres de dominio. ¡Hacemos todo por adelantado y luego mostramos instantáneamente el resultado! Suena bien.

Lo que es aún más interesante es que se implementa de forma muy sencilla. Cinco etiquetas déle al navegador un comando para realizar acciones preliminares:

<link rel="prefetch" href="/es/style.css" as="style" />
<link rel="preload" href="/es/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" />


Expliquemos brevemente para qué sirven y cuándo utilizarlos.

Salta a: precarga · búsqueda previa · preconectar · captación previa de DNS · preprocesar

precarga

<link rel= "preload"> le dice al navegador que cargue y almacene en caché un recurso (como un script o una hoja de estilo) lo antes posible. Esto es útil cuando se necesita un recurso unos segundos después de que se carga la página y desea acelerar el proceso.

El navegador no hace nada con el recurso después de cargarlo. No se ejecutan scripts, no se aplican hojas de estilo. El recurso simplemente se almacena en caché y se pone inmediatamente a disposición previa solicitud.

sintaxis

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

href apunta al recurso que desea descargar.

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

  • style para hojas de estilo,
  • script para guiones,
  • font para fuentes,
  • fetch para recursos cargados usando fetch() o XMLHttpRequest,
  • ver lista completa en MDN.

Es importante especificar el atributo. as – esto ayuda al navegador a priorizar y programar descargas adecuadamente.

Cuando usar

Utilice la precarga cuando el recurso sea necesario en un futuro muy cercano. Por ejemplo:

  • Fuentes no estándar de un archivo externo: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    Por defecto comic-sans.woff2 comenzará a cargarse solo después de descargar y analizar index.css. Para evitar esperar tanto, puede descargar la fuente antes usando <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Si separas tus estilos según el enfoque CSS crítico en dos partes, crítica (para renderizado inmediato) y no crítica: 
    <style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

    Con este enfoque, los estilos no críticos solo comenzarán a cargarse cuando se ejecute JavaScript, lo que puede suceder unos segundos después de la renderización. En lugar de esperar, use JS <link rel= "preload">para comenzar a descargar antes:

    <style>
/* Inlined critical styles */
</style>

<link rel="preload" href="/es/app/non-critical.css" as="style" />

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

No abuses de la precarga. Si carga todo seguido, el sitio no se acelerará mágicamente, al contrario, impedirá que el navegador planifique correctamente su trabajo.

No confundir con captación previa. No utilice <link rel= "preload">, si no necesita el recurso inmediatamente después de que se carga la página. Si lo necesita más adelante, por ejemplo para la página siguiente, utilice <link rel= "prefetch">.

detalles

Esta es una etiqueta requerida para ser ejecutado por el navegador (si lo admite), a diferencia de todas las demás etiquetas relacionado con la precarga. El navegador debe descargar el recurso especificado en <link rel="preload">. En otros casos, puede ignorar la precarga, por ejemplo, si se ejecuta en una conexión lenta.

Prioridades. Los navegadores suelen asignar diferentes prioridades a diferentes recursos (estilos, secuencias de comandos, fuentes, etc.) para cargar primero los recursos más importantes. En este caso, el navegador determina la prioridad por atributo. as. Para el navegador Chrome puedes mirar tabla de prioridades completa.

Precarga, captación previa y otras etiquetas

búsqueda previa

<link rel= "prefetch"> Solicita al navegador que descargue y almacene en caché un recurso (como un script o una hoja de estilo) en segundo plano. La carga se produce con baja prioridad para que no interfiera con recursos más importantes. Esto es útil si el recurso se necesita en la página siguiente y desea almacenarlo en caché con anticipación.

Aquí también el navegador no hace nada con el recurso después de cargarlo. No se ejecutan scripts, no se aplican hojas de estilo. El recurso simplemente se almacena en caché y se pone inmediatamente a disposición previa solicitud.

sintaxis

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

href apunta al recurso que desea descargar.

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

  • style para hojas de estilo,
  • script para guiones,
  • font para fuentes,
  • fetch para recursos cargados usando fetch() o XMLHttpRequest,
  • ver lista completa en MDN.

Es importante especificar el atributo. as - esto ayuda al navegador a priorizar y programar descargas correctamente.

Cuando usar

Para cargar recursos de otras páginas, si necesita un recurso de otra página y desea precargarlo para luego acelerar la representación de esa página. Por ejemplo:

  • Tienes una tienda online y el 40% de los usuarios abandonan la página de inicio para ir a la página del producto. Usar <link rel= "prefetch">, cargando archivos CSS y JS para representar páginas de productos.
  • Tiene una aplicación de una sola página y diferentes páginas cargan diferentes paquetes. Cuando un usuario visita una página, se pueden precargar paquetes para todas las páginas a las que enlaza.

Es probable que esta etiqueta pueda utilizarse de forma segura en cualquier medida.. Los navegadores suelen programar la captación previa con la prioridad más baja, por lo que no molesta a nadie. Sólo tenga en cuenta que consume tráfico de usuarios, lo que puede costar dinero.

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

detalles

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

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

preconectar

<link rel= "preconnect"> le pide al navegador que se conecte al dominio con anticipación cuando desee acelerar la configuración de la conexión en el futuro.

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

Establecer una nueva conexión suele tardar unos cientos de milisegundos. Se hace una vez, pero aún lleva tiempo. Si ha establecido una conexión con anticipación, ahorrará tiempo y descargará recursos de este dominio más rápido.

sintaxis

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

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

Cuando usar

Úselo para dominios que se necesitarán pronto para descargar un estilo, script o imagen importante desde allí, pero aún no conoce la URL del recurso. Por ejemplo:

  • Su aplicación está alojada en my-app.com y realiza solicitudes AJAX a api.my-app.com: No conoces las consultas específicas de antemano porque se realizan dinámicamente desde JS. Aquí es bastante apropiado utilizar una etiqueta para preconectarse al dominio.
  • Su aplicación está alojada en my-app.com y utiliza fuentes de Google. Se descargan en dos pasos: primero se descarga el archivo CSS del dominio fonts.googleapis.com, entonces este archivo solicita fuentes con fonts.gstatic.com. No puedes saber de qué archivos de fuentes específicos provienen fonts.gstatic.com Necesitará hasta que cargue el archivo CSS, por lo que solo podemos realizar una conexión preliminar de antemano.

Utilice esta etiqueta para acelerar un poco algún script o estilo de terceros debido a una conexión preestablecida.

No abusar. Establecer y mantener una conexión es una operación costosa tanto para el cliente como para el servidor. Utilice esta etiqueta para un máximo de 4 a 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 cualquier otro caso.

¿Qué incluye el proceso de conexión?. Para conectarse a cada sitio, el navegador debe hacer lo siguiente:

  • resolución DNS. Buscar la dirección IP del servidor (216.58.215.78) para el nombre de dominio especificado (google.com).
  • apretón de manos TCP. Intercambie paquetes (cliente → servidor → cliente) para iniciar una conexión TCP con el servidor.
  • Protocolo de enlace TLS (solo sitios HTTPS). Dos rondas de intercambio de paquetes (cliente → servidor → cliente → servidor → cliente) para iniciar una sesión TLS segura.

Nota: HTTP/3 mejorará y acelerará el mecanismo de protocolo de enlace, pero todavía queda un largo camino por recorrer.

captación previa de DNS

<link rel= "dns-prefetch"> le pide al navegador que realice la resolución DNS para el dominio con anticipación si se conectará pronto y desea acelerar la conexión inicial.

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

Para cada nuevo dominio, la resolución del registro DNS suele tardar entre 20 y 120 ms. Esto sólo afecta a la carga del primer recurso de un dominio determinado, pero aún así introduce un retraso. Si realizamos la resolución DNS con antelación 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 que desea configurar la dirección IP. Se puede especificar con un prefijo (https://domain.com) o sin él (//domain.com).

Cuando usar

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

  • Su aplicación está alojada en my-app.com y realiza solicitudes AJAX a api.my-app.com: No conoces las consultas específicas de antemano porque se realizan dinámicamente desde JS. Aquí es bastante apropiado utilizar una etiqueta para preconectarse al dominio.
  • Su aplicación está alojada en my-app.comy utiliza Google Fonts. Se descargan en dos pasos: primero se descarga el archivo CSS del dominio fonts.googleapis.com, entonces este archivo solicita fuentes con fonts.gstatic.com. No puedes saber de qué archivos de fuentes específicos provienen fonts.gstatic.com lo necesitará hasta que cargue el archivo CSS, por lo que solo podemos realizar una conexión preliminar por adelantado.

Utilice esta etiqueta para acelerar un poco algún script o estilo de terceros debido a una conexión preestablecida.

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

  • ¿Quieres admitir navegadores más antiguos?. <link rel= "dns-prefetch" /> Apoyado por desde IE10 y Safari 5. <link rel= "preconnect"> fue compatible durante un tiempo con Chrome y Firefox, pero solo se agregó a Safari en 11.1 y todavía no es compatible con IE/Edge. Si necesita compatibilidad con estos navegadores, utilice <link rel= "dns-prefetch" /> como opción de respaldo para <link rel= "preconnect">.
  • Quieres acelerar las conexiones a más de 4-6 dominios. Etiqueta <link rel= "preconnect"> No se recomienda su uso con más de 4-6 dominios, ya que establecer y mantener una conexión es una operación costosa. <link rel= "dns-prefetch" /> Consume menos recursos, así que úsalo si es necesario.

detalles

Etiqueta opcional. No es necesario que el navegador siga estas instrucciones, por lo que es posible que no realice la resolución DNS, por ejemplo, si hay muchas etiquetas de este tipo 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 parece a 216.58.215.78. El nombre del sitio generalmente se ingresa en la barra de direcciones del navegador (por ejemplo, google.com), y los servidores DNS (Sistema de nombres de dominio) lo relacionan con la dirección IP del servidor (216.58.215.78).

Para determinar una dirección IP, el navegador debe consultar el servidor DNS. Se necesitan entre 20 y 120 ms para conectarse a un nuevo dominio de terceros.

El DNS está almacenado en caché, aunque no de forma muy fiable.. Algunos sistemas operativos y navegadores almacenan en caché las consultas DNS: esto ahorrará tiempo en consultas repetidas, pero no se puede confiar en el almacenamiento en caché. En Linux normalmente no funciona en absoluto. Chrome tiene un caché de DNS, pero solo dura un minuto. Windows almacena en caché las respuestas DNS durante cinco días.

preprocesar

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

A pesar (o debido a) la eficacia excepcional de esta etiqueta, en 2019 <link rel= "prerender"> poco compatible con los principales navegadores. Ver más detalles. abajo.

sintaxis

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

href apunta a la URL que desea comenzar a renderizar en segundo plano.

Cuando usar

Cuando estás realmente seguro de que el usuario irá a una determinada página. Si tiene un "túnel" a través del cual el 70% de los visitantes de la página A van a la página B, entonces <link rel= "prerender"> en la página A ayudará a mostrar la página B muy rápidamente.

No abusar. El renderizado previo es extremadamente costoso en términos de ancho de banda y memoria. No utilice <link rel= "prerender"> por más de una página.

detalles

Etiqueta opcional. El navegador no está obligado a seguir estas instrucciones y puede ignorarlas, por ejemplo, en caso de una conexión lenta o cuando no hay suficiente memoria libre.

Para ahorrar memoria Chrome no hace renderizado completoY sólo precarga NoState. Esto significa que Chrome carga la página y todos sus recursos, pero no procesa ni ejecuta JavaScript.

Firefox y Safari no admiten esta etiqueta en absoluto. Esto no viola la especificación, ya que los navegadores no están obligados a seguir esta instrucción; pero sigue triste. Error de implementación Firefox lleva siete años abierto. Hay informes de que Safari tampoco soporta esta etiqueta.

Resumen

Uso:

  • <link rel= "preload"> - cuando necesitas un recurso en unos segundos
  • <link rel= "prefetch"> - cuando necesite el recurso en la página siguiente
  • <link rel= "preconnect"> - cuando sabes que necesitarás un recurso pronto, pero aún no conoces su URL completa
  • <link rel= "dns-prefetch"> - de manera similar, cuando sabes que necesitarás un recurso pronto, pero aún no conoces su URL completa (para navegadores más antiguos)
  • <link rel= "prerender"> — cuando estás seguro de que los usuarios irán a una determinada página y deseas acelerar su visualización

Fuente: habr.com

Añadir un comentario