Truebil สร้างช่องทางการเติบโตให้เว็บนี้เป็นช่องทางการเติบโต

เรื่องราวของสตาร์ทอัพเกี่ยวกับการสร้างประสบการณ์การใช้งานเว็บที่ดีที่สุด

เกี่ยวกับ

Truebil ก่อตั้งขึ้นในปี 2015 เป็นตลาดกลางออนไลน์ของอินเดียที่จำหน่ายรถมือสองที่ผ่านการรับรองคุณภาพ 100% ด้วยจำนวนผู้ใช้ที่ใช้งานอยู่กว่า 1.4 ล้านคนต่อเดือน โซลูชันนี้จึงถือเป็นโซลูชันแบบครบวงจรที่มีทั้งการโอนกรรมสิทธิ์ ประกันภัย เงินกู้ และการรับประกันบริการ ผู้มีโอกาสเป็นลูกค้าจะเห็นหน้าผลิตภัณฑ์แต่ละรายการพร้อมรูปภาพและรายงานการตรวจสอบแบบละเอียด รวมถึงรับการประเมินรถด้วยฟีเจอร์ "เปรียบเทียบ" และ "Truescore" ของเว็บไซต์ Truebil สร้างความแตกต่างให้กับผลิตภัณฑ์ด้วยฟีเจอร์มากมาย รวมถึงคำแนะนำที่ปรับให้เหมาะกับคุณซึ่งอิงจากแมชชีนเลิร์นนิง ฟีเจอร์เพิ่มลงในรายการโปรด ฟีเจอร์แชร์รถ และอีกมากมาย

ชาเลนจ์

Truebil เป็นสตาร์ทอัพขนาดเล็กที่มีธุรกรรมต่ำและมีมูลค่าสูง จึงจำเป็นต้องเลือกแพลตฟอร์มที่เหมาะสมเพื่อจัดลำดับความสำคัญและลงทุน

Truebil มองว่าอุปกรณ์เคลื่อนที่เป็นแพลตฟอร์มเป้าหมายและเลือกใช้เว็บเป็น Truebil Lite เป็นแอปแรก เนื่องจากผู้ใช้ค้นพบเว็บได้ง่ายและอุปสรรคต่ำ เทคโนโลยีเว็บมีต้นทุนในการพัฒนาต่ำกว่า ใช้อินเทอร์เน็ตและหน่วยความจำน้อยกว่า รวมถึงได้ลูกค้าใหม่ต่ำกว่าการสร้างแอป Android/iOS อย่างมาก และการสร้าง Progressive Web App (PWA) ทำให้ Truebil ได้รับประโยชน์ทั้งหมดจากเว็บและประโยชน์จาก iOS/Android อย่างมาก

โซลูชัน

ทีมภายในองค์กรใช้เวลา 4 เดือนในการพัฒนา Truebil Lite โดยใช้ React, Django และ Preact (สำหรับการย้ายข้อมูลเวอร์ชันที่ใช้งานจริง) พวกเขากำหนดหลักการชี้นำที่ชัดเจนสำหรับเว็บแอปตามเป้าหมายของผู้ใช้ โดยประสบการณ์มีดังนี้

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

เพิ่มประสิทธิภาพเพื่อการโหลดครั้งแรกและการนำทางที่รวดเร็ว

ทีมงานได้นำวัฒนธรรมที่เน้นประสิทธิภาพเป็นหลักมาใช้ควบคู่กับฟีเจอร์ใหม่ๆ โดยใช้ Lighthouse เพื่อเป็นแนวทางในการเพิ่มประสิทธิภาพ Truebil ปรับปรุงประสบการณ์ของผู้ใช้ได้อย่างมากโดยการให้ความสำคัญกับเมตริก First Contentful Paint และ Time to Interactive (TTI) รวมถึงเพิ่มประสิทธิภาพเพื่อการโหลดครั้งแรกที่รวดเร็ว การเข้าชมซ้ำ และการนำทางที่ราบรื่น ทีมบรรลุผลลัพธ์ดังกล่าวโดยการตั้งงบประมาณด้านประสิทธิภาพและใช้เทคนิคต่างๆ เพื่อบรรลุผลดังกล่าว

ตั้งงบประมาณด้านประสิทธิภาพ

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

ทีมได้ตั้งงบประมาณตามเหตุการณ์สำคัญสำหรับ TTI โดยมีเป้าหมายให้จำกัดเวลาไว้ต่ำกว่า 5 วินาที เพื่อบรรลุเป้าหมายดังกล่าวด้วยตนเอง จึงได้ตรวจสอบด้วยตนเองว่าบิลด์จะไม่มีขนาดกลุ่ม JavaScript เกิน 250 KB รวมถึงคอยตรวจสอบขนาดรูปภาพอยู่เสมอ และติดตามคะแนนประสิทธิภาพของ Lighthouse ของแอปอย่างต่อเนื่อง

เพิ่มประสิทธิภาพกลุ่ม JavaScript

ทีมเริ่มต้นจากการทำงานพื้นฐานโดยใช้รูปแบบ PRPL เพื่อแคชล่วงหน้าและเพิ่มประสิทธิภาพเพย์โหลด JavaScript และเปลี่ยนไปใช้ HTTP/2 เพื่อแสดงแพ็กเกจ JavaScript ที่สำคัญ

พวกเขาใช้คอมโพเนนต์การโหลดแบบ Lazy Loading ระดับเฟรมเวิร์กเพื่อโหลดส่วนครึ่งหน้าล่างเพื่อโหลดทรัพยากรที่ไม่สำคัญ

หากต้องการนำจุดคอขวดของแพ็กเกจ JavaScript ออก ทีมได้ลดเพย์โหลดด้วยการแยกโค้ด พวกเขาใช้การแบ่งออกเป็นส่วนๆ ตามคอมโพเนนต์และเส้นทางเพื่อลดขนาด Bundle หลักและเพิ่มเวลาที่ใช้ในการโหลดขึ้น 44% โดยที่ TTI จะลดลงจาก 6 วินาทีเป็นประมาณ 5 วินาที และ First Meaningful Paint (FMP) จาก 4.1 วินาทีเป็น 3.6 วินาที

CSS ที่สำคัญในหน้า

ทีมงานได้ใช้ Lighthouse เพื่อหาโอกาสและตรวจสอบผลกระทบของการเพิ่มประสิทธิภาพเพื่อปรับปรุง FMP ให้ดียิ่งขึ้น Lighthouse ระบุว่าการลด CSS ที่บล็อกการแสดงผลจะส่งผลกระทบมากที่สุด ดังนั้น Truebil จึงแทรก CSS ที่สำคัญทั้งหมดและ CSS ที่ไม่สำคัญที่มีการเลื่อนเวลาออกไป เทคนิคนี้ลด FMP ลงประมาณ 2 วินาที

หลีกเลี่ยงการเดินทางไป-กลับที่มีค่าใช้จ่ายสูงหลายครั้งไปยังต้นทางต่างๆ

เพื่อลดโอเวอร์เฮดจาก DNS และ TLS โดย Truebil ใช้ <link rel="preconnect"> และ <link rel="dns-prefetch"> วิธีนี้จะทำให้เบราว์เซอร์ทำแฮนด์เชค TLS ให้เสร็จสิ้นโดยเร็วที่สุดเมื่อโหลดหน้าเว็บและมีการแก้ไขชื่อโดเมนแบบข้ามต้นทางล่วงหน้า ทำให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ปลอดภัยและรวดเร็วยิ่งขึ้น

ดึงข้อมูลหน้าเว็บถัดไปล่วงหน้าแบบไดนามิก

การวิเคราะห์ข้อมูลช่วยให้ทีมระบุเส้นทางของผู้ใช้ที่พบบ่อยที่สุดซึ่งสามารถเพิ่มประสิทธิภาพได้ ในกรณีเหล่านี้ แอปจะดาวน์โหลดทรัพยากรหน้าถัดไปแบบไดนามิกโดยใช้ <link rel=prefetch> เพื่อให้ผู้ใช้ไปยังส่วนต่างๆ ได้อย่างราบรื่น แม้ว่าทีมจะระบุลิงก์สำหรับดึงข้อมูลล่วงหน้าด้วยตนเอง แต่ทีมจะใช้ Webpack เพื่อรวม JS สำหรับลิงก์เหล่านั้น

เพิ่มประสิทธิภาพรูปภาพและแบบอักษร

รูปภาพเป็นส่วนสำคัญของประสบการณ์และความน่าเชื่อถือของผลิตภัณฑ์ของ Truebil โดยแต่ละข้อมูลผลิตภัณฑ์จะมีรูปภาพสูงสุด 40 รูป ทีมจึงเลือกแสดงทรัพยากรทั้งหมดจาก CDN และใช้ imagemagick เพื่อเพิ่มประสิทธิภาพรูปภาพ เพื่อไม่ให้รูปภาพบล็อกการโหลดหน้าเว็บ พวกเขายังได้บีบอัดทรัพยากรที่บีบอัดได้ทั้งหมด รวมถึงรูปภาพ, JavaScript และ CSS เพื่อลดเวลาในการโหลด

เพื่อหลีกเลี่ยงการใช้ข้อความที่มองไม่เห็นในแฟลช ในขณะเดียวกันก็ทำให้เวลาในการโหลดน้อยที่สุดเท่าที่จะทำได้ Truebil ตั้งค่า CSS ให้ใช้แบบอักษรระบบเป็นตัวสำรองจนกว่าจะโหลดแบบอักษรภายนอกแล้ว

การเพิ่มประสิทธิภาพเพิ่มเติม

เมื่อแอปพร้อมใช้งาน ทางทีมต้องการลดขนาดกลุ่มผู้ให้บริการและเวลาในการดำเนินการ JavaScript มากขึ้น จึงได้เปลี่ยนแอป React ไปเป็น "Preact เวอร์ชันที่ใช้งานจริง" (ดูข้อมูลเพิ่มเติมในคอลเล็กชันความรู้สึก) วิธีการนี้ช่วยให้บริษัทลดขนาดกลุ่มผู้ให้บริการจาก 82.3 KB เหลือ 51.2 KB

สร้างความน่าเชื่อถือ

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

กลยุทธ์การแคชแบบไฮบริดเพื่อการโหลดที่เสถียร

การโต้ตอบและอัตราการเปลี่ยนแปลงสำหรับเนื้อหาของ Truebil มีความแตกต่างกันมาก ทีม Truebil ได้ใช้การแคช API ร่วมกันระหว่างกลยุทธ์แบบเน้นเครือข่าย เน้นแคชเป็นหลัก และเร็วที่สุด เพื่อให้คอนเทนต์ทั้งหมดมีความสดใหม่และเชื่อถือได้

สำหรับหน้าเว็บแบบคงที่ เช่น หน้าการสมัครใช้บริการ Truebil จะใช้กลยุทธ์ที่ใช้แคชเป็นอันดับแรกเพื่อไปยังแคช API ของการสมัครใช้บริการก่อน แล้วจึงกลับไปยังเครือข่าย

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

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

Service Worker เพื่อประสบการณ์แบบออฟไลน์เต็มรูปแบบ

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

เมื่อใช้โปรแกรมทำงานของบริการ ทีมสามารถแคชทั้งข้อมูลคงที่และข้อมูลแบบไดนามิกที่ผู้ใช้โต้ตอบด้วยแล้ว เพื่อให้ผู้ใช้ดูข้อมูลดังกล่าวแบบออฟไลน์ได้ ทีมได้เปลี่ยน UI เป็นโทนสีเทาเพื่อบ่งบอกว่าเนื้อหาอาจเปลี่ยนไปเมื่อกลับมาออนไลน์ เพื่อให้ผู้ใช้ทราบว่าเนื้อหาอาจเปลี่ยนไปเมื่อกลับมาออนไลน์ การท่องเว็บในหน้าผลิตภัณฑ์เป็นส่วนสำคัญในเส้นทางของผู้ใช้ Truebil ผู้ใช้ที่เข้าชม PWA อย่างน้อย 1 ครั้งจะเรียกดูข้อมูลและหน้าผลิตภัณฑ์ที่เคยเข้าชมได้ แต่จะไม่เห็นการอัปเดตใดๆ ในข้อมูลหรือผลิตภัณฑ์

ปรับปรุงการมีส่วนร่วมเพื่อดึงดูดผู้ใช้ให้กลับมาเรื่อยๆ

ประสบการณ์แรกที่น่าสนใจ

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

ทางทีมจึงได้ผสานรวมระบบการแนะนำโดยใช้การทำการตลาดดิจิทัลเพื่อหลีกเลี่ยงไม่ให้ผู้ใช้งานเป็นครั้งแรกเริ่มต้นทำงาน ผู้ลงโฆษณาเพิ่มรายละเอียดผลิตภัณฑ์ เช่น รุ่นรถยนต์ ราคา และประเภทตัวถังลงใน URL ปลายทางของโฆษณาผ่านพารามิเตอร์ UTM ซึ่งระบบการแนะนำจะอ่านและแสดงให้เห็นในผลิตภัณฑ์ที่แสดง ในกรณีที่ Sysme ไม่ได้อ่านรายละเอียดดังกล่าวใน URL ก็กลับไปที่รถยนต์ยอดนิยม ซึ่งประกอบด้วยรุ่นยอดนิยม งบประมาณยอดนิยม และรถยนต์ที่เป็นที่นิยมในช่วงไม่กี่สัปดาห์หรือไม่กี่วันที่ผ่านมา

เว็บแอปที่ติดตั้งได้

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

ทีมใช้ฟีเจอร์เพิ่มลงในหน้าจอหลักเพื่อให้ผลิตภัณฑ์เป็น Progressive Web App (PWA) เต็มรูปแบบ วิธีนี้ช่วยให้ผู้ใช้เพิ่ม Truebil Lite ลงในหน้าจอหลักและเปิดในโหมดเต็มหน้าจอได้ และเนื่องจากทีมได้ใช้งานโหมดออฟไลน์ไปแล้ว ทีมงานจึงสามารถเพิ่มฟีเจอร์ใหม่นี้ได้อย่างง่ายดาย

เมื่อเร็วๆ นี้ทางทีมได้อัปเดตกลยุทธ์ในการโปรโมตการติดตั้ง PWA เพื่อให้ระบบแสดงข้อความเตือนการติดตั้งปรากฏขึ้นเมื่อเป็นประโยชน์แก่ผู้ใช้ประเภทต่างๆ ได้จริง เพื่อให้แน่ใจว่าผู้ใช้จะไม่ถูกสแปมและเพื่อเพิ่มความเป็นไปได้ที่ผู้ใช้จะติดตั้งแอป Truebil ใช้กลยุทธ์ 3 ส่วน:

• แสดงพรอมต์เมื่อผู้ใช้ดำเนินการเสร็จสิ้นหรือเมื่อไม่มีการใช้งาน
• แสดงพรอมต์ตามบริบทแก่ผู้ใช้ที่เป็นผู้ใหญ่
• แสดงแบนเนอร์เมื่อผู้ใช้อยู่ในไซต์เป็นระยะเวลาตามที่กำหนด

แบนเนอร์เริ่มต้นเมื่อเสร็จสิ้นกระบวนการและในหน้าที่มีการเข้าชมสูง

ทีมตัดสินใจแสดงแบนเนอร์การติดตั้งเมื่อผู้ใช้ทำงานเสร็จหรืออยู่ในหน้าที่มีการเข้าชมสูงแต่ไม่มีการใช้งาน (กล่าวคือ ไม่ได้ดำเนินการใดๆ เช่น เลื่อนหรือกรอกแบบฟอร์ม) วิธีนี้ช่วยให้ผู้ใช้หลีกเลี่ยงการรบกวนกิจกรรมของผู้ใช้ได้

ข้อความแจ้งตามบริบทสำหรับผู้ใช้ที่เป็นผู้ใหญ่

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

แบนเนอร์ที่กำหนดเองสำหรับพรอมต์ที่กำหนดเวลา

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

การปรับปรุงเหล่านี้ทําให้อัตรา Conversion และการมีส่วนร่วมของ Truebil เติบโตขึ้นอย่างมากด้วยเซสชันผู้ใช้ที่ยาวนานขึ้น 26% และ Conversion เพิ่มขึ้น 61% ซึ่งสําคัญต่อธุรกิจเนื่องจากมูลค่าธุรกรรมของแต่ละ Conversion ที่สูง

สำหรับสตาร์ทอัพที่มีทรัพยากรจำกัด การเลือกแพลตฟอร์มที่เหมาะสมอาจมีส่วนสำคัญต่อความสำเร็จของธุรกิจ การเปลี่ยนมาใช้ PWA ที่มุ่งเน้นเรื่องความเร็ว ความยืดหยุ่น และการมีส่วนร่วมช่วยให้เราเพิ่มค่าใช้จ่ายด้านรายได้สู่การตลาดได้มากขึ้นถึง 80% เนื่องจากมี Conversion เพิ่มขึ้นและการเข้าถึงเว็บที่ราบรื่น

Rakesh Raman ผู้ร่วมก่อตั้งและหัวหน้าทีม Product & Data Science ของ Truebil