DNS Prefetch (tạm dịch là nạp trước DNS) là một kỹ thuật phân giải địa chỉ IP trước cho các tên miền web, được dùng để tăng tốc cho website.
<!DOCTYPE html> <html> <head> <meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="https://maxcdn.bootstrapcdn.com/"> </head> <body> <p>Nội dung trang web --- dammio.com</p> </body> </html>
Trong ví dụ trên, chúng ta sử dụng rel=dns-prefetch gợi ý một trình duyệt nên phân giải DNS của một tên miền nào đó trước khi truy cập lấy thông tin dữ liệu từ tên miền đó.
Mục đích của DNS Prefetch
Mục đích chính của DNS Prefetch là để tăng tốc độ trang web tải về nội dung khi trang này sử dụng nhiều tài nguyên dữ liệu từ các tên miền (domain) khác nhau. Do đó, thời gian tìm kiếm địa chỉ IP của các tên miền được rút ngắn giúp giảm thời gian tải trang web tổng thể.
Theo W3 định nghĩa thì:
“Dạng quan hệ liên kết dns-prefetch được dùng để chỉ ra một liên kết gốc được dùng để tìm nạp các nguồn tài nguyên yêu cầu, và User Agent nên phân giải càng sớm nếu có thể.”
Dùng DNS Prefetch ở đâu?
DNS Prefetch nên được khai báo ở phần đầu của trang web nằm trong phần tử head. Bạn có thể khai báo bao nhiêu dns-prefetch tùy ý. Thẻ meta http-equiv=”x-dns-prefetch-control” content=”on” dùng để khai báo chế độ kiểm soát dns prefetch, bạn có thể bật on/off ở thuộc tính content nếu muốn tắt mở dns-prefetch.
<!DOCTYPE html> <html> <head> <meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="//maxcdn.bootstrapcdn.com/"> <link rel="dns-prefetch" href="//www.google-analytics.com" /> <link rel="dns-prefetch" href="//www.facebook.com" /> <link rel="dns-prefetch" href="//ajax.googleapis.com" /> </head> <body> <p>Nội dung trang web --- dammio.com</p> </body> </html>
Trong ví dụ trên, bạn có thể thấy href=”//maxcdn.bootstrapcdn.com”, tức là đường dẫn chỉ cần chứa cụm từ “maxcdn.bootstrapcdn.com”, còn bắt đầu bằng http hay https đều được.
DNS Prefetch hữu ích khi nào?
Nếu website của bạn sử dụng hàng tá tập tin *.js từ CDN (Content Delivery Network – mạng vận chuyển nội dung) bên ngoài domain website hay bạn có nhiều tài nguyên (hình ảnh, tập tin, adsense, công cụ seo, bot,…) gọi từ các website khác thì chắc chắn DNS Prefetch sẽ rất hữu ích.
Ví dụ nếu bạn có 2 đường dẫn lấy tập tin jquery.min.js và bootstrap.min.js ở website khác thì nên dùng DNS Prefetch.
<html> <head> <meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="//ajax.googleapis.com" /> <link rel="dns-prefetch" href="//maxcdn.bootstrapcdn.com" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <p>Nội dung trang web --- dammio.com</p> </body> </html>
DNS Prefetch không nên dùng khi nào?
Nếu tài nguyên trên trang web của bạn đều nằm trên website của chính bạn thì nói chung DNS Prefetch sẽ chẳng có tác dụng gì để tăng tốc website trong trường hợp này. Đó là chưa kể đôi khi DNS Prefetch làm giảm hiệu suất tải của website vì đơn giản là DNS đã phân giải lần đầu khi người dùng truy cập website, bạn sử dụng DNS Prefetch thêm lần nữa thì chắc DNS phải phân giải lần nữa. Khi đó, chắc chắc thời gian website tải về người dùng sẽ lâu hơn.
Kết luận
DNS Prefetch giúp bạn tăng hiệu suất tải trang nếu trang web của bạn sử dụng tài nguyên từ nhiều website khác nhau. Đây là cách chúng tôi khuyên bạn nên dùng để tối ưu hóa tốc độ tải trang.
- APA:
Dammio. (2018). Tăng tốc website bằng DNS Prefetch. https://www.dammio.com/2018/11/26/tang-toc-website-bang-dns-prefetch. - BibTeX:
@misc{dammio,
author = {Dammio},
title = {Tăng tốc website bằng DNS Prefetch},
year = {2018},
url = {https://www.dammio.com/2018/11/26/tang-toc-website-bang-dns-prefetch},
urldate = {2025-01-23}
}
![[Bootstrap] Phần 13: Phân trang](https://www.dammio.com/wp-content/uploads/2016/11/no-image-410x260.png "[Bootstrap] Phần 13: Phân trang")
![[JQuery] Phần 6: Lấy nội dung và các thuộc tính trong jQuery](https://www.dammio.com/wp-content/uploads/2017/04/jQuery_text_html-410x260.png "[JQuery] Phần 6: Lấy nội dung và các thuộc tính trong jQuery")
![[AngularJS] Phần 19: API trong AngularJS](https://www.dammio.com/wp-content/uploads/2017/01/banner-angularjs-410x260.jpg "[AngularJS] Phần 19: API trong AngularJS")
![[Node.js] Phần 7: Node.js NPM](https://www.dammio.com/wp-content/uploads/2017/06/Node.js_logo.svg_-410x260.png "[Node.js] Phần 7: Node.js NPM"){kind=logo}
Đã dùng cái này, khó mà thấy hiệu quả, có lẽ chỉ tốt cho website lớn, site nhỏ tiết kiệm vài chục ms cũng chả bỏ 🙂
Dạng này có thể dùng cho bất cứ link out, để tăng tốc page cũng đc
theo tôi thì nên để link out có thêm thuộc tính này, nó giúp cho loading page nhanh hơn và phù hợp với gg (trên developers.google.com cũng khuyên nên dùng)
cũng là một cách tăng tốc, cảm ơn bạn
[…] DNS Prefetch (nạp trước DNS) là một kỹ thuật tối ưu hóa hiệu suất web được sử dụng để giảm độ trễ trong việc tìm kiếm DNS (Domain Name System) và tăng tốc độ tải trang web. Kỹ thuật này là một tính năng tích hợp vào các trình duyệt web để tiền đoán và giải quyết trước các truy vấn DNS cho tên miền có thể cần trong tương lai gần, chẳng hạn khi người dùng nhấp vào một liên kết hoặc truy cập một tài nguyên trên trang web. Mời các bạn xem thêm bài viết Tăng… Đọc tiếp »