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