มอบแอปพลิเคชันที่รวดเร็วและใช้ทรัพยากรน้อยพร้อมประหยัดอินเทอร์เน็ต

Dave Gash

Ilya Grigorik

Jeremy Wagner

ส่วนหัวSave-Dataคำขอคำแนะนำไคลเอ็นต์ ที่พร้อมใช้งานในเบราว์เซอร์ Chrome, Opera และ Yandex ช่วยให้นักพัฒนาแอปสามารถส่งแอปพลิเคชันที่เบาและ เร็วขึ้นให้แก่ผู้ใช้ที่เลือกใช้โหมดประหยัดข้อมูลในเบราว์เซอร์

ความจำเป็นของหน้าเว็บที่มีขนาดเล็ก

ทุกคนเห็นพ้องต้องกันว่าหน้าเว็บที่เร็วขึ้นและเบาขึ้นจะช่วยให้ผู้ใช้ได้รับประสบการณ์ที่น่าพึงพอใจมากขึ้น ช่วยให้เข้าใจและจดจำเนื้อหาได้ดีขึ้น รวมถึงเพิ่ม Conversion และรายได้ งานวิจัยของ Google แสดงให้เห็นว่า "...หน้าเว็บที่เพิ่มประสิทธิภาพโหลดได้เร็วกว่าหน้าเว็บแบบเดิม 4 เท่า และใช้ข้อมูลอินเทอร์เน็ตมือถือคิดเป็นไบต์ลดลง 80% เนื่องจากหน้าเว็บเหล่านี้โหลดเร็วกว่ามาก เราจึงพบว่ามีการเข้าชมหน้าเว็บดังกล่าวเพิ่มขึ้น 50% ด้วย"

แม้ว่าจำนวนการเชื่อมต่อ 2G จะลดลงในที่สุด แต่ในปี 2015 2G ก็ยังคงเป็นเทคโนโลยีเครือข่ายหลัก การเข้าถึงและความพร้อมใช้งานของเครือข่าย 3G และ 4G กำลังเพิ่มขึ้นอย่างรวดเร็ว แต่ต้นทุนการเป็นเจ้าของและข้อจำกัดของเครือข่ายที่เกี่ยวข้องยังคงเป็นปัจจัยสำคัญสำหรับผู้ใช้หลายร้อยล้านคน

ซึ่งเป็นเหตุผลที่หนักแน่นในการเพิ่มประสิทธิภาพหน้าเว็บ

นอกจากนี้ ยังมีวิธีอื่นๆ ในการปรับปรุงความเร็วของเว็บไซต์โดยไม่ต้องให้ผู้พัฒนาเข้ามาเกี่ยวข้องโดยตรง เช่น เบราว์เซอร์พร็อกซีและบริการแปลงรหัส แม้ว่าบริการดังกล่าวจะได้รับความนิยมอย่างมาก แต่ก็มีข้อเสียที่สำคัญ ได้แก่ การบีบอัดรูปภาพและข้อความอย่างง่าย (และบางครั้งก็ยอมรับไม่ได้) ไม่สามารถประมวลผลหน้าเว็บที่ปลอดภัย (HTTPS) ได้ และจะเพิ่มประสิทธิภาพเฉพาะหน้าเว็บที่เข้าชมผ่านผลการค้นหาเท่านั้น เป็นต้น ความนิยมอย่างมากของบริการเหล่านี้เป็นตัวบ่งชี้ว่านักพัฒนาเว็บ ไม่ได้ตอบสนองความต้องการของผู้ใช้ที่ต้องการแอปพลิเคชันและหน้าเว็บที่รวดเร็วและมีขนาดเล็ก อย่างเหมาะสม แต่การบรรลุเป้าหมายนั้นเป็นเส้นทางที่ซับซ้อนและบางครั้งก็ยาก

ส่วนหัวของคำขอ Save-Data

เทคนิคที่ค่อนข้างตรงไปตรงมาวิธีหนึ่งคือการให้เบราว์เซอร์ช่วยโดยใช้Save-Dataส่วนหัวของคำขอ การระบุส่วนหัวนี้ช่วยให้หน้าเว็บปรับแต่ง และมอบประสบการณ์ของผู้ใช้ที่เพิ่มประสิทธิภาพให้กับผู้ใช้ที่จำกัดด้านต้นทุนและประสิทธิภาพ ได้

เบราว์เซอร์ที่รองรับ (ด้านล่าง) อนุญาตให้ผู้ใช้เปิดใช้ *โหมดประหยัดอินเทอร์เน็ตที่ ให้สิทธิ์เบราว์เซอร์ในการใช้ชุดการเพิ่มประสิทธิภาพเพื่อลด ปริมาณข้อมูลที่จำเป็นในการแสดงหน้าเว็บ เมื่อฟีเจอร์นี้แสดงหรือ โฆษณา เบราว์เซอร์อาจขอรูปภาพที่มีความละเอียดต่ำกว่า เลื่อนการโหลด ทรัพยากรบางอย่าง หรือกำหนดเส้นทางคำขอผ่านบริการที่ใช้การเพิ่มประสิทธิภาพอื่นๆ ที่เฉพาะเจาะจงกับเนื้อหา เช่น การบีบทรัพยากรรูปภาพและข้อความ

การสนับสนุนเบราว์เซอร์

• Chrome 49 ขึ้นไปจะประกาศ Save-Data เมื่อผู้ใช้เปิดใช้ตัวเลือก "ประหยัดอินเทอร์เน็ต" ในอุปกรณ์เคลื่อนที่ หรือส่วนขยาย "ประหยัดอินเทอร์เน็ต" ในเบราว์เซอร์บนเดสก์ท็อป
• Opera 35 ขึ้นไป จะโฆษณา Save-Data เมื่อผู้ใช้เปิดใช้โหมด "Opera Turbo" บนเดสก์ท็อป หรือตัวเลือก "ประหยัดข้อมูล" ในเบราว์เซอร์ Android
• Yandex 16.2 ขึ้นไปจะแสดงโฆษณา Save-Data เมื่อเปิดใช้โหมด เทอร์โบในเบราว์เซอร์บนเดสก์ท็อปหรืออุปกรณ์เคลื่อนที่

การตรวจหาการตั้งค่า Save-Data

หากต้องการพิจารณาว่าจะแสดงประสบการณ์การใช้งาน "แบบเบา" แก่ผู้ใช้เมื่อใด แอปพลิเคชันของคุณสามารถตรวจสอบส่วนหัวของคำขอ Client Hint Save-Data ได้ ส่วนหัวของคำขอนี้ระบุค่ากำหนดของไคลเอ็นต์สำหรับการลดปริมาณการใช้อินเทอร์เน็ตเนื่องจากค่าใช้จ่ายในการโอนสูง ความเร็วในการเชื่อมต่อช้า หรือเหตุผลอื่นๆ

เมื่อผู้ใช้เปิดใช้โหมดประหยัดข้อมูลในเบราว์เซอร์ แอปเบราว์เซอร์จะต่อท้ายSave-Dataส่วนหัวของคำขอในคำขอขาออกทั้งหมด (ทั้ง HTTP และ HTTPS) ในขณะที่เขียนนี้ เบราว์เซอร์จะโฆษณาโทเค็น *on เพียงรายการเดียวในส่วนหัว (Save-Data: on) แต่ในอนาคตอาจขยายการโฆษณาเพื่อระบุค่ากำหนดอื่นๆ ของผู้ใช้

นอกจากนี้ คุณยังตรวจหาได้ว่า Save-Data เปิดอยู่ใน JavaScript หรือไม่ โดยใช้โค้ดต่อไปนี้

if ('connection' in navigator) {
  if (navigator.connection.saveData === true) {
    // Implement data saving operations here.
  }
}

การตรวจสอบว่ามีออบเจ็กต์ connection อยู่ภายในออบเจ็กต์ navigator เป็นสิ่งสำคัญ เนื่องจากออบเจ็กต์ดังกล่าวแสดงถึง Network Information API ซึ่งใช้งานได้เฉพาะในเบราว์เซอร์ Chrome, Chrome สำหรับ Android และ Samsung Internet จากนั้น คุณเพียงแค่ต้องตรวจสอบว่า navigator.connection.saveData เท่ากับ true หรือไม่ และคุณสามารถใช้การดำเนินการบันทึกข้อมูลใดก็ได้ในเงื่อนไขนั้น

หากแอปพลิเคชันใช้ Service Worker แอปจะ ตรวจสอบส่วนหัวของคำขอและใช้ตรรกะที่เกี่ยวข้องเพื่อเพิ่มประสิทธิภาพประสบการณ์การใช้งานได้ หรือเซิร์ฟเวอร์จะค้นหาค่ากําหนดที่โฆษณาไว้ในส่วนหัวของคําขอ Save-Data และแสดงการตอบกลับอื่นได้ เช่น มาร์กอัปอื่น รูปภาพและวิดีโอขนาดเล็กกว่า เป็นต้น

เคล็ดลับและแนวทางปฏิบัติแนะนำในการติดตั้งใช้งาน

1. เมื่อใช้ Save-Data ให้ระบุอุปกรณ์ UI บางอย่างที่รองรับและอนุญาตให้ผู้ใช้ สลับไปมาระหว่างประสบการณ์การใช้งานได้อย่างง่ายดาย เช่น
   • แจ้งให้ผู้ใช้ทราบว่าระบบรองรับ Save-Data และกระตุ้นให้ผู้ใช้ใช้ฟีเจอร์นี้
   • อนุญาตให้ผู้ใช้ระบุและเลือกโหมดด้วยพรอมต์ที่เหมาะสม รวมถึงปุ่มเปิด/ปิดหรือช่องทําเครื่องหมายที่ใช้งานง่าย
   • เมื่อเลือกโหมดประหยัดอินเทอร์เน็ต ให้ประกาศและระบุวิธีที่ง่ายและชัดเจน ในการปิดใช้โหมดดังกล่าวและกลับไปใช้ประสบการณ์การใช้งานแบบเต็มหากต้องการ
2. โปรดทราบว่าแอปพลิเคชันที่มีขนาดเล็กไม่ได้หมายความว่าจะเป็นแอปพลิเคชันที่ด้อยกว่า โดยไม่ได้ละเลยฟังก์ชันหรือข้อมูลที่สำคัญ แต่เพียงตระหนักถึงต้นทุนที่เกี่ยวข้องและประสบการณ์ของผู้ใช้มากขึ้น ตัวอย่างเช่น
   • แอปพลิเคชันแกลเลอรีรูปภาพอาจแสดงตัวอย่างที่มีความละเอียดต่ำกว่า หรือใช้กลไกภาพสไลด์ที่มีโค้ดน้อยกว่า
   • แอปพลิเคชันค้นหาอาจแสดงผลลัพธ์น้อยลงในแต่ละครั้ง จำกัดจำนวนผลลัพธ์ที่มีสื่อจำนวนมาก หรือลดจำนวนการอ้างอิงที่จำเป็นในการแสดงหน้าเว็บ
   • เว็บไซต์ที่เน้นข่าวอาจแสดงเรื่องราวจำนวนน้อยลง ละเว้นหมวดหมู่ที่ได้รับความนิยมน้อยกว่า หรือแสดงตัวอย่างสื่อขนาดเล็กกว่า
3. ระบุตรรกะของเซิร์ฟเวอร์เพื่อตรวจสอบส่วนหัวของคำขอ Save-Data และพิจารณา ให้การตอบกลับหน้าเว็บที่เบากว่าเมื่อเปิดใช้ เช่น ลดจำนวนทรัพยากรและการอ้างอิงที่จำเป็น ใช้การบีบอัดทรัพยากรที่เข้มงวดมากขึ้น ฯลฯ
   • หากแสดงการตอบกลับอื่นตามส่วนหัว Save-Data โปรดอย่าลืมเพิ่มส่วนหัวดังกล่าวลงในรายการ Vary — Vary: Save-Data — เพื่อแจ้งแคชต้นทางว่าควรแคชและแสดงเวอร์ชันนี้เฉพาะในกรณีที่มีส่วนหัวของคำขอ Save-Data ดูรายละเอียดเพิ่มเติมได้ที่แนวทางปฏิบัติแนะนำ สำหรับ การโต้ตอบกับแคช
4. หากใช้ Service Worker แอปพลิเคชันจะตรวจหาได้เมื่อเปิดใช้ตัวเลือกประหยัดข้อมูล โดยตรวจสอบว่ามีส่วนหัวของSave-Dataคำขอ หรือไม่ หรือโดยตรวจสอบค่าของพร็อพเพอร์ตี้ navigator.connection.saveData หากเปิดใช้ ให้พิจารณาว่าคุณเขียนคำขอใหม่เพื่อดึงข้อมูลไบต์น้อยลงหรือใช้การตอบกลับที่ดึงข้อมูลแล้วได้หรือไม่
5. ลองเพิ่ม Save-Data ด้วยสัญญาณอื่นๆ เช่น ข้อมูลเกี่ยวกับ ประเภทการเชื่อมต่อและเทคโนโลยีของผู้ใช้ (ดู NetInfo API) เช่น คุณอาจต้องการแสดงประสบการณ์การใช้งานแบบเบาแก่ผู้ใช้ที่เชื่อมต่อ 2G แม้ว่าจะไม่ได้เปิดใช้ Save-Data ก็ตาม ในทางกลับกัน การที่ผู้ใช้ใช้การเชื่อมต่อ 4G ที่ "รวดเร็ว" ไม่ได้หมายความว่าผู้ใช้จะไม่สนใจการประหยัดข้อมูล เช่น เมื่อโรมมิ่ง นอกจากนี้ คุณยังเพิ่มการแสดงผลของ Save-Data ด้วยคำแนะนำไคลเอ็นต์ Device-Memory เพื่อปรับให้เข้ากับผู้ใช้ใน อุปกรณ์ที่มีหน่วยความจำจำกัดได้อีกด้วย นอกจากนี้ยังมีการโฆษณาหน่วยความจำของอุปกรณ์ผู้ใช้ใน navigator.deviceMemoryคำแนะนำไคลเอ็นต์ด้วย

สูตรอาหาร

สิ่งที่คุณทำได้ผ่าน Save-Data นั้นจำกัดอยู่เพียงสิ่งที่คุณคิดออก เท่านั้น เรามาดู Use Case 2-3 ตัวอย่างเพื่อให้คุณเห็นภาพว่าทำอะไรได้บ้าง คุณอาจคิดถึงกรณีการใช้งานอื่นๆ ของคุณเองขณะอ่านข้อความนี้ ดังนั้น โปรดทดลองใช้และดูว่าทำอะไรได้บ้าง

การตรวจสอบ Save-Data ในโค้ดฝั่งเซิร์ฟเวอร์

แม้ว่าคุณจะตรวจหาSave-Dataได้ใน JavaScript ผ่านพร็อพเพอร์ตี้ navigator.connection.saveData แต่บางครั้งการตรวจหาในฝั่งเซิร์ฟเวอร์ก็เป็นตัวเลือกที่ดีกว่า JavaScript อาจเรียกใช้ไม่สำเร็จในบางกรณี นอกจากนี้ การตรวจหาฝั่งเซิร์ฟเวอร์ยังเป็นวิธีเดียวในการแก้ไขมาร์กอัปก่อนที่จะส่งไปยังไคลเอ็นต์ ซึ่งเกี่ยวข้องกับกรณีการใช้งานที่เป็นประโยชน์มากที่สุดบางส่วนของ Save-Data

ไวยากรณ์ที่เฉพาะเจาะจงสำหรับการตรวจหาส่วนหัว Save-Data ในโค้ดฝั่งเซิร์ฟเวอร์ ขึ้นอยู่กับภาษาที่ใช้ แต่แนวคิดพื้นฐานควรเหมือนกันสำหรับแบ็กเอนด์ของแอปพลิเคชัน ใดก็ตาม ตัวอย่างเช่น ใน PHP ระบบจะจัดเก็บส่วนหัวของคำขอไว้ในอาร์เรย์$_SERVER Superglobal ที่ดัชนีซึ่งเริ่มต้นด้วย HTTP_ ซึ่งหมายความว่าคุณสามารถตรวจหาSave-Dataส่วนหัว$_SERVER["HTTP_SAVE_DATA"]ได้โดยตรวจสอบการมีอยู่และค่าของตัวแปร$_SERVER["HTTP_SAVE_DATA"]ดังนี้

// 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;
}

หากคุณวางการตรวจสอบนี้ก่อนที่จะส่งมาร์กอัปใดๆ ไปยังไคลเอ็นต์ $saveData ตัวแปรจะมีสถานะ Save-Data และจะพร้อมใช้งานทุกที่ในหน้าเว็บ เมื่อทราบกลไกนี้แล้ว ลองมาดูตัวอย่าง 2-3 ตัวอย่างเกี่ยวกับวิธีใช้กลไกนี้เพื่อจำกัดปริมาณข้อมูลที่เราส่งไปยังผู้ใช้

แสดงรูปภาพความละเอียดต่ำสำหรับหน้าจอความละเอียดสูง

กรณีการใช้งานทั่วไปสำหรับรูปภาพบนเว็บคือการแสดงรูปภาพเป็นชุด 2 รูป รูปภาพหนึ่งสำหรับหน้าจอ "มาตรฐาน" (1x) และอีกรูปภาพหนึ่งที่มีขนาดใหญ่เป็น 2 เท่า (2x) สำหรับหน้าจอความละเอียดสูง (เช่น Retina Display) หน้าจอความละเอียดสูงประเภทนี้ไม่ได้จำกัดเฉพาะอุปกรณ์ระดับไฮเอนด์ และกำลังเป็นที่นิยมมากขึ้นเรื่อยๆ ในกรณีที่ต้องการประสบการณ์การใช้งานแอปที่เบากว่า การส่งรูปภาพที่มีความละเอียดต่ำกว่า (1x) ไปยังหน้าจอเหล่านี้อาจเป็นทางเลือกที่เหมาะสม มากกว่าการส่งรูปภาพที่มีขนาดใหญ่กว่า (2x) หากต้องการดำเนินการนี้เมื่อมีSave-Data ส่วนหัว เราเพียงแค่แก้ไขมาร์กอัปที่เราส่งให้ไคลเอ็นต์

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
}

กรณีการใช้งานนี้เป็นตัวอย่างที่ยอดเยี่ยมที่แสดงให้เห็นว่าการรองรับผู้ที่ขอให้คุณส่งข้อมูลให้น้อยลงนั้นใช้ความพยายามเพียงเล็กน้อย หากไม่ต้องการ แก้ไขมาร์กอัปในแบ็กเอนด์ คุณก็สามารถได้ผลลัพธ์เดียวกันโดย ใช้โมดูลการเขียน URL ใหม่ เช่น Apache mod_rewrite มีตัวอย่างวิธีทําให้ได้ผลลัพธ์นี้โดยไม่ต้องกําหนดค่ามากนัก

คุณยังขยายแนวคิดนี้ไปยังพร็อพเพอร์ตี้ CSS background-image ได้ด้วยการ เพิ่มคลาสลงในองค์ประกอบ <html>

<html class="<?php if ($saveData === true): ?>save-data<?php endif; ?>">

จากที่นี่ คุณสามารถกำหนดเป้าหมายsave-dataคลาสในองค์ประกอบ <html> ใน CSS เพื่อเปลี่ยนวิธีแสดงรูปภาพได้ คุณสามารถส่งภาพพื้นหลังความละเอียดต่ำไปยังหน้าจอความละเอียดสูงได้ตามตัวอย่าง HTML ด้านบน หรือจะละเว้นทรัพยากรบางอย่างไปเลยก็ได้

ละเว้นภาพที่ไม่จำเป็น

เนื้อหารูปภาพบางส่วนบนเว็บเป็นเพียงเนื้อหาที่ไม่จำเป็น แม้ว่าภาพดังกล่าวจะช่วยเสริมเนื้อหาได้ แต่ผู้ที่พยายามใช้แพ็กเกจอินเทอร์เน็ตแบบจำกัดให้คุ้มค่าที่สุดอาจไม่ต้องการเห็นภาพเหล่านี้ ในกรณีการใช้งาน Save-Data ที่อาจจะง่ายที่สุด เราสามารถใช้โค้ดการตรวจหา PHP จากก่อนหน้านี้และละเว้นมาร์กอัปรูปภาพที่ไม่จำเป็นทั้งหมดได้

<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
}

เทคนิคนี้มีผลอย่างเห็นได้ชัด ดังที่แสดงใน รูปด้านล่าง

แน่นอนว่าการละเว้นรูปภาพไม่ใช่ความเป็นไปได้เพียงอย่างเดียว นอกจากนี้ คุณยังดำเนินการกับ Save-Dataเพื่อหลีกเลี่ยงการส่งทรัพยากรอื่นๆ ที่ไม่สำคัญ เช่น แบบอักษรบางแบบ ได้ด้วย

ละเว้นแบบอักษรบนเว็บที่ไม่จำเป็น

แม้ว่าโดยปกติแล้วแบบอักษรบนเว็บมักจะไม่คิดเป็นเพย์โหลดทั้งหมดของหน้าเว็บหนึ่งๆ มากเท่ากับรูปภาพ แต่ก็ยังคงเป็นที่นิยมอยู่ และยังไม่ใช้อินเทอร์เน็ตมากนักด้วย นอกจากนี้ วิธีที่เบราว์เซอร์ดึงข้อมูลและแสดงผลแบบอักษรยังซับซ้อนกว่าที่คุณคิด โดยมีแนวคิดต่างๆ เช่น FOIT, FOUT และฮิวริสติกของเบราว์เซอร์ที่ทำให้การแสดงผลเป็นกระบวนการที่ละเอียดซับซ้อน

ดังนั้น คุณอาจต้องการละเว้นฟอนต์บนเว็บที่ไม่จำเป็นสำหรับผู้ใช้ที่ต้องการประสบการณ์การใช้งานที่เรียบง่าย Save-Data ทำให้การดำเนินการนี้เป็นเรื่องที่ ทำได้ง่ายๆ

ตัวอย่างเช่น สมมติว่าคุณได้รวม Fira Sans จาก Google Fonts ไว้ในเว็บไซต์ Fira Sans เป็นแบบอักษรที่ยอดเยี่ยมสำหรับข้อความเนื้อหา แต่ก็อาจไม่สำคัญมากนักสำหรับผู้ใช้ที่พยายามประหยัดข้อมูล การเพิ่มคลาส save-data ลงในองค์ประกอบ <html> เมื่อมีส่วนหัว Save-Data จะช่วยให้เราเขียนสไตล์ที่เรียกใช้แบบอักษรที่ไม่จำเป็นก่อนได้ แต่จะเลือกไม่ใช้เมื่อมีส่วนหัว 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;
}

เมื่อใช้วิธีนี้ คุณจะปล่อยให้<link>ข้อมูลโค้ดจาก Google Fonts อยู่ที่เดิมได้ เนื่องจากเบราว์เซอร์จะโหลดทรัพยากร CSS (รวมถึงแบบอักษรบนเว็บ) โดยคาดการณ์ไว้ล่วงหน้าด้วยการใช้สไตล์กับ DOM ก่อน แล้วจึงตรวจสอบว่าองค์ประกอบ HTML ใดเรียกใช้ทรัพยากรในชีตสไตล์หรือไม่ หากมีใครเปิดSave-Dataไว้ Fira Sans จะไม่โหลดเนื่องจาก DOM ที่จัดรูปแบบจะไม่เรียกใช้ ระบบจะใช้ Arial แทน แม้จะไม่สวยเท่า Fira Sans แต่ ก็อาจเป็นตัวเลือกที่ผู้ใช้ที่พยายามประหยัดแพ็กเกจอินเทอร์เน็ตชื่นชอบ

สรุป

ส่วนหัว Save-Data ไม่มีความแตกต่างมากนัก โดยจะเปิดหรือปิด และ แอปพลิเคชันมีภาระในการมอบประสบการณ์ที่เหมาะสมตาม การตั้งค่าของแอปพลิเคชัน ไม่ว่าเหตุผลจะเป็นอะไรก็ตาม

ตัวอย่างเช่น ผู้ใช้บางรายอาจไม่อนุญาตให้ใช้โหมดประหยัดอินเทอร์เน็ตหากสงสัยว่า เนื้อหาหรือฟังก์ชันของแอปจะหายไป แม้ในกรณีที่การเชื่อมต่อไม่ดี ก็ตาม ในทางกลับกัน ผู้ใช้บางรายอาจเปิดใช้ฟีเจอร์นี้โดยอัตโนมัติเพื่อทำให้หน้าเว็บมีขนาดเล็กและเรียบง่ายที่สุดเท่าที่จะเป็นไปได้ แม้ว่าการเชื่อมต่อจะดีก็ตาม แอปของคุณควรพิจารณาว่าผู้ใช้ต้องการประสบการณ์การใช้งานแบบเต็มรูปแบบและไม่จำกัด จนกว่าคุณจะได้รับข้อบ่งชี้ที่ชัดเจนเป็นอย่างอื่นผ่านการดำเนินการของผู้ใช้โดยชัดแจ้ง

ในฐานะเจ้าของเว็บไซต์และนักพัฒนาเว็บ เรามาช่วยกันรับผิดชอบในการจัดการเนื้อหาเพื่อปรับปรุงประสบการณ์ของผู้ใช้ที่จำกัดข้อมูลและค่าใช้จ่ายกัน

ดูรายละเอียดเพิ่มเติมเกี่ยวกับ Save-Data และตัวอย่างการใช้งานที่ยอดเยี่ยมได้ที่ช่วยผู้ใช้Save Data