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

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.

Rate this content
Bookmark
Video Summary and Transcription
In this video, the focus is on optimizing the performance of Vue.js applications through various prefetching strategies. Prefetching is a technique where non-critical resources are fetched in advance to improve load times for future pages. Vue prefetch is highlighted as a built-in feature in Vue CLI and Vite, allowing developers to enhance app performance effectively. Nuxt 3 minify is mentioned as a way to reduce JavaScript size, further enhancing performance. Vue JS performance is essential, as slow websites can lead to higher bounce rates and lower SEO rankings. The talk also explores predictive prefetching, which uses Google Analytics data to anticipate user needs, and the role of the Unhead library in Vue.js, which helps manage resource hints for better performance. The importance of web performance is emphasized, showcasing how techniques like DNS prefetch, preconnect, and module preload can significantly improve Vue performance.

FAQ

Aleksandr Gekuv is an ICT and software engineering student who works as a software developer at Axion Biosystems. He has about three years of professional experience and is originally from Sofia, Bulgaria, but currently studying and working in Eindhoven.

The topic of Aleksandr Gekuv's talk is prefetching strategies and how to boost the performance of Vue.js apps.

Web performance is crucial because slow websites frustrate users, leading them to abandon the site, which can hurt business and SEO rankings. Fast websites meet user needs and improve user experience, search engine rankings, and conversion rates.

The five fundamental user needs for a perfect website are functionality, reliability, usability, pleasure, and performance.

When a browser needs to find the IP address for a domain, it queries the DNS server, which acts as a map to match domains with IP addresses. This process usually takes between 20 and 120 milliseconds and can be slower on mobile networks.

The 'unhead' library, created by Harlan Wilton, allows developers to use a composable 'useHead' to specify links, meta tags, and other elements in the head tag of a Vue.js application, aiding in prefetching and other optimizations.

Web performance refers to making websites fast and responsive. It involves optimizing various aspects such as network latency and bandwidth to improve user experience.

Techniques for optimizing network performance include compressing images, minifying JavaScript, bundling resources, code splitting, lazy loading, and using resource hints like DNS prefetch, preconnect, preload, and prerender.

Prefetching is a technique where non-critical resources for future pages are fetched in advance, improving load times when the user navigates to those pages. It is set as low priority to avoid interfering with critical resources for the current page.

Predictive prefetching is a data-driven approach where future resources are prefetched based on user behavior data, typically obtained from Google Analytics. It uses a Markov chain model to predict and fetch the most likely resources the user will need.

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.

Aleksandar Gekov
Aleksandar Gekov
21 min
15 May, 2023

Comments

Sign in or register to post your comment.

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

A Guide to React Rendering Behavior
React Advanced 2022React Advanced 2022
25 min
A Guide to React Rendering Behavior
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
One Year Into Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
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 🤐)
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetsov
Mikhail Kuznetsov
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
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
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.
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- 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
Monitoring 101 for React Developers
React Summit US 2023React Summit US 2023
107 min
Monitoring 101 for React Developers
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project. 
Workshop level: Intermediate
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
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
Daniel Roe
Daniel Roe
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.