ความสามารถของอุปกรณ์ที่สามารถเชื่อมต่อกับเว็บในปัจจุบันนั้นครอบคลุมมากกว่าที่เคย เว็บแอปพลิเคชันเดียวกันที่แสดงในคอมพิวเตอร์เดสก์ท็อประดับไฮเอนด์อาจให้บริการในโทรศัพท์ นาฬิกา หรือแท็บเล็ตที่ใช้พลังงานต่ำด้วย การสร้างประสบการณ์ที่น่าสนใจสำหรับการทำงานในอุปกรณ์ทุกประเภทนั้นเป็นเรื่องท้าทายอย่างไม่น่าเชื่อ
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 ขั้นตอน
- ตั้งค่ามิติข้อมูลที่กำหนดเองใน Google Analytics
- อัปเดตโค้ดติดตามเป็น
set
ค่าหน่วยความจำอุปกรณ์สำหรับมิติข้อมูลที่กำหนดเองที่คุณเพิ่งสร้างขึ้น
เมื่อสร้างมิติข้อมูลที่กำหนดเอง ให้ตั้งชื่อว่า "หน่วยความจำของอุปกรณ์" และเลือกขอบเขตของ "เซสชัน" เนื่องจากค่าจะไม่เปลี่ยนแปลงระหว่างเซสชันการท่องเว็บของผู้ใช้
จากนั้น อัปเดตโค้ดติดตามของคุณ นี่คือตัวอย่างลักษณะการใช้งาน โปรดทราบว่าสำหรับเบราว์เซอร์ที่ไม่รองรับ 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 จะรวมค่านี้ด้วย
ซึ่งจะช่วยให้คุณสามารถแจกแจงเมตริกที่ต้องการ (เช่น เวลาในการโหลดหน้าเว็บ อัตราเป้าหมายที่สำเร็จ ฯลฯ) ตามหน่วยความจำของอุปกรณ์เพื่อดูว่ามีความสัมพันธ์ใดๆ หรือไม่
เนื่องจากหน่วยความจำอุปกรณ์เป็นมิติข้อมูลที่กำหนดเอง แทนที่จะเป็นมิติข้อมูลในตัว คุณจะไม่เห็นข้อมูลนี้ในรายงานมาตรฐานใดเลย หากต้องการเข้าถึงข้อมูลนี้ คุณจะต้องสร้างรายงานที่กำหนดเอง เช่น การกำหนดค่าสำหรับรายงานที่กำหนดเองซึ่งเปรียบเทียบเวลาที่ใช้ในการโหลดตามหน่วยความจำของอุปกรณ์อาจมีลักษณะดังนี้
และรายงานที่สร้างขึ้นอาจมีลักษณะดังนี้
เมื่อคุณรวบรวมข้อมูลหน่วยความจำของอุปกรณ์และมีพื้นฐานเกี่ยวกับวิธีที่ผู้ใช้ใช้งานแอปพลิเคชันของคุณในช่วงสเปกตรัมของหน่วยความจำทั้งหมดแล้ว คุณสามารถทดลองให้บริการทรัพยากรต่างๆ แก่ผู้ใช้ที่แตกต่างกันได้ (โดยใช้เทคนิคที่อธิบายไว้ในส่วนด้านบน) หลังจากนั้น คุณสามารถดู ผลลัพธ์และดูว่าดีขึ้นไหม
ใกล้จะเสร็จแล้ว
โพสต์นี้สรุปวิธีใช้ Device Memory API เพื่อปรับแต่งแอปพลิเคชัน ให้เข้ากับความสามารถของอุปกรณ์ของผู้ใช้ และแสดงวิธีวัดผลที่ผู้ใช้เหล่านี้ใช้งานแอปของคุณ
แม้ว่าโพสต์นี้มุ่งเน้นที่ API ของ Memory อุปกรณ์ แต่เทคนิคส่วนใหญ่ที่อธิบายในที่นี้อาจนำไปใช้กับ API ที่รายงานความสามารถของอุปกรณ์หรือเงื่อนไขของเครือข่าย
เมื่อภูมิทัศน์ของอุปกรณ์ขยายตัวขึ้นเรื่อยๆ นักพัฒนาเว็บต้องพิจารณาผู้ใช้ทุกกลุ่มเมื่อตัดสินใจที่ส่งผลต่อประสบการณ์การใช้งานของตน