Yêu cầu gợi ý ứng dụng Save-Data
tiêu đề
có sẵn trong trình duyệt Chrome, Opera và Yandex cho phép các nhà phát triển cung cấp
các ứng dụng 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.
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 cho người dùng hài lòng hơn trải nghiệm, giúp người dùng dễ hiểu và giữ chân hơn nội dung, đồng thời cung cấp đã tăng số lượt chuyển đổi và doanh thu. Google nghiên cứu đã chỉ ra rằng "...các trang được tối ưu hoá tải nhanh hơn bốn lần so với trang gốc và sử dụng 80% thời lượng ít byte hơn. 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 mức tăng 50% khi truy cập vào các trang này."
Và mặc dù số lượng kết nối 2G cuối cùng cũng trên từ chối, 2G vẫn vẫn là mạng chiếm ưu thế công nghệ trong năm 2015. Mạng 3G và 4G có mức độ thâm nhập và sử dụng ngày càng cao nhanh chóng, nhưng chi phí liên quan đến quyền sở hữu và những ràng buộc về mạng vẫn là 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ó các phương pháp thay thế để cải thiện tốc độ trang web mà không cần đến nhà phát triển trực tiếp như trình duyệt proxy và dịch vụ chuyển mã. Mặc dù như vậy khá phổ biến nhưng chúng cũng đi kèm với những hạn chế đáng kể — đơn giản Nén hình ảnh và văn bản (và đôi khi không được chấp nhận), không thể xử lý 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à 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 nhà phát triển không giải quyết đúng cách nhu cầu cao của người dùng về tốc độ và tính năng ứng dụng và trang. Tuy nhiên, để đạt được mục tiêu đó là một công việc phức tạp và đôi khi một lộ trình khó khăn.
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, 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
đồng thời cung cấp trải nghiệm người dùng được tối ưu hoá cho các quảng cáo bị hạn chế về chi phí và hiệu suất
người dùng.
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 cấp cho trình duyệt quyền áp dụng một nhóm 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 tiếp xúc, 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 yêu cầu định tuyến thông qua dịch vụ áp dụng tối ưu hoá theo nội dung cụ thể như né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 "Trình tiết kiệm dữ liệu" trên thiết bị di động hoặc "Trình tiết kiệm dữ liệu" tiện ích mở rộng trên trình duyệt dành cho máy tính. - Opera 35+ quảng cáo
Save-Data
khi người dùng bật "Opera Turbo" trên máy tính, hoặc "Tiết kiệm dữ liệu" lựa chọn trên trình duyệt Android. - Yandex 16.2+ quảng cáo
Save-Data
khi Turbo chế độ là được bật trên máy tính để bàn hoặc thiết bị di động .
Phát hiện chế độ cài đặt Save-Data
Để xác định thời điểm phân phối "đèn" trải nghiệm của bạn cho người dùng,
ứng dụng có thể kiểm tra tiêu đề của yêu cầu gợi ý ứng dụng khách Save-Data
. Chiến dịch này
của yêu cầu cho biết khách hà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 của họ, trình duyệt sẽ thêm
tiêu đề của yêu cầu Save-Data
đến 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ã *on- trong tiêu đề
(Save-Data: on
), nhưng thời gian này có thể được kéo dài trong tương lai để cho biết người dùng khác
tùy chọn.
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.
}
}
Đang kiểm tra sự hiện diện của đối tượng connection
trong navigator
rất quan trọng vì nó đại diện cho Network Information API (API Thông tin mạng), vốn 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 với
true
và bạn có thể triển khai mọi hoạt động lưu dữ liệu trong điều kiện đó.
![Chiến lược phát hành đĩa đơn
Tiêu đề Lưu dữ liệu được hiển thị trong Công cụ cho nhà phát triển của Chrome ở trong hình cùng với
Tiện ích Trình tiết kiệm dữ liệu.](https://web.dev/static/articles/optimizing-content-efficiency-save-data/image/the-save-data-header-reve-3d6257f960c6c.png?authuser=5&hl=vi)
Nếu ứng dụng của bạn sử dụng một dịch vụ
, thì công cụ này 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 kiếm các lựa chọn ưu tiên được quảng cáo trong
Save-Data
tiêu đề của yêu cầu và trả về một phản hồi thay thế – khác
mã đánh dấu, 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 có hỗ trợ API 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 và nút bật/tắt trực quan hoặc hộp đánh dấu.
- Khi chọn chế độ tiết kiệm dữ liệu, hãy thông báo và đưa ra lựa chọn dễ hiểu và rõ ràng tắt tính năng đó 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. Chúng không
bỏ qua chức năng hoặc dữ liệu quan trọng, chúng chỉ là người hiểu biết hơn về
chi phí phát sinh 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ốn nhiều mã.
- Ứ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ả kết quả nặng về nội dung nghe nhìn hoặc giảm số lượng phần phụ thuộc cần thiết để kết xuất trang.
- 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 hơn, hoặc cung cấp bản xem trước nội dung nghe nhìn 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 cung cấp phản hồi trang thay thế, nhẹ nhàng 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, hãy áp dụng một cách linh hoạt hơn nén tài nguyên, v.v.- Nếu bạn đang phân phối phản hồi thay thế dựa trên tiêu đề
Save-Data
, hãy nhớ thêm vào danh sách Vary —Vary: Save-Data
— để cho biết bộ nhớ đệm của luồng ngược dòng (upstream) mà chúng sẽ lưu vào bộ nhớ đệm và chỉ phân phát phiên bản này nếu Có tiêu đề của yêu cầuSave-Data
. Để biết thêm thông tin, hãy xem các phương pháp hay nhất với tương tác với bộ nhớ đệm.
- Nếu bạn đang phân phối 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 lưu dữ liệu
được bật bằng cách kiểm tra sự hiện diện của yêu cầu
Save-Data
hoặc bằng cách kiểm tra giá trị củanavigator.connection.saveData
thuộc tính này. 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 hoặc sử dụng một phản hồi đã được tìm nạp. - 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 NetInfo API). Ví dụ: bạn có thể muốn cung cấp trải nghiệm gọn nhẹ cho bất kỳ người dùng nào sử dụng kết nối 2G, ngay cả khiSave-Data
chưa được bật. Ngược lại, chỉ vì người dùng đang "nhanh chóng" 4G kết nối không có nghĩa là họ không quan tâm đến việc lưu dữ liệu — đối với 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
với gợi ý về ứng dụngDevice-Memory
để điều chỉnh cho phù hợp hơn với người dùng trên các thiết bị có bộ nhớ bị giới hạn. Bộ nhớ thiết bị của người dùng cũng được quảng cáo trongnavigator.deviceMemory
gợi ý ứng dụng.
Công thức nấu ăn
Những gì bạn có thể đạt được thông qua Save-Data
chỉ giới hạn ở những gì bạn có thể nghĩ ra
với. Để giúp bạn hình dung được những gì có thể, hãy xem qua một số cách sử dụng
trường hợp. Bạn có thể nghĩ ra các trường hợp sử dụng khác của mình khi đọc tài liệu này, vì vậy
hãy thoải mái thử nghiệm và xem điều gì có thể xảy ra!
Đang kiểm tra Save-Data
trong mã phía máy chủ
Mặc dù trạng thái Save-Data
là thứ bạn có thể phát hiện trong JavaScript thông qua
navigator.connection.saveData
. Việc phát hiện thuộc tính này ở phía máy chủ đang
đôi khi vẫn được ưa chuộng hơn. JavaScript có thể không thực thi được trong một số trường hợp. Hơn nữa,
thì 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 mã đánh dấu đó được gửi đến
khách hàng này đóng góp vào 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 nên giống nhau cho bất kỳ
chương trình phụ trợ của ứng dụng. Ví dụ: trong PHP, tiêu đề yêu cầu được lưu trữ trong
$_SERVER
siêu toàn cầu
mảng tại 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ư thế:
// 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ì $saveData
biến sẽ chứa trạng thái Save-Data
và sẽ có sẵn ở bất cứ đâu cho
sử dụng trên trang. Qua cơ chế minh hoạ này, hãy xem một vài ví dụ về
cách chúng tôi có thể sử dụng thông tin này
để 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 phân phát hình ảnh theo nhóm gồm hai:
Một hình ảnh cho "tiêu chuẩn" màn hình (1x) và một hình ảnh khác có kích thước lớn gấp đôi
(2x) đối với màn hình có độ phân giải cao (ví dụ: Retina
Hiển thị). Hạng này
màn hình có độ phân giải không nhất thiết chỉ giới hạn ở các thiết bị cao cấp và
ngày càng phổ biến. Trong trường hợp trải nghiệm ứng dụng nhẹ nhàng hơn
Bạn nên gửi hình ảnh có độ phân giải thấp hơn (1x) đến những
màn hình thay vì các biến thể lớn hơn (2x). Để đạt được điều này khi Save-Data
có tiêu đề, chúng tôi chỉ cần sửa đổi mã đánh dấu mà chúng tôi gửi cho khách hà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ỉ tốn ít công sức để đáp ứng
một người đang đặc biệt yêu cầu bạn gửi cho họ ít dữ liệu hơn. Nếu bạn không thích
sửa đổi mã đánh dấu trên bảng phụ, bạn cũng có thể đạt được kết quả tương tự bằng cách
bằng cách sử dụng mô-đun viết lại URL, chẳng hạn như
mod_rewrite
. Có
là ví dụ về cách đạt được
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 cho các thuộc tính background-image
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ại đây, bạn có thể nhắm đến 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 nền có độ phân giải thấp
hình ảnh lên màn hình có độ phân giải cao như được hiển thị trong ví dụ về 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ể
có những khía cạnh tốt trong nội dung, chúng có thể sẽ không được những người cố gắng
khai thác tất cả những gì có thể
dùng gói dữ liệu có định mức. Trong đó có lẽ là đơn giản nhất
trường hợp sử dụng Save-Data
, chúng ta có thể dùng mã phát hiện PHP trước đó và bỏ qua
đá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 bên dưới:
![So sánh hình ảnh không quan trọng
được tải khi không có Lưu dữ liệu, trong khi hình ảnh đó bị bỏ qua
khi có tính năng Lưu dữ liệu.](https://web.dev/static/articles/optimizing-content-efficiency-save-data/image/a-comparison-non-critica-f5ac2f016e117.png?authuser=5&hl=vi)
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 trên
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ữ.
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ư toàn bộ tổng số của một trang nhất định như hình ảnh thường làm, chúng vẫn khá phổ biến. Chúng không sử dụng lượng không đáng kể . Hơn nữa, cách trình duyệt tìm nạp và hiển thị phông chữ phức tạp hơn so với bạn có thể nghĩ, với những khái niệm như FOIT, FOUT và trình duyệt phỏng đoán thực hiện kết xuất một thao tác có sắc thái.
Có lẽ vì thế mà bạn có thể muốn loại bỏ những nội dung không thiết yếu trên web
phông chữ cho người dùng muốn trải nghiệm người dùng tinh gọn hơn. Save-Data
làm cho bài đăng này trở thành
việc làm không gây đau đớn một cách hợp lý.
Ví dụ: giả sử bạn đã bao gồm Fira
Sans từ Google
Phông chữ trên trang web. Fira Sans có một thân hình tuyệt vời
sao chép phông chữ, nhưng có lẽ việc này không quá quan trọng đối với người dùng đang cố gắng tiết kiệm dữ liệu. Bằng cách thêm
một lớp save-data
cho phần tử <html>
khi tiêu đề Save-Data
là
hiện tại, chúng ta có thể viết các kiểu gọi ra kiểu chữ không cần thiết lúc đầu,
nhưng sau đó chọn không sử dụng 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ể để lại đoạn mã <link>
trong Google Fonts trong
vị trí, bởi vì trình duyệt tải theo suy đoán các tài nguyên CSS (bao gồm cả web
phông chữ) bằng cách trước tiên áp dụng kiểu cho DOM, sau đó kiểm tra xem có HTML nào không
gọi tài nguyên bất kỳ trong biểu định kiểu. 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. Không đẹp bằng Fira Sans, nhưng
những người dùng đang cố gắng mở rộng gói dữ liệu của họ sẽ phù hợp hơn.
Tóm tắt
Tiêu đề Save-Data
không có nhiều sắc thái; nút này đang bật hoặc tắt và
ứng dụng chịu trách nhiệm cung cấp trải nghiệm phù hợp dựa trên
cài đặt của công cụ đó, 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 họ nghi ngờ rằng ở đó sẽ mất nội dung hoặc chức năng của ứng dụng, ngay cả khi kết nối kém tình huống cụ thể. Ngược lại, dĩ nhiên một số người dùng có thể bật tính năng này để duy trì nhỏ và đơn giản nhất có thể, 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 quyền sử dụng cho đến khi bạn có chỉ báo rõ ràng thông qua người dùng rõ ràng hành động.
Là chủ sở hữu trang web và nhà phát triển web, hãy chịu trách nhiệm quản lý nội dung của chúng tôi nhằm cải thiện trải nghiệm người dùng cho những người dùng bị hạn chế về dữ liệu và chi phí.
Để biết thêm chi tiết về Save-Data
và các ví dụ thực tế tuyệt vời, hãy xem phần Giúp bạn
Người dùng Save Data
.