Prefetch Strategies to Boost the Performance of Your Vue.JS App

Rate this content
Bookmark

This talk will cover the benefits of using prefetching to improve the performance of Vue.js applications. Attendees will learn about different prefetching strategies and best practices for optimising prefetching for different network conditions.

21 min
15 May, 2023

Video Summary and Transcription

Welcome to my Vue.js talk on prefetching strategies and boosting app performance. A crucial part of web performance is optimizing for the network. Caching and resource hints, such as DNS prefetch, preconnect, preload, and module preload, can improve website performance. Prefetching non-critical sources and using different strategies can enhance user experience. Libraries like unhead and get.js offer customization and predictive prefetching based on Google Analytics data.

1. Introduction to Vue.js Talk

Short description:

Welcome to my Vue.js talk on prefetching strategies and boosting app performance. I'm Aleksandr Gekuv, an ICT and software engineering student, and a software developer at Axion Biosystems. Performance matters because slow websites frustrate users, leading to abandonment and lower rankings. Studies show that a 32% increase in bounce rate occurs as page load time goes from 1 to 3 seconds. Pinterest experienced a 40% decrease in wait time and a 15% increase in SEO traffic and conversion rate by optimizing performance. Web performance is about making websites fast and responsive, enchanting and delighting users.

Welcome, everybody, to my Vue.js talk. My talk is called prefetching strategies and how to boost the performance of your Vue.js app.

So, a little bit more information about me. My name is Aleksandr Gekuv. I'm an ICT and software engineering student. I have also been working as a software developer at Axion Biosystems. I have about three years of professional experience. Originally, I'm from Sofia, Bulgaria, but currently I'm studying and working in Eindhoven. Recently, I've also started creating content about Vue. So you can check out my blog and my YouTube videos. And I'm also trying to be more active on Twitter. So you can say hi there as well.

So today we'll be talking about performance. Why does performance matter? Web performance and the network? How does the browser work, optimization techniques, some examples in Vue. I'll shortly mention a cool library called guestjs, and then some final thoughts. And let's start with why performance matters.

So people love fast websites. In today's fast-paced world where people have less and less great attention spans, it's really important that we as developers make our websites fast. One of the downsides is that slow websites frustrate users, and that may lead to users who are more likely to abandon these websites. And that can really hurt the business and also the SEO as well because when search engines see that a lot of people leave a website then these websites rank lower on the search results. There are 5 fundamental user needs that we need to account for. So the perfect websites are usually functional, reliable, usable, pleasurable, and last but not least, performant.

So a few studies in order to showcase why it's important. A famous research by Google proved that the probability of bounce increases 32% as page load time goes from 1 second to 3 seconds. So it directly impacts the end-users whether they see the content fast or not. Another research is by the Pinterest team. So they found out that rebuilding Pinterest pages for performance resulted in a 40% decrease in wait time, a 15% increase in SEO traffic and a 15% increase in conversion rate to sign up. So all this is very important. And if we need to give a definition to web performance, I would put it simply as making websites fast and responsive. If you need a more poetic answer to that question, I asked Chat GPT and it answered that web performance is the art of crafting a lightning fast masterpiece where developers dance with code to create a symphony of speed that enchants and delights.

2. Optimizing for the Network

Short description:

A crucial part of web performance is optimizing for the network. We already do a lot to optimize the network, but we also anticipate user actions. Browsers are single threaded and need to wait for tasks to finish. The first step is asking the DNS server for the IP address. The TCP handshake and TLS negotiation add more delays. We can optimize this with HTTP 2.0 multiplexing, CDNs, and caching.

A crucial part of web performance is optimizing for the network because essentially websites are files and these files need to get somehow through the network to us. A crucial aspect of web performance is minimizing this network latency and bandwidth because they play a significant role when talking about user experiments and website performance and responsiveness.

We already do a lot to optimize the network. For example, we compress our images, we minify our JS, we bundle everything together. We perform code splitting and we do lazy loading where possible. But we also do one more thing, and that's we anticipate. So we can anticipate what the user can do. And later on, I will show you some tips on how we can actually improve performance by anticipation. But before that, we need to understand how the browser works.

So browsers are single threaded by nature, just as JavaScript. And that means that when they have tasks, they complete them sequentially. So they need to wait a task to finish until they start the next one. And when we open the browser and put in something in the URL at the top, the first thing that the browser needs to do, because it does not remember which domain relates to which IP address, it needs to ask the DNS server for that. The DNS server basically acts as a map. So it has this data about which domain relates to which IP address. So we send those two requests and get an IP address back. The DNS server will also cache that, and for later use, we will also be able to use the cached version of that IP address so that it goes faster. But usually this process takes between 20 and 120 milliseconds. And it can be even slower on mobile networks. So that is the first step. And the next step is to actually have the TCP handshake. And if the website is secured, we also need to have the TLS negotiation. So the TCP handshake basically sends synchronized acknowledgements between the browser and the website. And basically what this means is that we have a lot more going back and forth requests until we actually can do something. So the total is that we make 8 around trips, and at the least 300 milliseconds before we are actually ready to do any kind of HTTP requests.

So there are multiple ways we can optimize this. One thing that is new is HTTP 2.0 multiplexing, which basically allows us to have multiple actions and tasks executed at once. Another thing is CDNs, content-maintained distribution networks, which basically help move the servers closer to the end user. And the last thing is caching, and it's directly related to resource hints, and we'll have a look at it right now.

3. Caching and Resource Hints

Short description:

And the last thing is caching, and it's directly related to resource hints. We'll look at DNS prefetch, preconnect, preload, and module preload. DNS prefetch tells the browser to do the DNS lookup procedure as soon as possible. Pre-connect includes TCP and TLS negotiations to save time. Preload and module preload fetch late discovered resources, mainly fonts and images. The AS attribute specifies the resource type and influences the content security policy.

And the last thing is caching, and it's directly related to resource hints, and we'll have a look at it right now. So the browser usually does a good job estimating on its own which resources are high priority and are critical in order to render the current page, but there are ways we can influence the browser's decision-making in order to improve the performance.

So resource hints are basically hints and instructions in which we can prioritize resources that need to be fetched before or at earlier, then the browser can actually see that it needs them. And we'll be looking over at DNS prefetch, preconnect, preload and module preload, prefetching and prerendering.

So DNS prefetch, you can see that all of the resource hints are implemented by the link HTML element. One thing to mention is that they can also be specified in the headers, but that is not supported in every browser and is less used. So you can see on the example, basically, as the name implies, with this one, we tell hey browser, can you please do the DNS lookup procedure as soon as possible so that when we actually go to that page, at least the first step is done and we know the IP address. Here is the browser support, it's pretty well supported.

And moving on, we have the pre-connect. So the pre-connect is similar to the DNS prefetch, but it also includes in itself the TCP and TLS, TCP handshake and TLS negotiations. It saves time by eliminating the around trip latency when doing this TCP and TLS connections. And one thing that we need to keep in mind is that we need to use it sparingly, because as you can see in the milliseconds, it does take some time. If we need something critical, then maybe we use Preconnect for that. But for other stuff, we can use DNS prefetch. We can also have a fallback. For whatever reason, if Preconnect doesn't work, we can also specify in the same attribute DNS prefetch and then the browser will know if the Preconnect doesn't work, it will default back to DNS prefetch, which is at least something and will help with the performance. So, moving on, here is the browser support.

And then we have the preload and module preload. So this is good for fetching late discovered resources needed for the current page view. And it's mainly used for fonts and images that are not coming from the document itself but are coming from the CSS or JavaScript. And that's why the browser finds them only when it passes through the JavaScript or CSS. But that can be a little bit too late. So if we know that we will use this, we can use the preload, or module preload, accordingly to actually fetch it in advance. And as you see here, there is this AS attribute. And that is also important because it specifies the type of the resource. The type of the resource can be many different things. So as I mentioned, most often fonts and images. And this is important because it influences the content security policy. So if we have some domain, we can specify that from this domain, we can expect only fonts or only a certain type of resource. And this can help with security.

4. Prefetching and Resource Hints

Short description:

Here is the browser support for the preload. Prefetching is different from other resource hints as it fetches non-critical sources that may be useful in the future. Different types of prefetching strategies exist, influenced by user actions and mouse movements. Safari has some issues with prefetching, while prerendering can be the fastest but may waste bandwidth. Vue CLI and Vite have built-in prefetching, but the unhead library allows for customizing resource hints. Another library, get.js, enables predictive prefetching based on Google Analytics data. Performance optimization and resource hints enhance website performance and user experience.

And here is the browser support for the preload. Next step we have prefetching. Prefetching is different from the other resource hints as it does not try to fetch something crucial for the current page. It instead tries to fetch non-critical sources that may come in handy in the future when the user decides to navigate to that page.

So here you can see, basically, we will load this next page CSS whenever the user goes to that page. And the browser automatically sets prefetching resources as low priority so that they don't influence the critical resources needed for the current page.

One thing to mention before we move on, there are also different types of prefetching, let's say, strategies. So it can be influenced by the user, and it can be influenced also by whether the mouse stays at some point near some link. Then the browser can also fetch that specific link. And one use case of this is, for example, if we're on a login page, while the user is typing their password in email, we can use this time and bandwidth to actually prefetch the necessary resources for the page that comes after the login, and that way once they click in the sign in, some of the resources will already be fetched and the experience will be faster.

Here is the browser support as well. As far as I've seen only Safari has some problems with prefetching, but otherwise it's pretty good. And next up we have prerender, which is the most expensive type of resource hint, because it renders a whole page in the background and if the user navigates to that page it will be the fastest, but one caveat is that it can unnecessarily waste bandwidth and make actually the experience slower, so you need to be very careful with prerender. Here is the browser support, and one thing that I want to mention, Chrome actually has this no state prefetch when we use prerender in that browser, because in order to minimize the memory, they've made it so that an initial renderer is initialized to loop over the resources and sub-resources and what it basically means is that when we use prerender in Chrome it actually acts more as a prefetch in order to save a bit of memory.

And the typical way we use these resource hints is that we put them in a link tag in our head, in our index.html or somewhere but you may be asking quite about Vue. So Vue CLI and Vite have some sort of prefetching automatically for chunks that are code splitted by them. But another way we can actually influence and do our own stuff is with a cool library I found which is by unifiedjs team and it's called unhead. It was made by Harlan Wilton, he's also a prominent vue open source contributor. And basically this lets us use a composable use head which we can then later specify links, meta tags and whatever else we want to have in our head tag. So we can just install it and then I'll show you now how we can actually use it. So if we go into VS Code, here I have a simple vue application and as you can see I have like two pages and here I've already installed it. And I'm using head so we can basically specify a title and we can also specify links. So here we have already specified that we have a link to my blog that we want to prefetch. And if we go to the website here you can see it if I just refresh. And here you can see that it actually prefetches it and it has the lowest priority. That means that whenever if there is a link to that page and we navigate to it, it will load faster. One way I can also show this is by going to elements and you can see here in the head it has injected it correctly so it's prefetched and then whatever resource that we have. So that's where one way we can influence it. Going back there is also another library that I wanted to mention and that is get.js it was made by the Angular team and essentially what we've been doing now is speculative prefetching so based on our own intuition we decide which resources to prefetch but a better way would be to use predictive prefetching. Predictive prefetching is based on data so it's data driven and we get that data from Google Analytics. Based on Google Analytics and the user's behavior when clicking links the way it works is it makes a Markov chain and Markov chain is basically simply a model which has the probability between going from one state to another but what that means for the user is that we, based on the data that we have, can actually conditionally prefetch whatever is most likely the user to go to. As far as I know there is a next module for guest.js but it also, I think it needs webpack, I'm not really sure and I haven't really gone that deep but you can also do your own research and I would love to hear what you, if you already have experience with this library Enview.

Final thoughts in conclusion, performance is a critical factor for the success of any web app and nowadays users have high expectations and they will not tolerate slow and sluggish applications. So by using performance optimization techniques, minimizing the network latency and bandwidth and using these resource hints, so predictive prefetching, we can improve the perceived performance of our website and give the user what they need and also a better user experience.

Thanks for listening, I'll be I think in Discord waiting for your questions and meanwhile you can also find me on Twitter, you can check out my blog on dev.to and you can also follow me on YouTube for more videos about Vue and Frontend.

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 🤐)