Estrategias de Prefetch para Mejorar el Rendimiento de Tu Aplicación Vue.JS

Bienvenidos a todos a mi charla de Vue.js. Mi charla se llama estrategias de prefetching y cómo mejorar el rendimiento de tu aplicación Vue.js.

Así que, un poco más de información sobre mí. Mi nombre es Aleksandr Gekuv. Soy estudiante de ICT e ingeniería de software. También he estado trabajando como desarrollador de software en Axion Biosystems. Tengo alrededor de tres años de experiencia profesional. Originalmente, soy de Sofía, Bulgaria, pero actualmente estoy estudiando y trabajando en Eindhoven. Recientemente, también he comenzado a crear contenido sobre Vue. Así que puedes visitar mi blog y mis videos de YouTube. Y también estoy tratando de ser más activo en Twitter. Así que puedes saludarme allí también.

Hoy hablaremos sobre el rendimiento. ¿Por qué importa el rendimiento? ¿Rendimiento web y la red? ¿Cómo funciona el navegador, técnicas de optimización, algunos ejemplos en Vue. Mencionaré brevemente una biblioteca genial llamada guestjs, y luego algunas reflexiones finales. Y comencemos con por qué importa el rendimiento.

A la gente le encantan los sitios web rápidos. En el mundo acelerado de hoy, donde la gente tiene cada vez menos capacidad de atención, es realmente importante que nosotros, como desarrolladores, hagamos que nuestros sitios web sean rápidos. Una de las desventajas es que los sitios web lentos frustran a los usuarios, y eso puede llevar a usuarios que son más propensos a abandonar estos sitios web. Y eso realmente puede perjudicar al negocio y también al SEO porque cuando los motores de búsqueda ven que mucha gente abandona un sitio web, entonces estos sitios web se clasifican más bajo en los resultados de búsqueda. Hay 5 necesidades fundamentales de los usuarios que debemos tener en cuenta. Así que los sitios web perfectos suelen ser funcionales, fiables, utilizables, placenteros y, por último, pero no menos importante, con buen rendimiento.

Así que algunos estudios para mostrar por qué es importante. Una famosa investigación de Google demostró que la probabilidad de rebote aumenta un 32% cuando el tiempo de carga de la página pasa de 1 segundo a 3 segundos. Así que impacta directamente a los usuarios finales si ven el contenido rápido o no. Otra investigación es del equipo de Pinterest. Descubrieron que reconstruir las páginas de Pinterest para el rendimiento resultó en una disminución del 40% en el tiempo de espera, un aumento del 15% en el tráfico SEO y un aumento del 15% en la tasa de conversión para registrarse. Así que todo esto es muy importante. Y si necesitamos dar una definición al rendimiento web, lo pondría simplemente como hacer que los sitios web sean rápidos y receptivos. Si necesitas una respuesta más poética a esa pregunta, le pregunté a Chat GPT y respondió que el rendimiento web es el arte de crear una obra maestra de velocidad relámpago donde los desarrolladores bailan con el código para crear una sinfonía de velocidad que encanta y deleita.

Una parte crucial del rendimiento web es optimizar para la red porque esencialmente los sitios web son archivos y estos archivos necesitan llegar de alguna manera a través de la red hasta nosotros. Un aspecto crucial del rendimiento web es minimizar esta latencia de red y el ancho de banda porque juegan un papel significativo cuando hablamos de experimentos de usuario y rendimiento y capacidad de respuesta del sitio web.

Ya hacemos mucho para optimizar la red. Por ejemplo, comprimimos nuestras imágenes, minificamos nuestro JS, agrupamos todo junto. Realizamos división de código y hacemos carga diferida donde es posible. Pero también hacemos una cosa más, y es que anticipamos. Así que podemos anticipar lo que el usuario puede hacer. Y más adelante, te mostraré algunos consejos sobre cómo podemos realmente mejorar el rendimiento mediante la anticipación. Pero antes de eso, necesitamos entender cómo funciona el navegador.

Así que los navegadores son de un solo hilo por naturaleza, al igual que JavaScript. Y eso significa que cuando tienen tareas, las completan secuencialmente. Así que necesitan esperar a que una tarea termine antes de comenzar la siguiente. Y cuando abrimos el navegador y ponemos algo en la URL en la parte superior, lo primero que el navegador necesita hacer, porque no recuerda qué dominio se relaciona con qué IP dirección, necesita preguntar al servidor DNS por eso. El servidor DNS básicamente actúa como un mapa. Así que tiene estos datos sobre qué dominio se relaciona con qué dirección IP. Así que enviamos esas dos solicitudes y obtenemos una dirección IP de vuelta. El servidor DNS también almacenará en caché eso, y para uso posterior, también podremos usar la versión en caché de esa dirección IP para que vaya más rápido. Pero usualmente este proceso toma entre 20 y 120 milisegundos. Y puede ser incluso más lento en redes móviles. Así que ese es el primer paso. Y el siguiente paso es realmente tener el apretón de manos TCP. Y si el sitio web está asegurado, también necesitamos tener la negociación TLS. Así que el apretón de manos TCP básicamente envía reconocimientos sincronizados entre el navegador y el sitio web. Y básicamente lo que esto significa es que tenemos muchas más solicitudes de ida y vuelta hasta que realmente podemos hacer algo. Así que el total es que hacemos alrededor de 8 viajes de ida y vuelta, y al menos 300 milisegundos antes de que estemos realmente listos para hacer cualquier tipo de solicitudes HTTP.

Así que la primera solicitud se hace después de eso, y puedes imaginar lo que sucede cuando las personas tienen una conexión más lenta o están en el móvil. Así que hay múltiples maneras en que podemos optimizar esto. Una cosa que es nueva es la multiplexación de HTTP 2.0, que básicamente nos permite tener múltiples acciones y tareas ejecutadas a la vez. Otra cosa son las CDNs, redes de distribución de contenido mantenido, que básicamente ayudan a mover los servidores más cerca del usuario final.

Y lo último es el almacenamiento en caché, y está directamente relacionado con las sugerencias de recursos, y ahora lo veremos. Así que el navegador generalmente hace un buen trabajo estimando por sí mismo qué recursos son de alta prioridad y son críticos para renderizar la página actual, pero hay formas en que podemos influir en la toma de decisiones del navegador para mejorar el rendimiento.

Así que las sugerencias de recursos son básicamente pistas e instrucciones en las que podemos priorizar recursos que necesitan ser obtenidos antes o más temprano, luego el navegador puede realmente ver que los necesita. Y estaremos viendo DNS prefetch, preconnect, preload y module preload, prefetching y prerendering.

Así que DNS prefetch, puedes ver que todas las sugerencias de recursos se implementan mediante el elemento HTML link. Una cosa a mencionar es que también pueden especificarse en los encabezados, pero eso no es compatible en todos los navegadores y se usa menos. Así que puedes ver en el ejemplo, básicamente, como su nombre indica, con este le decimos al navegador, ¿puedes por favor hacer el procedimiento de búsqueda DNS lo antes posible para que cuando realmente vayamos a esa página, al menos el primer paso esté hecho y sepamos la dirección IP? Aquí está el soporte del navegador, está bastante bien soportado.

Y continuando, tenemos el pre-connect. Así que el pre-connect es similar al DNS prefetch, pero también incluye en sí mismo el TCP y TLS, el apretón de manos TCP y las negociaciones TLS. Ahorra tiempo al eliminar la latencia de ida y vuelta al hacer estas conexiones TCP y TLS. Y una cosa que debemos tener en cuenta es que debemos usarlo con moderación, porque como puedes ver en los milisegundos, toma algo de tiempo. Si necesitamos algo crítico, entonces tal vez usemos Preconnect para eso. Pero para otras cosas, podemos usar DNS prefetch. También podemos tener un respaldo. Por cualquier razón, si Preconnect no funciona, también podemos especificar en el mismo atributo DNS prefetch y luego el navegador sabrá que si el Preconnect no funciona, volverá a DNS prefetch, que es al menos algo y ayudará con el rendimiento. Así que, continuando, aquí está el soporte del navegador.

Y luego tenemos el preload y module preload. Así que esto es bueno para obtener recursos descubiertos tarde necesarios para la vista de la página actual. Y se usa principalmente para fuentes e imágenes que no provienen del documento en sí, sino que provienen del CSS o JavaScript. Y es por eso que el navegador los encuentra solo cuando pasa por el JavaScript o CSS. Pero eso puede ser un poco tarde. Así que si sabemos que usaremos esto, podemos usar el preload, o module preload, en consecuencia para obtenerlo de antemano. Y como ves aquí, está este atributo AS. Y eso también es importante porque especifica el tipo de recurso. El tipo de recurso puede ser muchas cosas diferentes. Así que como mencioné, más a menudo fuentes e imágenes. Y esto es importante porque influye en la política de seguridad de contenido. Así que si tenemos algún dominio, podemos especificar que de este dominio, podemos esperar solo fuentes o solo un cierto tipo de recurso. Y esto puede ayudar con la seguridad.

Y aquí está el soporte del navegador para el preload. El siguiente paso es el prefetching. Prefetching es diferente de las otras sugerencias de recursos ya que no intenta obtener algo crucial para la página actual. En su lugar, intenta obtener fuentes no críticas que pueden ser útiles en el futuro cuando el usuario decida navegar a esa página.

Así que aquí puedes ver, básicamente, cargaremos este CSS de la siguiente página siempre que el usuario vaya a esa página. Y el navegador automáticamente establece los recursos de prefetching como de baja prioridad para que no influyan en los recursos críticos necesarios para la página actual.

Una cosa a mencionar antes de continuar, también hay diferentes tipos de prefetching, digamos, estrategias. Así que puede ser influenciado por el usuario, y también puede ser influenciado por si el ratón se queda en algún punto cerca de algún enlace. Entonces el navegador también puede obtener ese enlace específico. Y un caso de uso de esto es, por ejemplo, si estamos en una página de inicio de sesión, mientras el usuario está escribiendo su contraseña en el correo electrónico, podemos usar este tiempo y ancho de banda para realmente obtener los recursos necesarios para la página que viene después del inicio de sesión, y de esa manera una vez que hagan clic en iniciar sesión, algunos de los recursos ya estarán obtenidos y la experiencia será más rápida.

Aquí está el soporte del navegador también. Por lo que he visto, solo Safari tiene algunos problemas con el prefetching, pero por lo demás está bastante bien. Y a continuación tenemos prerender, que es el tipo más caro de sugerencia de recursos, porque renderiza una página completa en segundo plano y si el usuario navega a esa página será el más rápido, pero una advertencia es que puede desperdiciar innecesariamente ancho de banda y hacer que la experiencia sea más lenta, por lo que debes tener mucho cuidado con el prerender. Aquí está el soporte del navegador, y una cosa que quiero mencionar, Chrome en realidad tiene este no state prefetch cuando usamos prerender en ese navegador, porque para minimizar la memoria, han hecho que un renderizador inicial se inicialice para recorrer los recursos y sub-recursos y lo que básicamente significa es que cuando usamos prerender en Chrome en realidad actúa más como un prefetch para ahorrar un poco de memoria.

Y la forma típica en que usamos estas sugerencias de recursos es que las ponemos en una etiqueta de enlace en nuestro head, en nuestro index.html o en algún lugar, pero puede que te estés preguntando bastante sobre Vue. Así que Vue CLI y Vite tienen algún tipo de prefetching automáticamente para los fragmentos que son divididos por ellos. Pero otra forma en que realmente podemos influir y hacer nuestras propias cosas es con una biblioteca genial que encontré que es del equipo de unifiedjs y se llama unhead. Fue hecha por Harlan Wilton, él también es un destacado colaborador de código abierto de Vue. Y básicamente esto nos permite usar un composable use head que luego podemos especificar enlaces, meta tags y cualquier otra cosa que queramos tener en nuestra etiqueta head. Así que podemos simplemente instalarlo y luego te mostraré ahora cómo podemos realmente usarlo. Así que si vamos a VS Code, aquí tengo una aplicación simple de Vue y como puedes ver tengo como dos páginas y aquí ya lo he instalado. Y estoy usando head así que podemos básicamente especificar un título y también podemos especificar enlaces. Así que aquí ya hemos especificado que tenemos un enlace a mi blog que queremos prefetch. Y si vamos al sitio web aquí puedes verlo si simplemente actualizo. Y aquí puedes ver que realmente lo prefetch y tiene la prioridad más baja. Eso significa que siempre que haya un enlace a esa página y naveguemos a ella, se cargará más rápido. Una forma en que también puedo mostrar esto es yendo a elementos y puedes ver aquí en el head que lo ha inyectado correctamente, así que está prefetched y luego cualquier recurso que tengamos. Así que esa es una forma en que podemos influir en ello. Volviendo también hay otra biblioteca que quería mencionar y esa es get.js fue hecha por el equipo de Angular y esencialmente lo que hemos estado haciendo ahora es prefetching especulativo así que basado en nuestra propia intuición decidimos qué recursos prefetch pero una mejor manera sería usar prefetching predictivo. El prefetching predictivo se basa en datos, así que es impulsado por datos y obtenemos esos datos de Google Analytics. Basado en Google Analytics y el comportamiento del usuario al hacer clic en enlaces, la forma en que funciona es que hace una cadena de Markov y la cadena de Markov es básicamente simplemente un modelo que tiene la probabilidad de pasar de un estado a otro, pero lo que eso significa para el usuario es que nosotros, basados en los datos que tenemos, podemos realmente prefetch condicionalmente lo que es más probable que el usuario vaya. Hasta donde yo sé, hay un módulo next para guest.js pero también, creo que necesita webpack, no estoy realmente seguro y no he profundizado tanto, pero también puedes hacer tu propia investigación y me encantaría escuchar lo que tú, si ya tienes experiencia con esta biblioteca Enview.

Así que pensamientos finales en conclusión, el rendimiento es un factor crítico para el éxito de cualquier aplicación web y hoy en día los usuarios tienen altas expectativas y no tolerarán aplicaciones lentas y pesadas. Así que al usar técnicas de optimización de rendimiento, minimizando la latencia de la red y el ancho de banda y usando estas sugerencias de recursos, así que prefetching predictivo, podemos mejorar el rendimiento percibido de nuestro sitio web y dar al usuario lo que necesitan y también una mejor experiencia de usuario.

Gracias por escuchar, estaré creo que en Discord esperando tus preguntas y mientras tanto también puedes encontrarme en Twitter, puedes revisar mi blog en dev.to y también puedes seguirme en YouTube para más videos sobre Vue y Frontend.