Technical SEO

DNS Prefetching

Resource hint yêu cầu trình duyệt giải quyết tên miền trước khi tài nguyên từ miền đó được yêu cầu.

4 lượt xem Cập nhật: 30/05/2026

DNS Prefetching là gì?

DNS Prefetching là một kỹ thuật resource hint trong HTML, giúp trình duyệt giải quyết (resolve) tên miền thành địa chỉ IP trước khi tài nguyên từ miền đó thực sự được tải. Đây là bước đầu tiên trong chuỗi kết nối mạng — nếu không có DNS prefetch, trình duyệt phải chờ phản hồi từ máy chủ DNS mỗi khi cần truy cập một miền mới, gây chậm tải trang.

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 — đặc biệt là tốc độ tải trang trên cả thiết bị di động và máy tính. DNS Prefetching góp phần giảm thời gian chờ DNS lookup, từ đó rút ngắn tổng thời gian tải (Time to First Byte, Largest Contentful Paint), cải thiện Core Web Vitals. Một trang tải nhanh hơn thường có tỷ lệ thoát thấp hơn, thời gian ở lại cao hơn và khả năng xếp hạng tốt hơn — nhất là với các trang phụ thuộc vào tài nguyên bên ngoài như CDN, analytics, font, hoặc API.

Lưu ý: DNS Prefetching không ảnh hưởng trực tiếp đến thứ hạng, nhưng là yếu tố hỗ trợ gián tiếp thông qua cải thiện hiệu suất — yếu tố nằm trong nhóm Page Experience Signals của Google.

Cách hoạt động

Khi trình duyệt gặp thẻ <link rel="dns-prefetch" href="//cdn.example.com"> trong phần <head>, nó sẽ bắt đầu quá trình DNS resolution cho miền cdn.example.com ngay lập tức — song song với việc tải HTML, CSS, JS hiện tại. Quá trình này diễn ra nền, không chặn render, không tiêu tốn băng thông, và không gửi yêu cầu HTTP nào đến miền đích.

Chỉ khi trình duyệt sau đó thực sự cần tải tài nguyên từ miền đã prefetch (ví dụ: hình ảnh từ cdn.example.com), nó sẽ sử dụng kết quả DNS đã lưu trong bộ nhớ tạm — tránh chờ thêm 20–120ms (tùy mạng và vị trí người dùng).

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

  1. Xác định các miền bên ngoài: Dùng DevTools → tab Network, lọc theo Domain để liệt kê tất cả miền xuất hiện trong URL tài nguyên (CDN, font, analytics, ad network, social widget…).
  2. Ưu tiên chỉ những miền thực sự cần: Chỉ prefetch các miền sẽ được dùng trong vòng vài giây tới (trên trang hiện tại hoặc trang tiếp theo). Không prefetch miền ít dùng hoặc chỉ xuất hiện sau tương tác (ví dụ: popup đăng nhập).
  3. Thêm thẻ vào <head>: Đặt trong phần <head> của HTML, trước bất kỳ tài nguyên nào tham chiếu đến miền đó. 
    <link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//cdn.myshop.com">
  4. Không dùng cho miền chính: Trình duyệt tự động xử lý DNS cho miền gốc (ví dụ: https://example.com) — không cần prefetch.
  5. Kiểm tra hiệu quả: Dùng DevTools → tab Network → cột Timing. So sánh thời gian DNS Lookup giữa lần đầu và lần sau khi tải cùng tài nguyên.

Lỗi thường gặp

  • Prefetch quá nhiều miền: Gây lãng phí tài nguyên CPU và bộ nhớ DNS cache. Giải pháp: Giới hạn tối đa 3–5 miền ưu tiên, loại bỏ miền không liên quan đến trải nghiệm ban đầu.
  • Dùng href sai định dạng: Viết href="https://fonts.googleapis.com" thay vì href="//fonts.googleapis.com" — trình duyệt có thể bỏ qua hoặc báo lỗi. Luôn dùng // (protocol-relative) hoặc https:// rõ ràng, nhưng không kèm đường dẫn (chỉ tên miền).
  • Đặt sai vị trí: Đặt thẻ sau <script> chặn render hoặc trong <body> — hiệu quả giảm mạnh. Luôn đặt trong <head>, sớm nhất có thể.
  • Confict với preconnect: Nếu đã dùng rel="preconnect" cho cùng miền, dns-prefetch là thừa — vì preconnect bao gồm cả DNS lookup + TCP handshake + TLS negotiation. Ưu tiên preconnect cho miền quan trọng nhất.

Ví dụ thực tế

Một trang thương mại điện tử sử dụng:

  • Font từ fonts.googleapis.com
  • Hình ảnh sản phẩm từ cdn.shopimages.vn
  • Phân tích hành vi từ analytics.mydata.net

HTML hợp lý:

<head>
  <!-- Các thẻ khác -->
  <link rel="dns-prefetch" href="//fonts.googleapis.com">
  <link rel="dns-prefetch" href="//cdn.shopimages.vn">
  <link rel="dns-prefetch" href="//analytics.mydata.net">
</head>

Kết quả đo được trên mạng 3G (theo WebPageTest): Thời gian DNS lookup cho cdn.shopimages.vn giảm từ 98ms xuống còn 2ms ở lần tải thứ hai — góp phần giảm LCP từ 3.4s xuống 2.7s.

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

DNS Prefetching có làm chậm trang không?

Không. Việc giải quyết DNS diễn ra nền, không chặn render hay thực thi JavaScript. Nó chỉ tiêu tốn một lượng rất nhỏ CPU và băng thông DNS — không đáng kể so với lợi ích về tốc độ tải sau đó.

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

Không. Chỉ nên dùng cho các miền chắc chắn sẽ được gọi trong vòng vài giây đầu tiên. Prefetch miền không dùng gây lãng phí — đặc biệt trên thiết bị di động với pin và dữ liệu giới hạn. Tỷ lệ hiệu quả giảm rõ rệt nếu vượt quá 5 miền.

DNS Prefetching có tương thích với tất cả trình duyệt?

Hỗ trợ rộng rãi trên Chrome, Firefox, Safari (từ phiên bản 11.1), Edge. Không hỗ trợ trên Internet Explorer. Với các trình duyệt cũ hơn, thẻ sẽ bị bỏ qua — không gây lỗi. Tính năng này là an toàn để triển khai trên mọi website hiện đại.

Tính năng DNS Prefetching Preconnect Prefetch (resource)
Mục đích Giải quyết DNS trước Thiết lập kết nối TCP + TLS trước Tải và lưu trữ tài nguyên (JS/CSS) trước
Băng thông tiêu thụ Không Không (chưa tải dữ liệu) Có — tải toàn bộ file
Thời điểm áp dụng Sớm nhất có thể (trong <head>) Sớm nhất có thể (trong <head>) Khi trình duyệt rảnh (sau khi render)
Ưu tiên sử dụng Miền chưa biết, ít dùng Miền chính, CDN, analytics — dùng thường xuyên Tài nguyên chắc chắn sẽ dùng (ví dụ: trang tiếp theo)