Vue.js Parallel Fetching improves LCP and FCP

In the world of web development, fast-loading websites are non-negotiable. Two key performance metrics, Largest Contentful Paint (LCP) and First Contentful Paint (FCP), are vital for delivering great user experiences and optimizing search engine rankings. This article focuses on Vue.js, a popular JavaScript framework, and how you can use it to enhance LCP and FCP through parallel fetching of component files and images.

We’ll explore the importance of these metrics, understand async components in Vue.js, and tackle the challenges of traditional loading methods. By the end of this article, you’ll have the tools to implement parallel fetching, improving LCP and FCP in your Vue.js applications and delivering faster, more engaging user experiences. Let’s dive in!

Parallelizing Fetching for Optimal Speed

To illustrate the benefits of parallel fetching and how it can dramatically improve web performance, we’ve created an example application that you can explore here or view the GitHub repository.

One of the primary reasons for slow FCP is the sequential loading of component JavaScript files and data. By leveraging Vue.js and the beforeEnter hook, we can parallelize the fetching process. Let's break it down step by step:

1. Async Component Loading

In our example, we use the beforeEnter hook to fetch the product data asynchronously, as shown below:

beforeEnter: async (to, from, next) => {
  // Parallelize fetching of data and component
  fetchProductDataParallel(to);
  // Continue route navigation without waiting (it starts fetching the components files)
  next();
}

Here, fetchProductDataParallel is a function that optimizes parallel fetching. It allows the component JavaScript file and data fetching to happen in parallel, reducing the load time of your web page.

// where fetchProductDataParallel is
async function fetchProductDataParallel (to) {
  const response = await fetch(`https://dummyjson.com/products/${to.params.id}`)
  const product = await response.json()
  // wait for the root app to be created
  await store.state.rootAppCreatedPromise
  // start loading image early
  const image = new Image()
  image.src = product.images[0]
  // set the product to the VUEX
  store.commit('SET_PRODUCT_DATA', product)
}

This allows the component JavaScript file and data fetching to happen in parallel, reducing the load time of your web page.

2. Data-Driven Image Loading

Enhance the user experience and performance by loading images based on user interactions or screen position. Fetch the image URLs from your data and start loading them early, as demonstrated in the following code snippet:

const image = new Image();
image.src = product.images[0];

By loading images in parallel with other resources, you can prevent them from becoming bottlenecks in the loading process.

The Impact on Web Performance

Below is a screenshot of a conventional component that fetches data and resources sequentially. (You can measure the metrics here https://mkiselyow.github.io/performance-insights/#/slow-product/1 )

Here’s a screenshot of an optimized component that harnesses parallel fetching for data and resources, significantly improving web performance. https://mkiselyow.github.io/performance-insights/#/fast-product/1)

By implementing these strategies, you’ll witness a significant improvement in your website’s LCP and FCP metrics. The data, component, and image loading processes happen simultaneously, resulting in a faster and more responsive user experience.

Conclusion

Optimizing LCP and FCP is crucial for ensuring a great user experience and boosting your website’s SEO rankings. With Vue.js async route components and the parallelization of fetching component files, data, and images, you can achieve lightning-fast web performance. Implement these techniques, measure your results using performance testing tools, and watch your users’ satisfaction levels soar.

By following these best practices, you can maintain a performant web application that keeps your users engaged and coming back for more.