Optimización del rendimiento con sugerencias de recursos

Publicado: 2022-03-10

Resumen rápido ↬ Se pueden realizar muchas optimizaciones de rendimiento cuando podemos predecir lo que los usuarios podrían hacer antes de que realmente lo hagan. Las sugerencias de recursos son una forma simple pero efectiva en que los desarrolladores web pueden ayudar al navegador a mantenerse un paso por delante del usuario y mantener las páginas rápidas.

Los navegadores web modernos utilizan todo tipo de técnicas para ayudar a mejorar el rendimiento de carga de la página al adivinar qué es probable que haga el usuario a continuación. Sin embargo, el navegador no sabe mucho sobre nuestro sitio o aplicación en su conjunto y, a menudo, la mejor información sobre lo que es probable que haga un usuario proviene de nosotros, el desarrollador.

Tomemos el ejemplo del contenido paginado, como un álbum de fotos. Sabemos que si el usuario está mirando una foto en un álbum, la posibilidad de que haga clic en el enlace 'siguiente' para ver la siguiente imagen en el álbum es bastante alta. Sin embargo, el navegador no sabe realmente que, de todos los enlaces de la página, es más probable que el usuario haga clic en ese. Para un navegador, todos esos enlaces tienen el mismo peso.

¿Qué pasaría si el navegador pudiera saber de alguna manera a dónde se dirige el usuario a continuación y pudiera obtener la página siguiente con anticipación para que cuando el usuario haga clic en el enlace, la carga de la página sea mucho, mucho más rápida? Eso es en principio lo que son las Sugerencias de recursos. Son una forma en que el desarrollador le dice al navegador lo que es probable que suceda en el futuro para que el navegador pueda tenerlo en cuenta en sus opciones de carga de recursos.

Todas estas sugerencias de recursos usan el atributo rel del elemento <link> que estará familiarizado con encontrar en el <head> de sus documentos HTML. En este artículo, veremos los principales tipos de Sugerencias de recursos y cuándo y dónde podemos usarlos en nuestras páginas. Pasaremos de las pistas pequeñas y sutiles a las armas grandes al final.

¡Más después del salto! Continúe leyendo a continuación ↓

Precarga de DNS

Una búsqueda de DNS es el proceso de convertir un nombre de dominio amigable para los humanos como example.com en la dirección IP amigable para la máquina como 123.54.92.4 que realmente se necesita para obtener un recurso.

Cada vez que escribe una URL en la barra de direcciones del navegador, sigue un enlace en una página o incluso carga un recurso como una imagen de un dominio diferente, el navegador necesita realizar una búsqueda de DNS para encontrar el servidor que contiene el recurso que hemos solicitado. Para una página ocupada con muchos recursos externos (como quizás un sitio web de noticias con muchos anuncios y rastreadores), es posible que se requieran docenas de búsquedas de DNS por página.

El navegador almacena en caché los resultados de estas búsquedas, pero pueden ser lentos. Una técnica de optimización del rendimiento consiste en reducir el número de búsquedas de DNS necesarias organizando los recursos en menos dominios. Cuando eso no sea posible, puede advertir al navegador sobre los dominios que necesitará buscar con la sugerencia de recurso dns-prefetch .

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

Cuando el navegador encuentra esta sugerencia, puede comenzar a resolver el nombre de dominio images.example.com lo antes posible, aunque todavía no sabe cómo se usará. Esto permite que el navegador se adelante al juego y haga más trabajo en paralelo, lo que reduce el tiempo de carga general.

¿Cuándo debo usar `dns-prefetch` ?

Use dns-prefetch cuando su página use recursos de un dominio diferente, para darle al navegador una ventaja. La compatibilidad con el navegador es realmente excelente, pero si un navegador no lo admite, no pasa nada: la captación previa simplemente no se realiza.

No recoja previamente ningún dominio que no esté usando, y si se da cuenta de que quiere precargar una gran cantidad de dominios, sería mejor que vea por qué se necesitan todos esos dominios y si se puede hacer algo para reducir el número.

Preconexión

Un paso después de la captación previa de DNS es la conexión previa a un servidor. Establecer una conexión con un servidor que aloja un recurso requiere varios pasos:

búsqueda de DNS (como acabamos de discutir);
protocolo de enlace TCP
Una breve “conversación” entre el navegador y el servidor para crear la conexión.
Negociación TLS en sitios HTTPS
Esto verifica que la información del certificado sea válida y correcta para la conexión.

Esto suele ocurrir una vez por servidor y requiere un tiempo valioso, especialmente si el servidor está muy lejos del navegador y la latencia de la red es alta. (¡Aquí es donde las CDN distribuidas globalmente realmente ayudan!) De la misma manera que la obtención previa de DNS puede ayudar al navegador a adelantarse al juego antes de que vea lo que se avecina, la conexión previa a un servidor puede asegurar que cuando el navegador llegue a la parte de la página donde se necesita un recurso, el lento trabajo de establecer la conexión ya ha tenido lugar y la línea está abierta y lista para funcionar.

 <link rel="preconnect" href="https://scripts.example.com">

¿Cuándo debo usar `preconnect` ?

Nuevamente, el soporte del navegador es fuerte y no hay daño si un navegador no admite la conexión previa; el resultado será igual que antes. Considere usar la preconexión cuando esté seguro de que accederá a un recurso y desea avanzar.

Tenga cuidado de no preconectarse y luego no usar la conexión, ya que esto ralentizará su página y también ocupará una pequeña cantidad de recursos en el servidor al que se conecta.

Obtención previa de la página siguiente

Las dos sugerencias que hemos visto hasta ahora se centran principalmente en los recursos dentro de la página que se está cargando. Pueden ser útiles para ayudar al navegador a avanzar en imágenes, scripts o fuentes, por ejemplo. El siguiente par de sugerencias se relacionan más con la navegación y la predicción de dónde podría ir el usuario después de la página que se está cargando actualmente.

El primero de ellos es la captación previa, y su etiqueta de enlace podría verse así:

 <link rel="prefetch" href="https://example.com/news/?page=2" as="document">

Esto le dice al navegador que puede continuar y obtener una página en segundo plano para que esté lista cuando se solicite. Hay un poco de riesgo aquí porque tienes que anticiparte a dónde crees que el usuario navegará a continuación. Hazlo bien, y la página siguiente puede parecer que se carga muy rápido. Hazlo mal y habrás perdido tiempo y recursos descargando algo que no se va a utilizar. Si el usuario tiene una conexión medida, como un plan de telefonía móvil limitado, es posible que le cueste dinero real.

Cuando se realiza una captación previa, el navegador realiza la búsqueda de DNS y establece la conexión con el servidor que hemos visto en los dos tipos de sugerencias anteriores, pero luego va un paso más allá y solicita y descarga los archivos. Sin embargo, se detiene en ese punto y los archivos no se analizan ni ejecutan y no se aplican de ninguna manera a la página actual. Solo se solicitan y se mantienen listos.

Puede pensar en una captación previa como si fuera un poco como agregar un archivo a la memoria caché del navegador. En lugar de tener que ir al servidor y descargarlo cuando el usuario hace clic en el enlace, el archivo puede extraerse de la memoria y usarse mucho más rápido.

El `as` atributo

En el ejemplo anterior, puede ver que estamos configurando el atributo as en as="document" . Este es un atributo opcional que le dice a ese navegador que lo que estamos obteniendo debe manejarse como un documento (es decir, una página web). Esto permite que el navegador establezca el mismo tipo de encabezados de solicitud y políticas de seguridad como si hubiéramos seguido un enlace a una nueva página.

Hay muchos valores posibles para el atributo as al permitir que el navegador maneje diferentes tipos de captación previa de la manera adecuada.

valor de `as`	Tipo de recurso
`audio`	Archivos de sonido y música
`video`	Video
`Track`	Pistas de vídeo o audio WebVTT
`script`	Archivos JavaScript
`style`	hojas de estilo CSS
`font`	fuentes web
`image`	Imágenes
`fetch`	Solicitudes XHR y Fetch API
`worker`	trabajadores web
`embed`	Solicitudes multimedia `<embed>`
`object`	Solicitudes de `<object>` multimedia
`document`	páginas web

Los diferentes valores que se pueden usar para especificar tipos de recursos con el atributo as .

¿Cuándo debo usar la `prefetch` ?

Una vez más, prefetch tiene un excelente soporte de navegador. Debe usarlo cuando tenga una certeza razonable de que el usuario podría seguir su sitio si cree que acelerar la navegación tendrá un impacto positivo en la experiencia del usuario. Esto debe sopesarse frente al riesgo de desperdiciar recursos al obtener posiblemente un recurso que luego no se usa.

Representación previa de la página siguiente

Con prefetch , hemos visto cómo el navegador puede descargar los archivos en segundo plano listos para usar, pero también notamos que no se hizo nada más con ellos en ese momento. La representación previa va un paso más allá y ejecuta los archivos, haciendo prácticamente todo el trabajo necesario para mostrar la página, excepto mostrarla realmente.

Esto podría incluir analizar el recurso en busca de subrecursos , como archivos e imágenes de JavaScript, y precargarlos también.

 <link rel="prerender" href="https://example.com/news/?page=2">

Esto realmente puede hacer que la carga de la siguiente página se sienta instantánea, con el tipo de rendimiento de carga rápido que puede ver al presionar el botón Atrás de su navegador. Sin embargo, la apuesta es aún mayor aquí, ya que no solo pasa tiempo solicitando y descargando los archivos, sino también ejecutándolos junto con cualquier JavaScript y demás. Esto podría consumir memoria y CPU (y, por lo tanto, batería) por lo que el usuario no verá el beneficio si finalmente no solicita la página.

¿Cuándo debo usar `prerender` ?

Actualmente, la compatibilidad del navegador con la prerender es muy restringida; en realidad, solo Chrome y el antiguo IE (no Edge) ofrecen compatibilidad con la opción. Esto podría limitar su utilidad, a menos que se dirija específicamente a Chrome. Una vez más, es un caso de "no hay daño, no hay falta", ya que el usuario no verá el beneficio, pero no le causará ningún problema si no lo hace.

Poner en práctica sugerencias de recursos

Ya hemos visto cómo se pueden usar sugerencias de recursos en el <head> de un documento HTML usando la etiqueta <link> . Esa es probablemente la forma más conveniente de hacerlo, pero también puede lograr lo mismo con el encabezado Link: HTTP.

Por ejemplo, para precargar con un encabezado HTTP:

 Link: <https://example.com/logo.png>; rel=prefetch; as=image;

También puede usar JavaScript para aplicar sugerencias de recursos de forma dinámica, tal vez en respuesta a la interacción de uso. Para usar un ejemplo del documento de especificaciones W3C:

 var hint = document.createElement("link"); hint.rel = "prefetch"; hint.as = "document"; hint.href = "/article/part3.html"; document.head.appendChild(hint);

Esto abre algunas posibilidades interesantes, ya que es potencialmente más fácil predecir dónde podría navegar el usuario a continuación en función de cómo interactúa con la página.

Cosas a tener en cuenta

Hemos analizado cuatro formas progresivamente más agresivas de precargar recursos, desde el toque más ligero de solo resolver DNS hasta generar una página completa lista para funcionar en segundo plano. Es importante recordar que estos consejos son solo eso; son sugerencias de las formas en que el navegador podría optimizar el rendimiento . No son directivas. El navegador puede tomar nuestras sugerencias y usar su mejor juicio para decidir cómo responder.

Esto podría significar que en un dispositivo ocupado o sobrecargado, el navegador no intenta responder a las sugerencias en absoluto. Si el navegador sabe que está en una conexión de uso medido, podría obtener DNS pero no recursos completos, por ejemplo. Si la memoria es baja, el navegador puede volver a decidir que no vale la pena buscar la página siguiente hasta que se haya descargado la actual.

La realidad es que en un navegador de escritorio, es probable que todas las sugerencias se sigan como sugiere el desarrollador, pero tenga en cuenta que depende del navegador en todos los casos.

La importancia del mantenimiento

Si ha trabajado con la web durante más de un par de años, estará familiarizado con el hecho de que si algo en una página no se ve, a menudo se puede descuidar. Los metadatos ocultos (como las descripciones de las páginas) son un buen ejemplo de esto. Si las personas que cuidan el sitio no pueden ver fácilmente los datos, es fácil que se descuiden y queden obsoletos.

Este es un riesgo real con sugerencias de recursos. Como el código está oculto y pasa prácticamente desapercibido durante el uso, sería muy fácil que la página cambiara y cualquier sugerencia de recurso no se actualizara. La consecuencia de, por ejemplo, obtener previamente una página que no usa, significa que las herramientas que ha implementado para mejorar el rendimiento de su sitio lo están dañando activamente. Por lo tanto, contar con buenos procedimientos para actualizar las sugerencias de recursos se vuelve muy, muy importante.

Recursos

"Especificación de Sugerencias de recursos", W3C
“Acelere las navegaciones de la página siguiente con búsqueda previa”, Addy Osmani