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