ดูวิธีที่ทีมเล็กๆ ประสบความสำเร็จครั้งใหญ่ด้วยการสร้าง PWA ของตลาดกลางที่น่าสนใจ
OpenSooq ตั้งอยู่ในเมืองอัมมาน ประเทศจอร์แดน เป็นตลาดกลางประกาศโฆษณาที่เน้นอุปกรณ์เคลื่อนที่เป็นหลัก ซึ่งให้บริการผลิตภัณฑ์และบริการที่หลากหลายใน 19 ประเทศทั่วตะวันออกกลางและแอฟริกาเหนือ
ความท้าทาย
การเข้าชมมากกว่า 85% ของ OpenSooq มาจากอุปกรณ์เคลื่อนที่ และตัวเลขดังกล่าวก็เพิ่มขึ้นอย่างต่อเนื่อง ผู้คนจำนวนมากในภูมิภาคนี้ใช้อุปกรณ์ระดับล่างที่มีพื้นที่เก็บข้อมูลจำกัด จึงมีความจําเป็นอย่างยิ่งที่ไซต์เวอร์ชันอุปกรณ์เคลื่อนที่ของ OpenSooq จะต้องรวดเร็วและเบาที่สุด อย่างไรก็ตาม เวลาที่ใช้ในการโหลดช้าในเว็บไซต์เวอร์ชันเก่าบนอุปกรณ์เคลื่อนที่ของ OpenSooq ส่งผลต่อความพึงพอใจของลูกค้าและทําให้อัตราตีกลับสูงถึง 49% ในตลาดต่างๆ เช่น คูเวต
บริษัทตระหนักว่าต้องมีเว็บไซต์ที่เร็วขึ้นและตอบสนองได้ดีขึ้นเพื่อมอบประสบการณ์การใช้งานที่ดีขึ้นอย่างต่อเนื่องให้กับลูกค้าในทุกแพลตฟอร์ม ดังนั้นในเดือนมิถุนายน 2017 ทีมวิศวกรของ OpenSooq จึงเปิดตัว Progressive Web App (PWA)
มุ่งเน้นที่ประสิทธิภาพและความน่าเชื่อถือ
นักพัฒนาซอฟต์แวร์ภายใน 3 คนของ OpenSooq สามารถสร้าง PWA แบบเต็มรูปแบบด้วย React และ webpack ในเวลาเพียง 2 เดือนครึ่ง
ทีมเลือกใช้การแสดงผลฝั่งเซิร์ฟเวอร์เพื่อให้มั่นใจว่าเว็บไซต์จะจัดทําดัชนีได้อย่างรวดเร็วและง่ายดายโดยเครื่องมือค้นหา เมื่อผู้ใช้เกือบ 28% เข้าถึง PWA ในเครือข่าย 2G หรือ 3G ที่สัญญาณไม่เสถียร ผู้ใช้จึงต้องเชื่อมั่นว่าประสบการณ์การใช้งานจะใช้งานได้ ไม่ว่าจะมีข้อจำกัดด้านเครือข่ายอย่างไรก็ตาม ทีมจึงใช้ประสบการณ์การใช้งานแบบออฟไลน์โดยใช้ Service Worker และกลยุทธ์แคชก่อนแล้วจึงใช้เครือข่าย นอกจากนี้ ยังใช้รูปแบบ PRPL เพื่อให้ผู้ใช้โหลดได้ทันที
การใช้แนวทางปฏิบัติแนะนำเหล่านี้ช่วยให้ทีมลดเวลาในการโหลดหน้าเว็บโดยเฉลี่ย (เวลาในการโต้ตอบ) จาก 4 วินาทีเหลือน้อยกว่า 2 วินาที และใช้ Lighthouse เพื่อให้แน่ใจว่าเว็บไซต์ยังคงรวดเร็วเช่นนั้น ความพยายามดังกล่าวช่วยให้ OpenSooq ได้รับการดูหน้าเว็บกว่า 1.8 พันล้านครั้งต่อเดือน
ผู้ใช้กว่า 1 ใน 4 ของเราเข้าถึง OpenSooq PWA จากเครือข่ายระดับกลางและต่ำ ความน่าเชื่อถือจึงเป็นสิ่งที่จำเป็นในการทำให้ผู้ใช้เหล่านั้นมีส่วนร่วมต่อไป Service Worker และกลยุทธ์การแคชช่วยให้เราสร้างประสบการณ์การใช้งานที่เชื่อถือได้ซึ่งเราต้องการได้อย่างราบรื่น
Amin Shoman ผู้จัดการเทคนิค PWA ของ OpenSooq
การปรับปรุงการกลับมามีส่วนร่วม
หลังจากสร้างประสบการณ์การใช้งานที่มีประสิทธิภาพและเชื่อถือได้ ทีม OpenSooq ต้องการทำให้ผู้ใช้มีส่วนร่วมกับผลิตภัณฑ์ต่อไป โดยเปิดใช้ให้ผู้ใช้ติดตั้ง PWA ลงในหน้าจอหลักและเพิ่มการรองรับการแจ้งเตือนที่มีประโยชน์ ซึ่งช่วยให้เว็บไซต์แจ้งให้ผู้ซื้อทราบเกี่ยวกับการโต้ตอบของผู้ขายกับคำค้นหา และผู้ขายทราบเกี่ยวกับการเปิดใช้งานและการหมดอายุของโฆษณา
การปรับปรุงเหล่านี้ทำให้ผู้ใช้ที่ใช้งานอยู่รายเดือนของประสบการณ์การใช้งานเว็บของ OpenSooq เพิ่มขึ้น 14% สําหรับผู้ใช้ที่ติดตั้ง PWA จำนวนการเข้าชมหน้าเว็บต่อเซสชันเพิ่มขึ้น 48% และระยะเวลาเซสชันเฉลี่ยเพิ่มขึ้น 28% นอกจากนี้ OpenSooq ยังพบว่าเวลาเฉลี่ยที่ผู้ใช้อยู่ในหน้าเว็บเพิ่มขึ้น 25% และอัตราตีกลับเฉลี่ยลดลง 29% ในทุกตลาด
ในอนาคต
หลังจากพยายามเพียงไม่กี่สัปดาห์ OpenSooq ได้สร้าง PWA ที่สมบูรณ์แบบขนาด 23 KB ซึ่งมอบประสบการณ์การใช้งานที่สอดคล้องกันให้แก่ผู้ใช้ในทุกแพลตฟอร์มและเบราว์เซอร์ และเนื่องจากอัปเดตฟีเจอร์บนเว็บได้ง่าย ทีมจึงเริ่มใช้ PWA ก่อนโดยเปิดตัวและทดสอบฟีเจอร์ใหม่และขั้นตอนของผู้ใช้บน PWA ก่อนเปิดตัวในแพลตฟอร์มอื่นๆ
ตอนนี้ OpenSooq กำลังเพิ่มข้อความแจ้งให้ติดตั้งสำหรับแพลตฟอร์มใดแพลตฟอร์มหนึ่งโดยเฉพาะและผสานรวม PWA กับ Accelerated Mobile Pages (AMP) การปรับปรุงเหล่านี้จะช่วยเร่งความเร็วในการโหลดหน้าเว็บและทำให้การเปลี่ยนไปใช้แอปเฉพาะแพลตฟอร์มเป็นไปอย่างราบรื่นที่สุด ทีม OpenSooq จะสานต่อรากฐานของการพัฒนาขั้นต้นเพื่อมอบประสบการณ์การใช้งานที่ดีที่สุดให้แก่ผู้ใช้ต่อไป
ทั้งทีมผู้บริหารและทีมเทคนิคต่างเห็นความสำคัญของการพัฒนา PWA อย่างชัดเจน หลังจากสร้างเว็บแอปที่ทันสมัยและทำให้มีประสิทธิภาพแล้ว เรารู้สึกตื่นเต้นที่จะได้เห็นผลลัพธ์ทางธุรกิจจากการลงทุน 2.5 เดือนของเรา
Ramzi Alqrainy หัวหน้าฝ่ายเทคโนโลยีของ OpenSooq