Sử dụng preconnect để gửi yêu cầu trước cho server gốc bên ngoài

bởi Nguyễn Đức Anh
sử dụng preconnect

Khu vực báo cáo opportunites (cơ hội) của Lighthouse liệt kê tất cả các yêu cầu (request) quan trọng nhất mà hiện vẫn chưa được ưu tiên tìm nạp với thẻ <link rel=preconnect>:

Nguyên văn: Yêu cầu preconnect tới máy chủ gốc bên ngoài (không phải host của bạn).

Xem xét thêm gợi ý tài nguyên kiểu ‘preconnect’ hoặc ‘dns-prefetch’ để sớm thiết lập các kết nối quan trọng với tài nguyên của bên thứ ba (third-party).

URL: chỉ đến tài nguyên của bên thứ ba.

Potentical Saving: chỉ đến lượng thời gian có khả năng tiết kiệm được nếu bạn triển khai ‘preconnect’.

Cải thiện tốc độ tải trang bằng preconnect

Bạn nên cân nhắc thêm gợi ý tài nguyên bằng preconnect hoặc dns-prefetch để thiết lập kết nối sớm đối với các máy chủ gốc quan trọng của bên thứ ba (third-party).

<link rel=”preconnect”> thông báo cho trình duyệt biết trang của bạn dự định thiết lập kết nối với máy chủ khác với máy chủ gốc của bạn, và bạn muốn bắt đầu xử lý vấn đề này càng sớm càng tốt.

Thiết lập kết nối thường trở thành vấn đề thời gian đáng kể trên các mạng chậm (slow networks), đặc biệt khi nó là các kết nối bảo mật (https), vì nó có thể liên quan đến tìm kiếm DNS, chuyển hướng, và một số vòng khứ hồi (round trips) đến máy chủ cuối cùng để xử lý yêu cầu của người dùng.

Khi bạn để ý trước đến tất cả những điều này, nó có thể làm cho ứng dụng của bạn gọn gàng hơn 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 (bandwidth). Hầu hết thời gian trong việc thiết lập kết nối là dành cho chờ đợi, thay vì để trao đổi dữ liệu.

Thông báo với trình duyệt ý định của trang bằng cách đơn giản thêm thẻ link vào trang của bạn như dưới đây. Bạn nên để nó vào trước thẻ đóng </head> và trước bất kỳ đoạn mã nào mà nó chứa tên miền cần kết nối trước:

<link rel="preconnect" href="https://example.com">

Điều này giúp trình duyệt biết ý định của trang mong muốn kết nối với tên miền example.com và lấy nội dung từ đó.

Cần phải lưu ý là, mặc dù <link rel=”preconnect”> khá đơn giản, nó có thể vẫn làm tăng thời gian sử dụng CPU, đặc biệt là với các kết nối bảo mật (secure connections). Điều này sẽ rấ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 nó lại, hệ quả: gây lãng phí việc kết nối sớm.

Nhìn chung, bạn hãy thử sử dụng <link rel=”preload”>, vì nó là một tinh chỉnh hiệu suất toàn diện hơn / comprehensive performance tweak, tuy nhiên vẫn sẵn sàng sử dụng <link rel=”preconnect”> khi phù hợp hơn.

<link rel="dns-prefetch"> là kiểu <link> khác liên quan đến kết nối. Nó chỉ xử lý tìm kiếm DNS, nhưng nó được nhiều trình duyệt hỗ trợ hơn, vì thế dns-prefetch có thể phục vụ dưới dạng một dự phòng tương đối ổn thỏa. Công thức chính xác của nó như sau:

<link rel="dns-prefetch" href="https://example.com">.

(Dịch từ bài viết Preconnect to required origins, trang web[.]dev)

0 bình luận

Khu vực bình luận

avatar