Mục Cơ hội trong báo cáo Lighthouse liệt kê tất cả các yêu cầu chính
chưa ưu tiên yêu cầu tìm nạp bằng <link rel=preconnect>:
Khả năng tương thích với trình duyệt
<link rel=preconnect> được hỗ trợ trên hầu hết các trình duyệt. Xem
Khả năng tương thích với trình duyệt.
Cải thiện tốc độ tải trang bằng kết nối trước
Hãy cân nhắc việc thêm preconnect hoặc dns-prefetch gợi ý về tài nguyên
để sớm kết nối với các nguồn gốc quan trọng của bên thứ ba.
<link rel="preconnect"> thông báo cho trình duyệt rằng trang của bạn dự định
để thiết lập kết nối với một nguồn gốc khác,
và bạn muốn quá trình này bắt đầu càng sớm càng tốt.
Việc thiết lập kết nối thường tốn thời gian đáng kể trong các mạng chậm, đặc biệt là khi nói đến kết nối bảo mật, vì nó có thể liên quan đến việc tra cứu DNS, lệnh chuyển hướng và một số lượt di chuyển khứ hồi đến máy chủ cuối cùng để xử lý yêu cầu của người dùng.
Việc giải quyết trước tất cả những vấn đề này có thể giúp đơn đăng ký của bạn ngắn gọn hơn rất nhiều cho người dùng mà không ảnh hưởng tiêu cực đến việc sử dụng băng thông. Phần lớn thời gian thiết lập kết nối đều dành cho việc chờ đợi, thay vì trao đổi dữ liệu.
Thông báo cho trình duyệt về ý định của bạn chỉ đơn giản như việc thêm thẻ liên kết vào trang của bạn:
<link rel="preconnect" href="https://example.com">
Điều này cho trình duyệt biết rằng trang dự định
để kết nối với example.com và truy xuất nội dung từ đó.
Hãy lưu ý rằng mặc dù <link rel="preconnect"> khá rẻ,
nó vẫn có thể chiếm nhiều thời gian quý báu của CPU, đặc biệt là đối với các kết nối bảo mật.
Điều này đặc biệt tệ nếu bạn không sử dụng kết nối trong vòng 10 giây,
khi trình duyệt đóng nó, làm lãng phí tất cả công việc kết nối ban đầu đó.
Nhìn chung,
thử sử dụng <link rel="preload">,
vì đây là một tinh chỉnh hiệu suất toàn diện hơn,
nhưng hãy giữ <link rel="preconnect"> trong đai công cụ của bạn cho các trường hợp hiếm gặp như:
- Trường hợp sử dụng: Biết vị trí xuất phát, nhưng không biết bạn đang tìm nạp thông tin gì
- Trường hợp sử dụng: Nội dung nghe nhìn trực tuyến
<link rel="dns-prefetch"> là một loại <link> khác có liên quan đến các kết nối.
Thao tác này chỉ xử lý quá trình tra cứu DNS,
nhưng API này hỗ trợ nhiều trình duyệt hơn, nên có thể đóng vai trò như một giải pháp dự phòng hiệu quả.
Bạn sử dụng đoạn mã theo cách y như vậy:
<link rel="dns-prefetch" href="https://example.com" />.
Hướng dẫn dành riêng cho ngăn xếp
Drupal
Sử dụng một mô-đun hỗ trợ gợi ý tài nguyên cho tác nhân người dùng để bạn có thể cài đặt và định cấu hình gợi ý tài nguyên kết nối trước hoặc tìm nạp trước DNS.
Magento
Sửa đổi bố cục của giao diện và thêm các gợi ý về tài nguyên kết nối trước hoặc tìm nạp trước DNS.