Phần 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 các 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 phần Khả năng tương thích với trình duyệt.
Cải thiện tốc độ tải trang bằng tính năng kết nối trước
Hãy cân nhắc thêm các gợi ý về tài nguyên preconnect hoặc dns-prefetch để thiết lập kết nối sớm tới những 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 sớm nhất có thể.
Việc thiết lập kết nối thường mất nhiều thời gian trong các mạng chậm, đặc biệt là khi nói đến các kết nối bảo mật, vì việc này có thể liên quan đến việc tra cứu DNS, chuyển hướng và một số lượt đi và về đến máy chủ cuối cùng xử lý yêu cầu của người dùng.
Việc xử lý trước tất cả những vấn đề này có thể giúp người dùng cảm thấy ứng dụng của bạn nhanh nhạy hơn mà không ảnh hưởng tiêu cực đến việc sử dụng băng thông. Hầu hết 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 có ý đị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ẻ, nhưng vẫn có thể chiếm nhiều thời gian 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 kết nối không được sử dụng trong vòng 10 giây, vì trình duyệt sẽ đóng kết nối đó, lãng phí tất cả công việc kết nối ban đầu đó.
Nhìn chung, hãy cố gắng sử dụng <link rel="preload"> vì đây là một cách điều chỉnh hiệu suất toàn diện hơn, nhưng hãy giữ <link rel="preconnect"> trong bộ 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 nguồn dữ liệu nhưng không biết nội dung bạn đang tìm nạp
- 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 liên quan đến các kết nối.
Phương thức này chỉ xử lý việc tra cứu DNS, nhưng có hỗ trợ trình duyệt rộng hơn, vì vậy, phương thức này có thể đóng vai trò là phương án dự phòng hiệu quả.
Bạn sử dụng đoạn mã này theo cách y hệt:
<link rel="dns-prefetch" href="https://example.com" />.
Hướng dẫn dành riêng cho ngăn xếp
Drupal
Bạn có thể thêm các gợi ý về tài nguyên Preconnect hoặc dns-prefetch bằng cách cài đặt và định cấu hình một mô-đun cung cấp các công cụ để gợi ý tài nguyên cho tác nhân người dùng.
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 DNS trước.