จากการวัด Web Vitals ของผู้ใช้จริง Rakuten 24 ยังพบว่า Largest Contentful Paint (LCP) ที่ดีอาจส่งผลให้อัตรา Conversion เพิ่มขึ้น 61.13%
Rakuten 24 เป็นร้านค้าออนไลน์ที่ร่วมมือกับผู้ผลิตสินค้าอุปโภคบริโภครายใหญ่จากนานาชาติและในประเทศเพื่อเสนอของใช้ทั่วไปที่หลากหลาย เช่น การดูแลสุขภาพ เครื่องดื่ม อุปกรณ์สัตว์เลี้ยง ผลิตภัณฑ์สำหรับทารก และอื่นๆ ร้านค้านี้ให้บริการโดย Rakuten Group, Inc. ซึ่งเป็นบริษัทชั้นนำระดับโลกด้านบริการอินเทอร์เน็ต และเป็นหนึ่งในร้านที่มีประสิทธิภาพสูงสุดในแพลตฟอร์มตลาดกลางดิจิทัลในญี่ปุ่น
ทีม Rakuten 24 วัด เพิ่มประสิทธิภาพ และตรวจสอบ Core Web Vitals และเมตริกอื่นๆ อย่างต่อเนื่องเพื่อทำความเข้าใจผลกระทบที่ประสิทธิภาพของเว็บมีต่อประสบการณ์ของผู้ใช้
ส่งผลให้ผู้ใช้มากกว่า 75% ได้รับประสบการณ์ Largest Contentful Paint (LCP), First Input Delay (FID) และ First Contentful Paint (FCP) ที่ดี อย่างไรก็ตาม บริษัทยังอยู่ระหว่างการปรับปรุง Cumulative Layout Shift (CLS)
หลังวิเคราะห์ข้อมูลหน้าแรก Rakuten 24 พบว่าคะแนน LCP ที่ดีอาจนำไปสู่สิ่งต่อไปนี้
- อัตรา Conversion เพิ่มขึ้นสูงสุด 61.13%
- มีรายได้ 26.09% ต่อผู้เข้าชม
- 11.26% ในมูลค่าการสั่งซื้อเฉลี่ย
- คะแนน FID ที่ดีอาจทำให้อัตรา Conversion เพิ่มขึ้นถึง 55.88%
นอกจากนี้ Rakuten 24 ยังได้ทำการทดสอบ A/B ที่มุ่งเน้นการเพิ่มประสิทธิภาพ Core Web Vitals และเมตริกที่เกี่ยวข้องเพื่อเชื่อมโยง Core Web Vitals และเมตริกธุรกิจเพิ่มเติม และพบการปรับปรุงต่อไปนี้
- มีรายได้ 53.37% ต่อผู้เข้าชม
- 33.13% ในอัตรา Conversion
- 15.20% ของมูลค่าการสั่งซื้อเฉลี่ย
- เวลาที่ใช้โดยเฉลี่ย 9.99%
- อัตราการออกลดลง 35.12%
ไฮไลต์โอกาส
แม้ว่าการเพิ่มประสิทธิภาพเว็บจะเป็นการลงทุนที่ชาญฉลาดเพื่อปรับปรุงประสบการณ์ของผู้ใช้และการเติบโตทางธุรกิจ แต่ทีม Rakuten 24 ก็เข้าใจดีว่าการโน้มน้าวให้ผู้มีส่วนเกี่ยวข้องนำ Core Web Vitals ไปใช้และมุ่งเน้นที่ประสิทธิภาพของเว็บเป็นเรื่องยาก พวกเขาเชื่อว่าการแสดงให้ผู้มีส่วนเกี่ยวข้องเห็นอย่างแน่ชัดว่า การเพิ่มประสิทธิภาพผลตอบแทนจากการลงทุน (ROI) ประเภทใดจะเป็นวิธีที่ดีที่สุดในการทำให้พวกเขาได้เริ่มต้นใช้งาน
ในฐานะบริการที่ค่อนข้างใหม่และเป็นอิสระ Rakuten 24 จึงใช้ประโยชน์จากความยืดหยุ่นเพื่อรับมือกับความท้าทาย ทางบริษัทเชื่อว่าผลกรณีศึกษาจะช่วยให้ตนสามารถตัดสินใจโดยใช้ข้อมูลมากขึ้นในอนาคต รวมถึงช่วยให้นักพัฒนาแอปรายอื่นๆ วัดผลลัพธ์ของงานของตนและโน้มน้าวผู้มีส่วนเกี่ยวข้องว่าการปรับปรุงประสิทธิภาพนั้นคุ้มค่ากับการลงทุน มาดูกันว่าพวกเขาทำได้อย่างไรในโพสต์นี้
เพิ่มประสิทธิภาพ JavaScript และทรัพยากร
- กำจัดทรัพยากรที่บล็อกการแสดงผล
- แยกโค้ดและใช้
import()แบบไดนามิก - แยกเนื้อหาทั้งหมดออกเป็นส่วนๆ และการโหลดแบบ Lazy Loading ไฟล์ HTML ครึ่งหน้าล่าง
- ดำเนินการและโหลด JavaScript ตามคำขอ
- ระบุทรัพยากร JavaScript ที่ช้าและเพิ่มประสิทธิภาพกระบวนการโหลดโดยใช้แอตทริบิวต์อะซิงโครนัสในแท็ก
<script>และสร้างการเชื่อมต่อกับต้นทางที่สำคัญตั้งแต่เนิ่นๆ (คำแนะนำเกี่ยวกับทรัพยากร เช่นdns-prefetch,preconnectและpreload) - นำโค้ดที่ไม่ได้ใช้ออก รวมถึงลดขนาดและบีบอัดโค้ด
- ใช้ CDN
- ควบคุมการแคชโดยใช้ Service Worker ด้วยWorkbox
เพิ่มประสิทธิภาพรูปภาพ
- การโหลดแบบ Lazy Loading รูปภาพครึ่งหน้าล่าง
- เพิ่มประสิทธิภาพรูปภาพด้วย CDN แสดงรูปภาพที่มีขนาดเหมาะสม บีบอัดรูปภาพ และใช้รูปแบบรูปภาพที่เหมาะสมสำหรับงาน (WebP, SVG, Web Fonts)
เพิ่มประสิทธิภาพ CLS
- ใช้ CSS
aspect-ratioเพื่อสงวนพื้นที่ที่จำเป็นสำหรับรูปภาพขณะโหลดรูปภาพ - ใช้ CSS
min-heightเพื่อลดการเปลี่ยนเลย์เอาต์ในขณะที่องค์ประกอบถูกโหลดแบบ Lazy Loading
การวัดประสิทธิภาพ
นอกจากการใช้ PageSpeed Insights เพื่อตรวจสอบเว็บไซต์แล้ว ทีมยังอยากหาวิธีที่ดียิ่งขึ้นในการดูว่าผู้ใช้กำลังพบอะไรในการทำงานจริงอีกด้วย ดังนั้น Rakuten 24 จึงตัดสินใจใช้ไลบรารี JavaScript Web-vitals เพื่อวัด Core Web Vitals และเมตริกอื่นๆ ในธุรกิจนั้นๆ และส่งข้อมูลไปยังเครื่องมือวิเคราะห์ภายในองค์กร
การวิเคราะห์ประสิทธิภาพ
ทีมวิเคราะห์ข้อมูลในช่องที่รวบรวมมาเพื่อดูว่ามีความสัมพันธ์ระหว่าง Core Web Vitals กับเมตริกธุรกิจที่สำคัญหรือไม่ และพบว่าผู้ใช้ที่ทำ Conversion มีแนวโน้มที่จะได้รับ LCP ดีกว่าผู้ใช้ที่ไม่ได้ทำ Conversion
ข้อมูลที่รวบรวมยังแสดงให้เห็นว่า
- LCP ที่ดีอาจทำให้อัตรา Conversion เพิ่มขึ้นสูงสุด 61.13%, รายได้ต่อผู้เข้าชม 26.09% และมูลค่าการสั่งซื้อเฉลี่ย 11.26%
- FID ที่ดีอาจทำให้อัตรา Conversion เพิ่มขึ้นถึง 55.88% เมื่อเทียบกับข้อมูลเฉลี่ยโดยรวม
การตรวจสอบประสิทธิภาพ
ทีมได้สร้างแดชบอร์ดการตรวจสอบประสิทธิภาพโดยใช้ข้อมูลที่รวบรวมได้จากภาคสนามและเครื่องมือ Business Intelligence ซึ่งเป็นสิ่งสำคัญในการตรวจสอบความคืบหน้าและป้องกันการถดถอย
การทดสอบอัลฟา/เบต้า
ทีมเชื่อว่าการทดสอบ A/B เป็นวิธีที่ดีในการวัดผลลัพธ์ทางธุรกิจจากการเพิ่มประสิทธิภาพ จึงได้เพิ่มประสิทธิภาพหน้า Landing Page หน้าหนึ่งสำหรับ Core Web Vitals จากนั้นเปรียบเทียบเวอร์ชันที่เพิ่มประสิทธิภาพกับหน้าเดิมผ่านการทดสอบ A/B เป็นเวลา 1 เดือน จึงเลือกหน้า Landing Page ที่มีจำนวนการเข้าชมและ Conversion สูง เพื่อให้การทดสอบบรรลุผลลัพธ์ที่มีความหมาย ระหว่างระยะเวลาการทดสอบ ระบบส่งการเข้าชม 50% ไปยังหน้า Landing Page ที่เพิ่มประสิทธิภาพ (เวอร์ชัน A) และ 50% ไปยังหน้าเดิม (เวอร์ชัน B) ความแตกต่างเพียงอย่างเดียวระหว่างเวอร์ชัน A กับเวอร์ชัน B คือเวอร์ชัน A ได้รับการเพิ่มประสิทธิภาพสำหรับ Core Web Vitals และไม่มีความแตกต่างด้านฟังก์ชันการทำงานหรือภาพอื่นๆ
เวอร์ชันที่ได้รับการเพิ่มประสิทธิภาพ A โหลดเสร็จเร็วขึ้น 0.4 วินาทีในการทดสอบการโหลดบนอุปกรณ์เคลื่อนที่ และไม่มีการเปลี่ยนแปลงเลย์เอาต์ที่มีนัยสำคัญ อันที่จริง CLS ของเวอร์ชัน A เพิ่มขึ้น 92.72% เมื่อเทียบกับเวอร์ชัน B คะแนน Web Vitals อื่นๆ ก็เพิ่มขึ้นเช่นกัน ได้แก่ FID เพิ่มขึ้น 7.95%, FCP เพิ่มขึ้น 8.45% และ TTFB เพิ่มขึ้น 18.03%
เมื่อเปรียบเทียบเวอร์ชันที่เพิ่มประสิทธิภาพ A กับเวอร์ชัน B ที่ไม่ได้เพิ่มประสิทธิภาพ Rakuten 24 พบว่าเวอร์ชัน A ให้ประสิทธิภาพต่อไปนี้
- รายได้เพิ่มขึ้น 53.37% ต่อผู้เข้าชม
- อัตรา Conversion เพิ่มขึ้น 33.13%
- มูลค่าการสั่งซื้อเฉลี่ยเพิ่มขึ้น 15.20%
- เวลาที่ใช้โดยเฉลี่ยเพิ่มขึ้น 9.99%
- อัตราการออกลดลง 35.12%
บทสรุป
การเพิ่มประสิทธิภาพเว็บเป็นสิ่งที่ท้าทาย แต่ก็คุ้มค่า การใช้แนวทางที่ขับเคลื่อนด้วยข้อมูลทำให้ Rakuten 24 มอบประสบการณ์การใช้งานที่ดียิ่งขึ้นแก่ผู้ใช้ได้สำเร็จและสามารถวัดผลกระทบเชิงบวกต่อธุรกิจ การเข้าใจว่านี่เป็นเพียงส่วนหนึ่งของเส้นทาง ไม่ใช่จุดหมาย ทางร้านจะปรับปรุงเว็บไซต์อย่างต่อเนื่องเพื่อมอบประสบการณ์ที่น่าพึงพอใจยิ่งขึ้นให้แก่ผู้เลือกซื้อออนไลน์
การเพิ่มประสิทธิภาพต้องอาศัยความร่วมมือกัน และนักพัฒนาซอฟต์แวร์จึงไม่ได้อยู่คนเดียวบนเส้นทางนี้ Rakuten 24 เล่าถึงอุปสรรคและความสำเร็จของตัวเองเพื่อหวังว่านักพัฒนาซอฟต์แวร์จำนวนมากขึ้นจะสามารถใช้ข้อมูล Core Web Vitals เพื่อพัฒนาความเข้าใจร่วมกันกับผู้มีส่วนเกี่ยวข้อง แล้วทำงานร่วมกันเพื่อสร้างประสบการณ์ของผู้ใช้ที่มีคุณภาพสูงและการเติบโตทางธุรกิจ