การมุ่งเน้นที่ประสิทธิภาพเว็บของ Tokopedia เพิ่มอัตราการคลิกผ่านได้ถึง 35% ได้อย่างไร

สร้างแดชบอร์ดประสิทธิภาพเว็บ รวมทั้งเพิ่มประสิทธิภาพ JavaScript, ทรัพยากร และหน้าแรกเพื่อให้ธุรกิจประสบความสำเร็จ

Tokopedia เป็นหนึ่งในบริษัทอีคอมเมิร์ซที่ใหญ่ที่สุดในอินโดนีเซีย ด้วยเครือข่ายผู้ขายทั่วประเทศกว่า 2.7 ล้านเครือข่าย ข้อมูลผลิตภัณฑ์ที่แสดงกว่า 18 ล้านรายการ และผู้เข้าชมกว่า 50 ล้านคนต่อเดือน ทีมดูแลเว็บจึงทราบดีว่าการลงทุนกับประสิทธิภาพของเว็บนั้นเป็นสิ่งสำคัญ การสร้างวัฒนธรรมที่ให้ความสำคัญกับประสิทธิภาพเป็นอันดับแรก ทำให้บริษัทได้รับอัตราการคลิกผ่าน (CTR) เพิ่มขึ้น 35% และ Conversion (CVR) เพิ่มขึ้น 8%

35%

CTR เพิ่มขึ้น

8%

CVR เพิ่มขึ้น

4 วินาที

การปรับปรุง TTI

ไฮไลต์โอกาส

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

แนวทางที่พวกเขาใช้

JavaScript และการเพิ่มประสิทธิภาพทรัพยากร

การบล็อกการแสดงผลหรือ JavaScript ที่ทำงานเป็นเวลานานเป็นสาเหตุที่พบบ่อยของปัญหาด้านประสิทธิภาพ โดยทางทีมดำเนินการหลายขั้นตอนเพื่อลดปัญหานี้:

  • สร้างไลบรารีตัวควบคุมสคริปต์เพื่อเลือกโหลดสคริปต์ของบุคคลที่สามเพื่อเพิ่มประสิทธิภาพสำหรับเส้นทางการแสดงผลวิกฤติ
  • แทนที่คลังที่หนักกว่าด้วยไลบรารีที่เบากว่า
  • ใช้งานการแยกโค้ดและเพิ่มประสิทธิภาพสำหรับเนื้อหาครึ่งหน้าบน
  • ใช้การโหลดแบบปรับอัตโนมัติ เช่น การโหลดรูปภาพคุณภาพสูงสำหรับอุปกรณ์ในเครือข่ายที่เร็ว และใช้รูปภาพคุณภาพต่ำสำหรับอุปกรณ์ในเครือข่ายที่ช้า
  • รูปภาพครึ่งหน้าล่างที่โหลดแบบ Lazy Loading
  • เลื่อนการโหลด JavaScript ที่ไม่สำคัญ
ไลบรารีตัวควบคุมสคริปต์ปรับปรุง TTI ได้เพิ่มขึ้น 4 วินาที

การเพิ่มประสิทธิภาพหน้าแรก

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

ลดขนาด JavaScript ของแอปลง 88% (จาก 320 KB เป็น 37 KB) ได้คะแนน Lighthouse เพิ่มขึ้น 90 คะแนน บรรลุ FCP ไม่ถึง 1 วินาที CTR เพิ่มขึ้น 35% CVR เพิ่มขึ้น 8%

การกำหนดงบประมาณและการตรวจสอบประสิทธิภาพ

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

  • วัดคุณภาพของเครือข่าย การตรวจสอบโครงสร้างพื้นฐาน ประสิทธิภาพของฟรอนท์เอนด์ และประสิทธิภาพของเซิร์ฟเวอร์
  • ใช้ API แพลตฟอร์มเว็บหลายแบบร่วมกัน (เช่น Resource Timing API และส่วนหัว Server-Timing), PageSpeed Insights (PSI) API และ รายงานประสบการณ์ของผู้ใช้ Chrome เพื่อตรวจสอบเมตริกในช่องจริงและห้องทดลอง
  • วิเคราะห์รูปภาพจาก Lighthouse เพื่อช่วยระบุโอกาสในการเพิ่มประสิทธิภาพรูปภาพ
  • บังคับใช้งบประมาณขนาดกลุ่มในระหว่างการผสานรวมอย่างต่อเนื่อง (CI) การเรียกใช้ CI จะไม่สำเร็จหากขนาดของแพ็กเกจเกินงบประมาณ
คะแนน TTI 2.2 วินาทีในหน้าแรก (คะแนน Lighthouse: 88) คะแนน TTI อยู่ที่ 1.9 วินาทีในหน้าผลิตภัณฑ์ (คะแนน Lighthouse: 86)

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

Dendi Sunardi ผู้จัดการฝ่ายวิศวกรรมแพลตฟอร์มเว็บของ Tokopedia

ดูเรื่องราวความสำเร็จเพิ่มเติมจากอินเดียและเอเชียตะวันออกเฉียงใต้ในหน้ากรณีศึกษาการใช้อินเทอร์เน็ต