Why API integration matters in Vue - Performance Evidence

Performance: Why API integration matters

HIGH IMPACT

API integration affects page load speed and interaction responsiveness by controlling how and when data is fetched and rendered.

Fetching data from an API to display in a Vue component

Vue

<script setup>
import { ref, onMounted } from 'vue';
const items = ref([]);

onMounted(async () => {
  const response = await fetch('https://api.example.com/data');
  items.value = await response.json();
});
</script>

Using async onMounted fetches data after initial render, allowing faster LCP and smoother interaction.

📈 Performance GainNon-blocking fetch improves LCP by 30-50%; reduces input delay improving INP.

Fetching data from an API to display in a Vue component

Vue

export default {
  data() {
    return { items: [] };
  },
  created() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://api.example.com/data', false);
    xhr.send();
    this.items = JSON.parse(xhr.responseText);
  }
}

Fetching data synchronously in the created hook blocks rendering until data arrives, causing slower initial paint and possible UI freeze.

📉 Performance CostBlocks rendering for 200-500ms depending on network; delays LCP and increases INP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Synchronous XHR in created hook	Multiple updates after data arrives	Triggers 2-3 reflows	High paint cost due to blocking	[X] Bad
Asynchronous fetch in onMounted with ref	Single update after data arrives	Single reflow	Low paint cost, non-blocking	[OK] Good

Rendering Pipeline

API calls fetch data asynchronously, allowing the browser to render initial UI first. When data arrives, Vue updates the DOM efficiently without full reflows.

→Network

→JavaScript Execution

→Layout

→Paint

⚠️ BottleneckNetwork latency and blocking JavaScript during synchronous fetches

Core Web Vital Affected

LCP, INP

API integration affects page load speed and interaction responsiveness by controlling how and when data is fetched and rendered.

Optimization Tips

1Always fetch API data asynchronously after initial render to avoid blocking.

2Use Vue lifecycle hooks like onMounted for data fetching to improve LCP and INP.

3Cache API responses when possible to reduce network latency and re-renders.

Performance Quiz - 3 Questions

What is the main performance benefit of fetching API data asynchronously in Vue?

A It reduces the size of the API response.

B It allows the page to render initial content faster without waiting for data.

C It eliminates the need for JavaScript execution.

D It automatically caches data on the server.

DevTools: Performance

How to check: Record a performance profile while loading the page and interacting. Look for long tasks caused by fetch blocking and JavaScript execution.

What to look for: Check for long blocking times before first paint and multiple layout recalculations after data fetch.