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

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

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

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