Việc phát triển các trang web có tốc độ nhanh ở mọi nơi có thể là một triển vọng khó khăn. Sự đa dạng về chức năng của thiết bị và chất lượng của mạng mà thiết bị kết nối có thể khiến việc này trở thành một nhiệm vụ bất khả thi. Mặc dù có thể tận dụng các tính năng của trình duyệt để cải thiện hiệu suất tải, nhưng làm cách nào để biết thiết bị của người dùng có khả năng gì hoặc chất lượng kết nối mạng của họ ra sao? Giải pháp là Client Hints!
Gợi ý về ứng dụng là một tập hợp các tiêu đề yêu cầu HTTP mà bạn có thể chọn sử dụng, giúp chúng tôi hiểu rõ hơn về các khía cạnh này của thiết bị của người dùng và mạng mà họ kết nối. Bằng cách khai thác thông tin này ở phía máy chủ, chúng ta có thể thay đổi cách phân phối nội dung dựa trên điều kiện của thiết bị và/hoặc mạng. Điều này có thể giúp chúng tôi tạo ra trải nghiệm người dùng toàn diện hơn.
Tất cả đều xoay quanh việc thương lượng nội dung
Client hints là một phương thức thương lượng nội dung khác, tức là thay đổi phản hồi nội dung dựa trên tiêu đề của yêu cầu của trình duyệt.
Một ví dụ về việc thương lượng nội dung liên quan đến tiêu đề của yêu cầu Accept. Tiêu đề này mô tả loại nội dung mà trình duyệt hiểu được, nhờ đó máy chủ có thể sử dụng để thương lượng phản hồi. Đối với yêu cầu về hình ảnh, nội dung
tiêu đề Accept của Chrome là:
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Mặc dù tất cả trình duyệt đều hỗ trợ các định dạng hình ảnh như JPEG, PNG và GIF, nhưng Accept cho biết trong trường hợp này, trình duyệt cũng hỗ trợ WebP và APNG. Bằng cách sử dụng thông tin này, chúng ta có thể thương lượng các loại hình ảnh phù hợp nhất cho từng trình duyệt:
<?php
// Check Accept for an "image/webp" substring.
$webp = stristr($_SERVER["HTTP_ACCEPT"], "image/webp") !== false ? true : false;
// Set the image URL based on the browser's WebP support status.
$imageFile = $webp ? "whats-up.webp" : "whats-up.jpg";
?>
<img src="<?php echo($imageFile); ?>" alt="I'm an image!">
Giống như Accept, Client Hints là một cách khác để thương lượng nội dung, nhưng trong bối cảnh về khả năng của thiết bị và điều kiện mạng. Với Client Hints, chúng ta có thể đưa ra quyết định về hiệu suất phía máy chủ dựa trên trải nghiệm cá nhân của người dùng, chẳng hạn như quyết định xem có nên phân phát tài nguyên không quan trọng cho người dùng có điều kiện mạng kém hay không. Trong hướng dẫn này, chúng tôi sẽ mô tả tất cả các gợi ý có sẵn và một số cách bạn có thể sử dụng chúng để giúp việc phân phối nội dung phù hợp hơn với người dùng.
Chọn tham gia
Không giống như tiêu đề Accept, Client Hints không chỉ xuất hiện một cách kỳ diệu (ngoại trừ Save-Data mà chúng ta sẽ thảo luận sau). Để giữ cho tiêu đề yêu cầu ở mức tối thiểu, bạn cần chọn gợi ý ứng dụng mà bạn muốn nhận bằng cách gửi tiêu đề Accept-CH khi người dùng yêu cầu tài nguyên:
Accept-CH: Viewport-Width, Downlink
Giá trị cho Accept-CH là danh sách gợi ý được yêu cầu, phân tách bằng dấu phẩy, mà trang web sẽ sử dụng để xác định kết quả cho yêu cầu tài nguyên tiếp theo. Khi ứng dụng đọc phần đầu này, ứng dụng sẽ được thông báo rằng “trang web này muốn có Client Hints Viewport-Width và Downlink.” Đừng lo lắng về các Client Hints cụ thể.
Chúng ta sẽ tìm hiểu về các công cụ đó sau giây lát.
Bạn có thể đặt các tiêu đề chọn sử dụng này bằng bất kỳ ngôn ngữ phụ trợ nào. Ví dụ: bạn có thể sử dụng hàm header của PHP.
Bạn thậm chí có thể đặt các tiêu đề chọn sử dụng này bằng thuộc tính http-equiv trên thẻ <meta>:
<meta http-equiv="Accept-CH" content="Viewport-Width, Downlink" />
Tất cả Client Hints!
Client Hints mô tả một trong hai điều: thiết bị mà người dùng sử dụng và mạng mà họ đang dùng để truy cập vào trang web của bạn. Hãy cùng xem nhanh tất cả gợi ý có sẵn.
Gợi ý về thiết bị
Một số Client Hints mô tả các đặc điểm của thiết bị của người dùng, thường là các đặc điểm của màn hình. Một số trong số đó có thể giúp bạn chọn tài nguyên đa phương tiện tối ưu cho màn hình của một người dùng nhất định, nhưng không phải tất cả đều nhất thiết phải tập trung vào nội dung nghe nhìn.
Trước khi tìm hiểu danh sách này, bạn nên tìm hiểu một số thuật ngữ chính dùng để mô tả màn hình và độ phân giải của nội dung nghe nhìn:
Kích thước nội tại: kích thước thực tế của tài nguyên đa phương tiện. Ví dụ: nếu bạn mở một hình ảnh trong Photoshop, kích thước hiển thị trong hộp thoại kích thước hình ảnh sẽ mô tả kích thước nội tại của hình ảnh đó.
Kích thước nội tại được điều chỉnh theo mật độ: kích thước của tài nguyên đa phương tiện sau khi được điều chỉnh theo mật độ pixel. Đó là kích thước nội tại của hình ảnh chia cho tỷ lệ pixel của thiết bị. Ví dụ: hãy xem mã đánh dấu sau:
<img
src="whats-up-1x.png"
srcset="whats-up-2x.png 2x, whats-up-1x.png 1x"
alt="I'm that image you wanted."
/>
Giả sử kích thước nội tại của hình ảnh 1x trong trường hợp này là 320x240 và kích thước nội tại của hình ảnh 2x là 640x480. Nếu mã đánh dấu này được phân tích cú pháp bởi một ứng dụng khách được cài đặt trên thiết bị có tỷ lệ pixel thiết bị màn hình là 2 (ví dụ: màn hình Retina), thì hình ảnh 2x sẽ được yêu cầu. Kích thước nội tại được điều chỉnh theo mật độ của hình ảnh 2x là 320x240, vì 640x480 chia cho 2 là 320x240.
Kích thước bên ngoài: kích thước của tài nguyên đa phương tiện sau khi áp dụng CSS và các yếu tố bố cục khác (chẳng hạn như thuộc tính width và height). Giả sử bạn có một phần tử <img> tải hình ảnh có kích thước nội tại được điều chỉnh theo mật độ là 320x240, nhưng phần tử này cũng có các thuộc tính CSS width và height với các giá trị lần lượt là 256px và 192px. Trong ví dụ này,
kích thước bên ngoài của phần tử <img> đó trở thành 256x192.
width: 256px; và height: 192px; sẽ chuyển đổi một hình ảnh có kích thước nội tại 320x240 thành một hình ảnh có kích thước bên ngoài 256x192.Sau khi đã nắm được một số thuật ngữ, hãy cùng tìm hiểu danh sách Client Hints dành riêng cho thiết bị mà bạn có thể sử dụng.
Viewport-Width
Viewport-Width là chiều rộng của khung nhìn của người dùng tính bằng pixel CSS:
Viewport-Width: 320
Bạn có thể sử dụng gợi ý này cùng với các gợi ý khác dành riêng cho màn hình để cung cấp các cách xử lý khác nhau (tức là cắt) cho một hình ảnh tối ưu cho các kích thước màn hình cụ thể (tức là hướng nghệ thuật) hoặc để bỏ qua các tài nguyên không cần thiết cho chiều rộng màn hình hiện tại.
DPR
DPR, viết tắt của tỷ lệ pixel thiết bị, báo cáo tỷ lệ pixel vật lý so với pixel CSS trên màn hình của người dùng:
DPR: 2
Gợi ý này rất hữu ích khi chọn nguồn hình ảnh tương ứng với mật độ điểm ảnh của màn hình (như các chỉ số mô tả x trong thuộc tính srcset).
Chiều rộng
Gợi ý Width xuất hiện trên các yêu cầu về tài nguyên hình ảnh do thẻ <img> hoặc <source> kích hoạt bằng thuộc tính sizes.
sizes cho trình duyệt biết kích thước bên ngoài của tài nguyên; Width sử dụng kích thước bên ngoài đó để yêu cầu một hình ảnh có kích thước nội tại tối ưu cho bố cục hiện tại.
Ví dụ: giả sử người dùng yêu cầu một trang có màn hình rộng 320 pixel CSS với DPR là 2. Thiết bị tải một tài liệu có phần tử <img> chứa giá trị thuộc tính sizes là 85vw (tức là 85% chiều rộng khung nhìn cho tất cả
kích thước màn hình). Nếu gợi ý Width đã được chọn, thì ứng dụng sẽ gửi gợi ý Width này đến máy chủ cùng với yêu cầu về src của <img>:
Width: 544
Trong trường hợp này, ứng dụng khách đang gợi ý cho máy chủ rằng chiều rộng nội tại tối ưu cho hình ảnh được yêu cầu sẽ là 85% chiều rộng khung nhìn (272 pixel) nhân với DPR của màn hình (2), tức là 544 pixel.
Gợi ý này đặc biệt hiệu quả vì không chỉ tính đến chiều rộng đã điều chỉnh theo mật độ của màn hình, mà còn điều chỉnh thông tin quan trọng này cho phù hợp với kích thước bên ngoài của hình ảnh trong bố cục. Điều này giúp máy chủ có cơ hội thương lượng các phản hồi hình ảnh tối ưu cho cả màn hình và bố cục.
Content-DPR
Mặc dù bạn đã biết rằng màn hình có tỷ lệ pixel của thiết bị, nhưng tài nguyên cũng có tỷ lệ pixel riêng. Trong các trường hợp sử dụng lựa chọn tài nguyên đơn giản nhất, tỷ lệ pixel giữa thiết bị và tài nguyên có thể giống nhau. Tuy nhiên, Trong trường hợp cả tiêu đề DPR và Width đều được sử dụng, kích thước bên ngoài của tài nguyên có thể tạo ra các trường hợp mà hai tiêu đề này khác nhau. Đây là lúc gợi ý Content-DPR phát huy tác dụng.
Không giống như các gợi ý khác về ứng dụng, Content-DPR không phải là tiêu đề yêu cầu mà máy chủ sử dụng, mà là tiêu đề phản hồi mà máy chủ phải gửi bất cứ khi nào gợi ý DPR và Width được dùng để chọn tài nguyên. Giá trị của Content-DPR phải là kết quả của phương trình sau:
Content-DPR = [Kích thước tài nguyên hình ảnh đã chọn] / ([Width] / [DPR])
Khi tiêu đề của yêu cầu Content-DPR được gửi, trình duyệt sẽ biết cách điều chỉnh tỷ lệ hình ảnh cho tỷ lệ pixel của thiết bị và bố cục màn hình. Nếu không có thuộc tính này, hình ảnh có thể không được điều chỉnh tỷ lệ đúng cách.
Device-Memory
Về mặt kỹ thuật, Device-Memory là một phần của API Bộ nhớ thiết bị, cho biết dung lượng bộ nhớ ước chừng mà thiết bị hiện tại có (tính bằng GiB):
Device-Memory: 2
Một trường hợp sử dụng có thể áp dụng gợi ý này là giảm lượng JavaScript được gửi đến trình duyệt trên các thiết bị có bộ nhớ hạn chế, vì JavaScript là loại nội dung tốn nhiều tài nguyên nhất mà trình duyệt thường tải. Hoặc bạn có thể gửi hình ảnh có DPR thấp hơn vì chúng sử dụng ít bộ nhớ hơn để giải mã.
Gợi ý về mạng
Network Information API (API Thông tin mạng) cung cấp một danh mục Client Hints khác, mô tả hiệu suất của kết nối mạng của người dùng. Theo tôi, đây là bộ gợi ý hữu ích nhất. Nhờ đó, chúng tôi có thể điều chỉnh trải nghiệm cho phù hợp với người dùng bằng cách thay đổi cách phân phối tài nguyên cho ứng dụng khách khi kết nối chậm.
RTT
Gợi ý RTT cung cấp Thời gian khứ hồi gần đúng (tính bằng mili giây) trên lớp ứng dụng. Gợi ý RTT, không giống như RTT lớp truyền tải, bao gồm cả thời gian xử lý của máy chủ.
RTT: 125
Gợi ý này rất hữu ích vì độ trễ đóng vai trò quan trọng trong hiệu suất tải.
Khi sử dụng gợi ý RTT, chúng ta có thể đưa ra quyết định dựa trên khả năng phản hồi của mạng, nhờ đó có thể giúp tăng tốc độ phân phối toàn bộ trải nghiệm (ví dụ: bằng cách bỏ qua một số yêu cầu).
Đỏ tín hiệu
Mặc dù độ trễ là yếu tố quan trọng trong hiệu suất tải, nhưng băng thông cũng có sức ảnh hưởng. Gợi ý Downlink, được biểu thị bằng megabit/giây (Mbps), cho biết tốc độ tải xuống gần đúng của kết nối của người dùng:
Downlink: 2.5
Khi kết hợp với RTT, Downlink có thể giúp thay đổi cách phân phối nội dung cho người dùng dựa trên chất lượng của kết nối mạng.
ECT
Gợi ý ECT là viết tắt của Loại kết nối hiệu quả. Giá trị của thuộc tính này là một trong các loại kết nối được liệt kê, mỗi loại mô tả một kết nối trong phạm vi được chỉ định của cả giá trị RTT và Downlink.
Tiêu đề này không giải thích loại kết nối thực tế là gì, ví dụ: tiêu đề này không báo cáo liệu cổng của bạn là trạm phát sóng hay điểm truy cập Wi-Fi. Thay vào đó, hệ thống sẽ phân tích độ trễ và băng thông của kết nối hiện tại, đồng thời xác định hồ sơ mạng nào giống nhất. Ví dụ: nếu bạn kết nối
qua Wi-Fi với một mạng chậm, ECT có thể được điền giá trị 2g,
đây là giá trị gần đúng nhất của kết nối hiệu quả:
ECT: 2g
Các giá trị hợp lệ cho ECT là 4g, 3g, 2g và slow-2g. Bạn có thể dùng gợi ý này làm điểm xuất phát để đánh giá chất lượng kết nối, sau đó tinh chỉnh bằng gợi ý RTT và Downlink.
Save-Data
Save-Data không phải là gợi ý mô tả điều kiện mạng mà là lựa chọn ưu tiên của người dùng cho biết rằng các trang nên gửi ít dữ liệu hơn.
Tôi muốn phân loại Save-Data là gợi ý mạng vì nhiều việc bạn làm với gợi ý này cũng tương tự như các gợi ý mạng khác. Người dùng cũng có thể bật chế độ này trong môi trường có độ trễ cao/băng thông thấp. Gợi ý này, khi xuất hiện, luôn có dạng như sau:
Save-Data: on
Tại Google, chúng tôi đã nói về những việc bạn có thể làm với
Save-Data.
Tác động của việc này đối với hiệu suất có thể rất lớn. Đây là tín hiệu cho thấy người dùng
đang yêu cầu bạn gửi ít nội dung hơn cho họ! Nếu bạn lắng nghe và hành động theo tín hiệu đó, người dùng sẽ đánh giá cao.
Cùng nhau hợp tác
Việc bạn làm với Client Hints phụ thuộc vào bạn. Vì các báo cáo này cung cấp rất nhiều thông tin, nên bạn có nhiều lựa chọn. Để có thêm ý tưởng, hãy xem Client Hints có thể làm gì cho Sconnie Timber, một công ty gỗ hư cấu ở vùng nông thôn Thượng Trung Tây. Như thường thấy ở các vùng sâu vùng xa, kết nối mạng có thể không ổn định. Đây là lúc một công nghệ như Client Hints có thể thực sự tạo ra sự khác biệt cho người dùng.
Hình ảnh thích ứng
Tất cả trường hợp sử dụng hình ảnh thích ứng, ngoại trừ trường hợp đơn giản nhất, đều có thể trở nên phức tạp. Điều gì xảy ra nếu bạn có nhiều cách xử lý và biến thể của cùng một hình ảnh cho các kích thước màn hình khác nhau và các định dạng khác nhau? Mã đánh dấu đó sẽ rất phức tạp rất nhanh.
Bạn rất dễ mắc sai lầm, quên hoặc hiểu nhầm các khái niệm quan trọng (chẳng hạn như sizes).
Mặc dù <picture> và srcset chắc chắn là những công cụ tuyệt vời, nhưng việc phát triển và duy trì các công cụ này cho những trường hợp sử dụng phức tạp có thể tốn nhiều thời gian. Chúng ta có thể tự động hoá việc tạo mã đánh dấu, nhưng việc này cũng khó khăn vì chức năng mà <picture> và srcset cung cấp đủ phức tạp để quá trình tự động hoá cần được thực hiện theo cách duy trì tính linh hoạt mà chúng cung cấp.
Client Hints có thể đơn giản hoá việc này. Việc thương lượng phản hồi hình ảnh bằng Client Hints có thể có dạng như sau:
- Nếu phù hợp với quy trình làm việc của bạn, trước tiên, hãy chọn một cách xử lý hình ảnh (tức là hình ảnh theo hướng nghệ thuật) bằng cách kiểm tra gợi ý
Viewport-Width. - Chọn độ phân giải hình ảnh bằng cách kiểm tra gợi ý
Widthvà gợi ýDPR, đồng thời chọn một nguồn phù hợp với kích thước bố cục và mật độ màn hình của hình ảnh (tương tự như cách hoạt động của các chỉ số mô tảxvàwtrongsrcset). - Chọn định dạng tệp tối ưu nhất mà trình duyệt hỗ trợ (
Acceptgiúp chúng ta thực hiện việc này trong hầu hết các trình duyệt).
Đối với khách hàng là công ty gỗ hư cấu, tôi đã phát triển một quy trình chọn hình ảnh thích ứng đơn giản trong PHP sử dụng Client Hints. Điều này có nghĩa là thay vì gửi mã đánh dấu này cho tất cả người dùng:
<picture>
<source
srcset="
company-photo-256w.webp 256w,
company-photo-512w.webp 512w,
company-photo-768w.webp 768w,
company-photo-1024w.webp 1024w,
company-photo-1280w.webp 1280w
"
type="image/webp"
/>
<img
srcset="
company-photo-256w.jpg 256w,
company-photo-512w.jpg 512w,
company-photo-768w.jpg 768w,
company-photo-1024w.jpg 1024w,
company-photo-1280w.jpg 1280w
"
src="company-photo-256w.jpg"
sizes="(min-width: 560px) 251px, 88.43vw"
alt="The Sconnie Timber Staff!"
/>
</picture>
Tôi có thể giảm xuống còn như sau dựa trên khả năng hỗ trợ của từng trình duyệt:
<img
src="/image/sizes:true/company-photo.jpg"
sizes="(min-width: 560px) 251px, 88.43vw"
alt="SAY CHEESY PICKLES."
/>
Trong ví dụ này, URL /image là một tập lệnh PHP, theo sau là các tham số được viết lại bằng mod_rewrite. Thẻ này lấy tên tệp hình ảnh và các tham số bổ sung để giúp tập lệnh phụ trợ chọn hình ảnh phù hợp nhất trong các điều kiện đã cho.
Tôi cảm thấy "Nhưng đây không phải là việc triển khai lại <picture> và srcset trên phần phụ trợ sao?" là câu hỏi đầu tiên của bạn.
Theo một cách nào đó, có, nhưng có một điểm khác biệt quan trọng: khi một ứng dụng sử dụng Client Hints để tạo phản hồi đa phương tiện, hầu hết (nếu không phải tất cả) công việc đều dễ tự động hoá hơn nhiều, có thể bao gồm một dịch vụ (chẳng hạn như CDN) có thể thay mặt bạn thực hiện việc này. Trong khi đó, với các giải pháp HTML, bạn cần viết mã đánh dấu mới để cung cấp cho mọi trường hợp sử dụng. Tất nhiên, bạn có thể tự động hoá việc tạo mã đánh dấu. Tuy nhiên, nếu thiết kế hoặc yêu cầu của bạn thay đổi, thì có thể bạn sẽ cần phải xem lại chiến lược tự động hoá trong tương lai.
Client Hints giúp bạn có thể bắt đầu bằng một hình ảnh có độ phân giải cao, không tổn hao, sau đó có thể linh động đổi kích thước để tối ưu cho bất kỳ tổ hợp màn hình và bố cục nào. Không giống như srcset, yêu cầu bạn liệt kê danh sách cố định các hình ảnh có thể có để trình duyệt lựa chọn, phương pháp này có thể linh hoạt hơn. Mặc dù srcset buộc bạn phải cung cấp cho trình duyệt một tập hợp các biến thể thô (ví dụ: 256w, 512w, 768w và 1024w), nhưng giải pháp dựa trên gợi ý của ứng dụng có thể phân phát tất cả các chiều rộng mà không cần một lượng lớn mã đánh dấu.
Tất nhiên, bạn không cần phải tự viết logic chọn hình ảnh. Cloudinary sử dụng Client Hints để tạo phản hồi hình ảnh khi bạn sử dụng tham số w_auto, và nhận thấy rằng người dùng trung vị tải xuống ít hơn 42% byte khi sử dụng trình duyệt hỗ trợ Client Hints.
Nhưng hãy cẩn thận! Những thay đổi trong phiên bản Chrome 67 dành cho máy tính đã loại bỏ tính năng hỗ trợ cho gợi ý ứng dụng khách trên nhiều nguồn gốc. May mắn là những quy định hạn chế này không ảnh hưởng đến phiên bản Chrome dành cho thiết bị di động và sẽ được dỡ bỏ hoàn toàn cho tất cả các nền tảng khi công việc về Chính sách tính năng hoàn tất.
Giúp người dùng sử dụng mạng chậm
Hiệu suất thích ứng là ý tưởng cho rằng chúng ta có thể điều chỉnh cách phân phối tài nguyên dựa trên thông tin mà Client Hints cung cấp cho chúng ta; cụ thể là thông tin liên quan đến trạng thái hiện tại của kết nối mạng của người dùng.
Đối với trang web của Sconnie Timber, chúng tôi thực hiện các bước để giảm tải khi mạng chậm, đồng thời kiểm tra các tiêu đề Save-Data, ECT, RTT và Downlink trong mã phụ trợ. Khi hoàn tất, chúng tôi sẽ tạo điểm chất lượng mạng mà chúng tôi có thể sử dụng để xác định xem có nên can thiệp để mang lại trải nghiệm tốt hơn cho người dùng hay không. Điểm số mạng này nằm trong khoảng từ 0 đến 1, trong đó 0 là chất lượng mạng kém nhất có thể và 1 là chất lượng mạng tốt nhất.
Ban đầu, chúng ta kiểm tra xem Save-Data có tồn tại hay không. Nếu có, điểm số sẽ được đặt thành 0, vì chúng tôi giả định rằng người dùng muốn chúng tôi làm bất cứ điều gì cần thiết để mang lại trải nghiệm nhẹ nhàng và nhanh chóng hơn.
Tuy nhiên, nếu không có Save-Data, chúng ta sẽ tiếp tục và cân nhắc giá trị của các gợi ý ECT, RTT và Downlink để tính điểm mô tả chất lượng kết nối mạng. Mã nguồn tạo điểm số mạng có trên GitHub. Tóm lại, nếu sử dụng gợi ý liên quan đến mạng theo một số cách, chúng ta có thể cải thiện trải nghiệm cho những người dùng mạng chậm.
Khi các trang web điều chỉnh cho phù hợp với thông tin mà Client Hints cung cấp, chúng ta không cần phải áp dụng phương pháp "tất cả hoặc không có gì". Chúng tôi có thể quyết định một cách thông minh về việc nên gửi tài nguyên nào. Chúng ta có thể sửa đổi logic lựa chọn hình ảnh thích ứng để gửi hình ảnh có chất lượng thấp hơn cho một màn hình nhất định nhằm tăng tốc hiệu suất tải khi chất lượng mạng kém.
Trong ví dụ này, chúng ta có thể thấy tác động của Client Hints khi cải thiện hiệu suất của các trang web trên mạng chậm hơn. Dưới đây là biểu đồ thác nước WebPagetest của một trang web trên mạng chậm không thích ứng với Client Hints:
Và giờ đây, biểu đồ thác nước cho cùng một trang web trên cùng một kết nối chậm, ngoại trừ lần này, trang web sử dụng Client Hints để loại bỏ các tài nguyên trang không quan trọng:
Client Hints đã giảm thời gian tải trang từ hơn 45 giây xuống chưa đến 1/10 thời gian đó. Lợi ích của Client Hints trong trường hợp này là không thể phủ nhận và có thể là một lợi ích lớn cho người dùng đang tìm kiếm thông tin quan trọng qua mạng chậm.
Hơn nữa, bạn có thể sử dụng Client Hints mà không làm gián đoạn trải nghiệm
đối với các trình duyệt không hỗ trợ gợi ý. Ví dụ: nếu muốn điều chỉnh việc phân phối tài nguyên bằng cách sử dụng giá trị của gợi ý ECT trong khi vẫn mang lại trải nghiệm đầy đủ cho các trình duyệt không hỗ trợ, chúng ta có thể đặt giá trị dự phòng thành giá trị mặc định như sau:
// Set the ECT value to "4g" by default.
$ect = isset($_SERVER["HTTP_ECT"]) ? $_SERVER["HTTP_ECT"] : "4g";
Ở đây, "4g" đại diện cho kết nối mạng có chất lượng cao nhất mà tiêu đề ECT mô tả. Nếu chúng ta khởi chạy $ect thành "4g", thì những trình duyệt không hỗ trợ gợi ý ứng dụng sẽ không bị ảnh hưởng. Chọn tham gia để chiến thắng!
Hãy chú ý đến bộ nhớ đệm!
Bất cứ khi nào thay đổi phản hồi dựa trên tiêu đề HTTP, bạn cần lưu ý đến cách bộ nhớ đệm xử lý các lần tìm nạp tài nguyên đó trong tương lai. Tiêu đề Vary là không thể thiếu ở đây, vì tiêu đề này khoá các mục nhập bộ nhớ đệm vào giá trị của tiêu đề của yêu cầu được cung cấp cho tiêu đề đó. Nói một cách đơn giản, nếu bạn sửa đổi bất kỳ phản hồi nào dựa trên một tiêu đề của yêu cầu HTTP nhất định, thì hầu như bạn luôn phải đưa tiêu đề của yêu cầu đó vào Vary như sau:
Vary: DPR, Width
Tuy nhiên, có một lưu ý quan trọng: Bạn không bao giờ nên Vary các phản hồi có thể lưu vào bộ nhớ đệm trên một tiêu đề thường xuyên thay đổi (như Cookie) vì những tài nguyên đó sẽ không thể lưu vào bộ nhớ đệm một cách hiệu quả. Khi biết điều này, bạn nên tránh
Vary trên các Client Hints như RTT hoặc Downlink, vì đó là
các yếu tố kết nối có thể thay đổi khá thường xuyên. Nếu bạn muốn sửa đổi
phản hồi trên các tiêu đề đó, hãy cân nhắc chỉ khoá tiêu đề ECT, việc này sẽ
giảm thiểu tình trạng thiếu bộ nhớ đệm.
Tất nhiên, điều này chỉ áp dụng nếu bạn lưu phản hồi vào bộ nhớ đệm ngay từ đầu.
Ví dụ: bạn sẽ không lưu các thành phần HTML vào bộ nhớ đệm nếu nội dung của các thành phần đó là nội dung động, vì điều này có thể làm hỏng trải nghiệm người dùng khi họ truy cập lại. Trong những trường hợp như vậy, bạn có thể sửa đổi các câu trả lời đó theo bất kỳ cách nào bạn thấy cần thiết và không cần quan tâm đến Vary.
Client Hints trong trình chạy dịch vụ
Giờ đây, việc thương lượng nội dung không chỉ dành cho máy chủ nữa! Vì trình chạy dịch vụ đóng vai trò là proxy giữa ứng dụng và máy chủ, nên bạn có thể kiểm soát cách phân phối tài nguyên thông qua JavaScript. Điều này bao gồm cả Client Hints. Trong sự kiện fetch của trình chạy dịch vụ, bạn có thể sử dụng phương thức request.headers.get của đối tượng event để đọc tiêu đề của yêu cầu của tài nguyên như sau:
self.addEventListener('fetch', (event) => {
let dpr = event.request.headers.get('DPR');
let viewportWidth = event.request.headers.get('Viewport-Width');
let width = event.request.headers.get('Width');
event.respondWith(
(async function () {
// Do what you will with these hints!
})(),
);
});
Bạn có thể đọc bất kỳ tiêu đề Client Hints nào của ứng dụng khách mà bạn chọn theo cách này. Tuy nhiên, đó không phải là cách duy nhất để bạn có được một số thông tin này. Bạn có thể đọc các gợi ý dành riêng cho mạng trong các thuộc tính JavaScript tương đương này trong đối tượng navigator:
| Client Hints | Tương đương JS |
|---|---|
| ECT | `navigator.connection.effectiveType` |
| `RTT` | `navigator.connection.rtt` |
| `Save-Data` | navigator.connection.saveData |
| `Downlink` | navigator.connection.downlink |
| Device-Memory | `navigator.deviceMemory` |
Vì các API này không có sẵn ở mọi nơi, nên bạn cần kiểm tra tính năng bằng toán tử in:
if ('connection' in navigator) {
// Work with netinfo API properties in JavaScript!
}
Tại đây, bạn có thể sử dụng logic tương tự như logic bạn sẽ sử dụng trên máy chủ, ngoại trừ việc bạn không cần máy chủ để thương lượng nội dung bằng Client Hints. Chỉ riêng trình chạy dịch vụ cũng có khả năng giúp trải nghiệm nhanh hơn và linh hoạt hơn nhờ khả năng phân phát nội dung khi người dùng không kết nối mạng.
Kết thúc
Với Client Hints, chúng tôi có thể giúp người dùng trải nghiệm nhanh hơn theo cách hoàn toàn tiến bộ. Chúng ta có thể phân phát nội dung nghe nhìn dựa trên chức năng của thiết bị của người dùng theo cách giúp phân phát hình ảnh thích ứng dễ dàng hơn so với việc dựa vào <picture> và srcset, đặc biệt là đối với các trường hợp sử dụng phức tạp. Nhờ đó, chúng tôi không chỉ giảm được thời gian và công sức cho việc phát triển mà còn tối ưu hoá tài nguyên (đặc biệt là hình ảnh) theo cách nhắm đến màn hình của người dùng một cách chính xác hơn so với
Có lẽ quan trọng hơn, chúng ta có thể phát hiện các kết nối mạng kém và thu hẹp khoảng cách cho người dùng bằng cách sửa đổi nội dung chúng ta gửi và cách chúng ta gửi nội dung đó. Điều này có thể giúp người dùng dễ dàng truy cập vào các trang web trên mạng không ổn định. Khi kết hợp với trình chạy dịch vụ, chúng ta có thể tạo ra các trang web cực nhanh và có thể sử dụng khi không có mạng.
Mặc dù Client Hints chỉ có trong Chrome và các trình duyệt dựa trên Chromium, nhưng bạn có thể sử dụng Client Hints theo cách không gây trở ngại cho các trình trình duyệt không hỗ trợ Client Hints. Hãy cân nhắc sử dụng Client Hints để tạo ra trải nghiệm thực sự toàn diện và dễ thích ứng, nhận biết được khả năng của thiết bị của mọi người dùng và mạng mà họ kết nối. Hy vọng rằng các nhà cung cấp trình duyệt khác sẽ thấy được giá trị của các tính năng này và có ý định triển khai.
Tài nguyên
- Hình ảnh thích ứng tự động với Gợi ý ứng dụng
- Client Hints và hình ảnh thích ứng – Những thay đổi trong Chrome 67
- Sử dụng Client Hint! (Trang trình bày)
- Phân phối ứng dụng nhanh và gọn nhẹ bằng
Save-Data
Cảm ơn Ilya Grigorik, Eric Portis, Jeff Posnick, Yoav Weiss và Estelle Weyl vì đã đưa ra ý kiến phản hồi và chỉnh sửa có giá trị cho bài viết này.