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. Hãy xem phần Khả năng tương thích của 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 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 càng sớm càng tốt.
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 đóng kết nối, làm lãng phí toàn bộ 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à 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 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 đa phương tiệ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 tính năng này 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
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.