How to Use dns-prefetch for External APIs

March 21, 2026at 2:00 PM UTCBy Pocket Portfolio TeamPerformance Optimization

#api#fetch#dns#prefetch#web performance

Problem

When a web application makes requests to external APIs, DNS resolution can introduce latency. Each time the browser needs to resolve a domain name, it can delay the request by tens to hundreds of milliseconds, depending on the user's network conditions. This latency can lead to a noticeable delay in fetching data from APIs, impacting the user experience.

Solution with Code

To mitigate DNS resolution latency, you can use dns-prefetch. This technique allows the browser to resolve domain names ahead of time, especially for external resources that your application will likely access. Here's how to implement dns-prefetch for external APIs:

Step-by-step Guide

Identify the External API Domains: Determine the external domains your application frequently accesses. These will typically be the base URLs for your APIs.
Implement dns-prefetch: In the <head> section of your HTML, add <link> elements with the rel="dns-prefetch" attribute for each external domain.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Application</title>
  <!-- DNS Prefetch -->
  <link rel="dns-prefetch" href="//api.example.com">
  <link rel="dns-prefetch" href="//cdn.example.com">
</head>
<body>
  <!-- Your application code -->
</body>
</html>

Verify the Implementation: Use browser developer tools to monitor network activity. Ensure that DNS lookups for the specified domains occur early in the page load process.

Key Concepts

DNS Resolution: When a browser accesses a domain, it must resolve the domain name to an IP address. This process is called DNS resolution and can introduce delays.
dns-prefetch: A hint to the browser to resolve domain names before they are needed. This is particularly beneficial for external resources, such as APIs, that your application will use shortly after the page loads.
Performance Optimization: By prefetching DNS, you reduce the time taken for initial API requests, resulting in a faster, more responsive user experience.

Implementing dns-prefetch is a simple yet effective way to enhance the performance of web applications that rely on external APIs. By anticipating network requests, you can significantly reduce the time users spend waiting for content to load.