Ir al contenido principal

Link rel="preconnect"

De

 ¿Qué significa el siguiente código? Está en un archivo .tsx.

<link rel="preconnect" href="https://fonts.bunny.net" />


Este fragmento de código es una etiqueta HTML <link> que se utiliza dentro de un documento HTML para establecer una conexión temprana con un dominio desde el que se cargarán recursos.

Cuando ves esto en un archivo .tsx, significa que este código HTML/JSX se está utilizando dentro de un componente de React (o Next.js/Inertia, que usan React) que se renderizará en el navegador.

¿Qué significa cada parte?

  • <link>: Es una etiqueta HTML que se usa para vincular el documento actual con un recurso externo. Generalmente se coloca en la sección <head> de tu HTML.

  • rel="preconnect": Este atributo rel especifica la relación del recurso vinculado con el documento actual. preconnect es una sugerencia al navegador para que establezca una conexión temprana con el dominio especificado. Esto incluye la resolución de DNS, el establecimiento de conexiones TCP y el manejo de TLS (SSL).

  • href="https://fonts.bunny.net": Este atributo href especifica la URL del recurso al que se debe pre-conectar. En este caso, es el dominio https://fonts.bunny.net.

¿Cuál es el propósito de rel="preconnect"?

El propósito principal de rel="preconnect" es mejorar el rendimiento de la carga de la página, especialmente cuando sabes que vas a descargar recursos importantes de un dominio específico en un futuro muy cercano.

Cuando el navegador encuentra esta etiqueta <link rel="preconnect">, no espera a que tu CSS o JavaScript le diga que necesita una fuente o un activo de ese dominio. En cambio, comienza el proceso de conexión en segundo plano de inmediato. Esto reduce la latencia, ya que los pasos iniciales de la conexión de red ya están completados para cuando el navegador realmente necesita descargar los recursos (como las fuentes web de fonts.bunny.net).

En resumen:

<link rel="preconnect" href="https://fonts.bunny.net" /> le está diciendo al navegador:

"Oye, es muy probable que necesite descargar fuentes de https://fonts.bunny.net pronto. Por favor, empieza a establecer la conexión con ese servidor ahora mismo, así, cuando realmente necesite las fuentes, la descarga será más rápida porque ya habrás hecho parte del trabajo pesado de la red."

Esto es una técnica de optimización de rendimiento frontend que ayuda a que tu sitio web se sienta más rápido para el usuario final.

Etiquetas:

Comentarios

Publicar un comentario

Entradas populares de este blog

Crear proyecto de frontend con Vite, React, Tailwind, Typescript y JSX

De
 ¿Cómo se crea un proyecto exclusivo de frontend con Vite, React, Tailwind, Typescript y JSX? ¡Absolutamente! Entiendo que quieres la guía completa para pasar de cero a tener un proyecto de frontend moderno, vacío y listo para ser llenado con tu código. A continuación, te proporciono un archivo de guía detallada que incluye todos los comandos necesarios para inicializar el proyecto, configurar Tailwind CSS, y los pasos clave para empezar a "poblarlo". Voy a generar un documento Markdown con la guía paso a paso, incluyendo los comandos de terminal y las modificaciones esenciales a los archivos de configuración. Guía: Creación de un Proyecto Frontend Puro (Vite, React, TypeScript, Tailwind) Este documento detalla el proceso para inicializar un proyecto de frontend vacío y optimizado, utilizando Vite como empaquetador, React como librería, TypeScript para tipado y Tailwind CSS para estilizado. 1. Inicialización del Proyecto con Vite Vite es la herramienta más rápida para emp...
Publicar un comentario
Leer más

Tokens V2

De
Tokens: Programme to discover tokens, where there are not. Now available at  https://puszcza.gnu.org.ua/projects/tokens/ This is Version 2, for  version 1, go here . Synopsis: use TokensV2; sub printFile; my @FORMAT = ( ['<Message Date=".*?" Time=".*?" DateTime=".*?" SessionID=".*?"><From>(?:<User FriendlyName=".*?"/>)+</From><To>(?:<User FriendlyName=".*?"/>)+</To><Text(?: Style=".*?")?>.*?</Text></Message>',   sub {     my $fh = $_[1];     my ($d, $t, $f, $s, $T) = $_[0] =~ m|<Message Date="(.*?)" Time="(.*?)" DateTime=".*?" SessionID=".*?">(<From>(?:<User FriendlyName=".*?"/>)+</From>)<To>(?:<User FriendlyName=".*?"/>)+</To><Text(?: Style="(.*?)")?>(.*?)</Text></Message>|;     my $F = join '<br />', ...
Publicar un comentario
Leer más

Perl Net::LDAP::SimpleServer

De
Adaptaciones sobre el módulo LDAP Server para Windows (Strawberry Perl) Lista de adaptaciones (continúa más abajo): - Relajación de condiciones de bind:     - Cuenta principal (principal account)     - Validación de contraseñas Ubicación del archivo: %Strawberry_Perl%\site\lib\net\ldap\SimpleServer\ProtocolHandler.pm CPAN: http://search.cpan.org/~russoz/Net-LDAP-SimpleServer-0.0.17/lib/Net/LDAP/SimpleServer.pm Código: package Net::LDAP::SimpleServer::ProtocolHandler; use strict; use warnings; # ABSTRACT: LDAP protocol handler used with Net::LDAP::SimpleServer our $VERSION = '0.0.17';    # VERSION use Net::LDAP::Server; use base 'Net::LDAP::Server'; use fields qw(store root_dn root_pw allow_anon); use Carp; use Net::LDAP::LDIF; use Net::LDAP::Util qw{canonical_dn}; use Net::LDAP::FilterMatch; use Net::LDAP::Constant (     qw/LDAP_SUCCESS LDAP_AUTH_UNKNOWN LDAP_INVALID_CREDENTIALS/,   ...
Publicar un comentario
Leer más