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

Rate this content
Bookmark

Esta charla cubrirá los beneficios de utilizar el prefetching para mejorar el rendimiento de las aplicaciones Vue.js. Los asistentes aprenderán sobre diferentes estrategias de prefetching y las mejores prácticas para optimizar el prefetching en diferentes condiciones de red.

21 min
15 May, 2023

Video Summary and Transcription

Bienvenidos a mi charla sobre estrategias de prefetching y mejora del rendimiento de aplicaciones en Vue.js. Una parte crucial del rendimiento web es la optimización para la red. El almacenamiento en caché y las pistas de recursos, como el prefetching DNS, preconnect, preload y module preload, pueden mejorar el rendimiento del sitio web. El prefetching de fuentes no críticas y el uso de diferentes estrategias pueden mejorar la experiencia del usuario. Las bibliotecas como unhead y get.js ofrecen personalización y prefetching predictivo basado en datos de Google Analytics.

Available in English

1. Introducción a la charla de Vue.js

Short description:

Bienvenidos a mi charla de Vue.js sobre estrategias de precarga y mejora del rendimiento de la aplicación. Soy Aleksandr Gekuv, estudiante de TIC e ingeniería de software, y desarrollador de software en Axion Biosystems. El rendimiento es importante porque los sitios web lentos frustran a los usuarios, lo que lleva a abandonos y a una menor clasificación. Estudios muestran que un aumento del 32% en la tasa de rebote ocurre cuando el tiempo de carga de la página pasa de 1 a 3 segundos. Pinterest experimentó una disminución del 40% en el tiempo de espera y un aumento del 15% en el tráfico y la tasa de conversión de SEO al optimizar el rendimiento. El rendimiento web consiste en hacer que los sitios web sean rápidos y receptivos, encantando y deleitando a los usuarios.

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.

2. Optimización para la Red

Short description:

Una parte crucial del rendimiento web es la optimización para la red. Ya hacemos mucho para optimizar la red, pero también anticipamos las acciones del usuario. Los navegadores son de un solo hilo y necesitan esperar a que las tareas finalicen. El primer paso es solicitar al servidor DNS la dirección IP. El handshake TCP y la negociación TLS añaden más retrasos. Podemos optimizar esto con la multiplexación de HTTP 2.0, CDNs y el almacenamiento en caché.

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.

3. Caching and Resource Hints

Short description:

Y lo último es el almacenamiento en caché, y está directamente relacionado con las sugerencias de recursos. Vamos a ver DNS prefetch, preconnect, preload y module preload. DNS prefetch le indica al navegador que realice el procedimiento de búsqueda DNS lo antes posible. Pre-connect incluye negociaciones TCP y TLS para ahorrar tiempo. Preload y module preload obtienen recursos descubiertos tarde, principalmente fuentes e imágenes. El atributo AS especifica el tipo de recurso e influye en la política de seguridad del contenido.

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.

4. Prefetching and Resource Hints

Short description:

Aquí está el soporte del navegador para el preload. El prefetching es diferente de otras sugerencias de recursos, ya que obtiene fuentes no críticas que pueden ser útiles en el futuro. Existen diferentes tipos de estrategias de prefetching, influenciadas por las acciones del usuario y los movimientos del mouse. Safari tiene algunos problemas con el prefetching, mientras que el prerenderizado puede ser el más rápido pero puede desperdiciar ancho de banda. Vue CLI y Vite tienen prefetching incorporado, pero la biblioteca unhead permite personalizar las sugerencias de recursos. Otra biblioteca, get.js, permite el prefetching predictivo basado en datos de Google Analytics. La optimización del rendimiento y las sugerencias de recursos mejoran el rendimiento del sitio web y la experiencia del usuario.

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!

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
React Advanced Conference 2023React Advanced Conference 2023
148 min
React Performance Debugging
Workshop
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)