ทำความเข้าใจแบนด์วิดท์ต่ำและเวลาในการตอบสนองสูง

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

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

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

จำลองการควบคุมปริมาณการใช้เครือข่าย

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

เครื่องมือของเบราว์เซอร์

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

การควบคุมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

เครื่องมือของระบบ

Network Link Conditioner เป็นแผงการตั้งค่าที่มีให้ใน Mac หากคุณติดตั้งเครื่องมือ IO ของฮาร์ดแวร์สำหรับ Xcode

แผงควบคุมตัวปรับสภาพลิงก์เครือข่ายของ Mac

การตั้งค่าตัวปรับสภาพลิงก์เครือข่ายของ Mac

การตั้งค่าที่กำหนดเองของโปรแกรมปรับสภาพลิงก์เครือข่ายของ Mac

การจำลองอุปกรณ์

โปรแกรมจําลอง Android ช่วยให้คุณจําลองเงื่อนไขเครือข่ายต่างๆ ขณะเรียกใช้แอป (รวมถึงเว็บเบราว์เซอร์และเว็บแอปแบบผสม) ใน Android ได้ ดังนี้

โปรแกรมจำลองของ Android

การตั้งค่าโปรแกรมจำลอง Android

สำหรับ iPhone คุณสามารถใช้เครื่องมือปรับสภาพลิงก์เครือข่ายเพื่อจำลองสภาพเครือข่ายที่บกพร่อง (ดูด้านบน)

ทดสอบจากตำแหน่งและเครือข่ายต่างๆ

ประสิทธิภาพการเชื่อมต่อขึ้นอยู่กับตำแหน่งเซิร์ฟเวอร์และประเภทเครือข่าย

WebPagetest เป็นบริการออนไลน์ที่ช่วยให้สามารถเรียกใช้ชุดการทดสอบประสิทธิภาพสําหรับเว็บไซต์โดยใช้เครือข่ายและตำแหน่งโฮสต์ที่หลากหลาย ตัวอย่างเช่น คุณอาจลองใช้เว็บไซต์จากเซิร์ฟเวอร์ในอินเดียบนเครือข่าย 2G หรือผ่านสายเคเบิลจากเมืองในสหรัฐอเมริกา

การตั้งค่า WebPagetest

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

Fiddler รองรับการพร็อกซีทั่วโลกผ่าน GeoEdge และคุณสามารถใช้กฎที่กำหนดเองเพื่อจำลองความเร็วของโมดูลได้ ดังนี้

พร็อกซี Fiddler

ทดสอบในเครือข่ายที่ทำงานขัดข้อง

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

Augmented Traffic Control (ATC) ของ Facebook คือชุดแอปพลิเคชันที่ได้รับอนุญาตจาก BSD และใช้เพื่อกำหนดการเข้าชมและจำลองสภาพเครือข่ายที่บกพร่องได้

Augmented Traffic Control ของ Facebook

Facebook ยังได้จัดตั้งวันอังคาร 2G เพื่อช่วยให้เข้าใจวิธีที่ผู้ใช้ 2G ใช้ผลิตภัณฑ์ ในวันอังคาร พนักงานจะเห็นป๊อปอัปที่ให้ตัวเลือกในการจําลองการเชื่อมต่อ 2G

คุณสามารถใช้พร็อกซี HTTP/HTTPS ของ Charles เพื่อปรับแบนด์วิดท์และเวลาในการตอบสนอง Charles เป็นซอฟต์แวร์เชิงพาณิชย์ แต่มีช่วงทดลองใช้ฟรี

การตั้งค่าแบนด์วิดท์และเวลาในการตอบสนองของพร็อกซี Charles

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Charles ได้จาก codewithchris.com

จัดการการเชื่อมต่อที่ไม่เสถียรและ "อินเทอร์เน็ตมือถือที่ไม่น่าเชื่อถือ"

Lie-Fi คืออะไร

คำว่า lie-Fi ย้อนกลับไปถึงปี 2008 เป็นอย่างน้อย (เมื่อโทรศัพท์มีหน้าตาเป็นแบบแบบนี้) และหมายถึงการเชื่อมต่อที่ไม่เหมือนกับที่เห็น เบราว์เซอร์ทํางานราวกับมีการเชื่อมต่อเมื่อไม่มีการเชื่อมต่อไม่ว่าด้วยเหตุผลใดก็ตาม

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

Lie-Fi มีแนวโน้มที่จะเป็นปัญหาที่ใหญ่กว่าเนื่องจากผู้ใช้หันมาใช้บรอดแบนด์ไร้สายแทนแบบคงที่กันมากขึ้น ข้อมูลการสำรวจสำมะโนประชากรของสหรัฐอเมริกาล่าสุดแสดงให้เห็นว่าผู้คนหันไปใช้บรอดแบนด์แบบคงที่น้อยลง แผนภูมิต่อไปนี้แสดงการใช้อินเทอร์เน็ตบนอุปกรณ์เคลื่อนที่ที่บ้านในปี 2015 เทียบกับปี 2013

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

ใช้การหมดเวลาเพื่อจัดการการเชื่อมต่อที่ไม่ต่อเนื่อง

ก่อนหน้านี้มีการใช้วิธีการแบบแฮ็กโดยใช้ XHR เพื่อทดสอบการเชื่อมต่อที่ไม่ต่อเนื่อง แต่ Service Worker ช่วยให้ใช้วิธีการที่เชื่อถือได้มากขึ้นในการตั้งค่าการหมดเวลาของเครือข่าย ซึ่งทำได้โดยใช้ Workbox ด้วยโค้ดเพียงไม่กี่บรรทัด

workboxSW.router.registerRoute(
  '/path/to/image',
  workboxSW.strategies.networkFirst({networkTimeoutSeconds: 3}),
);

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Workbox ได้ในการสนทนาของ Jeff Posnick ใน Chrome Dev Summit เรื่อง Workbox: ไลบรารี PWA ที่ยืดหยุ่น

นอกจากนี้ เรายังพัฒนาฟังก์ชันการหมดเวลาสำหรับ Fetch API และ Streams API ควรช่วยเพิ่มประสิทธิภาพการส่งเนื้อหาและหลีกเลี่ยงคำขอแบบโมโนลิธิก Jake Archibald ให้รายละเอียดเพิ่มเติมเกี่ยวกับการรับมือกับ Lie-Fi ในบทความเร่งการโหลดหน้าเว็บ

ความคิดเห็น