Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Cung cấp các ứng dụng nhanh và nhẹ nhờ tính năng tiết kiệm dữ liệu

Dave Gash

Ilya Grigorik

Jeremy Wagner

Tiêu đề yêu cầu gợi ý về ứ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, nhanh hơn cho những người dùng chọn sử dụng 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ẹ

Số liệu thống kê về Weblight

Mọi người đều đồng ý rằng các trang web tải nhanh hơn và có dung lượng nhẹ hơn sẽ mang lại trải nghiệm người dùng thoả mãn hơn, giúp người dùng hiểu và ghi nhớ nội dung tốt hơn, đồng thời tăng số lượt chuyển đổi và doanh thu. Nghiên cứu của Google cho thấy "…các trang được tối ưu hoá tải nhanh hơn gấp 4 lần so với trang gốc và sử dụng số byte ít 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 những trang này tăng 50%".

Mặc dù số lượng kết nối 2G cuối cùng cũng giảm, nhưng 2G vẫn là công nghệ mạng chủ đạo vào năm 2015. Mức độ phủ sóng và phạm vi cung cấp của mạng 3G và 4G đang tăng lên nhanh chóng, nhưng chi phí sở hữu và các 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 lý do chính đáng để tối ưu hoá trang.

Có những phương pháp khác để 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, chẳng hạn như trình duyệt proxy và dịch vụ chuyển mã. Mặc dù các dịch vụ như vậy khá phổ biến, nhưng chúng có những nhược điểm đáng kể – nén hình ảnh và văn bản đơn giản (đôi khi không chấp nhận được), 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 thông qua kết quả tìm kiếm, v.v. Chính sự phổ biến của những dịch vụ này là một chỉ báo cho thấy các nhà phát triển web không đáp ứng đúng nhu cầu cao của người dùng về các ứng dụng và trang nhanh và nhẹ. Nhưng để đạt được mục tiêu đó, bạn phải trải qua một con đường phức tạp và đôi khi 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 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, một trang web có thể tuỳ chỉnh và mang lại trải nghiệm người dùng tối ưu 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 bộ các chế độ 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 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, hoãn 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 chế độ tối ưu hoá khác theo nội dung cụ thể, chẳng hạn như nén tài nguyên hình ảnh và 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 lựa 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 máy tính.
Opera 35 trở lên quảng cáo Save-Data khi người dùng bật chế độ "Opera Turbo" trên máy tính hoặc lựa 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 di động.

Phát hiện chế độ cài đặt `Save-Data`

Để xác định thời điểm cung cấp 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 ý về ứng dụng Save-Data. Tiêu đề của yêu cầu này cho biết lựa chọn ưu tiên của ứng dụng khách về việc giảm mức sử dụng dữ liệu do chi phí chuyể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, ứng dụng trình duyệt sẽ thêm tiêu đề của 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 điều này có thể được mở rộng trong tương lai để cho biết các lựa chọn ưu tiê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). API này 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 và bạn có thể triển khai mọi thao tác lưu dữ liệu trong điều kiện đó.

Tiêu đề Lưu dữ liệu xuất hiện trong Công cụ cho nhà phát triển của Chrome cùng với tiện ích Trình tiết kiệm dữ liệu. — Bật tiện ích Trình tiết kiệm dữ liệu trong Chrome dành cho máy tính.

Nếu ứng dụng của bạn sử dụng một service worker, thì ứng dụng đó có thể kiểm tra tiêu đề 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 tiêu đề của yêu cầu Save-Data và trả về một phản hồi thay thế – đánh dấu khác, hình ảnh và video nhỏ hơn, v.v.

Mẹo và các phương pháp hay nhất để triển khai

Khi dùng Save-Data, hãy cung cấp một số thiết bị giao diện người dùng hỗ trợ tính 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.
- Cho phép người dùng xác định và chọn chế độ bằng các lời nhắc phù hợp và các nút bật/tắt hoặc hộp đánh dấu trực quan.
- Khi người dùng 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.
Hãy nhớ rằng các ứng dụng có kích thước nhỏ không phải là ứng dụng kém chất lượng. Họ không bỏ qua chức năng hoặc dữ liệu quan trọng, họ chỉ nhận thức rõ hơn về 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 mã hơn.
- Ứng dụng tìm kiếm có thể trả về ít kết quả hơn tại một thời điểm, giới hạn số lượng kết quả có 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 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 có 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 tiêu đề này được bật – ví dụ: giảm số lượng tài nguyên và phần phụ thuộc bắt buộc, áp dụng mức nén tài nguyên mạnh 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 tiêu đề đó vào danh sách Vary – Vary: Save-Data – để cho các bộ nhớ đệm ở nguồn biết rằng chúng chỉ nên lưu vào bộ nhớ đệm và phân phát phiên bản này nếu có tiêu đề yêu cầu Save-Data. Để biết thêm thông tin chi tiết, hãy xem các phương pháp hay nhất để tương tác với bộ nhớ đệm.
Nếu bạn dùng một trình chạy dịch vụ, ứng dụng của bạn có thể phát hiện thời điểm chế độ tiết kiệm dữ liệu được bật bằng cách kiểm tra sự hiện diện của tiêu đề của yêu cầu Save-Data hoặc bằng cách kiểm tra giá trị của thuộc tính navigator.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 phản hồi đã tìm nạp hay không.
Hãy cân nhắc việc tăng cường Save-Data bằng 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 đơn giản cho mọi người dùng có kết nối 2G ngay cả khi Save-Data không được bật. Ngược lại, chỉ vì người dùng đang sử dụng kết nối 4G "nhanh" không có nghĩa là họ không muốn tiết kiệm dữ liệu – ví dụ: khi chuyển vùng. Ngoài ra, bạn có thể tăng cường sự hiện diện của Save-Data bằng gợi ý về ứng dụng Device-Memory để thích ứng hơn nữa 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 ý cho ứng dụng navigator.deviceMemory.

Recipe

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. Để giúp bạn hình dung được những gì có thể thực hiện, hãy xem qua một vài trường hợp sử dụng. Bạn có thể nghĩ ra các trường hợp sử dụng khác của riêng mình khi đọc bài viết này, vì vậy, hãy thoải mái thử nghiệm và xem những gì có thể thực hiện được!

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 mã này được gửi đến máy khách. Đây là một trong những 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 dùng, nhưng ý tưởng cơ bản phải giống nhau đối với mọi phần phụ trợ của ứng dụng. Ví dụ: trong PHP, tiêu đề của yêu cầu được lưu trữ trong mảng $_SERVER siêu toàn cục tại 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 đặt chế độ kiểm tra này trước khi gửi bất kỳ mã đánh dấu nào đến máy khách, biến $saveData sẽ chứa trạng thái Save-Data và có thể sử dụng ở bất kỳ đâu trên trang. Với cơ chế này, hãy xem một vài ví dụ về cách chúng ta có thể sử dụng cơ chế này để giới hạn lượng dữ liệu mà chúng ta 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 cho hình ảnh trên web là phân phát hình ảnh theo bộ gồm hai hình ảnh: Một hình ảnh cho màn hình "chuẩn" (1x) và một hình ảnh có kích thước 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ỉ có trê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 bạn muốn có 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 những màn hình này thay vì 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 cho ứ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 bạn chỉ cần bỏ ra một chút công sức để đáp ứng yêu cầu của người dùng khi họ yêu cầu bạn gửi í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ột mô-đun viết lại URL, chẳng hạn như mod_rewrite của Apache. Có các ví dụ về cách đạt được điều này với tương đối ít cấu hình.

Bạn cũng có thể mở rộng khái niệm này sang 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ừ đâ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 hình nền có độ phân giải thấp đến màn hình có độ phân giải cao như minh hoạ trong ví dụ về HTML ở trên hoặc bỏ qua hoàn toàn 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 chỉ đơn giản là không cần thiết. Mặc dù những hình ảnh như vậy có thể tạo ra những phần nội dung bổ sung thú vị, nhưng những người đang cố gắng tận dụng tối đa gói dữ liệu có tính phí theo mức sử dụng có thể không muốn thấy những hình ảnh này. 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 từ 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ể mang lại 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ó Save-Data, so với hình ảnh đó bị bỏ qua khi có Save-Data.

Tất nhiên, việc 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ữ web không cần thiết

Mặc dù phông chữ trên web thường không chiếm gần như toàn bộ tổng tải trọng của một trang nhất định như hình ảnh thường làm, nhưng chúng vẫn khá phổ biến. Chúng cũng không tiêu thụ một lượng dữ liệu 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 bạn nghĩ, với các khái niệm như FOIT, FOUT và phương pháp phỏng đoán của trình duyệt khiến việc hiển thị trở thành một thao tác phức tạp.

Do đó, bạn có thể muốn loại 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 tinh gọn hơn. Save-Data giúp bạn thực hiện việc này một cách khá dễ dàng.

Ví dụ: giả sử bạn đã thêm Fira Sans từ Google Fonts vào trang web của mình. Fira Sans là một phông chữ tuyệt vời cho nội dung, nhưng có thể 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 tiêu đề Save-Data xuất hiện, trước tiên, chúng ta có thể viết các kiểu gọi kiểu chữ không cần thiết, nhưng sau đó chọn không dùng kiểu chữ này khi tiêu đề Save-Data xuất hiện:

/* 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> của Google Fonts, vì trình duyệt sẽ tải các tài nguyên CSS (bao gồm cả phông chữ trên web) một cách suy đoán bằng cách áp dụng các kiểu cho DOM trước, sau đó kiểm tra xem có phần tử HTML nào gọi bất kỳ tài nguyên nào trong biểu định kiểu hay không. Nếu có người truy cập vào trang web khi Save-Data đang bật, thì 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 đó, Arial sẽ được dùng. Không đẹp 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 tiết kiệm gói dữ liệu của mình.

Tóm tắt

Tiêu đề Save-Data không có nhiều sắc thái; tiêu đề này chỉ có thể bật hoặc tắt và ứng dụng phải 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 tiêu đề, 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 nội dung hoặc chức năng của ứng dụng sẽ bị mất, ngay cả khi kết nối kém. Ngược lại, một số người dùng có thể bật chế độ này như một biện pháp để giữ cho các trang có kích thước nhỏ và đơn giản nhất có thể, ngay cả khi có 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ó dấu hiệu rõ ràng cho thấy điều ngược lại thông qua một 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 hãy chịu trách nhiệm quản lý nội dung của mình để 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 thông tin chi tiết về Save-Data và các ví dụ thực tế xuất sắc, hãy xem phần Giúp người dùng của bạn Save Data.