Tiêu đề yêu cầu gợi ý ứng dụng Save-Data
có trong trình duyệt Chrome, Opera và Yandex cho phép nhà phát triển cung cấp các ứng dụng nhẹ hơn và nhanh hơn cho những người dùng chọn bật chế độ tiết kiệm dữ liệu trong trình duyệt của họ.
Nhu cầu về các trang gọn nhẹ
Mọi người đều đồng ý rằng các trang web nhanh hơn và nhẹ hơn cung cấp trải nghiệm người dùng hài lòng hơn, cho phép mức độ hiểu bài và tỷ lệ giữ chân người dùng tốt hơn, đồng thời giúp tăng số lượt chuyển đổi và doanh thu. Nghiên cứu của Google đã cho thấy rằng "...các trang được tối ưu hoá tải nhanh hơn 4 lần so với trang gốc và sử dụng ít byte hơn 80%. Vì những trang này tải nhanh hơn rất nhiều, nên chúng tôi cũng nhận thấy lưu lượng truy cập vào các trang này tăng 50%."
Và, mặc dù số lượng kết nối 2G cuối cùng đã giảm, nhưng 2G vẫn là công nghệ mạng chiếm ưu thế trong năm 2015. Mức độ thâm nhập và hoạt động của mạng 3G và 4G đang tăng nhanh, nhưng chi phí liên quan đến quyền sở hữu và những hạn chế về mạng vẫn là một yếu tố quan trọng đối với hàng trăm triệu người dùng.
Đây là những đối số mạnh mẽ cho việc tối ưu hoá trang.
Có nhiều phương pháp thay thế, chẳng hạn như trình duyệt proxy và dịch vụ chuyển mã để cải thiện tốc độ trang web mà không cần sự tham gia trực tiếp của nhà phát triển. Mặc dù các dịch vụ như vậy khá phổ biến, nhưng chúng vẫn có những hạn chế đáng kể – nén hình ảnh và văn bản đơn giản (và đôi khi không được chấp nhận), không thể xử lý các trang bảo mật (HTTPS), chỉ tối ưu hoá các trang được truy cập qua kết quả tìm kiếm và nhiều điểm khác. Mức độ phổ biến của các dịch vụ này là một chỉ báo cho thấy các nhà phát triển web chưa giải quyết đúng cách nhu cầu cao của người dùng về các trang và ứng dụng nhanh và nhẹ. Tuy nhiên, để đạt được mục tiêu đó là một con đường phức tạp và đôi khi không hề dễ dàng.
Tiêu đề của yêu cầu Save-Data
Một kỹ thuật khá đơn giản là cho phép trình duyệt trợ giúp bằng cách sử dụng tiêu đề của yêu cầu Save-Data
. Bằng cách xác định tiêu đề này, trang web có thể tuỳ chỉnh và cung cấp trải nghiệm người dùng được tối ưu hoá cho những người dùng bị hạn chế về chi phí và hiệu suất.
Các trình duyệt được hỗ trợ (bên dưới) cho phép người dùng bật *chế độ tiết kiệm dữ liệu. Chế độ này cấp cho trình duyệt quyền áp dụng một nhóm các biện pháp tối ưu hoá để giảm lượng dữ liệu cần thiết để hiển thị trang. Khi tính năng này được hiển thị hoặc được quảng cáo, trình duyệt có thể yêu cầu hình ảnh có độ phân giải thấp hơn, trì hoãn việc tải một số tài nguyên hoặc định tuyến các yêu cầu thông qua một dịch vụ áp dụng các biện pháp tối ưu hoá khác dành riêng cho nội dung như nén tài nguyên hình ảnh và tài nguyên văn bản.
Hỗ trợ trình duyệt
- Chrome 49 trở lên quảng cáo
Save-Data
khi người dùng bật tuỳ chọn "Trình tiết kiệm dữ liệu" trên thiết bị di động hoặc tiện ích "Trình tiết kiệm dữ liệu" trên trình duyệt dành cho máy tính. - Opera 35 trở lên quảng cáo
Save-Data
khi người dùng bật chế độ "OperaTurbo" trên máy tính hoặc tuỳ chọn "Tiết kiệm dữ liệu" trên trình duyệt Android. - Yandex 16.2 trở lên quảng cáo
Save-Data
khi chế độ Turbo được bật trên máy tính hoặc trình duyệt dành cho thiết bị di động.
Phát hiện chế độ cài đặt Save-Data
Để xác định thời điểm mang lại trải nghiệm "nhẹ" cho người dùng, ứng dụng của bạn có thể kiểm tra tiêu đề của yêu cầu gợi ý ứng dụng Save-Data
. Tiêu đề yêu cầu này cho biết ứng dụng muốn giảm mức sử dụng dữ liệu do chi phí truyền cao, tốc độ kết nối chậm hoặc các lý do khác.
Khi người dùng bật chế độ tiết kiệm dữ liệu trong trình duyệt, trình duyệt sẽ thêm tiêu đề yêu cầu Save-Data
vào tất cả các yêu cầu gửi đi (cả HTTP và HTTPS).
Tại thời điểm viết bài này, trình duyệt chỉ quảng cáo một mã thông báo *on- trong tiêu đề (Save-Data: on
), nhưng mã này có thể được mở rộng trong tương lai để cho biết các lựa chọn khác của người dùng.
Ngoài ra, bạn có thể phát hiện xem Save-Data
có được bật trong JavaScript hay không:
if ('connection' in navigator) {
if (navigator.connection.saveData === true) {
// Implement data saving operations here.
}
}
Việc kiểm tra sự hiện diện của đối tượng connection
trong đối tượng navigator
là rất quan trọng, vì đối tượng này đại diện cho Network Information API (API Thông tin mạng) chỉ được triển khai trong trình duyệt Chrome, Chrome dành cho Android và Samsung Internet. Từ đó, bạn chỉ cần kiểm tra xem navigator.connection.saveData
có bằng true
hay không là có thể triển khai mọi hoạt động tiết kiệm dữ liệu trong điều kiện đó.
Nếu sử dụng một nhân viên dịch vụ, thì ứng dụng của bạn có thể kiểm tra tiêu đề của yêu cầu và áp dụng logic liên quan để tối ưu hoá trải nghiệm.
Ngoài ra, máy chủ có thể tìm các lựa chọn ưu tiên đã quảng cáo trong tiêu đề của yêu cầu Save-Data
và trả về một phản hồi thay thế – các mã đánh dấu khác, hình ảnh và video nhỏ hơn, v.v.
Mẹo triển khai và các phương pháp hay nhất
- Khi sử dụng
Save-Data
, hãy cung cấp một số thiết bị giao diện người dùng hỗ trợ ngôn ngữ này và cho phép người dùng dễ dàng chuyển đổi giữa các trải nghiệm. Ví dụ:- Thông báo cho người dùng rằng
Save-Data
được hỗ trợ và khuyến khích họ sử dụng ứng dụng đó. - Cho phép người dùng xác định và chọn chế độ có lời nhắc phù hợp cũng như nút bật/tắt trực quan hoặc hộp đánh dấu.
- Khi bạn chọn chế độ tiết kiệm dữ liệu, hãy thông báo và cung cấp một cách dễ dàng và rõ ràng để tắt chế độ này và quay lại trải nghiệm đầy đủ nếu muốn.
- Thông báo cho người dùng rằng
- Hãy nhớ rằng các ứng dụng nhẹ không phải là ứng dụng nhẹ hơn. Các mô-đun này không bỏ qua chức năng hoặc dữ liệu quan trọng mà chỉ nắm rõ hơn về các chi phí liên quan và trải nghiệm người dùng. Ví dụ:
- Ứng dụng thư viện ảnh có thể cung cấp bản xem trước có độ phân giải thấp hơn hoặc sử dụng cơ chế băng chuyền ít tốn mã hơn.
- Ứng dụng tìm kiếm có thể trả về ít kết quả hơn cùng một lúc, giới hạn số lượng kết quả chứa nhiều nội dung nghe nhìn hoặc giảm số lượng phần phụ thuộc cần thiết để hiển thị trang.
- Một trang web định hướng tin tức có thể hiển thị ít tin bài hơn, bỏ qua các danh mục ít phổ biến hoặc cung cấp bản xem trước nội dung nghe nhìn ở kích thước nhỏ hơn.
- Cung cấp logic máy chủ để kiểm tra tiêu đề của yêu cầu
Save-Data
và cân nhắc việc cung cấp một phản hồi trang thay thế nhẹ hơn khi được bật – ví dụ: giảm số lượng tài nguyên và phần phụ thuộc cần thiết, áp dụng nén tài nguyên linh hoạt hơn, v.v.- Nếu bạn đang phân phát một phản hồi thay thế dựa trên tiêu đề
Save-Data
, hãy nhớ thêm phản hồi đó vào danh sách Vary –Vary: Save-Data
– để thông báo cho các bộ nhớ đệm của luồng ngược dòng (upstream) rằng chúng chỉ nên lưu vào bộ nhớ đệm và chỉ phân phát phiên bản này khi có tiêu đề của yêu cầuSave-Data
. Để biết thêm thông tin chi tiết, hãy xem các phương pháp hay nhất về tương tác với bộ nhớ đệm.
- Nếu bạn đang phân phát một phản hồi thay thế dựa trên tiêu đề
- Nếu bạn sử dụng trình chạy dịch vụ, ứng dụng của bạn có thể phát hiện thời điểm bật tuỳ chọn tiết kiệm dữ liệu bằng cách kiểm tra sự hiện diện của tiêu đề yêu cầu
Save-Data
hoặc kiểm tra giá trị của thuộc tínhnavigator.connection.saveData
. Nếu được bật, hãy cân nhắc xem bạn có thể viết lại yêu cầu để tìm nạp ít byte hơn hay sử dụng một phản hồi đã tìm nạp được. - Hãy cân nhắc tăng cường
Save-Data
với các tín hiệu khác, chẳng hạn như thông tin về loại kết nối và công nghệ của người dùng (xem API NetInfo). Ví dụ: bạn có thể muốn cung cấp trải nghiệm gọn nhẹ cho mọi người dùng trên kết nối 2G ngay cả khiSave-Data
chưa được bật. Ngược lại, việc người dùng có kết nối 4G "nhanh" không có nghĩa là họ không muốn lưu dữ liệu, chẳng hạn như khi chuyển vùng. Ngoài ra, bạn có thể tăng cường sự hiện diện củaSave-Data
bằng gợi ý ứng dụngDevice-Memory
để tăng cường thích ứng với người dùng trên các thiết bị có bộ nhớ hạn chế. Bộ nhớ thiết bị của người dùng cũng được quảng cáo trong gợi ý ứng dụngnavigator.deviceMemory
.
Recipe
Kết quả bạn có thể đạt được thông qua Save-Data
chỉ giới hạn ở những kết quả bạn nghĩ ra. Để giúp bạn hình dung được những việc bạn có thể làm, hãy xem qua một số trường hợp sử dụng. Khi đọc thông tin này, có thể bạn sẽ nghĩ ra các trường hợp sử dụng khác của riêng mình, vì vậy hãy thoải mái thử nghiệm và xem điều khả thi!
Đang kiểm tra Save-Data
trong mã phía máy chủ
Mặc dù bạn có thể phát hiện trạng thái Save-Data
trong JavaScript thông qua thuộc tính navigator.connection.saveData
, nhưng đôi khi bạn nên phát hiện trạng thái này ở phía máy chủ. JavaScript có thể không thực thi được trong một số trường hợp. Ngoài ra, tính năng phát hiện phía máy chủ là cách duy nhất để sửa đổi mã đánh dấu trước khi gửi đến máy khách. Việc này có liên quan đến một số trường hợp sử dụng có lợi nhất của Save-Data
.
Cú pháp cụ thể để phát hiện tiêu đề Save-Data
trong mã phía máy chủ phụ thuộc vào ngôn ngữ được sử dụng, nhưng ý tưởng cơ bản phải giống nhau cho mọi phần phụ trợ ứng dụng. Chẳng hạn như trong PHP, tiêu đề yêu cầu được lưu trữ trong mảng siêu toàn cục $_SERVER
ở các chỉ mục bắt đầu bằng HTTP_
. Điều này có nghĩa là bạn có thể phát hiện tiêu đề Save-Data
bằng cách kiểm tra sự tồn tại và giá trị của biến $_SERVER["HTTP_SAVE_DATA"]
như sau:
// false by default.
$saveData = false;
// Check if the `Save-Data` header exists and is set to a value of "on".
if (isset($_SERVER["HTTP_SAVE_DATA"]) && strtolower($_SERVER["HTTP_SAVE_DATA"]) === "on") {
// `Save-Data` detected!
$saveData = true;
}
Nếu bạn thực hiện bước kiểm tra này trước khi gửi bất kỳ mã đánh dấu nào đến máy khách, thì biến $saveData
sẽ chứa trạng thái Save-Data
và có sẵn ở bất kỳ nơi nào trên trang để sử dụng. Qua cơ chế minh hoạ này, hãy xem một vài ví dụ về cách chúng ta có thể sử dụng cơ chế để giới hạn lượng dữ liệu chúng tôi gửi cho người dùng.
Phân phát hình ảnh có độ phân giải thấp cho màn hình có độ phân giải cao
Một trường hợp sử dụng phổ biến đối với hình ảnh trên web bao gồm việc phân phát hình ảnh theo bộ gồm 2 hình ảnh: Một hình ảnh cho màn hình "tiêu chuẩn" (1x) và một hình ảnh khác có kích thước lớn gấp đôi (2x) cho màn hình có độ phân giải cao (ví dụ: Màn hình Retina). Lớp màn hình có độ phân giải cao này không nhất thiết chỉ xuất hiện ở các thiết bị cao cấp, và ngày càng trở nên phổ biến. Trong trường hợp ưu tiên trải nghiệm ứng dụng nhẹ hơn, bạn nên gửi hình ảnh có độ phân giải thấp hơn (1x) đến các màn hình này, thay vì gửi các biến thể lớn hơn (2x). Để đạt được điều này khi có tiêu đề Save-Data
, chúng ta chỉ cần sửa đổi mã đánh dấu mà chúng ta gửi đến ứng dụng:
if ($saveData === true) {
// Send a low-resolution version of the image for clients specifying `Save-Data`.
?><img src="butterfly-1x.jpg" alt="A butterfly perched on a flower."><?php
}
else {
// Send the usual assets for everyone else.
?><img src="butterfly-1x.jpg" srcset="butterfly-2x.jpg 2x, butterfly-1x.jpg 1x" alt="A butterfly perched on a flower."><?php
}
Trường hợp sử dụng này là một ví dụ hoàn hảo về việc chỉ mất rất ít công sức để hỗ trợ ai đó đặc biệt yêu cầu bạn gửi cho họ ít dữ liệu hơn. Nếu không muốn sửa đổi mã đánh dấu ở phần phụ trợ, bạn cũng có thể đạt được kết quả tương tự bằng cách sử dụng mô-đun viết lại URL, chẳng hạn như mod_rewrite
của Apache. Có ví dụ về cách đạt được điều này với cấu hình tương đối ít.
Bạn cũng có thể mở rộng khái niệm này sang các thuộc tính background-image
của CSS bằng cách chỉ cần thêm một lớp vào phần tử <html>
:
<html class="<?php if ($saveData === true): ?>save-data<?php endif; ?>">
Từ đây, bạn có thể nhắm mục tiêu lớp save-data
trên phần tử <html>
trong CSS để thay đổi cách phân phối hình ảnh. Bạn có thể gửi hình nền có độ phân giải thấp tới màn hình có độ phân giải cao như trong ví dụ HTML ở trên hoặc bỏ qua một số tài nguyên nhất định.
Bỏ qua hình ảnh không cần thiết
Một số nội dung hình ảnh trên web đơn giản là không cần thiết. Mặc dù hình ảnh như vậy có thể tạo ra một phần khác biệt cho nội dung, nhưng chúng có thể không được mong muốn đối với những người đang cố gắng khai thác tất cả những gì có thể trong các gói dữ liệu có đo lượng dữ liệu. Trong trường hợp sử dụng đơn giản nhất của Save-Data
, chúng ta có thể sử dụng mã phát hiện PHP trước đó và bỏ qua hoàn toàn mã đánh dấu hình ảnh không cần thiết:
<p>This paragraph is essential content. The image below may be humorous, but it's not critical to the content.</p>
<?php
if ($saveData === false) {
// Only send this image if `Save-Data` hasn't been detected.
?><img src="meme.jpg" alt="One does not simply consume data."><?php
}
Kỹ thuật này chắc chắn có thể có hiệu quả rõ rệt, như bạn có thể thấy trong hình dưới đây:
Tất nhiên, bỏ qua hình ảnh không phải là khả năng duy nhất. Bạn cũng có thể hành động theo Save-Data
để bỏ qua việc gửi các tài nguyên không quan trọng khác, chẳng hạn như một số kiểu chữ nhất định.
Bỏ qua các phông chữ không cần thiết trên web
Mặc dù phông chữ trên web thường không chiếm gần như nhiều tải trọng của một trang nhất định như hình ảnh, nhưng chúng vẫn khá phổ biến. Các trình xử lý này cũng không tiêu tốn một lượng dữ liệu không đáng kể. Hơn nữa, cách các trình duyệt tìm nạp và hiển thị phông chữ phức tạp hơn bạn nghĩ, với các khái niệm như FOIT, FOUT và suy đoán của trình duyệt khiến việc hiển thị một thao tác chi tiết hơn.
Có lẽ vì thế mà bạn nên bỏ các phông chữ web không cần thiết cho những người dùng muốn có trải nghiệm người dùng đơn giản hơn. Save-Data
khiến việc này trở thành một việc không gây đau đớn.
Ví dụ: giả sử bạn đã thêm Fira Sans từ Google Phông chữ trên trang web của mình. Fira Sans là một phông chữ tuyệt vời cho phần nội dung, nhưng có lẽ phông chữ này không quá quan trọng đối với những người dùng đang cố gắng lưu dữ liệu. Bằng cách thêm một lớp save-data
vào phần tử <html>
khi có tiêu đề Save-Data
, chúng ta có thể viết các kiểu gọi kiểu chữ không cần thiết lúc đầu, nhưng sau đó chọn không sử dụng kiểu này khi có tiêu đề Save-Data
:
/* Opt into web fonts by default. */
p,
li {
font-family: 'Fira Sans', 'Arial', sans-serif;
}
/* Opt out of web fonts if the `save-Data` class is present. */
.save-data p,
.save-data li {
font-family: 'Arial', sans-serif;
}
Khi sử dụng phương pháp này, bạn có thể giữ nguyên đoạn mã <link>
từ Google Fonts, vì trình duyệt tải theo suy đoán các tài nguyên CSS (bao gồm cả phông chữ trên web) bằng cách áp dụng các kiểu cho DOM, sau đó kiểm tra xem có phần tử HTML nào gọi tài nguyên bất kỳ trong biểu định kiểu hay không. Nếu ai đó xảy ra khi Save-Data
bật, Fira Sans sẽ không bao giờ tải vì DOM được tạo kiểu không bao giờ gọi nó. Thay vào đó, WebP sẽ phát huy tác dụng. Phiên bản này không tốt bằng Fira Sans, nhưng có thể phù hợp hơn với những người dùng đang cố gắng kéo dài gói dữ liệu của họ.
Tóm tắt
Tiêu đề Save-Data
không có nhiều sắc thái; dù được bật hay tắt, ứng dụng sẽ chịu trách nhiệm cung cấp trải nghiệm phù hợp dựa trên chế độ cài đặt của ứng dụng, bất kể lý do là gì.
Ví dụ: một số người dùng có thể không cho phép chế độ tiết kiệm dữ liệu nếu nghi ngờ rằng ứng dụng sẽ mất nội dung hoặc chức năng, ngay cả khi kết nối kém. Ngược lại, tất nhiên một số người dùng có thể bật tính năng này để giữ cho các trang càng nhỏ và đơn giản càng tốt, ngay cả trong tình huống kết nối tốt. Tốt nhất là ứng dụng của bạn nên giả định rằng người dùng muốn có trải nghiệm đầy đủ và không giới hạn cho đến khi bạn có chỉ báo rõ ràng thông qua hành động rõ ràng của người dùng.
Là chủ sở hữu trang web và nhà phát triển web, chúng ta có trách nhiệm quản lý nội dung nhằm cải thiện trải nghiệm cho những người dùng bị hạn chế về dữ liệu và chi phí.
Để biết thêm thông tin chi tiết về Save-Data
và các ví dụ thực tế tuyệt vời, hãy xem bài viết Trợ giúp người dùng Save Data
.