Prefetch Strategies to Boost the Performance of Your Vue.JS App
From Author:
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.
This talk has been presented at Vue.js London 2023, check out the latest edition of this JavaScript Conference.
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.
Web performance refers to making websites fast and responsive. It involves optimizing various aspects such as network latency and bandwidth to improve user experience.
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.
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.
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.
Video Transcription
1. Introduction to Vue.js Talk
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
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.
Comments