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 được ư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 việ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 vớ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 có ý định thiết lập kết nối đến 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 nhiều thời gian trong các mạng chậm, đặc biệt là đối với các kết nối an toàn, vì việc này có thể liên quan đến hoạt động tra cứu DNS, chuyển hướng và thực hiện nhiều lượt vòng đế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 dụng của bạn nhanh gọn hơn nhiều đối với người dùng 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 là 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 đơn giản như việc thêm một 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ừ đó.
Xin lưu ý rằng mặc dù <link rel="preconnect"> có giá khá rẻ, nhưng vẫn có thể chiếm nhiều thời gian quý báu của CPU, đặc biệt là trên các kết nối bảo mật.
Điều này đặc biệt xấu 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 sớm đó.
Nhìn chung, hãy cố gắng sử dụng <link rel="preload">, vì đây là bản tinh chỉnh hiệu suất toàn diện hơn, nhưng hãy giữ <link rel="preconnect"> trong vành đai công cụ cho các trường hợp hiếm gặp như:
- Trường hợp sử dụng: Xác định vị trí xuất phát của nội dung bạn đang tìm nạp
- Trường hợp sử dụng: Nội dung nghe nhìn phát trực tuyến
<link rel="dns-prefetch"> là một loại <link> khác liên quan đến việc kết nối.
Phương thức này chỉ xử lý hoạt động tra cứu DNS, nhưng trình duyệt hỗ trợ rộng hơn, vì vậy có thể đóng vai trò là một phương án dự phòng hữu ích.
Bạn có thể sử dụng theo cách tương tự:
<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 tác nhân người dùng để bạn có thể cài đặt và định cấu hình các 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.