If your app doesn't have rich interactivity requirements, you can also use a traditional backend server to render the HTML and enhance it with Vue on the client. Check out the SSR Guide to learn about performing SSR with Vue. This can be mitigated with Server-Side Rendering (SSR) or Static Site Generation (SSG). Pure client-side rendering suffers from slow time-to-content.

You want your server to be directly sending HTML containing the content the users want to see. If your use case is sensitive to page load performance, avoid shipping it as a pure client-side SPA. Here, we will primarily focus on techniques that are specific to Vue. There are many framework-agnostic aspects for optimizing page load performance - check out this web.dev guide for a comprehensive round up.

Vue DevTools Extension also provides a performance profiling feature.

enables Vue-specific performance markers in Chrome DevTools' performance timeline.

There are a number of great tools that can help in this regard:įor profiling load performance of production deployments:įor profiling performance during local development: To improve performance, we need to first know how to measure it. Jason Miller discusses the types of web applications and their respective ideal implementation / delivery in Application Holotypes. Therefore, the first step of ensuring optimal performance is picking the right architecture for the type of application you are building:Ĭonsult Ways of Using Vue to see how you can leverage Vue in different ways. In addition, the type of application you are building greatly influences what you should prioritize in terms of performance.

While it would be ideal to maximize both, different frontend architectures tend to affect how easy it is to attain desired performance in these aspects. For example, how fast a list updates when the user types in a search box, or how fast the page switches when the user clicks a navigation link in a Single-Page Application (SPA). Update Performance: how fast the application updates in response to user input. This is usually measured using web vital metrics like Largest Contentful Paint (LCP) and First Input Delay (FID). Page Load Performance: how fast the application shows content and becomes interactive on the initial visit. In this section, we will discuss what you should pay attention to when it comes to performance in a Vue application.įirst, let's discuss the two major aspects of web performance:

However, there are always challenging scenarios where extra fine-tuning is needed. Vue is designed to be performant for most common use cases without much need for manual optimizations.

Reduce async javascript