Tìm hiểu về các gợi ý về tài nguyên rel=preconnect và rel=dns-prefetch, cũng như cách sử dụng chúng.
Trước khi trình duyệt có thể yêu cầu tài nguyên từ máy chủ, trình duyệt phải thiết lập kết nối. Việc thiết lập kết nối an toàn bao gồm ba bước:
Tra cứu tên miền và phân giải thành một địa chỉ IP.
Thiết lập kết nối với máy chủ.
Mã hoá kết nối để bảo mật.
Trong mỗi bước này, trình duyệt sẽ gửi một phần dữ liệu đến máy chủ và máy chủ sẽ gửi lại một phản hồi. Hành trình đó, từ điểm khởi hành đến điểm đến và ngược lại, được gọi là chuyến đi khứ hồi.
Tuỳ thuộc vào điều kiện mạng, một chuyến đi khứ hồi có thể mất một khoảng thời gian đáng kể. Quá trình thiết lập mối kết nối có thể bao gồm tối đa 3 lượt trọn vòng và nhiều hơn trong các trường hợp chưa được tối ưu hoá.
Việc xử lý trước tất cả những việc đó giúp ứng dụng có cảm giác nhanh hơn nhiều. Bài đăng này giải thích cách đạt được điều đó bằng 2 gợi ý về tài nguyên: <link rel=preconnect> và <link rel=dns-prefetch>.
Thiết lập kết nối từ sớm với rel=preconnect
Các trình duyệt hiện đại cố gắng hết sức để dự đoán những kết nối nào mà một trang sẽ cần, nhưng chúng không thể dự đoán tất cả những kết nối đó một cách chính xác. Tin vui là bạn có thể gợi ý cho họ (về tài nguyên 😉).
Việc thêm rel=preconnect vào <link> 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 với một miền khác và bạn muốn quá trình này bắt đầu càng sớm càng tốt. Tài nguyên sẽ tải nhanh hơn vì quá trình thiết lập đã hoàn tất vào thời điểm trình duyệt yêu cầu.
Gợi ý tài nguyên nhận được tên vì đây không phải là hướng dẫn bắt buộc. Các chú giải này cung cấp thông tin về điều bạn muốn xảy ra, nhưng cuối cùng, có thực hiện chúng hay không là tuỳ thuộc vào trình duyệt. Việc thiết lập và duy trì kết nối tốn rất nhiều công sức, vì vậy, trình duyệt có thể chọn bỏ qua các gợi ý về tài nguyên hoặc thực thi một phần các gợi ý đó tuỳ thuộc vào tình huống.
Bạn chỉ cần thêm thẻ <link> vào trang của mình để thông báo cho trình duyệt về ý định của mình:
<link rel="preconnect" href="https://example.com">
Bạn có thể tăng thời gian tải thêm 100–500 mili giây bằng cách thiết lập kết nối sớm với các nguồn gốc quan trọng của bên thứ ba. Những con số này trông có vẻ nhỏ, nhưng lại tạo ra sự khác biệt trong cách người dùng cảm nhận về hiệu suất của trang web.
Các trường hợp sử dụng của rel=preconnect
Biết được từ đâu chứ không phải nội dung bạn đang tìm nạp
Do các phần phụ thuộc được tạo phiên bản, đôi khi bạn sẽ gặp phải trường hợp mà bạn biết rằng mình sẽ yêu cầu tài nguyên từ một CDN cụ thể, nhưng không phải là đường dẫn chính xác của tài nguyên đó.
Một trường hợp phổ biến khác là tải hình ảnh từ cDN hình ảnh, trong đó đường dẫn chính xác của một hình ảnh phụ thuộc vào truy vấn nội dung nghe nhìn hoặc tính năng kiểm tra tính năng trong thời gian chạy trên trình duyệt của người dùng.
Trong những trường hợp này, nếu tài nguyên bạn đang tìm nạp là quan trọng, bạn nên tiết kiệm nhiều thời gian nhất có thể bằng cách kết nối trước với máy chủ. Trình duyệt sẽ không tải tệp xuống cho đến khi trang của bạn yêu cầu, nhưng ít nhất thì trình duyệt có thể xử lý trước các khía cạnh kết nối, giúp người dùng không phải chờ nhiều lần.
Nội dung nghe nhìn phát trực tuyến
Một ví dụ khác mà bạn có thể muốn tiết kiệm thời gian trong giai đoạn kết nối, nhưng không nhất thiết phải bắt đầu truy xuất nội dung ngay lập tức, là khi phát trực tuyến nội dung nghe nhìn từ một nguồn khác.
Tùy thuộc vào cách trang của bạn xử lý nội dung được phát trực tuyến, bạn có thể muốn đợi cho đến khi tập lệnh của bạn được tải và sẵn sàng xử lý luồng. Kết nối trước giúp bạn giảm thời gian chờ xuống còn một lượt khứ hồi khi bạn đã sẵn sàng bắt đầu tìm nạp.
Cách triển khai rel=preconnect
Một cách để khởi tạo preconnect là thêm thẻ <link> vào <head> của tài liệu.
<head>
<link rel="preconnect" href="https://example.com">
</head>
Kết nối trước chỉ có hiệu quả cho các miền khác với miền gốc, vì vậy, bạn không nên sử dụng tính năng này cho trang web của mình.
Bạn cũng có thể bắt đầu kết nối trước qua tiêu đề HTTP Link:
Link: <https://example.com/>; rel=preconnect
Một số loại tài nguyên, chẳng hạn như phông chữ, được tải ở chế độ ẩn danh. Đối với những URL đó, bạn phải đặt thuộc tính crossorigin bằng gợi ý preconnect:
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
Nếu bạn bỏ qua thuộc tính crossorigin, trình duyệt chỉ thực hiện tra cứu DNS.
Giải quyết tên miền sớm bằng rel=dns-prefetch
Bạn ghi nhớ các trang web theo tên, nhưng máy chủ ghi nhớ các trang web theo địa chỉ IP. Đó là lý do hệ thống tên miền (DNS) tồn tại. Trình duyệt sử dụng DNS để chuyển đổi tên trang web thành địa chỉ IP. Quá trình này – phân giải tên miền – là bước đầu tiên để thiết lập kết nối.
Nếu một trang cần thực hiện kết nối với nhiều miền của bên thứ ba, việc kết nối trước tất cả các miền này sẽ không hiệu quả. Gợi ý preconnect chỉ nên sử dụng cho các kết nối quan trọng nhất. Đối với tất cả phần còn lại, hãy sử dụng <link rel=dns-prefetch> để tiết kiệm thời gian ở bước đầu tiên, đó là tra cứu DNS, thường mất khoảng 20–120 mili giây.
Quá trình phân giải DNS được bắt đầu tương tự như preconnect: bằng cách thêm thẻ <link> vào <head> của tài liệu.
<link rel="dns-prefetch" href="http://example.com">
Hỗ trợ trình duyệt cho dns-prefetch hơi khác so với preconnect hỗ trợ, vì vậy dns-prefetch có thể đóng vai trò dự phòng cho các trình duyệt không hỗ trợ preconnect.
<link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com">Để triển khai kỹ thuật dự phòng một cách an toàn, hãy sử dụng các thẻ liên kết riêng biệt.
<link rel="preconnect dns-prefetch" href="http://example.com">Việc triển khai tính năng dự phòng
dns-prefetch trong cùng một thẻ <link> sẽ gây ra lỗi trong Safari, trong đó preconnect bị huỷ.
Ảnh hưởng đến thời gian hiển thị nội dung lớn nhất (LCP)
Việc sử dụng dns-prefetch và preconnect cho phép các trang web giảm thời gian cần thiết để kết nối với một nguồn gốc khác. Mục tiêu cuối cùng là giảm thiểu thời gian tải tài nguyên từ một nguồn khác càng nhiều càng tốt.
Trong trường hợp liên quan đến Thời gian hiển thị nội dung lớn nhất (LCP), bạn nên tìm thấy tài nguyên ngay lập tức, vì các ứng viên LCP là những phần quan trọng trong trải nghiệm người dùng. Giá trị fetchpriority của "high" trên tài nguyên LCP có thể cải thiện điều này hơn nữa bằng cách cho trình duyệt biết tầm quan trọng của thành phần này để trình duyệt có thể tìm nạp sớm.
Trong trường hợp không thể phát hiện tài sản LCP ngay lập tức, đường liên kết preload (cũng có giá trị fetchpriority là "high") vẫn cho phép trình duyệt tải tài nguyên sớm nhất có thể.
Nếu cả hai tuỳ chọn này đều không khả dụng (vì tài nguyên chính xác sẽ không được xác định trong lần tải trang sau này), bạn có thể sử dụng preconnect trên các tài nguyên nhiều nguồn gốc để giảm tác động của việc khám phá tài nguyên muộn nhất có thể.
Ngoài ra, preconnect rẻ hơn preload về mức sử dụng băng thông nhưng vẫn không gặp phải các rủi ro. Tương tự như trong trường hợp có quá nhiều gợi ý về preload, việc có quá nhiều gợi ý về preconnect vẫn sẽ gây tốn băng thông trong trường hợp có liên quan đến chứng chỉ TLS. Hãy cẩn thận không kết nối trước với quá nhiều nguồn gốc, vì việc này có thể gây ra tranh chấp băng thông.
Kết luận
Hai gợi ý về tài nguyên này giúp cải thiện tốc độ trang khi bạn biết mình sắp tải nội dung nào đó xuống từ một miền của bên thứ ba, nhưng bạn không biết URL chính xác của tài nguyên đó. Ví dụ: Các mạng phân phối nội dung (CDN) phân phối thư viện, hình ảnh hoặc phông chữ JavaScript. Hãy lưu ý đến các hạn chế, chỉ sử dụng preconnect cho các tài nguyên quan trọng nhất, dựa vào dns-prefetch cho các tài nguyên còn lại và luôn đo lường tác động trong thế giới thực.