DNS-Prefetch là gì? Cấu hình Dns-Prefetch trong WordPress

Như tiêu đề đã rõ như ban ngày, bài viết này chúng ta sẽ cùng nhau tìm hiểu về DNS-Prefetch, nó là gì, tại sao chúng ta lại cần chúng, cách để config chúng cho blog WordPress của chúng ta. Hãy để bài viết này làm sáng tỏ các điều đó cho bạn.

DNS-Prefetch là gì?

DNS (Domain Name System) là danh bạ của Internet. Con người truy cập thông tin trực tuyến thông qua các tên miền, như nytimes.com hoặc Espn.com. Các trình duyệt web tương tác thông qua các giao thức địa chỉ internet (IP). DNS sẽ dịch tên miền thành địa chỉ IP để trình duyệt có thể tải tài nguyên Internet.

dns-prefetch browser support
Cơ chế tìm kiếm DNS khi người dùng hit vào website

Prefetch dịch sát nghĩa theo Google thì là tìm nạp trước. Vậy DNS-Prefetch hiểu nôm na là cơ chế cho phép trình duyệt thực hiện tra cứu DNS chạy ngầm bên dưới browser trong khi người dùng đang lướt web.

Điều này giảm thiểu độ trễ vì việc tra cứu DNS đã diễn ra sau khi người dùng nhấp vào liên kết. DNS-Prefetch có thể được thêm vào một URL cụ thể bằng cách thêm thẻ rel = "dns-prefetch" vào thuộc tính <link>.

DNS request thường rất nhỏ về băng thông, nhưng có độ trễ khá cao, đặc biệt là trên các mạng di động. Bằng cách tìm nạp trước kết quả DNS, độ trễ có thể giảm đáng kể tại một số thời điểm nhất định, chẳng hạn như khi người dùng nhấp vào liên kết. Trong một số trường hợp, độ trễ có thể giảm trong một giây.

>>  Google Rich Snippets và cách thiết lập "WP-PostRatings" cho blog WP

Khi nào nên sử dụng DNS-Prefetch?

Như mình giải thích ở trên DNS-Prefetch, thường sẽ liên quan nhiều về các external resources như: Google Font, Google Analytics, hoặc thậm chí CloudFront của bạn. Khi các anh em thấy website mình có sử dụng các resource bên ngoài không phải từ trong chính server của mình thì đó là lúc chúng ta cần sử dụng DNS-Prefetch

dns-prefetch support
DNS-prefetch cũng được hỗ trợ bởi hầu hết các trình duyệt hiện đại ngoại trừ Opera Mini.

Cách config DNS-Prefetch

Về cách config DNS-Prefetch thì nhìn chung, chúng ta chỉ có 2 cách cho các anh em sử blog WordPress:

Hard Code

Về cách này chúng ta sẽ hard code bằng cách thêm thuộc tính rel với giá trị dns-prefetch như đoạn code bên dưới. Các anh em chỉ cần tìm đến tag <head> và khai báo tất cả external resource website mình sử dụng và add thêm dns-prefetch cho chúng.

<!-- Prefetch DNS for external assets --> 
<link rel="dns-prefetch" href="//fonts.googleapis.com"> 
<link rel="dns-prefetch" href="//www.google-analytics.com"> 
<link rel="dns-prefetch" href="//cdn.domain.com">

Define trong mục DNS-Prefetch của WP-Rocket

Ngoài cách trên thì có một cách khác dễ hơn là sử dụng chức năng khai báo DNS-Prefetch của WP-Rocket, với cách này thì khá là dễ các anh em có thể vào mục Preload trong setting của WP-Rocket để config giống như hình bên dưới nhé.

dns prefetch wp rocket

Kết luận

Tuy chỉ giảm được 1s nhưng thực sự điều này sẽ ảnh hưởng rất nhiều đến SEO và trải nghiệm người dùng. Các anh em có thể dùng Google Page Speed Insight để kiểm tra số điểm trước và sau khi dùng DNS-Prefetch nhé. Mọi thắc mắc vui lòng để lại bình luận bên dưới nhé. Hẹn gặp lại các anh em vào một ngày không xa.

>>  4 Front-end "Blog" nên theo dõi nếu Bro là kỹ sư mặt tiền

Xin chào các đồng chí tôi là Phạm Phi Hùng, tác giả của blog Hung Pham Dev Web Tôi là một Front-end Developer, kiêm writer, quay phim dạo, sửa máy dạo và làm một số ngành nghề khác nữa