Mặc dù mục tiêu của mọi người là giảm ngân sách hiệu suất web nhưng vẫn cần phải sử dụng các dịch vụ của bên thứ ba. Khi sử dụng các dịch vụ này, "Tra cứu DNS" số lần có thể tiêu tốn một phần đáng kể ngân sách, tùy thuộc vào số lượng dịch vụ. Việc tải này ảnh hưởng đến nhiều khía cạnh khác nhau của tốc độ trang, bao gồm cả Thời gian hiển thị nội dung đầu tiên (FCP).
Mục đích của hai khái niệm này là tối ưu hóa thời gian kết nối của bên thứ ba. Trước khi hiểu sự khác biệt giữa hai khái niệm này, cần phải hiểu chính xác điều gì xảy ra khi yêu cầu của bên thứ ba được đưa ra:
- Tên miền được phân giải để có được địa chỉ IP.
- Một kết nối được thiết lập với máy chủ.
- Kết nối được mã hóa để đảm bảo an ninh.
Hệ thống phân cấp này được lặp lại cho mỗi kết nối của bên thứ ba. Đây là nơi phát huy sự khác biệt giữa preconnect và dns-prefetch.
- Kết nối trước: Đảm bảo rằng cả ba bước nêu trên đều được cấu hình sẵn.
- Tìm nạp trước DNS: Chỉ dùng để chuyển đổi tên miền thành địa chỉ IP ở bước đầu tiên.
Như bạn có thể thấy, kết nối trước toàn diện và có lợi hơn. Tuy nhiên, mọi thứ đều phải trả giá. Sử dụng kết nối trước cho tất cả các kết nối của bạn có thể tác động tiêu cực đến việc tối ưu hóa trang của bạn. Vì vậy, yBạn chỉ nên sử dụng kết nối trước cho các kết nối quan trọng và sử dụng dns-prefetch cho tất cả các kết nối bên thứ ba khác.
Tóm tắt cách sử dụng
Với thông tin trên, đây là bản tóm tắt nhanh về cách sử dụng của chúng:
<link rel="preconnect" href="https://third-party-example.com">
<link rel="dns-prefetch" href="https://third-party-example.com">tính tương thích của trình duyệt web
Trong khi thảo luận về cách sử dụng chúng, điều quan trọng là phải đề cập đến khả năng tương thích của trình duyệt. Hai khái niệm liên quan chặt chẽ này được các trình duyệt hiện đại hỗ trợ rộng rãi, nhưng cách sử dụng chúng không hoàn toàn trùng lặp. Kết nối trước được hỗ trợ bởi khoảng 97% trình duyệt, trong khi dns-prefetch được 83% trình duyệt hỗ trợ (tính đến tháng 2024 năm XNUMX).
Đóng góp vào ngân sách hiệu suất web
- Kết nối trước có thể cung cấp sự cải thiện tổng thể về tốc độ 100-500ms.
- DNS-Prefetch có thể tăng tốc mỗi kết nối bằng cách 20-120ms.
Chúng tôi dự định tiến hành các thử nghiệm của riêng mình để cung cấp các ví dụ địa phương thỏa mãn hơn.
Cuối cùng, tôi muốn giới thiệu và ghi nhận blog của Ceyhun Enki Aksan, blog này đã góp phần rất lớn vào sự hiểu biết của tôi khi chuẩn bị bài viết này: Blog của Ceyhun Enki Aksan.
