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

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

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

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

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

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

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

เครื่องมือสำหรับนักพัฒนาเว็บใน 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

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

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

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

การควบคุมการเข้าชมที่เพิ่มประสิทธิภาพของ Facebook

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

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

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

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

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

Lie-Fi คืออะไร

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

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

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

ความคิดเห็น