การนำเสนอแอปพลิเคชันที่รวดเร็วและใช้ทรัพยากรน้อยด้วย Save-Data

Dave Gash

Ilya Grigorik

Jeremy Wagner

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

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

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

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

การเปิดใช้ส่วนขยายโปรแกรมประหยัดอินเทอร์เน็ตใน Chrome บนเดสก์ท็อป

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

เคล็ดลับ: หากคุณใช้ PageSpeed สำหรับ Apache หรือ Nginx เพื่อเพิ่มประสิทธิภาพหน้าเว็บ โปรดดูการสนทนานี้เพื่อดูวิธีเปิดใช้การประหยัด 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"] ดังนี้

// 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 เท่า (2x) สำหรับหน้าจอความละเอียดสูง (เช่น 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 กับภาพเดียวกันที่ถูกละเว้นเมื่อมี Save-Data

แน่นอนว่าการละเว้นรูปภาพไม่ใช่ทางเลือกเดียว นอกจากนี้ คุณยังดำเนินการกับ 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