Ele.me เป็นบริษัทสั่งอาหารและจัดส่ง ที่ใหญ่ที่สุดในจีนแผ่นดินใหญ่ บริษัทให้บริการผู้ใช้ที่ลงทะเบียน 260 ล้านคนจากกว่า 200 เมืองทั่วจีน และมีร้านอาหารกว่า 1.3 ล้านรายชื่อ เนื่องจาก 99% ของผู้ใช้สั่งอาหารบนอุปกรณ์เคลื่อนที่ Ele.me จึงตั้งเป้าที่จะปรับปรุงประสบการณ์การใช้งานเว็บบนอุปกรณ์เคลื่อนที่ โดยทำให้การเชื่อมต่อที่ไม่สม่ำเสมอทำงานได้เร็วและเสถียรยิ่งขึ้น ขณะที่อาศัยโมเดลทางเทคนิคหลักของแอปแบบหลายหน้าเพื่อตอบสนองความต้องการในการปฏิบัติงาน
- เวลาในการโหลดลดลง 11.6% ในทุกหน้าที่จัดเก็บในแคชล่วงหน้า
- เวลาในการโหลดลดลงโดยเฉลี่ย 6.35% ในทุกหน้า
- เวลาที่จะโต้ตอบอย่างต่อเนื่องลดลงเหลือ 4.93 วินาทีในเครือข่าย 3G ในการโหลดครั้งแรก
หลังจากที่เราเปิดตัว ele.me PWA เวลาในการโหลดของเราก็ลดลงอย่างมาก ทำให้ประสบการณ์การใช้งานเว็บบนอุปกรณ์เคลื่อนที่เป็นหนึ่งในเว็บไซต์จองอาหารที่เร็วที่สุดในจีน
Spencer Yang ผู้จัดการผลิตภัณฑ์ของ Ele.me PWA
การเลือกระหว่างแอปแบบหลายหน้ากับแอปแบบหน้าเดียว
ในแอปที่มีหลายหน้า (MPA) ทุกเส้นทางที่ผู้ใช้ไปถึงจะทริกเกอร์คำขอแบบเต็มของหน้าเว็บ รวมถึงสคริปต์และรูปแบบที่เกี่ยวข้องที่จำเป็นต้องใช้ไปยังเซิร์ฟเวอร์ ซึ่งแตกต่างจากโมเดลแอปแบบหน้าเดียว (SPA) ที่การนำทางทุกเส้นทางจะทริกเกอร์การดึงข้อมูลเฉพาะเนื้อหาและข้อมูลที่เกี่ยวข้องกับเส้นทางนั้น จากนั้นจะสร้าง UI ด้วยโค้ด JavaScript ที่ทำงานในแอปไคลเอ็นต์
การเติบโตอย่างรวดเร็วของ Ele.me ในช่วงไม่กี่ปีที่ผ่านมาได้ทำให้หน่วยงานธุรกิจที่แตกต่างกันภายในบริษัทเติบโตขึ้น ซึ่งแต่ละหน่วยงานมีหน้าที่ให้บริการแบบไมโครภายใต้โดเมน https://ele.me หลัก ทีม Ele.me ได้ข้อสรุปว่าการแยกแต่ละบริการออกจากกันเป็นวิธีที่ดีที่สุดที่จะได้รับผลดีที่สุดโดยโมเดลแอปแบบหลายหน้า (MPA) โดยให้แต่ละทีมดำเนินการและดูแลรักษาบริการของตนเอง
การสมัคร PRPL กับ MPA
รูปแบบ PRPL (การโหลดทรัพยากรล่วงหน้า, เส้นทางเริ่มต้น "แสดงผล, เส้นทางที่เหลือสำหรับแคชล่วงหน้า, การโหลดแบบ Lazy Loading) ช่วยให้นักพัฒนาเว็บมีชุดรางเพื่อเป็นแนวทางในโครงสร้างของ PWA โดยเน้นที่เวลาที่รวดเร็วในการโต้ตอบ และการแคชสูงสุดเพื่อลดการเดินทางไปกลับของเครือข่าย แม้ว่า PRPL จะได้รับการทดสอบใน SPA มาเป็นอย่างดี แต่ก็ไม่ค่อยชัดเจนนักแล้วว่าจะนำเอาไปใช้กับ MPA อย่างไร Ele.me จึงตัดสินใจใช้แนวคิด PRPL เมื่อนึกถึงการสร้าง MPA ใหม่ในฐานะ PWA ในการทำเช่นนั้น ผู้ใช้จะตรวจสอบว่าเมื่อผู้ใช้ไปยังหน้าเว็บหนึ่งๆ ได้โหลดทรัพยากรสำคัญสำหรับหน้านั้นๆ ล่วงหน้า โดยรวม <link rel="preload"> ตามความจำเป็น หรือแสดงสคริปต์เหล่านั้นในระดับที่แคบพอเพื่อให้ตัวโหลดล่วงหน้าของเบราว์เซอร์ทำงานได้โดยไม่จำเป็นต้องมีคำแนะนำเพิ่มเติม นอกจากนี้ พวกเขายังเพิ่มประสิทธิภาพ PWA อย่างต่อเนื่องโดยการติดตั้ง Service Worker ทุกครั้งที่เบราว์เซอร์รองรับ จากนั้นจะใช้การดึงข้อมูลและแคชล่วงหน้าสำหรับเส้นทางการนำทางระดับบนสุดอื่นๆ เพื่อให้ผู้ใช้ได้รับประสบการณ์การโหลดและการแสดงผลเร็วขึ้นเมื่อคลิกส่วนต่างๆ ของ PWA แต่ละหน้าใน MPA คือเส้นทางของตัวเอง ดังนั้นการเร่งการแสดงผลเส้นทางเริ่มต้นจึงเทียบเท่ากับการใช้แนวทางปฏิบัติแนะนำเพื่อเพิ่มประสิทธิภาพเส้นทางการแสดงผลที่สำคัญสำหรับแต่ละเส้นทาง การเปลี่ยนแปลงเหล่านี้ทำให้เวลาที่ใช้ในการโหลดโดยรวมลดลงโดยเฉลี่ย 6.35% ในทุกหน้า
ให้บริการหน้าจอโครงการเปลี่ยนทันที
Ele.me ต้องการใช้แนวคิดหน้าจอโครงกระดูกกับ UX ซึ่งเป็นวิธีที่ทำให้มั่นใจได้ว่าเมื่อใดก็ตามที่ผู้ใช้แตะปุ่มหรือลิงก์ หน้าเว็บจะตอบสนองโดยเร็วที่สุดด้วยการเปลี่ยนผู้ใช้ไปยังหน้าใหม่ จากนั้นโหลดเนื้อหาลงในหน้าดังกล่าวเมื่อเนื้อหาพร้อมใช้งาน และนี่ยังเป็นกุญแจสำคัญในการปรับปรุงประสิทธิภาพที่รับรู้ของ PWA อีกด้วย อย่างไรก็ตาม เนื่องจากแต่ละหน้าใน MPA เป็นเส้นทางเริ่มต้นของตนเอง การนำทางแต่ละครั้งจึงต้องมีการดำเนินการโหลด การแยกวิเคราะห์ และการประเมินที่จำเป็นทั้งหมดซ้ำทุกครั้ง
ในการแก้ปัญหานี้ Ele.me จึงสร้างหน้าจอโครงกระดูกเป็นคอมโพเนนต์ UI จริง จากนั้นใช้สแต็กการแสดงผลฝั่งเซิร์ฟเวอร์ของ Vue.js เพื่อสร้างและแสดงผลคอมโพเนนต์ Vue ลงในสตริงล่วงหน้าก่อนแทรกลงในเทมเพลต HTML ซึ่งช่วยให้แสดงผลหน้าจอโครงกระดูกได้โดยตรง และทำให้เปลี่ยนหน้าได้ลื่นไหลมากขึ้นเมื่อนำทางระหว่างหน้าต่างๆ
|
|
การแคชทรัพยากรที่แชร์ด้วย Service Worker
จะมีการโหลดเส้นทางต่างๆ เมื่อผู้ใช้เรียกดูส่วนต่างๆ ของ PWA และอาจต้องโหลดเส้นทางเหล่านี้จากเครือข่ายซ้ำแล้วซ้ำเล่า เพื่อรับมือกับปัญหานี้ Ele.me ได้วิเคราะห์เส้นทางสำคัญที่ผู้ใช้สนใจมากที่สุด จึงสร้าง ปลั๊กอิน Webpack เพื่อรวบรวมทรัพยากร Dependency ของเส้นทางที่สำคัญเหล่านี้ และ แคชเส้นทางเหล่านี้ล่วงหน้าเมื่อติดตั้ง Service Worker ในเบราว์เซอร์ไคลเอ็นต์ของผู้ใช้ เส้นทางที่สำคัญเหล่านี้รวมถึง JavaScript, CSS และรูปภาพที่เป็นเชลล์ UI ทั่วไปของ PWA
เส้นทางที่ถือว่าสำคัญแต่ไม่สำคัญจะได้รับการแคชเพิ่มโดย Service Worker ขณะรันไทม์แทนเมื่อผู้ใช้ยังคงไปยังส่วนต่างๆ ของ PWA สิทธิ์นี้ช่วยให้ Ele.me แสดง PWA แก่ผู้ใช้ได้โดยตรงจากแคชภายใต้เงื่อนไขของเครือข่ายทั้งหมด ผลที่ได้คือ เวลาในการโหลดลดลง 11.6% ในทุกหน้าที่จัดเก็บในแคชล่วงหน้า