วิธีที่ Ray-Ban เพิ่มอัตรา Conversion เป็น 2 เท่าและลดอัตราการออก 13% ผ่านการแสดงผลล่วงหน้าโดยใช้ Speculation Rules API

Daniele Merola

Giorgio Pellegrino

Hadyan Andika

เผยแพร่เมื่อวันที่ 28 มกราคม 2025

กรณีศึกษานี้อธิบายวิธีที่ Ray-Ban ปรับปรุงเมตริก LCP โดยใช้ Speculation Rules API เพื่อเร่งการนําทางของผู้ใช้ในอนาคตโดยใช้การแสดงผลล่วงหน้า และวิธีที่การปรับปรุงดังกล่าวช่วยเพิ่มประสิทธิภาพทางธุรกิจของแพลตฟอร์มอีคอมเมิร์ซของ Ray-Ban ความสำเร็จนี้ทำให้ Ray Ban มองหาตัวเลือกอื่นๆ เพื่อปรับปรุงประสิทธิภาพในลักษณะเดียวกัน เช่น การทำให้หน้าเว็บมีสิทธิ์ใช้ bfcache

Ray-Ban เป็นแบรนด์แว่นตาที่มีชื่อเสียงระดับโลกซึ่งขึ้นชื่อเรื่องสไตล์ที่เหนือกาลเวลา เช่น Aviator และ Wayfarer ที่ผสมผสานการออกแบบคลาสสิกเข้ากับเทรนด์สมัยใหม่ ในฐานะผู้นำด้านแว่นตาที่มีชื่อเสียง ช่องทางอีคอมเมิร์ซของ Ray-Ban มีบทบาทสําคัญในการสร้างความได้เปรียบในการแข่งขันของบริษัท โดยดึงดูดผู้เข้าชมที่ไม่ซ้ำกันกว่า 80 ล้านคนต่อปี

ในฐานะช่องทางธุรกิจหลัก Ray-Ban ปรับปรุงประสบการณ์ของผู้ใช้แพลตฟอร์มอีคอมเมิร์ซอย่างต่อเนื่อง และตระหนักถึงความสำคัญของ Core Web Vitals และผลกระทบโดยตรงที่มีต่อประสบการณ์ของผู้ใช้แพลตฟอร์ม

แนวทางที่ Ray-Ban ใช้อย่างต่อเนื่องเพื่อปรับปรุงเส้นทางของผู้ใช้ที่สำคัญ

เนื่องจากลักษณะของสถาปัตยกรรม MPA (แอปพลิเคชันหลายหน้า) ที่ใช้บนแพลตฟอร์มอีคอมเมิร์ซของ Ray-Ban ทุกครั้งที่ผู้ใช้โต้ตอบกับลิงก์หรือปุ่มที่ต้องใช้หน้าใหม่ เบราว์เซอร์จะส่งคําขอไปยังเซิร์ฟเวอร์ ซึ่งจะตอบสนองด้วยหน้า HTML ใหม่ ปัญหานี้ทําให้ Ray-Ban รักษาประสบการณ์การท่องเว็บที่ราบรื่นสําหรับผู้ใช้ได้ยาก โดยเฉพาะในหน้ารายละเอียดผลิตภัณฑ์ (PDP) ซึ่งได้รับการระบุว่าเป็นหนึ่งในจุดแรกเข้าที่ใช้กันมากที่สุด และเป็นองค์ประกอบสําคัญของ Funnel Conversion

การปรับปรุงการออกแบบที่เพิ่งเสร็จสิ้นไปเมื่อเร็วๆ นี้ช่วยให้ Ray-Ban ปรับปรุงเมตริก Core Web Vitals ได้ อย่างไรก็ตาม ยังมีจุดที่ควรปรับปรุงอีก โดยเฉพาะในกรณีที่ต้องใช้ไลบรารีภายนอกอย่างแพร่หลายเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานแบบอินเทอร์แอกทีฟ ซึ่งจะเพิ่มเมตริกหน้าเว็บที่มีเนื้อหามากที่สุด (LCP) เมื่อเทียบกับหน้าอื่นๆ

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

กลยุทธ์การแสดงผลล่วงหน้าเฉพาะอุปกรณ์ของ Ray-Ban

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

บนเดสก์ท็อป ระบบจะแสดงผลล่วงหน้าโดยวางเมาส์เหนือการ์ดผลิตภัณฑ์ในหน้าข้อมูลผลิตภัณฑ์ (PLP) โดยใช้การตั้งค่า"moderate"ความกระตือรือร้น และส่งคลาสระบุของการ์ดเดียวกันเป็นตัวเลือก

let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');

scriptPrerender.innerHTML = `{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {
            "selector_matches": "a.rb-plp-product-tile__container"
          }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}`;

document.head.appendChild(scriptPrerender);

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

let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');

scriptPrerender.innerHTML = `{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {
            "selector_matches": "a.rb-plp-product-tile__container:nth-child(-n+5)"
          }
        ]
      },
      "eagerness": "immediate"
    }
  ]
}`;

document.head.appendChild(scriptPrerender);

การแสดงผลผลลัพธ์ล่วงหน้า

กลยุทธ์การแสดงผลล่วงหน้า 2 รูปแบบส่งผลอย่างมากต่อเมตริก Core Web Vitals สําหรับหน้า PDP ของ Ray-Ban และแนวโน้มของ KPI ทางธุรกิจ

แหล่งที่มา: ข้อมูลระดับ URL ของ CrUX สําหรับหน้า PDP ของ Aviator
อุปกรณ์	LCP			การเปลี่ยนแปลงอัตรา Conversion	การเปลี่ยนแปลงอัตราการออก	อัตราการแสดงผลล่วงหน้า
อุปกรณ์	ก่อน	หลัง	เปลี่ยน	การเปลี่ยนแปลงอัตรา Conversion	การเปลี่ยนแปลงอัตราการออก	อัตราการแสดงผลล่วงหน้า
อุปกรณ์เคลื่อนที่	4.69 วิ	2.66 วินาที	43.28%	เพิ่มขึ้น 101.47%	-13.25%	29%
เดสก์ท็อป	3.03 วินาที	1.74 วินาที	42.57%	+156.16%	-13.18%	50%

เมตริกทางธุรกิจของผู้ใช้ที่เรียกดู PDP ที่แสดงจากเซิร์ฟเวอร์จะเปรียบเทียบกับเมตริกของผู้ใช้ที่เรียกดู PDP ที่แสดงผลล่วงหน้า หลังจากรวบรวมข้อมูลจากเวิร์กสเปซการติดตามของ Adobe สําหรับผู้ใช้ที่มีเบราว์เซอร์ที่รองรับ API (เช่น Chrome) Ray-Ban ได้เปิดเผยการปรับปรุงที่สําคัญซึ่งแสดงให้เห็นว่าผู้ใช้ไปยังส่วนต่างๆ ของเว็บไซต์ได้อย่างราบรื่นมากขึ้น สําหรับเบราว์เซอร์อื่นๆ ที่ไม่รองรับการแสดงผลล่วงหน้า Ray-Ban ตัดสินใจที่จะแสดงผลทรัพยากรล่วงหน้า ณ เวลาที่มีเหตุการณ์ hover บนเดสก์ท็อป และสำหรับการ์ด 4 ใบแรกของ PLP บนอุปกรณ์เคลื่อนที่

การใช้ Speculation Rules API สําหรับการแสดงผลล่วงหน้าเป็นการเปลี่ยนแปลงที่สําคัญสําหรับแพลตฟอร์มอีคอมเมิร์ซของ Ray-Ban การใช้กลยุทธ์ที่สร้างสรรค์เหล่านี้ช่วยให้ Ray-Ban ปรับปรุง LCP ทั้งในเดสก์ท็อปและอุปกรณ์เคลื่อนที่ได้ 43% ซึ่งช่วยปรับปรุงประสบการณ์ของผู้ใช้ได้อย่างมาก

การเพิ่มประสิทธิภาพนี้ไม่เพียงช่วยให้หน้าเว็บโหลดเกือบจะทันทีเท่านั้น แต่ยังให้ประโยชน์มากมายจากสถาปัตยกรรมสไตล์ SPA ขณะเดียวกันก็รักษาสถาปัตยกรรม MPA ในปัจจุบันไว้ โดยเฉพาะในหน้าที่สำคัญ เช่น PDP

จากมุมมองทางธุรกิจ การปรับปรุงเหล่านี้ทำให้เกิดการเปลี่ยนแปลงครั้งใหญ่ตามที่การทดสอบ A/B ยืนยัน

อัตรา Conversion เพิ่มขึ้น
- อัตรา Conversion บนอุปกรณ์เคลื่อนที่ในหน้า PDP เพิ่มขึ้นอย่างมากถึง 101.47%
- อัตรา Conversion บนเดสก์ท็อปเพิ่มขึ้นถึง 156.16% ซึ่งน่าประทับใจยิ่งกว่า
การมีส่วนร่วมของผู้ใช้ที่เพิ่มขึ้น:
- หน้าเว็บที่ดูโดยเฉลี่ยต่อเซสชันเพิ่มขึ้น 51.95% บนอุปกรณ์เคลื่อนที่และ 65.30% บนเดสก์ท็อป ซึ่งบ่งชี้ว่าการไปยังส่วนต่างๆ ราบรื่นขึ้นและผู้ใช้สนใจเว็บไซต์อย่างต่อเนื่องมากขึ้น หมายเหตุ: เราไม่ถือว่าหน้าเว็บที่แสดงผลล่วงหน้าซึ่งไม่ได้เปิดใช้งานเป็น "หน้าเว็บที่ดูแล้ว"
อัตราการออกที่ลดลง:
- อัตราตีกลับ (% ของผู้ใช้ที่ออกจากหน้าเว็บจากการดูหน้าเว็บของหน้านั้น) ลดลง 13.25% บนอุปกรณ์เคลื่อนที่และ 13.18% บนเดสก์ท็อป ซึ่งแสดงให้เห็นถึงการคงผู้ใช้ไว้ได้นานขึ้นในช่วงเวลาช็อปปิ้งที่สําคัญ

ขยายการให้บริการเพื่อมอบการนําทางผู้ใช้ที่รวดเร็วยิ่งขึ้น

Ray-Ban ตัดสินใจใช้ศักยภาพของ Speculation Rules API ให้ได้สูงสุดด้วยการแสดงผลล่วงหน้าของลิงก์ PLP ในเมนูด้วยเช่นกัน เนื่องจากได้ผลลัพธ์ที่ยอดเยี่ยมจากการแสดงผลล่วงหน้าของ PDP แนวทางนี้ช่วยให้สามารถปรับปรุงความเร็วในการโหลดและ LCP ของทั้งแคตตาล็อกและหน้าผลิตภัณฑ์ได้อย่างมาก

แม้ว่าการแสดงผลล่วงหน้าจะช่วยในการไปยังส่วนต่างๆ ในอนาคต แต่ Ray-Ban ยังสังเกตเห็นการไปยังส่วนต่างๆ ของ PLP และ PDP กลับไปกลับมาเป็นจำนวนมากด้วย เนื่องจากผลการทดสอบการแสดงผลก่อนการโหลดแสดงให้เห็นว่าการนําทางของผู้ใช้ที่ได้รับการเพิ่มประสิทธิภาพนั้นสัมพันธ์โดยตรงกับเมตริกทางธุรกิจที่ดี Ray-Ban จึงพิจารณาใช้ Back-Forward Cache (bfcache) ด้วย

bfcache คือการเพิ่มประสิทธิภาพเบราว์เซอร์ที่ช่วยให้ไปยังส่วนต่างๆ แบบย้อนกลับและไปข้างหน้าได้ทันทีโดยเก็บสแนปชอตของหน้าที่มีสิทธิ์ไว้ในหน่วยความจำของประวัติเบราว์เซอร์ และกู้คืนหน้าเหล่านั้นโดยไม่ต้องผ่านเครือข่าย เราได้ทำการอัปเดตอย่างรวดเร็วหลายรายการเพื่อให้ PDP และ PLP ของ Ray-Ban มีสิทธิ์ใช้ bfcache

ปิดใช้เหตุการณ์ unload และจํากัดการเข้าถึง Bluetooth และ accelerometer API ของอุปกรณ์โดยใช้ค่าส่วนหัว Permissions-Policy เป็น unload=(), bluetooth=(), andaccelerometer=()
ปิดการเชื่อมต่อ RTC และ IndexedDB ที่เหตุการณ์ pagehide
หลีกเลี่ยงการใช้ส่วนหัวการตอบกลับ Cache-Control: no-store ที่ไม่จำเป็น

การเปิดใช้การรองรับ bfcache ใน PLP ที่การไปยังส่วนต่างๆ แบบย้อนกลับคิดเป็นสัดส่วนสูงสุด 40% ของการเข้าชม ขณะที่อัตรา Hit ของ bfcache เท่ากับ 0 ส่งผลให้ LCP ดีขึ้นเกือบ 30% และ CLS ดีขึ้น 83%

แหล่งที่มา: ข้อมูลระดับ URL ของ CrUX สําหรับหน้าแว่นกันแดดผู้หญิง
เมตริก	13-10-2024 > 9-11-2024	2024-11-24 > 2024-12-21	เดลต้า
LCP	3725 มิลลิวินาที	2674 มิลลิวินาที	-28.21%
INP	521 มิลลิวินาที	395 มิลลิวินาที	-24.18%
CLS	0.46	0.08	-82.61%
อัตรา Hit ของแคชย้อนหลัง	0.02%	72.90%	+72.87%

บทสรุป

ผลลัพธ์เหล่านี้แสดงให้เห็นถึงศักยภาพของการแสดงผลล่วงหน้าในการปรับปรุงประสิทธิภาพของเว็บไซต์อีคอมเมิร์ซได้อย่างมาก การแสดงผลหน้าเว็บล่วงหน้าตามพฤติกรรมของผู้ใช้เพื่อการไปยังส่วนต่างๆ ในอนาคตช่วยให้ Ray-Ban ไม่เพียงปรับปรุง Core Web Vitals เท่านั้น แต่ยังช่วยให้ผู้ใช้มีส่วนร่วมมากขึ้นและยอดขายเพิ่มขึ้นด้วย ประโยชน์นี้ช่วยเพิ่มความมุ่งมั่นของ Ray-Ban ในการนําเสนอการนําทางที่ราบรื่นไม่เพียงสําหรับการนําทางในอนาคตเท่านั้น แต่ยังสําหรับการนําทางย้อนกลับ/ไปข้างหน้าที่ bfcache มีให้ด้วย

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

ขอขอบคุณ Lorenzo Bartomioli, Gilberto Cocchi, Alejandro Baeza Redondo, Barry Pollard และ Jeremy Wagner เป็นอย่างยิ่งที่มีส่วนร่วมในงานนี้