จากการวัด 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 จึงใช้ประโยชน์จากความยืดหยุ่นเพื่อรับมือกับความท้าทาย ทางบริษัทเชื่อว่าผลกรณีศึกษาจะช่วยให้ตนสามารถตัดสินใจโดยใช้ข้อมูลมากขึ้นในอนาคต รวมถึงช่วยให้นักพัฒนาแอปรายอื่นๆ วัดผลลัพธ์ของงานของตนและโน้มน้าวผู้มีส่วนเกี่ยวข้องว่าการปรับปรุงประสิทธิภาพนั้นคุ้มค่ากับการลงทุน มาดูกันว่าพวกเขาทำได้อย่างไรในโพสต์นี้
![ตัวอย่างภาพหน้าจอหน้าแรกของ Rakuten 24 ที่มีกรอบอุปกรณ์เคลื่อนที่ล้อมรอบภาพหน้าจอแต่ละภาพ](https://web.dev/static/case-studies/rakuten/image/example-screenshots-raku-193c464c35da7.jpg?authuser=5&hl=th)
เพิ่มประสิทธิภาพ 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 และเมตริกอื่นๆ ในธุรกิจนั้นๆ และส่งข้อมูลไปยังเครื่องมือวิเคราะห์ภายในองค์กร
![ขั้นตอนการผสานรวมการติดตาม Web Vitals ของ Rakuten 24 ขั้นตอนแรกคือการผสานรวมไลบรารี Web-vitals โดยการเพิ่มสคริปต์ลงในเว็บไซต์ Rakuten 24 หลังจากนั้น Web Vitals จะวัดได้จากเมตริกผู้ใช้จริงและส่งข้อมูลไปยังเครื่องมือเก็บรวบรวมข้อมูลภายในของ Rakuten 24](https://web.dev/static/case-studies/rakuten/image/rakuten-24s-web-vitals-t-c0d353a93ae67.jpg?authuser=5&hl=th)
การวิเคราะห์ประสิทธิภาพ
ทีมวิเคราะห์ข้อมูลในช่องที่รวบรวมมาเพื่อดูว่ามีความสัมพันธ์ระหว่าง Core Web Vitals กับเมตริกธุรกิจที่สำคัญหรือไม่ และพบว่าผู้ใช้ที่ทำ Conversion มีแนวโน้มที่จะได้รับ LCP ดีกว่าผู้ใช้ที่ไม่ได้ทำ Conversion
![การเปรียบเทียบระหว่างผู้ใช้ที่ทำ Conversion กับผู้ใช้ที่ไม่ได้ทำ Conversion กลุ่มผู้ใช้ที่ทำให้เกิด Conversion บ่อยกว่ามี LCP ต่ำกว่า](https://web.dev/static/case-studies/rakuten/image/a-comparison-users-conv-c5d62d1600a03.jpg?authuser=5&hl=th)
ข้อมูลที่รวบรวมยังแสดงให้เห็นว่า
- LCP ที่ดีอาจทำให้อัตรา Conversion เพิ่มขึ้นสูงสุด 61.13%, รายได้ต่อผู้เข้าชม 26.09% และมูลค่าการสั่งซื้อเฉลี่ย 11.26%
- FID ที่ดีอาจทำให้อัตรา Conversion เพิ่มขึ้นถึง 55.88% เมื่อเทียบกับข้อมูลเฉลี่ยโดยรวม
![LCP ที่เก็บตามอัตรา Conversion และเวลา LCP ผู้ใช้ที่มี Conversion บ่อยกว่าเมื่อ LCP ต่ำกว่า โดยมี 61.13% ของผู้ใช้ที่ทำ Conversion ที่มี LCP ไม่เกิน 1 วินาที](https://web.dev/static/case-studies/rakuten/image/lcp-bucketed-conversion-62b775421189c.jpg?authuser=5&hl=th)
![LCP ที่เก็บรวบรวมตามรายได้ต่อผู้เข้าชมและเวลา LCP ผู้ใช้ที่มี LCP ต่ำกว่าจะให้รายได้มากกว่า โดยรายได้ที่มอบให้ผู้ใช้เพิ่มขึ้น 26.09% เมื่อ LCP สั้นกว่าหรือเท่ากับ 1 วินาที](https://web.dev/static/case-studies/rakuten/image/lcp-bucketed-revenue-per-cb892c5f24123.jpg?authuser=5&hl=th)
![LCP ที่เก็บรวบรวมตามมูลค่าการสั่งซื้อเฉลี่ยและเวลา LCP ผู้ใช้ที่มี LCP ต่ำกว่าจะมีมูลค่าการสั่งซื้อเฉลี่ยสูงขึ้น 11.26% เมื่อ LCP สั้นกว่าหรือเท่ากับ 1 วินาที](https://web.dev/static/case-studies/rakuten/image/lcp-bucketed-average-ord-f371f7233ed47.jpg?authuser=5&hl=th)
![FID ที่จัดเก็บตามอัตรา Conversion และเวลา FID ผู้ใช้ที่มี Conversion บ่อยกว่าเมื่อ FID ต่ำกว่า โดยมี 55.88% ของผู้ใช้ที่ทำ Conversion ด้วย FID 50 มิลลิวินาทีหรือต่ำกว่า](https://web.dev/static/case-studies/rakuten/image/fid-bucketed-conversion-0d43d40d194cf.jpg?authuser=5&hl=th)
การตรวจสอบประสิทธิภาพ
ทีมได้สร้างแดชบอร์ดการตรวจสอบประสิทธิภาพโดยใช้ข้อมูลที่รวบรวมได้จากภาคสนามและเครื่องมือ Business Intelligence ซึ่งเป็นสิ่งสำคัญในการตรวจสอบความคืบหน้าและป้องกันการถดถอย
![ภาพหน้าจอของแดชบอร์ดการตรวจสอบประสิทธิภาพภายในของ Rakuten 24 สำหรับ Core Web Vitals แต่ละรายการ (LCP, CLS และ FID)](https://web.dev/static/case-studies/rakuten/image/a-screenshot-rakuten-24-30bf38d4bb335.jpg?authuser=5&hl=th)
การทดสอบอัลฟา/เบต้า
ทีมเชื่อว่าการทดสอบ 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/B บนอุปกรณ์เคลื่อนที่สำหรับเว็บไซต์ Rakuten 24 แต่ละเวอร์ชันมีรูปลักษณ์และทำงานเหมือนกัน โดยเวอร์ชัน A ได้รับการเพิ่มประสิทธิภาพเพื่อ Core Web Vitals ที่ดีขึ้น](https://web.dev/static/case-studies/rakuten/image/a-screenshot-a-mobile-b-23694e6702f81.jpg?authuser=5&hl=th)
เวอร์ชันที่ได้รับการเพิ่มประสิทธิภาพ A โหลดเสร็จเร็วขึ้น 0.4 วินาทีในการทดสอบการโหลดบนอุปกรณ์เคลื่อนที่ และไม่มีการเปลี่ยนแปลงเลย์เอาต์ที่มีนัยสำคัญ อันที่จริง CLS ของเวอร์ชัน A เพิ่มขึ้น 92.72% เมื่อเทียบกับเวอร์ชัน B คะแนน Web Vitals อื่นๆ ก็เพิ่มขึ้นเช่นกัน ได้แก่ FID เพิ่มขึ้น 7.95%, FCP เพิ่มขึ้น 8.45% และ TTFB เพิ่มขึ้น 18.03%
![การเปรียบเทียบการเริ่มต้นใช้งานหน้าแรกของ Rakuten 24 โดยเวอร์ชัน A จะได้รับการเพิ่มประสิทธิภาพให้โหลดได้ดีกว่าเดิม โดยโหลดได้ภายใน 1.6 วินาที เมื่อเทียบกับเวอร์ชัน B ซึ่งโหลดเสร็จภายใน 2 วินาที](https://web.dev/static/case-studies/rakuten/image/a-startup-comparison-the-a6e5d93ff742f.jpg?authuser=5&hl=th)
เมื่อเปรียบเทียบเวอร์ชันที่เพิ่มประสิทธิภาพ A กับเวอร์ชัน B ที่ไม่ได้เพิ่มประสิทธิภาพ Rakuten 24 พบว่าเวอร์ชัน A ให้ประสิทธิภาพต่อไปนี้
- รายได้เพิ่มขึ้น 53.37% ต่อผู้เข้าชม
- อัตรา Conversion เพิ่มขึ้น 33.13%
- มูลค่าการสั่งซื้อเฉลี่ยเพิ่มขึ้น 15.20%
- เวลาที่ใช้โดยเฉลี่ยเพิ่มขึ้น 9.99%
- อัตราการออกลดลง 35.12%
![ภาพหน้าจอของการปรับปรุง Core Web Vitals สําหรับหน้าแรกของ Rakuten 24 สถิติดังกล่าวมีรายได้เพิ่มขึ้น 53.37% ต่อผู้เข้าชม อัตรา Conversion เพิ่มขึ้น 33.13% มูลค่าการสั่งซื้อเฉลี่ยเพิ่มขึ้น 15.2% เวลาเฉลี่ยบนหน้าเว็บเพิ่มขึ้น 9.99% และอัตราการออกลดลง 35.12%](https://web.dev/static/case-studies/rakuten/image/a-screenshot-core-web-vi-5494c342b0223.jpg?authuser=5&hl=th)
บทสรุป
การเพิ่มประสิทธิภาพเว็บเป็นสิ่งที่ท้าทาย แต่ก็คุ้มค่า การใช้แนวทางที่ขับเคลื่อนด้วยข้อมูลทำให้ Rakuten 24 มอบประสบการณ์การใช้งานที่ดียิ่งขึ้นแก่ผู้ใช้ได้สำเร็จและสามารถวัดผลกระทบเชิงบวกต่อธุรกิจ การเข้าใจว่านี่เป็นเพียงส่วนหนึ่งของเส้นทาง ไม่ใช่จุดหมาย ทางร้านจะปรับปรุงเว็บไซต์อย่างต่อเนื่องเพื่อมอบประสบการณ์ที่น่าพึงพอใจยิ่งขึ้นให้แก่ผู้เลือกซื้อออนไลน์
การเพิ่มประสิทธิภาพต้องอาศัยความร่วมมือกัน และนักพัฒนาซอฟต์แวร์จึงไม่ได้อยู่คนเดียวบนเส้นทางนี้ Rakuten 24 เล่าถึงอุปสรรคและความสำเร็จของตัวเองเพื่อหวังว่านักพัฒนาซอฟต์แวร์จำนวนมากขึ้นจะสามารถใช้ข้อมูล Core Web Vitals เพื่อพัฒนาความเข้าใจร่วมกันกับผู้มีส่วนเกี่ยวข้อง แล้วทำงานร่วมกันเพื่อสร้างประสบการณ์ของผู้ใช้ที่มีคุณภาพสูงและการเติบโตทางธุรกิจ