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

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

Harleen Batra

เกี่ยวกับ

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

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

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

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

เพิ่มประสิทธิภาพแพ็กเกจ JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

รายได้ต่อค่าใช้จ่ายทางการตลาดเพิ่มขึ้น