Hay muchas formas de mejorar el rendimiento web . Uno de ellos es precargar contenido que se necesitará más adelante. Búsqueda previa de CSS, representación de vista previa de página completa o resolución de nombre de dominio. Hacemos todo por adelantado y luego mostramos el resultado al instante. Eso suena bien

Aún más genial es que es muy fácil de implementar. Cinco etiquetas <link rel> le dan al navegador un comando para 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" /> 

Describa brevemente lo que hacen y cuándo usarlos.

Saltar a: precarga · captación previa · conexión previa · dns-prefetch · prerender

precargar

<link rel= "preload"> le dice al navegador que cargue y guarde en caché el recurso (por ejemplo, un script o una hoja de estilo) lo antes posible. Esto es útil cuando 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. Las secuencias de comandos no se ejecutan, las hojas de estilo no se aplican. El recurso simplemente se almacena en caché y está disponible inmediatamente a pedido.

Sintaxis

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

href apunta al recurso que desea descargar.

as puede ser cualquier cosa que pueda descargar en un navegador:

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

Es importante especificar el atributo as ; esto ayuda al navegador a priorizar y planificar correctamente las descargas.

Cuando usar

Utilice la precarga cuando se necesite el recurso en un futuro próximo. Por ejemplo:

• Fuentes personalizadas 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 solo comenzará a cargarse después de cargar y analizar index.css . Para no esperar tanto tiempo, puede descargar la fuente antes usando <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ítico (para la representación inmediata) y no crítico:
  
  

   <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 inicie JavaScript, lo que puede ocurrir unos segundos después de la representación. En lugar de esperar a JS, use <link rel= "preload"> para iniciar la descarga antes:
  
  

   <style> /* Inlined critical styles */ </style> <link rel="preload" href="/app/non-critical.css" as="style" /> <script> /* Custom JS that starts downloading non-critical styles */ loadCSS('/app/non-critical.css'); </script> 

No abusar de la precarga . Si descarga todo en una fila, el sitio no se acelerará mágicamente, sino que, por el contrario, esto evitará que el navegador planifique correctamente el trabajo.

No confundir con la captación previa . No use <link rel= "preload"> menos que necesite un recurso inmediatamente después de cargar la página. Si lo necesita más tarde, por ejemplo, para la página siguiente, use <link rel= "prefetch"> .

Detalles

Esta es una etiqueta requerida para la ejecución por parte del navegador (si es compatible), a diferencia de todas las otras etiquetas <link> asociadas 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 Para diferentes recursos (estilos, scripts, fuentes, etc.), los navegadores generalmente asignan diferentes prioridades para cargar primero los recursos más importantes. En este caso, el navegador prioriza el atributo as. Para el navegador Chrome, puede ver la tabla completa de prioridades .

captación previa

<link rel= "prefetch"> le pide al navegador que descargue y guarde en caché el recurso (por ejemplo, un script u hoja de estilo) en segundo plano. La descarga se realiza con baja prioridad, por lo que no interfiere con recursos más importantes. Esto es útil si necesita el recurso en la página siguiente y desea almacenarlo en caché por adelantado.

Aquí también, el navegador no hace nada con el recurso después de cargarlo. Las secuencias de comandos no se ejecutan, las hojas de estilo no se aplican. El recurso simplemente se almacena en caché y está disponible inmediatamente a pedido.

Sintaxis

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

href apunta al recurso que desea descargar.

as puede ser cualquier cosa que pueda descargar en un navegador:

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

Es importante especificar el atributo as ; esto ayuda al navegador a priorizar y planificar correctamente las descargas.

Cuando usar

Para descargar recursos de otras páginas , si necesita un recurso de otra página y desea precargarlo para acelerar el procesamiento de esta página más adelante. Por ejemplo:

• Tienes una tienda en línea y el 40% de los usuarios van de la página principal a la página del producto. Utilice <link rel= "prefetch"> al cargar archivos CSS y JS para representar páginas de productos.
  
• Tiene una aplicación de una página, y diferentes páginas cargan diferentes paquetes. Cuando un usuario visita una página, puede precargar paquetes para todas las páginas a las que se refiere.

Probablemente, esta etiqueta se puede usar de forma segura en cualquier volumen . Los navegadores generalmente planean la captación previa con la prioridad más baja, por lo que no molesta a nadie. Solo tenga en cuenta que consume tráfico de usuarios, lo que puede costar dinero.

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

Detalles

Etiqueta opcional No se requiere que el navegador siga estas instrucciones, puede ignorarlo, por ejemplo, en una conexión lenta.

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

preconectar

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

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

Establecer una nueva conexión generalmente toma varios cientos de milisegundos. Se hace una vez, pero todavía lleva tiempo. Si ha establecido una conexión por adelantado, ahorre tiempo y descargue 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 que desea determinar la dirección IP. Puede especificar con un prefijo ( https://domain.com ) o sin él ( //domain.com ).

Cuando usar

Úselo para dominios que pronto necesitará descargar un estilo, secuencia de comandos o imagen importantes 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 conoce las solicitudes específicas de antemano, ya que se realizan dinámicamente desde JS. Aquí es bastante apropiado usar una etiqueta para la conexión preliminar a un dominio.
  
• Su aplicación está alojada en my-app.com y utiliza fuentes de Google. Se descargan en dos etapas: primero, el archivo CSS se descarga del dominio fonts.googleapis.com , luego este archivo solicita las fuentes de fonts.gstatic.com . No puede saber qué archivos de fuentes específicos de fonts.gstatic.com necesitará hasta que descargue el archivo CSS, por lo que solo podemos establecer una conexión preliminar por adelantado.

Utilice esta etiqueta para acelerar un poco el guión de terceros o un estilo preestableciendo la conexión.

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

Detalles

Etiqueta opcional No se requiere que el navegador siga estas instrucciones y puede ignorarlo, por ejemplo, si ya se han establecido muchas conexiones o en algún otro caso.

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

• DNS resolviendo . Encuentre la dirección IP del servidor ( 216.58.215.78 ) para el nombre de dominio especificado ( google.com ).
• Apretón de manos TCP . Intercambio de paquetes (cliente → servidor → cliente) para iniciar una conexión TCP al servidor.
• TLS Handshake (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 está muy lejos.

dns-prefetch

<link rel= "dns-prefetch"> le pide al navegador que resuelva previamente el DNS del dominio con anticipación si pronto se conectará a él y desea acelerar la conexión inicial.

El navegador debe determinar la dirección IP del dominio si va a recuperar algunos recursos del nuevo dominio de terceros. Por ejemplo, descargue Google Fonts, React fonts de un CDN o solicite una respuesta JSON de un servidor API.

Para cada nuevo dominio, la resolución de DNS suele tardar entre 20 y 120 ms. Esto solo afecta la carga del primer recurso desde un dominio dado, pero aún representa un retraso. Si implementa 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 que establecer una dirección IP. 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 conoce solicitudes específicas de antemano, ya que se realizan dinámicamente desde JS. Aquí es bastante apropiado usar una etiqueta para la conexión preliminar a un dominio.
  
• Su aplicación está alojada en my-app.com y utiliza fuentes de Google. Se descargan en dos etapas: primero, el archivo CSS se descarga del dominio fonts.googleapis.com , luego este archivo solicita las fuentes de fonts.gstatic.com . No puede saber qué archivos de fuentes específicos de fonts.gstatic.com necesitará hasta que descargue el archivo CSS, por lo que solo podemos establecer una conexión preliminar por adelantado.

Utilice esta etiqueta para acelerar un poco el guión de terceros o un estilo preestableciendo la conexión.

Tenga en cuenta las especificaciones similares en <link rel= "dns-prefetch"/> y <link rel= "preconnect"> . Usarlos juntos para el mismo dominio generalmente no tiene sentido: <link rel= "preconnect"> ya incluye <link rel= "dns-prefetch"/> y mucho más. Esto puede justificarse en dos casos:

• Desea admitir navegadores antiguos . <link rel= "dns-prefetch" /> ha sido compatible desde IE10 y Safari 5 . <link rel= "preconnect"> se <link rel= "preconnect"> durante algún tiempo en Chrome y Firefox, pero se agregó a Safari solo en 11.1 y aún no se admite en IE / Edge . Si necesita admitir estos navegadores, use <link rel= "dns-prefetch" /> como <link rel= "preconnect"> para <link rel= "preconnect"> .
• Desea acelerar su conexión a más de 4-6 dominios . La <link rel= "preconnect"> no se recomienda para usar 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 úselo si es necesario.

Detalles

Etiqueta opcional No es necesario que el navegador siga estas instrucciones, por lo tanto, es posible que no realice la resolución de DNS, por ejemplo, si hay muchas de esas etiquetas en la página o en algún otro caso.

¿Qué es el DNS ? Cada servidor en Internet tiene una dirección IP única que se parece a 216.58.215.78 . El nombre del sitio (por ejemplo, google.com ) generalmente se ingresa en la barra de direcciones del navegador, y los servidores DNS (Sistema de nombres de dominio) lo asignan a la dirección IP del servidor ( 216.58.215.78 ).

Para determinar la dirección IP, el navegador debe consultar al servidor DNS. Tarda entre 20 y 120 ms cuando se conecta a un nuevo dominio de terceros.

DNS está en caché, aunque no es muy confiable . Algunos sistemas operativos y navegadores almacenan en caché las consultas DNS: esto ahorrará tiempo en consultas repetidas, pero no puede confiar en el almacenamiento en caché. En Linux, generalmente 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.

prerender

<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 debe mostrarse de inmediato. Esto es útil si está seguro de que el usuario visitará una página específica y desea acelerar su visualización.

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

Sintaxis

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

href apunta a la URL para la que desea ejecutar la representación en segundo plano.

Cuando usar

Cuando esté realmente seguro de que el usuario irá a una página específica . 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 abuses . La representación previa es extremadamente costosa en términos de tráfico y memoria. No use <link rel= "prerender"> más de una página.

Detalles

Etiqueta opcional No se requiere que el navegador siga estas instrucciones y puede ignorarlo, por ejemplo, en una conexión lenta o cuando no hay suficiente memoria libre.

En aras de ahorrar memoria, Chrome no realiza la representación completa , sino que solo precarga NoState . Esto significa que Chrome carga la página y todos sus recursos, pero no procesa y no ejecuta JavaScript.

Firefox y Safari no admiten esta etiqueta en absoluto. Esto no viola la especificación, ya que no se requiere que los navegadores sigan estas instrucciones; pero triste de todos modos. El error de implementación en Firefox ha estado abierto durante siete años. Hay informes de que Safari tampoco es compatible con esta etiqueta .

Resumen

Uso:

• <link rel= "preload"> - cuando necesita un recurso en unos segundos
  
• <link rel= "prefetch"> - cuando necesita un recurso en la página siguiente
  
• <link rel= "preconnect"> : cuando sabe que necesitará un recurso pronto, pero aún no conoce su URL completa
  
• <link rel= "dns-prefetch"> - de manera similar, cuando sabe que necesitará un recurso pronto, pero aún no conoce 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 desean acelerar su visualización