Kết nối

Tăng tốc website bằng DNS Prefetch

49 lượt xem 
 
Thể loại: SEO, Thiết kế Web 

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.

DNS cần mất khoảng thời gian để dàn xếp và tìm địa chỉ IP cho các domain như trong hình.
<!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.

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 ý.

<!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.

Bình luận Facebook

Để lại bình luận

avatar
1000
  Theo dõi  
Thông báo của