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