หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Dave Gash

Ilya Grigorik

Jeremy Wagner

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

ความจำเป็นในการใช้หน้าเว็บขนาดเล็ก

สถิติ Weblight

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

และแม้ว่าจำนวนการเชื่อมต่อ 2G จะลดลงอย่างมากในขั้นสุดท้าย แต่ 2G นั้นยังคงเป็นเทคโนโลยีเครือข่ายที่โดดเด่นในปี 2015 ความแพร่หลายและความพร้อมใช้งานของเครือข่าย 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`

แอปพลิเคชันของคุณสามารถตรวจสอบส่วนหัวของคำขอคำแนะนำไคลเอ็นต์ 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 เท่านั้น จากตรงนี้ คุณจะต้องตรวจสอบว่า navigator.connection.saveData เท่ากับ true หรือไม่ และจะใช้งานการดำเนินการบันทึกข้อมูลใดก็ได้ในเงื่อนไขดังกล่าว

ส่วนหัว "Save-Data" ที่แสดงในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome ซึ่งแสดงร่วมกับส่วนขยายโปรแกรมประหยัดอินเทอร์เน็ต — การเปิดใช้ส่วนขยายโปรแกรมประหยัดอินเทอร์เน็ตใน Chrome สำหรับเดสก์ท็อป

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

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

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

สูตรอาหาร

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

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

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

ไวยากรณ์เฉพาะสำหรับการตรวจหาส่วนหัว Save-Data ในโค้ดฝั่งเซิร์ฟเวอร์จะขึ้นอยู่กับภาษาที่ใช้ แต่แนวคิดพื้นฐานควรเหมือนกันสำหรับแบ็กเอนด์แอปพลิเคชันทั้งหมด ตัวอย่างเช่น ใน PHP ส่วนหัวของคำขอจะจัดเก็บในอาร์เรย์ Superglobal $_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 รูป ได้แก่ รูปภาพ 1 รูปสำหรับหน้าจอ "มาตรฐาน" (1x) และอีกรูปที่มีขนาดใหญ่เป็น 2 เท่า (2 เท่า) สำหรับหน้าจอความละเอียดสูง (เช่น Retina Display) หน้าจอความละเอียดสูงประเภทนี้ไม่จำเป็นต้องจำกัดอยู่เฉพาะในอุปกรณ์ระดับไฮเอนด์เท่านั้น และกําลังเริ่มได้รับความนิยมเพิ่มขึ้นเรื่อยๆ ในกรณีที่ควรใช้แอปพลิเคชันน้อยกว่า ควรส่งภาพที่มีความละเอียดต่ำ (1 เท่า) ไปยังหน้าจอเหล่านี้แทนรูปแบบที่มีขนาดใหญ่กว่า (2 เท่า) เพื่อให้บรรลุเป้าหมายนี้เมื่อมีส่วนหัว 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 ใหม่ เช่น mod_rewrite ของ Apache เรามีตัวอย่างวิธีบรรลุเป้าหมายนี้ซึ่งมีการกำหนดค่าเพียงเล็กน้อย

นอกจากนี้ คุณยังขยายแนวคิดนี้ไปยังพร็อพเพอร์ตี้ 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