So sánh các kỹ thuật tối ưu: DNS Preload, DNS Prefetch, DNS Prerender và DNS Preconnect

Khi xây dựng website, chắc hẳn bạn đã nghe hoặc thấy đâu đó về các cụm từ DNS Preload, DNS Prefetch, DNS Prerender và DNS Preconnect dùng để tối ưu hiệu suất khi duyệt web bằng cách giảm độ trễ trong việc tìm kiếm DNS (Domain Name System) và thiết lập kết nối. Bài viết sẽ nêu khái niệm các kỹ thuật tối ưu này, ưu điểm của chúng cũng như lúc nào nên sử dụng, lúc này không nên sử dụng trong website của bạn.

DNS-Prefetch

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 tốc website bằng DNS Prefetch.

Mục tiêu: Giảm thời gian tải trang web bằng cách tiền đoán và giải quyết trước các tên miền DNS mà trang web có thể cần trong tương lai gần.
Mục đích: Tự động xác định và giải quyết trước các tên miền DNS liên quan đến các liên kết và tài nguyên trên trang web hiện tại, giúp giảm độ trễ khi người dùng truy cập các tài nguyên này.

Cách hoạt động của DNS Prefetch:

Phân tích: Khi người dùng truy cập một trang web, trình duyệt tự động phân tích mã HTML và CSS của trang để xác định liên kết, script và các tài nguyên khác có thể cần.
Nạp trước: Trình duyệt sử dụng thuật toán để nạp trước tên miền DNS có thể sẽ được truy cập trong tương lai gần, chẳng hạn khi người dùng nhấp vào liên kết hoặc truy cập tài nguyên trên trang.v
Nạp trước DNS: Sau khi xác định tên miền này, trình duyệt giải quyết và lưu vào bộ đệm các truy vấn DNS tương ứng trước khi chúng thực sự được yêu cầu.

Kết quả là khi người dùng nhấp vào liên kết hoặc truy cập tài nguyên cần truy vấn DNS, trình duyệt có thể truy xuất bản ghi DNS từ bộ đệm của mình thay vì thực hiện một truy vấn DNS thời gian thực. Điều này dẫn đến tải trang nhanh hơn và giảm độ trễ cho người dùng.

Ví dụ DNS-Prefetch, cho phép nạp trước DNS của trang dammio.com.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DNS Prefetch -- dammio.com</title>

    <!-- Nạp trước DNS của trang dammio.com -->
    <link rel="dns-prefetch" href="https://www.dammio.com">
</head>
<body>
    <p>DNS Prefetch -- dammio.com</p>
    <a href="https://www.dammio.com">Visit Google</a>
</body>
</html>

DNS-Preconnect

DNS Preconnect (Kết nối trước) 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 thiết lập kết nối với máy chủ từ xa bằng cách tiền kết nối đến máy chủ, bao gồm cả việc giải quyết DNS và thiết lập TCP handshake trước khi thực sự yêu cầu tài nguyên từ máy chủ đó.

Mục tiêu: Giảm độ trễ trong việc thiết lập kết nối với máy chủ từ xa bằng cách tiền kết nối đến máy chủ, bao gồm cả việc giải quyết DNS và thiết lập TCP handshake.
Mục đích: Chuẩn bị trình duyệt để thiết lập kết nối nhanh chóng khi người dùng yêu cầu tài nguyên từ máy chủ từ xa, giảm thời gian chờ đợi.

Cách hoạt động của DNS Preconnect bao gồm các bước sau:

Dự đoán: Trình duyệt hoặc các phần mềm tối ưu hóa hiệu suất tiền đoán tài nguyên cụ thể mà trang web có thể cần truy cập trong tương lai gần.
Tiền kết nối: Dựa vào dự đoán, trình duyệt tiền kết nối đến máy chủ từ xa trước khi người dùng thực sự yêu cầu tài nguyên. Quá trình tiền kết nối bao gồm cả việc giải quyết DNS (để xác định địa chỉ IP của máy chủ) và thiết lập TCP handshake (để bắt đầu kết nối mạng an toàn) trước khi tài nguyên cần được truy cập.
Sẵn sàng kết nối: Khi người dùng thực sự yêu cầu tài nguyên từ máy chủ, trình duyệt đã có kết nối sẵn sàng, giúp giảm đáng kể thời gian chờ đợi và đảm bảo rằng tài nguyên có thể được tải nhanh chóng.

Kỹ thuật DNS Preconnect có thể được triển khai bằng cách thêm các thẻ link trong mã HTML của trang web với thuộc tính rel được đặt thành “preconnect” và thuộc tính href để chỉ định máy chủ cần tiền kết nối.
Kỹ thuật DNS Preconnect đặc biệt hữu ích khi cần giảm độ trễ trong việc thiết lập kết nối đối với các tài nguyên từ máy chủ từ xa, cải thiện tốc độ tải trang và hiệu suất tổng thể của trang web.

Ví dụ kết nối trước với trang dammio.com.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DNS Preconnect -- dammio.com</title>

    <!-- DNS Preconnect với trang dammio.com -->
    <link rel="preconnect" href="https://dammio.com">
</head>
<body>
    <p>DNS Preconnect -- dammio.com</p>
    <a href="https://dammio.com">Visit Example</a>
</body>
</html>

DNS Preload

DNS Preload (Tải 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ễ của quá trình tìm kiếm DNS (Domain Name System) và cải thiện tốc độ tải trang web. Kỹ thuật này liên quan đến việc nhúng thông tin DNS cụ thể vào mã HTML của một trang web. Khi người dùng truy cập trang web có dữ liệu DNS Preload, trình duyệt của họ tự động giải quyết và lưu vào bộ đệm các bản ghi DNS cho các tài nguyên mà trang web sẽ cần, chẳng hạn như hình ảnh, script, hoặc bảng điều khiển.

Mục tiêu: Cải thiện hiệu suất tải trang web bằng cách giảm độ trễ của quá trình tìm kiếm DNS cho các tài nguyên trên trang.
Mục đích: Nhúng thông tin DNS cụ thể vào mã HTML của trang web để khi người dùng truy cập trang, trình duyệt tự động giải quyết và lưu vào bộ đệm các bản ghi DNS cho các tài nguyên, giúp giảm thời gian tải trang web.

Quá trình hoạt động của DNS Preload bao gồm các bước sau:

Phân tích: Khi trình duyệt của người dùng truy cập một trang web, nó sẽ phân tích mã HTML và CSS của trang để xác định các liên kết và tài nguyên khác.
Xác định DNS cần tải trước: Dựa trên phân tích, trình duyệt xác định các tên miền DNS của các tài nguyên mà trang web sẽ cần.
Nhúng thông tin DNS: Nhà phát triển web nhúng thông tin DNS cụ thể này vào mã HTML của trang web.
Tải trước DNS: Khi người dùng truy cập trang web, trình duyệt tự động giải quyết và lưu vào bộ đệm các bản ghi DNS cho các tài nguyên này.

Kết quả là khi người dùng thực sự cần truy cập các tài nguyên, trình duyệt đã có sẵn các thông tin DNS cần thiết trong bộ đệm, giúp giảm độ trễ của việc tìm kiếm DNS và tăng tốc độ tải trang web. DNS Preload là một quá trình thủ công và yêu cầu nhà phát triển web xác định cụ thể các bản ghi DNS mà trang web cần tiền đoán.

Ví dụ cho phép tải trước hai tài nguyên đó là “style_dammio.css” và “main_dammio.js”

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>JS and CSS preload example -- dammio.com</title>

  <link rel="preload" href="style_dammio.css" as="style" />
  <link rel="preload" href="main_dammio.js" as="script" />

  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <h1>Tiêu đề h1 -- dammio.com</h1>
  <canvas></canvas>

  <script src="main.js" defer></script>
</body>
</html>

DNS-Prerender

DNS Prerender (Kết xuất trước DNS) là một kỹ thuật tối ưu hóa hiệu suất web cao cấp, được sử dụng để cải thiện tốc độ tải trang web. Kỹ thuật này đặc biệt hữu ích khi dự đoán hành động tiếp theo của người dùng và tiền tải trước toàn bộ trang web trong nền trước khi người dùng thực sự yêu cầu trang đó. Khi người dùng thực hiện hành động như nhấp vào một liên kết, trang web đã sẵn sàng để hiển thị, giúp giảm đáng kể thời gian tải trang và cải thiện trải nghiệm người dùng.

Mục tiêu: Cải thiện tốc độ tải trang web bằng cách tiền tải trước toàn bộ trang web, bao gồm việc giải quyết DNS, tải tài nguyên và hiển thị trang.
Mục đích: Điều này đặc biệt hữu ích khi dự đoán hành động tiếp theo của người dùng và tiền tải trước trang web hoàn chỉnh để giảm thiểu thời gian tải trang khi người dùng nhấp vào một liên kết.

Cách hoạt động của DNS Prerender bao gồm:

Dự đoán: Khi người dùng tương tác với một trang web, trình duyệt hoặc các phần mềm tối ưu hóa hiệu suất đánh giá hành động tiếp theo của người dùng. Nó dự đoán trang web mà người dùng có thể chuyển đến sau khi họ hoàn tất hành động hiện tại.
Kết xuất trước: Dựa vào dự đoán, trình duyệt tải trước toàn bộ trang web tiềm năng mà người dùng có thể chuyển đến. Điều này bao gồm cả việc phân giải DNS (DNS Resolver), tải tài nguyên (như hình ảnh, script, CSS) và thậm chí việc hiển thị trang.
Sẵn sàng hiển thị: Khi người dùng thực sự yêu cầu trang web, trình duyệt đã sẵn sàng để hiển thị trang mà họ đã dự đoán. Do đã tiền tải trước, thời gian tải trang được rút ngắn đáng kể, và người dùng nhận được trải nghiệm nhanh chóng hơn.

DNS Prerender có thể tiêu tốn nhiều tài nguyên hơn và nên được sử dụng một cách thận trọng để tránh làm quá tải mạng.

DNS Prerender đặc biệt hữu ích trong các tình huống mà hành động tiếp theo của người dùng có thể được dự đoán một cách chính xác. Tuy nhiên, nó có thể tiêu tốn nhiều tài nguyên hơn và nên được sử dụng một cách thận trọng để tránh làm quá tải mạng. Kỹ thuật này thường được sử dụng trong các ứng dụng web hoặc trang web đòi hỏi tốc độ tải trang cao và có thể dự đoán hành động của người dùng.

Ví dụ DNS-Preredender với trang Donate.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DNS Prerender -- dammio.com</title>

    <!-- DNS Prerender cho trang dự đoán kế tiếp có khả năng được truy cập -->
    <link rel="prerender" href="https://www.dammio.com/donate">
</head>
<body>
    <p>Trang Donate -- dammio.com</p>
    <a href="https://www.dammio.com/donate">Xem trang Donate</a>
</body>
</html>

Kết luận

Tóm lại, cả bốn kỹ thuật này đều nhằm cải thiện tốc độ tải trang web bằng cách giảm độ trễ trong quá trình tìm kiếm DNS và thiết lập kết nối, nhưng mục đích và cách triển khai của chúng có sự khác nhau để đáp ứng các tình huống cụ thể. Theo DAMMIO.COM, DNS Prefetch tập trung vào việc giải quyết trước các tên miền DNS mà trang web có thể cần, trong khi DNS Preconnect tập trung vào thiết lập kết nối nhanh chóng đối với máy chủ từ xa. Thêm nữa, DNS Preload tập trung vào việc giảm độ trễ DNS cho các tài nguyên cụ thể trên trang web, trong khi DNS Prerender tập trung vào việc tải trước toàn bộ trang web để giảm thiểu thời gian tải trang khi người dùng thực sự chuyển đến trang đó. DNS Preload dùng khi bạn có các tài nguyên sử dụng lặp lại nhiều lần trong trang web (ví dụ logo.png, style.css), còn DNS Prerender nhắm đến những trang mà người dùng có khả năng truy cập cao nhất hoặc có số xem trang nhiều nhất.

Vui lòng khi rõ nguồn DAMMIO.COM khi sử dụng thông tin từ bài viết này. Xin cảm ơn!

Liên quan: Tăng tốc website bằng DNS Prefetch

Trích dẫn bài viết

APA:
Dammio. (2023). So sánh các kỹ thuật tối ưu: DNS Preload, DNS Prefetch, DNS Prerender và DNS Preconnect. https://www.dammio.com/2023/11/03/so-sanh-cac-ky-thuat-toi-uu-dns-preload-dns-prefetch-dns-prerender-va-dns-preconnect.
BibTeX:
@misc{dammio, author = {Dammio}, title = {So sánh các kỹ thuật tối ưu: DNS Preload, DNS Prefetch, DNS Prerender và DNS Preconnect}, year = {2023}, url = {https://www.dammio.com/2023/11/03/so-sanh-cac-ky-thuat-toi-uu-dns-preload-dns-prefetch-dns-prerender-va-dns-preconnect}, urldate = {2023-12-03} }