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

Bienvenidos, todos, a mi charla de Vue.js. Mi charla se llama estrategias de precarga 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 TIC e ingeniería de software. También he trabajado como desarrollador de software en Axion Biosystems. Tengo aproximadamente 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 pueden visitar mi blog y mis videos de YouTube. También estoy tratando de ser más activo en Twitter. Así que pueden saludarme allí también.

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

A las personas les encantan los sitios web rápidos. En el mundo acelerado de hoy, donde las personas tienen cada vez menos atención, es realmente importante que nosotros, como desarrolladores, hagamos nuestros sitios web rápidos. Uno de los inconvenientes es que los sitios web lentos frustran a los usuarios, y eso puede llevar a que los usuarios abandonen 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, esos sitios web tienen una clasificación más baja en los resultados de búsqueda. Hay 5 necesidades fundamentales de los usuarios a las que debemos tener en cuenta. Los sitios web perfectos suelen ser funcionales, confiables, usables, placenteros y, por último pero no menos importante, eficientes.

Algunos estudios para mostrar por qué es importante. Una famosa investigación de Google demostró que la probabilidad de rebote aumenta un 32% a medida que el tiempo de carga de la página pasa de 1 segundo a 3 segundos. Por lo tanto, 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 mejorar el rendimiento resultó en una disminución del 40% en el tiempo de espera, un aumento del 15% en el tráfico de SEO y un aumento del 15% en la tasa de conversión para registrarse. Todo esto es muy importante. Y si tenemos que dar una definición de rendimiento web, simplemente lo pondría como hacer que los sitios web sean rápidos y receptivos. Si necesitan 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 ultrarrápida 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 la optimización 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 y ancho de banda de la red porque juegan un papel importante cuando se habla de la experiencia del usuario y el rendimiento y la capacidad de respuesta del sitio web.

Ya hacemos mucho para optimizar la red. Por ejemplo, comprimimos nuestras imágenes, minimizamos nuestro JS, agrupamos todo junto. Realizamos la división de código y cargamos de forma diferida cuando es posible. Pero también hacemos algo más, y eso es anticiparnos. Podemos anticipar lo que el usuario puede hacer. Más adelante, les mostraré algunos consejos sobre cómo podemos mejorar el rendimiento mediante la anticipación. Pero antes de eso, necesitamos entender cómo funciona el navegador.

Los navegadores son de un solo hilo por naturaleza, al igual que JavaScript. Esto significa que cuando tienen tareas, las completan de forma secuencial. Necesitan esperar a que una tarea termine antes de comenzar la siguiente. Cuando abrimos el navegador y escribimos algo en la URL en la parte superior, lo primero que el navegador necesita hacer, porque no recuerda qué dominio se relaciona con qué dirección IP, es preguntar al servidor DNS por eso. El servidor DNS actúa básicamente como un mapa. Tiene datos sobre qué dominio se relaciona con qué dirección IP. Enviamos esas dos solicitudes y obtenemos una dirección IP a cambio. El servidor DNS también almacenará en caché eso, y para su uso posterior, también podremos utilizar la versión en caché de esa dirección IP para que sea más rápido. Pero por lo general, este proceso lleva entre 20 y 120 milisegundos, y puede ser aún más lento en redes móviles. Ese es el primer paso. El siguiente paso es tener el handshake TCP. Y si el sitio web está asegurado, también necesitamos tener la negociación TLS. El handshake TCP envía básicamente reconocimientos sincronizados entre el navegador y el sitio web. Básicamente, esto significa que tenemos muchas más solicitudes de ida y vuelta hasta que realmente podemos hacer algo. En total, realizamos 8 viajes y al menos 300 milisegundos antes de que estemos listos para hacer cualquier tipo de solicitud HTTP. La primera solicitud se realiza después de eso, y pueden imaginar lo que sucede cuando las personas tienen una conexión más lenta o están en el móvil. Hay varias formas en las que podemos optimizar esto. Una cosa nueva es la multiplexación de HTTP 2.0, que nos permite tener múltiples acciones y tareas ejecutadas al mismo tiempo. Otra cosa son las CDNs, redes de distribución de contenido, que básicamente ayudan a acercar los servidores al usuario final.

Y lo último es el almacenamiento en caché, y está directamente relacionado con las sugerencias de recursos, y lo veremos ahora mismo. Por lo general, el navegador 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 las que podemos influir en la toma de decisiones del navegador para mejorar el rendimiento.

Las sugerencias de recursos son básicamente pistas e instrucciones en las que podemos priorizar los recursos que deben obtenerse antes o más temprano, para que el navegador realmente pueda ver que los necesita. Y veremos DNS prefetch, preconnect, preload y module preload, prefetching y prerendering.

Así que DNS prefetch, pueden ver que todas las sugerencias de recursos se implementan mediante el elemento de enlace HTML. Una cosa a mencionar es que también se pueden especificar en las cabeceras, pero eso no es compatible en todos los navegadores y se utiliza menos. Como pueden ver en el ejemplo, básicamente, como su nombre indica, con esto le decimos al navegador: `por favor, realiza 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, es bastante compatible.

Y pasando a la siguiente, tenemos la pre-conexión. La pre-conexión es similar al DNS prefetch, pero también incluye en sí misma el TCP y las negociaciones TLS, el handshake TCP y las negociaciones TLS. Ahorra tiempo eliminando 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 pueden ver en los milisegundos, lleva 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 alguna razón, si Preconnect no funciona, también podemos especificar en el mismo atributo DNS prefetch y luego el navegador sabrá que si Preconnect no funciona, volverá a DNS prefetch, que al menos es algo y ayudará con el rendimiento. Entonces, pasando a la siguiente, aquí está el soporte del navegador.

Y luego tenemos el preload y module preload. Esto es útil para obtener recursos descubiertos tarde necesarios para la vista de página actual. Y se utiliza principalmente para fuentes e imágenes que no provienen del propio documento, sino 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. Entonces, si sabemos que lo usaremos, podemos usar el preload, o module preload, según corresponda, para obtenerlo anticipadamente. Y como pueden ver 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. Como mencioné, con mayor frecuencia fuentes e imágenes. Y esto es importante porque influye en la política de seguridad del contenido. Entonces, si tenemos algún dominio, podemos especificar que desde este dominio, solo podemos esperar 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. El prefetching es diferente de las otras sugerencias de recursos, ya que no intenta obtener algo crucial para la página actual. En cambio, intenta obtener fuentes no críticas que pueden ser útiles en el futuro cuando el usuario decida navegar a esa página.

Entonces aquí pueden ver, básicamente, cargaremos esta próxima página (CSS) cada vez que el usuario vaya a esa página. El navegador establece automáticamente los recursos de prefetching como baja prioridad para que no influyan en los recursos críticos necesarios para la página actual.

Antes de continuar, también hay diferentes tipos de prefetching, digamos, estrategias. Por lo tanto, puede verse influenciado por el usuario y también puede verse influenciado por si el mouse se queda en algún punto cerca de algún enlace. Luego, 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 aprovechar este tiempo y ancho de banda para 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 se habrán obtenido y la experiencia será más rápida. Aquí también está el soporte del navegador. Hasta donde he visto, solo Safari tiene algunos problemas con el prefetching, pero por lo demás es bastante bueno. Y luego tenemos el prerenderizado, que es el tipo de sugerencia de recursos más costoso, porque renderiza una página completa en segundo plano y si el usuario navega a esa página, será la más rápida, 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 prerenderizado. Aquí está el soporte del navegador, y una cosa que quiero mencionar, Chrome en realidad tiene este prefetch sin estado cuando usamos el prerenderizado en ese navegador, porque para minimizar la memoria, han hecho que un renderizador inicial se inicialice para recorrer los recursos y subrecursos y lo que básicamente significa es que cuando usamos el prerenderizado 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 colocándolas en una etiqueta de enlace en nuestra cabeza, en nuestro index.html o en algún otro lugar, pero es posible que se pregunten acerca de Vue. Entonces, Vue CLI y Vite tienen algún tipo de prefetching automáticamente para los fragmentos de código que se dividen por ellos. Pero otra forma en que 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 creado por Harlan Wilton, quien también es un destacado colaborador de código abierto de Vue. Básicamente, nos permite usar un hook componible llamado useHead, en el que luego podemos especificar enlaces, etiquetas meta y cualquier otra cosa que queramos tener en nuestra etiqueta head. Así que solo tenemos que instalarlo y luego les mostraré cómo podemos usarlo. Entonces, si vamos a VS Code, aquí tengo una aplicación Vue simple y como pueden ver, tengo dos páginas y aquí ya lo he instalado. Y estoy usando useHead para poder 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 prefetchear. Y si vamos al sitio web aquí, pueden verlo si simplemente actualizo. Y aquí pueden ver que en realidad lo prefetchea y tiene la prioridad más baja. Eso significa que cada vez 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 los elementos y aquí pueden ver en la cabeza que se ha inyectado correctamente, por lo que se prefetchea y luego cualquier recurso que tengamos. Entonces, esa es una forma en que podemos influir en ello. Volviendo, también hay otra biblioteca que quería mencionar y es get.js, fue creada por el equipo de Angular y básicamente lo que hemos estado haciendo ahora es prefetching especulativo, por lo que basado en nuestra propia intuición decidimos qué recursos prefetchear, pero una mejor manera sería usar el prefetching predictivo. El prefetching predictivo se basa en datos, por lo que está 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 crea una cadena de Markov y una cadena de Markov es básicamente un modelo que tiene la probabilidad de pasar de un estado a otro, pero lo que eso significa para el usuario es que, basado en los datos que tenemos, podemos prefetchear condicionalmente lo que es más probable que el usuario visite. Hasta donde sé, hay un módulo siguiente para get.js, pero también creo que necesita webpack, no estoy muy seguro y no he profundizado mucho, pero también pueden investigar por su cuenta y me encantaría saber si ya tienen experiencia con esta biblioteca en Vue.

En resumen, 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 poco ágiles. Por lo tanto, mediante el uso de técnicas de optimización del rendimiento, minimizando la latencia y el ancho de banda de la red y utilizando estas sugerencias de recursos, como el prefetching predictivo, podemos mejorar el rendimiento percibido de nuestro sitio web y brindar al usuario lo que necesita y una mejor experiencia de usuario. Gracias por escuchar, estaré, creo, en Discord esperando sus preguntas y mientras tanto, también pueden encontrarme en Twitter, pueden consultar mi blog en dev.to y también pueden seguirme en YouTube para ver más videos sobre Vue y Frontend. Gracias, ¡adiós!