การใช้เครื่องมือตรวจสอบผู้ใช้จริงและมุ่งเน้นที่การปรับปรุง Core Web Vitals ในการรีแฟกทอริงแอปยังช่วยปรับปรุง CLS ขึ้น 72% และความสามารถในการตอบสนองของแอปด้วย
Agrofy เป็นมาร์เก็ตเพลสออนไลน์สำหรับตลาดธุรกิจเกษตรกรรมของละตินอเมริกา โดยจับคู่ผู้ซื้อและผู้ขายเครื่องจักร ที่ดิน อุปกรณ์ และบริการทางการเงินสำหรับฟาร์ม ในไตรมาสที่ 3 ปี 2020 ทีมพัฒนา 4 คนของ Agrofy ใช้เวลา 1 เดือนในการเพิ่มประสิทธิภาพเว็บไซต์ เนื่องจากตั้งสมมติฐานว่าประสิทธิภาพที่ดีขึ้นจะทําให้อัตราตีกลับลดลง โดยมุ่งเน้นที่การปรับปรุง LCP ซึ่งเป็น 1 ใน Core Web Vitals การเพิ่มประสิทธิภาพเหล่านี้ทําให้ LCP เพิ่มขึ้น 70% ซึ่งสัมพันธ์กับการละทิ้งการโหลดที่ลดลง 76% (จาก 3.8% เป็น 0.9%)
70%
LCP ต่ำลง
76%
การยกเลิกการโหลดน้อยลง
ปัญหา
ขณะศึกษาเมตริกทางธุรกิจ ทีมพัฒนาของ Agrofy สังเกตเห็นว่าอัตราตีกลับสูงกว่าการเปรียบเทียบในอุตสาหกรรม หนี้ทางเทคนิคในโค้ดเบสของเว็บไซต์ก็เพิ่มขึ้นด้วย
โซลูชัน
ทีม Agrofy เสนอขายให้กับผู้บริหารและได้รับอนุมัติให้ดำเนินการต่อไปนี้
- ย้ายข้อมูลจากเฟรมเวิร์กเก่าที่เลิกใช้งานแล้วไปยังเฟรมเวิร์กใหม่ที่รองรับอยู่
- เพิ่มประสิทธิภาพการโหลดของโค้ดเบสใหม่
การย้ายข้อมูลใช้เวลา 2 เดือน นอกเหนือจากทีมพัฒนา 4 คนที่ได้กล่าวถึงก่อนหน้านี้แล้ว การย้ายข้อมูลนี้ยังเกี่ยวข้องกับผู้เชี่ยวชาญด้านผลิตภัณฑ์และ UX รวมถึงสถาปนิกซอฟต์แวร์ด้วย โปรเจ็กต์การเพิ่มประสิทธิภาพใช้เวลา 1 เดือนโดยทีมพัฒนา 4 คน โดยมุ่งเน้นที่ LCP, CLS (เมตริก Core Web Vitals อีกรายการหนึ่ง) และ FCP การเพิ่มประสิทธิภาพที่เฉพาะเจาะจง ได้แก่
- การโหลดองค์ประกอบที่มองไม่เห็นทั้งหมดแบบ Lazy Loading ด้วย Intersection Observer API
- แสดงทรัพยากรแบบคงที่ได้เร็วขึ้นด้วยเครือข่ายการนำส่งเนื้อหา
- การโหลดรูปภาพแบบ Lazy Loading
ด้วย
loading="lazy" - การแสดงผลฝั่งเซิร์ฟเวอร์ของเนื้อหาเส้นทางการแสดงผลที่สำคัญ
- การโหลดล่วงหน้าและการเชื่อมต่อล่วงหน้าเพื่อลดเวลาในการจับมือ
- ใช้เครื่องมือตรวจสอบผู้ใช้จริง (RUM) เพื่อระบุหน้ารายละเอียดผลิตภัณฑ์ที่ประสบปัญหาการเปลี่ยนแปลงเลย์เอาต์หลายครั้ง แล้วทำการปรับเปลี่ยนสถาปัตยกรรมของโค้ดเบส
ดูรายละเอียดทางเทคนิคเพิ่มเติมได้ในบล็อกโพสต์เกี่ยวกับวิศวกรรมของ Agrofy
หลังจากเปิดใช้โค้ดเบสใหม่กับการเข้าชม 20% แล้ว พวกเขาได้เปิดตัวเว็บไซต์ใหม่แก่ผู้เข้าชมทุกคนในช่วงต้นเดือนกันยายน 2020
ผลลัพธ์
การเพิ่มประสิทธิภาพของทีมพัฒนาแอปทําให้เมตริกต่างๆ หลายรายการได้รับการปรับปรุงที่วัดผลได้ ดังนี้
- LCP ดีขึ้น 70%
- CLS เพิ่มขึ้น 72%
- การบล็อกคําขอ JS ลดลง 100% และการบล็อกคําขอ CSS ลดลง 80%
- งานที่ใช้เวลานานลดลง 72%
- ช่วงเวลาพัก CPU ครั้งแรกเพิ่มขึ้น 25%
ในช่วงเวลาเดียวกัน ข้อมูลการตรวจสอบผู้ใช้จริง (หรือที่เรียกว่าข้อมูลภาคสนาม) แสดงให้เห็นว่าอัตราการหยุดกลางคันในการโหลดหน้ารายละเอียดผลิตภัณฑ์ลดลง 76% จาก 3.8% เป็น 0.9%
