Tải trang nhanh hơn nhờ thời gian suy nghĩ của máy chủ nhờ tính năng Gợi ý sớm

Tìm hiểu cách máy chủ của bạn có thể gửi gợi ý cho trình duyệt về các tài nguyên phụ quan trọng.

Kenji Baheux

Barry Pollard

Gợi ý sớm là gì?

Các trang web ngày càng tinh vi hơn theo thời gian. Do đó, không có gì lạ khi một máy chủ cần thực hiện công việc không quan trọng (ví dụ: quyền truy cập vào cơ sở dữ liệu hoặc CDN truy cập vào máy chủ gốc) để tạo HTML cho trang được yêu cầu. Rất tiếc, "thời gian tư duy của máy chủ" này sẽ dẫn đến độ trễ thêm trước khi trình duyệt có thể bắt đầu hiển thị trang. Trên thực tế, kết nối sẽ không hoạt động một cách hiệu quả, miễn là máy chủ cần chuẩn bị phản hồi.

Gợi ý sớm là một mã trạng thái HTTP (103 Early Hints) dùng để gửi một phản hồi HTTP sơ bộ trước khi gửi phản hồi cuối cùng. Điều này cho phép máy chủ gửi gợi ý cho trình duyệt về các tài nguyên phụ quan trọng (ví dụ: biểu định kiểu cho trang, JavaScript quan trọng) hoặc nguồn gốc có thể được trang sử dụng, trong khi máy chủ đang bận tạo tài nguyên chính. Trình duyệt có thể sử dụng những gợi ý đó để khởi động kết nối và yêu cầu các tài nguyên phụ trong khi chờ tài nguyên chính. Nói cách khác, tính năng Gợi ý sớm giúp trình duyệt tận dụng "thời gian suy nghĩ của máy chủ" bằng cách thực hiện trước một số việc, nhờ đó tăng tốc độ tải trang.

Trong một số trường hợp, mức cải thiện hiệu suất đối với Thời gian hiển thị nội dung lớn nhất có thể tăng từ vài trăm mili giây (theo quan sát của Shopify và Cloudflare) và nhanh hơn đến 1 giây (như trong phần so sánh trước và sau khi so sánh):

Cách sử dụng tính năng Gợi ý sớm

Bước đầu tiên để tận dụng Gợi ý sớm bao gồm việc xác định các trang đích hàng đầu, tức là các trang mà người dùng thường bắt đầu khi họ truy cập vào trang web của bạn. Đây có thể là trang chủ hoặc các trang danh sách sản phẩm phổ biến nếu bạn có nhiều người dùng đến từ các trang web khác. Lý do các điểm truy cập này quan trọng hơn các trang khác là vì tính hữu ích của tính năng Gợi ý sớm giảm xuống khi người dùng di chuyển quanh trang web của bạn (nghĩa là trình duyệt có nhiều khả năng sẽ có tất cả các tài nguyên phụ cần thiết trong lần điều hướng thứ hai hoặc thứ ba tiếp theo). Ngoài ra, bạn cũng nên tạo ấn tượng ban đầu thật tốt đẹp!

Giờ đây, khi bạn đã có danh sách trang đích được ưu tiên, bước tiếp theo là xác định những nguồn gốc hoặc tài nguyên phụ phù hợp cho gợi ý preconnect hoặc preload. Thông thường, đó thường là những nguồn gốc và tài nguyên phụ đóng góp nhiều nhất vào các chỉ số người dùng chính, chẳng hạn như Thời gian hiển thị nội dung lớn nhất hoặc Thời gian hiển thị nội dung đầu tiên. Cụ thể hơn, hãy tìm các tài nguyên phụ chặn hiển thị, chẳng hạn như JavaScript đồng bộ, biểu định kiểu hoặc thậm chí là phông chữ web. Tương tự, hãy tìm những nguồn gốc lưu trữ tài nguyên phụ đóng góp nhiều vào các chỉ số người dùng chính.

Ngoài ra, xin lưu ý rằng nếu tài nguyên chính của bạn đã sử dụng preconnect hoặc preload, bạn có thể xem xét các nguồn gốc hoặc tài nguyên này trong số các ứng cử viên cho Gợi ý sớm. Xem cách tối ưu hoá LCP để biết thêm chi tiết. Tuy nhiên, việc sao chép chỉ các lệnh preconnect và preload từ HTML sang Gợi ý sớm có thể không tối ưu.

Khi sử dụng các tài nguyên này trong HTML, thường thì bạn muốn preconnect hoặc preload tài nguyên mà Trình quét tải trước sẽ không phát hiện được trong HTML, ví dụ như phông chữ hoặc hình nền sẽ bị phát hiện muộn. Đối với Gợi ý sớm, bạn sẽ không có HTML. Vì vậy, bạn nên chuyển preconnect sang các miền quan trọng hoặc preload tài nguyên quan trọng mà có thể sẽ phát hiện sớm được trong HTML — ví dụ: tải trước main.css hoặc app.js. Ngoài ra, không phải tất cả các trình duyệt đều hỗ trợ preload cho Gợi ý sớm — xem phần Hỗ trợ trình duyệt.

Bước thứ hai bao gồm giảm thiểu rủi ro sử dụng tính năng Gợi ý sớm đối với các tài nguyên hoặc nguồn gốc có thể đã lỗi thời hoặc không còn được tài nguyên chính sử dụng nữa. Ví dụ: các tài nguyên thường xuyên được cập nhật và tạo phiên bản (ví dụ: example.com/css/main.fa231e9c.css) có thể không phải là lựa chọn tốt nhất. Xin lưu ý rằng mối lo ngại này không chỉ áp dụng cho tính năng Gợi ý sớm mà còn áp dụng cho preload hoặc preconnect bất kỳ khi chúng có thể xuất hiện. Đây là loại chi tiết được xử lý tốt nhất cho việc tự động hoá hoặc tạo mẫu (ví dụ: một quy trình thủ công có nhiều khả năng dẫn đến hàm băm hoặc URL phiên bản không khớp giữa preload và thẻ HTML thực tế đang sử dụng tài nguyên).

Ví dụ: hãy xem xét quy trình sau:

GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]

Máy chủ dự đoán rằng main.abcd100.css sẽ là cần thiết và đề xuất tải trước nó bằng cách sử dụng Gợi ý sớm:

103 Early Hints
Link: </main.abcd100.css>; rel=preload; as=style
[...]

Một lúc sau, trang web, bao gồm cả CSS đã liên kết sẽ được phân phát. Rất tiếc, tài nguyên CSS này thường xuyên được cập nhật và tài nguyên chính đã có 5 phiên bản trước (abcd105) so với tài nguyên CSS dự đoán (abcd100).

200 OK
[...]
<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.abcd105.css">

Nhìn chung, bạn nên nhắm đến các tài nguyên và nguồn gốc khá ổn định và phần lớn độc lập với kết quả của tài nguyên chính. Nếu cần, bạn có thể cân nhắc việc chia các tài nguyên chính thành hai phần: một phần ổn định được thiết kế để sử dụng với các Gợi ý sớm và một phần linh động hơn còn lại được tìm nạp sau khi trình duyệt nhận được tài nguyên chính:

<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.css">
   <link rel="stylesheet" href="/experimental.3eab3290.css">

Cuối cùng, về phía máy chủ, hãy tìm các yêu cầu về tài nguyên chính do các trình duyệt được biết là có hỗ trợ Gợi ý sớm gửi, rồi phản hồi ngay lập tức bằng 103 Gợi ý sớm. Trong phản hồi 103, hãy thêm các gợi ý tải trước và kết nối trước có liên quan. Khi tài nguyên chính đã sẵn sàng, hãy tiếp tục với phản hồi thông thường (ví dụ: 200 OK nếu thành công). Để có khả năng tương thích ngược, bạn cũng nên đưa tiêu đề HTTP Link vào phản hồi cuối cùng, thậm chí bổ sung các tài nguyên quan trọng xuất hiện rõ ràng trong quá trình tạo tài nguyên chính (ví dụ: phần động của tài nguyên khoá nếu bạn làm theo đề xuất "chia đôi"). Đoạn mã này sẽ có dạng như sau:

GET /main.html
Host: example.com
User-Agent: [....] Chrome/103.0.0.0 [...]
103 Early Hints
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script

Một lúc sau:

200 OK
Content-Length: 7531
Content-Type: text/html; charset=UTF-8
Content-encoding: br
Link: <https://fonts.google.com>; rel=preconnect
Link: </main.css>; rel=preload; as=style
Link: </common.js>; rel=preload; as=script
Link: </experimental.3eab3290.css>; rel=preload; as=style
<HTML>
<head>
   <title>Example</title>
   <link rel="stylesheet" href="/main.css">
   <link rel="stylesheet" href="/experimental.3eab3290.css">
   <script src="/common.js"></script>
   <link rel="preconnect" href="https://fonts.googleapis.com">

Hỗ trợ trình duyệt

Mặc dù 103 Gợi ý sớm được hỗ trợ trong tất cả các trình duyệt chính, nhưng các lệnh có thể được gửi trên Gợi ý sớm sẽ khác nhau tuỳ theo trình duyệt:

Hỗ trợ kết nối trước:

Hỗ trợ tải trước:

Công cụ của Chrome cho nhà phát triển cũng có hỗ trợ 103 Gợi ý sớm.

Hỗ trợ máy chủ

Dưới đây là tóm tắt nhanh về mức độ hỗ trợ cho tính năng Gợi ý sớm trong số các phần mềm máy chủ HTTP phần mềm nguồn mở phổ biến:

• Apache: được hỗ trợ bằng mod_http2.
• H2O: được hỗ trợ.
• NGINX: mô-đun thử nghiệm.
• Nút: được hỗ trợ kể từ 18.11.0 cho http và http2

Bật tính năng Gợi ý sớm theo cách dễ dàng hơn

Nếu đang sử dụng một trong các CDN hoặc nền tảng sau đây, bạn có thể không cần phải triển khai Gợi ý sớm theo cách thủ công. Hãy tham khảo tài liệu trực tuyến của nhà cung cấp giải pháp để tìm hiểu xem giải pháp này có hỗ trợ tính năng Gợi ý sớm hay không hoặc tham khảo danh sách chưa đầy đủ tại đây:

• Các gợi ý ban đầu tại Cloudflare
• Gợi ý sớm tại Nhanh.
• Gợi ý sớm tại KML.

Cách tránh các vấn đề cho ứng dụng không hỗ trợ tính năng Gợi ý sớm

Các phản hồi HTTP cung cấp thông tin trong phạm vi 100 là một phần của tiêu chuẩn HTTP, nhưng một số ứng dụng hoặc bot cũ có thể gặp khó khăn với các phản hồi này vì trước khi ra mắt 103 Gợi ý sớm, chúng hiếm khi được dùng để duyệt web nói chung.

Việc chỉ đưa ra 103 Gợi ý sớm để phản hồi các ứng dụng gửi tiêu đề yêu cầu HTTP sec-fetch-mode: navigate phải đảm bảo các gợi ý như vậy chỉ được gửi cho các ứng dụng khách mới hơn hiểu là phải chờ phản hồi tiếp theo. Ngoài ra, vì tính năng Gợi ý sớm chỉ được hỗ trợ trong các yêu cầu điều hướng (xem các hạn chế hiện tại), nên tính năng này sẽ có lợi ích là tránh được việc gửi một cách không cần thiết trên các yêu cầu khác.

Ngoài ra, Bạn chỉ nên gửi Gợi ý sớm qua kết nối HTTP/2 hoặc HTTP/3.

Hình mở khoá nâng cao

Nếu đã áp dụng đầy đủ tính năng Gợi ý sớm cho các trang đích chính và muốn tìm thêm nhiều cơ hội hơn, bạn có thể sẽ quan tâm đến mẫu nâng cao sau đây.

Đối với những khách truy cập đang thực hiện yêu cầu truy cập trang nth trong một hành trình của người dùng thông thường, bạn có thể muốn điều chỉnh phản hồi Gợi ý sớm cho nội dung thấp hơn và sâu hơn trên trang, nói cách khác là sử dụng Gợi ý sớm trên các tài nguyên có mức độ ưu tiên thấp hơn. Điều này nghe có vẻ khác thường vì chúng tôi đề xuất tập trung vào các tài nguyên con hoặc nguồn gốc chặn hiển thị có mức độ ưu tiên cao. Tuy nhiên, vào thời điểm khách truy cập đã điều hướng một thời gian, thì rất có thể trình duyệt của họ đã có tất cả các tài nguyên quan trọng. Từ đó về sau, bạn nên chuyển sang dùng các tài nguyên có mức độ ưu tiên thấp hơn. Ví dụ: điều này có thể có nghĩa là bạn sử dụng tính năng Gợi ý sớm để tải hình ảnh sản phẩm hoặc JS/CSS bổ sung chỉ cần thiết cho các hoạt động tương tác ít phổ biến của người dùng.

Các hạn chế hiện tại

Dưới đây là những hạn chế của tính năng Gợi ý sớm khi triển khai trong Chrome:

• Chỉ dành cho các yêu cầu điều hướng (tức là tài nguyên chính cho tài liệu cấp cao nhất).
• Chỉ hỗ trợ preconnect và preload (tức là prefetch không được hỗ trợ).
• Gợi ý sớm theo sau là lệnh chuyển hướng nhiều nguồn gốc trong phản hồi cuối cùng sẽ khiến Chrome bỏ các tài nguyên và kết nối nhận được bằng tính năng Gợi ý sớm.

Các trình duyệt khác cũng có những hạn chế tương tự và một số trình duyệt hạn chế thêm 103 gợi ý sớm đối với preconnect.

Tiếp theo là gì?

Tuỳ thuộc vào mối quan tâm của cộng đồng, chúng tôi có thể tăng cường việc triển khai tính năng Gợi ý sớm với những tính năng sau:

• Gợi ý ban đầu được gửi dựa trên các yêu cầu tài nguyên phụ.
• Các Gợi ý sớm được gửi trên các yêu cầu tài nguyên chính của iframe.
• Hỗ trợ tìm nạp trước trong tính năng Gợi ý sớm.

Chúng tôi hoan nghênh ý kiến đóng góp của bạn về những khía cạnh cần ưu tiên và cách cải thiện tính năng Gợi ý sớm.

Mối quan hệ với H2/Thông báo đẩy

Nếu đã quen với tính năng HTTP2/Đẩy không dùng nữa, bạn có thể thắc mắc tính năng Gợi ý sớm khác biệt như thế nào. Mặc dù tính năng Gợi ý sớm yêu cầu trình duyệt phải bắt đầu tìm nạp các tài nguyên phụ quan trọng, còn với HTTP2/Push, máy chủ có thể bắt đầu đẩy các tài nguyên phụ cùng với phản hồi. Mặc dù điều này nghe có vẻ đáng kinh ngạc, nhưng điều này dẫn đến một nhược điểm quan trọng về cấu trúc: với HTTP2/Push, cực kỳ khó tránh được việc đẩy các tài nguyên phụ mà trình duyệt đã có. Hiệu ứng "đẩy quá mức" này dẫn đến việc sử dụng băng thông mạng kém hiệu quả, gây cản trở đáng kể về lợi ích về hiệu suất. Nhìn chung, dữ liệu Chrome cho thấy HTTP2/Push thực tế có tác động tiêu cực đến hiệu suất trên web.

Ngược lại, Gợi ý sớm hoạt động tốt hơn trên thực tế vì nó kết hợp khả năng gửi phản hồi sơ bộ với các gợi ý để trình duyệt chịu trách nhiệm tìm nạp hoặc kết nối với những gì trình duyệt thực sự cần. Mặc dù Gợi ý sớm không bao gồm mọi trường hợp sử dụng mà HTTP2/Đẩy có thể giải quyết trên lý thuyết, nhưng chúng tôi tin rằng Gợi ý sớm là giải pháp thiết thực hơn để tăng tốc độ điều hướng.

Hình thu nhỏ của Pierre Bamin.