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

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

Harleen Batra

เกี่ยวกับ

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

ความท้าทาย

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

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 Load พวกเขาใช้คอมโพเนนต์ Lazy Load ระดับเฟรมเวิร์กเพื่อโหลดข้อมูลโค้ดที่แสดงอยู่ใต้ส่วนบนของหน้า

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

ผลกระทบของการลดขนาดข้อมูล

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

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

ผลของการแทรก CSS ที่สําคัญในหน้า

หลีกเลี่ยงการเดินทางหลายเที่ยวไปและกลับจากต้นทางซึ่งทำให้สิ้นเปลือง

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

ผลกระทบของการเพิ่ม <link rel=preconnect>

โหลดหน้าถัดไปล่วงหน้าแบบไดนามิก

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

ผลของการโหลดเนื้อหาล่วงหน้าสําหรับเส้นทางที่ผู้ใช้พบบ่อย

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Truebil Lite ในโหมดออฟไลน์

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

ประสบการณ์การใช้งานครั้งแรกที่น่าสนใจ

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

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

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

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

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

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

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

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

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

พรอมต์ตามบริบทสําหรับผู้ใช้ที่เป็นผู้ใหญ่

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

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

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

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

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

Rakesh Raman ผู้ร่วมก่อตั้งและหัวหน้าฝ่ายผลิตภัณฑ์และวิทยาศาสตร์ข้อมูลของ Truebil

44_%

การปรับปรุงเวลาในการโหลด

26_%

เซสชันของผู้ใช้ที่นานขึ้น

61_%

Conversion เพิ่มขึ้น

80_%

รายได้ต่อค่าโฆษณาที่เพิ่มขึ้น