Memory API ของอุปกรณ์

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

Device Memory API เป็นฟีเจอร์แพลตฟอร์มบนเว็บใหม่ที่มีไว้เพื่อช่วยให้นักพัฒนาเว็บรับมือกับสภาพแวดล้อมของอุปกรณ์สมัยใหม่ได้ โดยจะเพิ่มพร็อพเพอร์ตี้แบบอ่านอย่างเดียวให้กับออบเจ็กต์ navigator navigator.deviceMemory ซึ่งจะแสดงผลจำนวน RAM ของอุปกรณ์ในหน่วยกิกะไบต์ โดยปัดเศษลงให้มากสุด 2 เท่า นอกจากนี้ API ยังมีส่วนหัวคำแนะนำไคลเอ็นต์ Device-Memory ที่รายงานค่าเดียวกัน

Device Memory API ช่วยให้นักพัฒนาแอปสามารถดำเนินการหลักๆ 2 อย่าง ได้แก่

  • ตัดสินใจรันไทม์เกี่ยวกับทรัพยากรที่จะแสดงตามค่าหน่วยความจำของอุปกรณ์ที่ส่งกลับมา (เช่น แสดงแอปเวอร์ชัน "Lite" ให้แก่ผู้ใช้ที่ใช้อุปกรณ์ที่มีหน่วยความจำต่ำ)
  • รายงานมูลค่านี้ไปยังบริการวิเคราะห์เพื่อทำความเข้าใจว่าหน่วยความจำของอุปกรณ์สัมพันธ์กับพฤติกรรมของผู้ใช้, Conversion หรือเมตริกอื่นๆ ที่สำคัญต่อธุรกิจของคุณอย่างไร

การปรับแต่งเนื้อหาแบบไดนามิกตามหน่วยความจำของอุปกรณ์

หากคุณใช้เว็บเซิร์ฟเวอร์ของคุณเองและสามารถแก้ไขตรรกะที่ให้บริการทรัพยากรได้ คุณสามารถตอบกลับคำขอที่มีDevice-Memory ส่วนหัวคำแนะนำไคลเอ็นต์อย่างมีเงื่อนไขได้

GET /main.js HTTP/1.1
Host: www.example.com
Device-Memory: 0.5
Accept: */*

เทคนิคนี้ช่วยให้คุณสร้างสคริปต์แอปพลิเคชันได้อย่างน้อย 1 เวอร์ชันและตอบกลับคำขอจากไคลเอ็นต์อย่างมีเงื่อนไขโดยอิงตามค่าที่กำหนดไว้ในส่วนหัว Device-Memory เวอร์ชันเหล่านี้ไม่จำเป็นต้องมีโค้ดที่แตกต่างกันโดยสิ้นเชิง (เนื่องจากดูแลได้ยาก) โดยส่วนมาก เวอร์ชัน "Lite" จะไม่รวมเฉพาะคุณลักษณะที่อาจมีราคาแพงและไม่สำคัญต่อประสบการณ์ของผู้ใช้

การใช้ส่วนหัว Client Hints

หากต้องการเปิดใช้ส่วนหัว Device-Memory ให้เพิ่มแท็กคำแนะนำลูกค้า <meta> ลงใน <head> ของเอกสาร ดังนี้

<meta http-equiv="Accept-CH" content="Device-Memory">

หรือใส่ "หน่วยความจำของอุปกรณ์" ไว้ในส่วนหัวการตอบกลับ Accept-CH ของเซิร์ฟเวอร์ของคุณ ดังนี้

HTTP/1.1 200 OK
Date: Thu Dec 07 2017 11:44:31 GMT
Content-Type: text/html
Accept-CH: Device-Memory, Downlink, Viewport-Width

การดำเนินการนี้จะบอกให้เบราว์เซอร์ส่งส่วนหัว Device-Memory ที่มีคำขอทรัพยากรย่อยทั้งหมดสำหรับหน้าปัจจุบัน

กล่าวคือ เมื่อคุณใช้ตัวเลือกหนึ่งข้างต้นสำหรับเว็บไซต์ หากผู้ใช้เข้าชมอุปกรณ์ที่มี RAM 0.5 GB คำขอรูปภาพ, CSS และ JavaScript ทั้งหมดจากหน้านี้จะรวมส่วนหัว Device-Memory ที่มีค่าเป็น "0.5" และเซิร์ฟเวอร์จะตอบสนองต่อคำขอดังกล่าวได้ตามที่คุณต้องการ

เช่น เส้นทาง Express ต่อไปนี้แสดงสคริปต์เวอร์ชัน "lite" หากมีการตั้งค่าส่วนหัว Device-Memory และค่าน้อยกว่า 1 หรือแสดงเวอร์ชัน "เต็ม" หากเบราว์เซอร์ไม่รองรับส่วนหัว Device-Memory หรือค่าเป็น 1 ขึ้นไป

app.get('/static/js/:scriptId', (req, res) => {
  // Low-memory devices should load the "lite" version of the component.
  // The logic below will set `scriptVersion` to "lite" if (and only if)
  // `Device-Memory` isn't undefined and returns a number less than 1.
  const scriptVersion = req.get('Device-Memory') < 1 ? 'lite' : 'full';

  // Respond with the file based on `scriptVersion` above.
  res.sendFile(`./path/to/${req.params.scriptId}.${scriptVersion}.js`);
});

การใช้ JavaScript API

ในบางกรณี (เช่น เซิร์ฟเวอร์ไฟล์แบบคงที่หรือ CDN) คุณจะไม่สามารถตอบกลับคำขอแบบมีเงื่อนไขโดยอิงตามส่วนหัว HTTP ได้ ในกรณีเช่นนี้ คุณจะใช้ JavaScript API เพื่อส่งคำขอแบบมีเงื่อนไขในโค้ด JavaScript ได้

ตรรกะต่อไปนี้คล้ายกับเส้นทาง Express ด้านบน แต่จะกำหนด URL ของสคริปต์แบบไดนามิกในตรรกะฝั่งไคลเอ็นต์

// Low-memory devices should load the "lite" version of the component.
// The logic below will set `componentVersion` to "lite" if (and only if)
// deviceMemory isn't undefined and returns a number less than 1.
const componentVersion = navigator.deviceMemory < 1 ? 'lite' : 'full';

const component = await import(`path/to/component.${componentVersion}.js`);
component.init();

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

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

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

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

การติดตามหน่วยความจำของอุปกรณ์ด้วยการวิเคราะห์

Device Memory API เป็นโปรแกรมใหม่ และผู้ให้บริการวิเคราะห์ส่วนใหญ่ไม่ได้ติดตามโดยค่าเริ่มต้น โชคดีที่ผู้ให้บริการวิเคราะห์ส่วนใหญ่ให้วิธีติดตามข้อมูลที่กำหนดเอง (เช่น Google Analytics มีฟีเจอร์ชื่อมิติข้อมูลที่กำหนดเอง) ซึ่งคุณสามารถใช้เพื่อติดตามหน่วยความจำอุปกรณ์สำหรับอุปกรณ์ของผู้ใช้ได้

การใช้มิติข้อมูลหน่วยความจำของอุปกรณ์ที่กำหนดเอง

การใช้มิติข้อมูลที่กำหนดเองใน Google Analytics เป็นกระบวนการที่มี 2 ขั้นตอน

  1. ตั้งค่ามิติข้อมูลที่กำหนดเองใน Google Analytics
  2. อัปเดตโค้ดติดตามเป็น set ค่าหน่วยความจำอุปกรณ์สำหรับมิติข้อมูลที่กำหนดเองที่คุณเพิ่งสร้างขึ้น

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

การสร้างมิติข้อมูลที่กำหนดเองของหน่วยความจำอุปกรณ์ใน Google Analytics
การสร้างมิติข้อมูลที่กำหนดเองของหน่วยความจำอุปกรณ์ใน Google Analytics

จากนั้น อัปเดตโค้ดติดตามของคุณ นี่คือตัวอย่างลักษณะการใช้งาน โปรดทราบว่าสำหรับเบราว์เซอร์ที่ไม่รองรับ Device Memory API ค่าของมิติข้อมูลจะเป็น "(not set)"

// Create the tracker from your tracking ID.
// Replace "UA-XXXXX-Y" with your Google Analytics tracking ID.
ga('create', 'UA-XXXXX-Y', 'auto');

// Set the device memory value as a custom dimension on the tracker.
// This will ensure it gets sent with all future data to Google Analytics.
// Note: replace "XX" with the index of the custom dimension you created
// in the Google Analytics admin.
ga('set', 'dimensionXX', navigator.deviceMemory || '(not set)');

// Do any other other custom setup you want...

// Send the initial pageview.
ga('send', 'pageview');

การรายงานข้อมูลหน่วยความจำของอุปกรณ์

เมื่อมิติข้อมูลหน่วยความจำของอุปกรณ์คือ set ในออบเจ็กต์ติดตาม ข้อมูลทั้งหมดที่คุณส่งไปยัง Google Analytics จะรวมค่านี้ด้วย ซึ่งจะช่วยให้คุณสามารถแจกแจงเมตริกที่ต้องการ (เช่น เวลาในการโหลดหน้าเว็บ อัตราเป้าหมายที่สำเร็จ ฯลฯ) ตามหน่วยความจำของอุปกรณ์เพื่อดูว่ามีความสัมพันธ์ใดๆ หรือไม่

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

การสร้างรายงานที่กำหนดเองเกี่ยวกับหน่วยความจำของอุปกรณ์ใน Google Analytics
การสร้างรายงานที่กำหนดเองของหน่วยความจำอุปกรณ์ใน Google Analytics

และรายงานที่สร้างขึ้นอาจมีลักษณะดังนี้

รายงานหน่วยความจำของอุปกรณ์
รายงานหน่วยความจำของอุปกรณ์

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

ใกล้จะเสร็จแล้ว

โพสต์นี้สรุปวิธีใช้ Device Memory API เพื่อปรับแต่งแอปพลิเคชัน ให้เข้ากับความสามารถของอุปกรณ์ของผู้ใช้ และแสดงวิธีวัดผลที่ผู้ใช้เหล่านี้ใช้งานแอปของคุณ

แม้ว่าโพสต์นี้มุ่งเน้นที่ API ของ Memory อุปกรณ์ แต่เทคนิคส่วนใหญ่ที่อธิบายในที่นี้อาจนำไปใช้กับ API ที่รายงานความสามารถของอุปกรณ์หรือเงื่อนไขของเครือข่าย

เมื่อภูมิทัศน์ของอุปกรณ์ขยายตัวขึ้นเรื่อยๆ นักพัฒนาเว็บต้องพิจารณาผู้ใช้ทุกกลุ่มเมื่อตัดสินใจที่ส่งผลต่อประสบการณ์การใช้งานของตน