เครื่องมือตรวจสอบผู้ใช้จริงและมุ่งเน้นที่การปรับปรุง 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 Engineering
หลังจากเปิดใช้ฐานของโค้ดใหม่กับการเข้าชม 20% แล้ว ทางบริษัทก็ได้เปิดตัวเว็บไซต์ใหม่นี้แก่ผู้เข้าชมทุกคนในช่วงต้นเดือนกันยายน 2020
ผลลัพธ์
การเพิ่มประสิทธิภาพของทีมพัฒนาได้นำไปสู่การปรับปรุงที่วัดผลได้ในเมตริกต่างๆ มากมาย ดังนี้
- LCP เพิ่มขึ้น 70%
- CLS เพิ่มขึ้น 72%
- การบล็อกคำขอ JS ลดลง 100% และบล็อกคำขอ CSS ได้ถึง 80%
- งานที่ใช้เวลานานลดลง 72%
- CPU ครั้งแรกที่ไม่มีการใช้งานเพิ่มขึ้น 25%
ในกรอบเวลาเดียวกัน ข้อมูลการตรวจสอบผู้ใช้จริง (หรือที่เรียกว่าข้อมูลภาคสนาม) แสดงให้เห็นว่าอัตราการหยุดกลางคันของการโหลดบนหน้ารายละเอียดผลิตภัณฑ์ลดลง 76% จาก 3.8% เป็น 0.9% ดังนี้
