Technical SEO

DNS Prefetch

Chỉ thị `<link rel="dns-prefetch">` để trình duyệt tra cứu DNS cho miền bên ngoài trước khi cần.

4 lượt xem Cập nhật: 01/06/2026

DNS Prefetch là gì?

DNS Prefetch là một kỹ thuật tối ưu hiệu năng web, cho phép trình duyệt tra trước địa chỉ IP của các miền bên ngoài (như CDN, analytics, font, API) ngay khi tải trang — trước khi thực sự cần kết nối đến chúng. Nó được kích hoạt bằng thẻ HTML <link rel="dns-prefetch" href="//example.com"> đặt trong phần <head> của trang.

Khác với preconnect hay prefetch, DNS Prefetch chỉ thực hiện bước đầu tiên trong chuỗi kết nối: phân giải tên miền thành địa chỉ IP (DNS lookup). Nó không mở kết nối TCP, không gửi yêu cầu HTTP và không tải dữ liệu.

Tại sao quan trọng trong SEO?

Google và các công cụ tìm kiếm ngày càng coi trọng trải nghiệm người dùng (UX) như một yếu tố xếp hạng trực tiếp. Trong đó, tốc độ tải trang — đặc biệt là Time to First Byte (TTFB) và Largest Contentful Paint (LCP) — ảnh hưởng rõ rệt đến thứ hạng trên thiết bị di động và máy tính.

Mỗi lần trình duyệt cần gọi tài nguyên từ miền mới (ví dụ: fonts.googleapis.com, analytics.google.com), nó phải chờ từ 20–120ms để hoàn tất DNS lookup — tùy vào mạng và bộ nhớ đệm DNS. Với nhiều miền bên ngoài, độ trễ tích lũy có thể lên tới vài trăm mili giây. DNS Prefetch giúp loại bỏ phần trễ này bằng cách thực hiện tra cứu song song với việc tải HTML/CSS/JS — giảm thời gian tổng thể để hiển thị nội dung.

Lưu ý: DNS Prefetch không cải thiện điểm Core Web Vitals trực tiếp, nhưng hỗ trợ gián tiếp bằng cách đẩy nhanh các bước phụ trợ, giúp các chỉ số như LCP hoặc CLS ổn định hơn — đặc biệt trên mạng 3G hoặc thiết bị thấp cấp.

Cách hoạt động

Khi trình duyệt gặp thẻ <link rel="dns-prefetch" href="//cdn.example.com">, nó sẽ:

  1. Thêm tên miền cdn.example.com vào hàng đợi DNS lookup;
  2. Thực hiện tra cứu ngay nếu tài nguyên chưa được phân giải và trình duyệt còn băng thông rảnh;
  3. Lưu kết quả vào bộ nhớ đệm DNS nội bộ (trong phạm vi phiên duyệt);
  4. Khi sau đó trang cần tải ảnh/tệp từ cdn.example.com, trình duyệt bỏ qua bước DNS lookup — chuyển thẳng sang kết nối TCP.

Quá trình này không chặn render, không làm chậm tải trang chính, và không tiêu tốn băng thông. Nó cũng tuân thủ cùng chính sách bảo mật (CSP) và không vi phạm Same-Origin Policy.

Hướng dẫn thực hiện

Dưới đây là các bước triển khai DNS Prefetch đúng cách:

  1. Xác định các miền bên ngoài thường dùng: Dùng DevTools → tab Network, lọc theo Domain, liệt kê các miền xuất hiện nhiều nhất (ví dụ: www.googletagmanager.com, fonts.gstatic.com, stats.g.doubleclick.net).
  2. Chỉ prefetch miền thực sự cần: Không thêm miền không dùng trên trang — vì mỗi yêu cầu DNS vẫn tốn CPU nhẹ và có thể gây xung đột nếu quá nhiều.
  3. Đặt thẻ trong <head>, trước bất kỳ thẻ nào gọi tài nguyên từ miền đó (ví dụ: trước <link rel="stylesheet" href="https://fonts.googleapis.com/css2...">).
  4. Sử dụng giao thức tương đối: Dùng //domain.com thay vì https://domain.com để tránh cảnh báo hỗn hợp (mixed content) trên HTTP.
  5. Kiểm tra hiệu quả: Sau khi triển khai, dùng DevTools → tab Network → bật cột Protocol và Connection ID. Nếu thấy DNS lookup biến mất hoặc giảm đáng kể cho miền đã khai báo, chứng tỏ prefetch đang hoạt động.

Lỗi thường gặp

  • Thêm DNS Prefetch cho miền không dùng trên trang: Gây lãng phí tài nguyên xử lý và có thể làm chậm khởi tạo kết nối thật do giới hạn đồng thời (thường là 6 kết nối mỗi miền). Cách khắc phục: Kiểm tra lại danh sách miền qua công cụ phân tích tải trang (ví dụ: WebPageTest hoặc Lighthouse).
  • Dùng https:// thay vì // trong href: Có thể gây lỗi trên trang HTTP hoặc khiến trình duyệt bỏ qua thẻ. Cách khắc phục: Luôn dùng dạng giao thức tương đối: href="//fonts.gstatic.com".
  • Thiếu thuộc tính href hoặc giá trị sai định dạng: Thẻ sẽ bị bỏ qua. Giá trị href phải bắt đầu bằng // hoặc http:///https://, và không chứa đường dẫn con (ví dụ: //api.example.com/path là sai — chỉ được //api.example.com).
  • Triển khai trên miền bị chặn bởi CSP hoặc tường lửa: Một số môi trường doanh nghiệp hoặc extension chặn DNS lookup tự động. Kết quả: Không lỗi hiển thị, nhưng prefetch không chạy. Cách kiểm tra: Xem console hoặc dùng lệnh chrome://net-internals/#dns (Chrome).

Ví dụ thực tế

Dưới đây là đoạn <head> mẫu áp dụng DNS Prefetch cho một trang blog sử dụng Google Fonts, Google Analytics và CDN ảnh:

<head>
  <!-- Các thẻ meta, title... -->
  <link rel="dns-prefetch" href="//fonts.gstatic.com">
  <link rel="dns-prefetch" href="//www.google-analytics.com">
  <link rel="dns-prefetch" href="//cdn.example-images.com">
  <link rel="dns-prefetch" href="//www.googletagmanager.com">
  
  <!-- Các tài nguyên thực sự dùng -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter">
  <script async src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX"></script>
</head>

Trong ví dụ trên, trình duyệt sẽ tra trước DNS cho 4 miền — giúp tiết kiệm trung bình 60–100ms mỗi miền khi tải font, script hoặc ảnh.

Câu hỏi thường gặp

DNS Prefetch có ảnh hưởng đến SEO trên mobile không?

Có. Trên mạng di động (đặc biệt 3G/4G chậm), độ trễ DNS cao hơn đáng kể so với WiFi/mạng cáp. Việc prefetch giúp giảm thời gian chờ trước khi tải tài nguyên — hỗ trợ cải thiện LCP và TTI (Time to Interactive), hai chỉ số quan trọng trong đánh giá trải nghiệm người dùng của Google.

Có nên dùng DNS Prefetch cho mọi miền bên ngoài?

Không. Chỉ nên dùng cho các miền được gọi trong vòng 1–2 giây đầu sau khi tải trang. Các miền dùng muộn (ví dụ: lazy-load ảnh ở cuối trang, script kích hoạt khi scroll) không cần prefetch — vì kết quả DNS có thể hết hạn trước lúc dùng. Bộ nhớ đệm DNS nội bộ của trình duyệt thường tồn tại từ 1–10 phút, tùy trình duyệt và cấu hình hệ thống.

DNS Prefetch khác gì so với preconnect?

DNS Prefetch chỉ thực hiện bước phân giải tên miền. Preconnect (với rel="preconnect") tiến xa hơn: vừa tra DNS, vừa mở kết nối TCP và bắt tay TLS (nếu HTTPS). Preconnect tốn nhiều tài nguyên hơn và chỉ nên dùng cho tối đa 2–3 miền ưu tiên cao nhất. Bảng so sánh dưới đây làm rõ sự khác biệt:

Tính năng DNS Prefetch Preconnect
Phạm vi hành động Chỉ DNS lookup DNS + TCP handshake + TLS negotiation (nếu HTTPS)
Tài nguyên tiêu tốn Rất nhẹ Cao hơn, có thể gây cạnh tranh kết nối
Số lượng khuyến nghị 5–10 miền 1–3 miền
Hỗ trợ trình duyệt Chrome, Firefox, Safari, Edge (từ 2013) Chrome, Firefox, Edge (từ 2016); Safari hỗ trợ từ v14.1