การเพิ่มประสิทธิภาพการโต้ตอบของหน้ารายละเอียดผลิตภัณฑ์เพื่อลด FID ที่เป็นไปได้สูงสุดใน Lighthouse ลง 90% และปรับปรุง FID ในรายงานประสบการณ์ของผู้ใช้ Chrome ขึ้น 9%
Mercado Libre เป็นระบบนิเวศอีคอมเมิร์ซและการชำระเงินที่ใหญ่ที่สุดในลาตินอเมริกา โดยให้บริการใน 18 ประเทศ และเป็นผู้นำตลาดในบราซิล เม็กซิโก และอาร์เจนตินา (อิงตามผู้เข้าชมที่ไม่ซ้ำและยอดดูหน้าเว็บ)
ประสิทธิภาพของเว็บเป็นประเด็นที่บริษัทให้ความสำคัญมาอย่างยาวนาน แต่เพิ่งจัดตั้งทีมเพื่อติดตามประสิทธิภาพและใช้การเพิ่มประสิทธิภาพในส่วนต่างๆ ของเว็บไซต์
บทความนี้จะสรุปงานของ Guille Paz, Pablo Carminatti และ Oleh Burkhay จากทีมสถาปัตยกรรมส่วนหน้าของ Mercado Libre เพื่อเพิ่มประสิทธิภาพของหนึ่งใน Core Web Vitals อย่าง First Input Delay (FID) และพร็อกซีของห้องทดลองอย่าง Total Blocking Time (TBT)
90%
FID สูงสุดที่อาจเกิดขึ้นใน Lighthouse ลดลง
9%
ผู้ใช้จำนวนมากขึ้นรับรู้ FID ว่า "เร็ว" ใน CrUX
งานที่มีระยะเวลานาน ความล่าช้าในการอินพุตครั้งแรก และเวลาทั้งหมดในการบล็อก
การใช้โค้ด JavaScript ที่มีประสิทธิภาพต่ำอาจทําให้เกิดงานที่ใช้เวลานาน ซึ่งก็คืองานที่ทํางานนานกว่า 50 มิลลิวินาทีในชุดข้อความหลักของเบราว์เซอร์
FID (First Input Delay) จะวัดระยะเวลาตั้งแต่ที่ผู้ใช้โต้ตอบกับหน้าเว็บเป็นครั้งแรก (เช่น เมื่อคลิกลิงก์) จนถึงตอนที่เบราว์เซอร์เริ่มประมวลผลตัวแฮนเดิลเหตุการณ์เพื่อตอบสนองต่อการโต้ตอบนั้นได้จริง เว็บไซต์ที่ใช้โค้ด JavaScript ที่มีราคาแพงมีแนวโน้มที่จะมีงานที่ใช้เวลานานหลายรายการ ซึ่งจะส่งผลเสียต่อ FID
เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดี เว็บไซต์ต้องพยายามให้มีเวลาในการตอบสนองต่อการป้อนข้อมูลครั้งแรกน้อยกว่า 100
มิลลิวินาที ดังนี้
แม้ว่าเว็บไซต์ของ Mercado Libre จะมีประสิทธิภาพดีในส่วนส่วนใหญ่ แต่จากรายงานประสบการณ์ของผู้ใช้ Chrome พบว่าหน้ารายละเอียดผลิตภัณฑ์มี FID ไม่ดี จากข้อมูลดังกล่าว บริษัทจึงตัดสินใจมุ่งเน้นที่การปรับปรุงการโต้ตอบของหน้าผลิตภัณฑ์ในเว็บไซต์
หน้าเหล่านี้ช่วยให้ผู้ใช้โต้ตอบได้แบบซับซ้อน เป้าหมายจึงเป็นการเพิ่มประสิทธิภาพการโต้ตอบโดยไม่รบกวนฟังก์ชันการทำงานที่มีคุณค่า
วัดการโต้ตอบของหน้ารายละเอียดผลิตภัณฑ์
FID ต้องใช้ผู้ใช้จริง จึงไม่สามารถวัดได้ในเวอร์ชันทดลอง อย่างไรก็ตาม เมตริกเวลาการบล็อกทั้งหมด (TBT) นั้นวัดได้ในห้องทดลอง สอดคล้องกับ FID ในพื้นที่เป็นอย่างดี และยังระบุปัญหาที่ส่งผลต่อการโต้ตอบด้วย
ในตัวอย่างที่แสดงการติดตามต่อไปนี้ แม้ว่าเวลาทั้งหมดที่ใช้ทำงานในเธรดหลักจะเท่ากับ 560 มิลลิวินาที แต่มีเพียง 345 มิลลิวินาทีเท่านั้นที่ถือว่าเป็นเวลาการบล็อกทั้งหมด (ผลรวมของส่วนที่เกิน 50 มิลลิวินาทีของงานแต่ละรายการ)
Mercado Libre ใช้ TBT เป็นเมตริกพร็อกซีในห้องทดลองเพื่อวัดและปรับปรุงการโต้ตอบของหน้ารายละเอียดผลิตภัณฑ์ในชีวิตจริง
แนวทางทั่วไปที่ทีมใช้มีดังนี้
- ใช้ WebPageTest เพื่อระบุสคริปต์ที่ทําให้เธรดหลักไม่ว่างบนอุปกรณ์จริง
- ใช้ Lighthouse เพื่อพิจารณาผลกระทบของการเปลี่ยนแปลง First Input Delay สูงสุดที่อาจเกิดขึ้น (FID สูงสุดที่อาจเกิดขึ้น)
ใช้ WebPageTest เพื่อแสดงภาพงานที่มีระยะเวลานาน
WebPageTest (WPT) เป็นเครื่องมือวัดประสิทธิภาพเว็บที่ช่วยให้คุณทำการทดสอบในอุปกรณ์จริงในสถานที่ต่างๆ ทั่วโลก
Mercado Libre ใช้ WPT เพื่อจำลองประสบการณ์ของผู้ใช้โดยเลือกประเภทอุปกรณ์และตำแหน่งที่คล้ายกับผู้ใช้จริง โดยเฉพาะอย่างยิ่ง ทางบริษัทเลือกอุปกรณ์ Moto 4G และเมืองดัลลส์ รัฐเวอร์จิเนีย เนื่องจากต้องการจำลองประสบการณ์ของผู้ใช้ Mercado Libre ในเม็กซิโก เมื่อตรวจสอบมุมมองเทรดหลักของ WPT แล้ว Mercado Libre พบว่ามีงานต่อเนื่องหลายรายการที่บล็อกเทรดหลักเป็นเวลา 2 วินาที
เมื่อวิเคราะห์ Waterfall ที่เกี่ยวข้อง พบว่าเวลา 2 วินาทีนั้นส่วนใหญ่มาจากโมดูลข้อมูลวิเคราะห์ ขนาดกลุ่มหลักของแอปพลิเคชันใหญ่ (950 KB) และใช้เวลานานในการแยกวิเคราะห์ คอมไพล์ และดำเนินการ
ใช้ Lighthouse เพื่อพิจารณา FID สูงสุดที่อาจเกิดขึ้น
Lighthouse ไม่อนุญาตให้คุณเลือกระหว่างอุปกรณ์และสถานที่ต่างๆ แต่ถือเป็นเครื่องมือที่มีประโยชน์มากในการวินิจฉัยเว็บไซต์และรับคําแนะนําด้านประสิทธิภาพ
เมื่อเรียกใช้ Lighthouse ในหน้ารายละเอียดผลิตภัณฑ์ Mercado Libre พบว่า FID สูงสุดที่เป็นไปได้เป็นเมตริกเดียวที่มีเครื่องหมายสีแดง โดยมีค่าเป็น 1710ms
จากข้อมูลนี้ Mercado Libre จึงตั้งเป้าหมายที่จะปรับปรุงคะแนน FID สูงสุดที่เป็นไปได้ในเครื่องมือห้องทดลอง เช่น Lighthouse และ WebPageTest โดยคาดหวังว่าการปรับปรุงเหล่านี้จะส่งผลต่อผู้ใช้จริง และแสดงในเครื่องมือตรวจสอบผู้ใช้จริง เช่น รายงานประสบการณ์ของผู้ใช้ Chrome
เพิ่มประสิทธิภาพงานระยะยาว
การทำซ้ำครั้งแรก
Mercado Libre กําหนดเป้าหมายเพื่อเพิ่มประสิทธิภาพโมดูล 2 รายการที่เรียกใช้โค้ดที่มีราคาแพงตามการติดตามเทรดหลัก
พวกเขาเริ่มเพิ่มประสิทธิภาพของโมดูลการติดตามภายใน โมดูลนี้มีงานที่ใช้ CPU มากซึ่งไม่จําเป็นต่อการทำงานของโมดูล จึงนําออกได้อย่างปลอดภัย ส่งผลให้ JavaScript ของทั้งเว็บไซต์ลดลง 2%
หลังจากนั้นก็เริ่มทํางานเกี่ยวกับการปรับปรุงขนาดแพ็กเกจทั่วไป
Mercado Libre ใช้ webpack-bundle-analyzer เพื่อตรวจหาโอกาสในการเพิ่มประสิทธิภาพ ดังนี้
- ตอนแรกต้องใช้โมดูล Lodash แบบสมบูรณ์ เราได้แทนที่คำสั่งนี้ด้วยrequire ต่อเมธอดเพื่อโหลดเฉพาะชุดย่อยของ Lodash แทนการโหลดทั้งไลบรารี และนำมาใช้ร่วมกับ lodash-webpack-plugin เพื่อลดขนาด Lodash ให้ดียิ่งขึ้น
นอกจากนี้ ยังใช้การเพิ่มประสิทธิภาพ Babel ต่อไปนี้ด้วย
- ใช้ @babel/plugin-transform-runtime เพื่อนำตัวช่วยของ Babel มาใช้ซ้ำในโค้ด และลดขนาดของกลุ่มอย่างเห็นได้ชัด
- การใช้ babel-plugin-search-and-replace เพื่อแทนที่โทเค็น ณ เวลาสร้างบิวด์ เพื่อนำไฟล์การกําหนดค่าขนาดใหญ่ออกจากกลุ่มหลัก
- การเพิ่ม babel-plugin-transform-react-remove-prop-types เพื่อประหยัดไบต์ส่วนเกินด้วยการนําประเภทพร็อพเพอร์ตี้ออก
การเพิ่มประสิทธิภาพเหล่านี้ทำให้ขนาด Bundle ลดลงประมาณ 16%
วัดผลลัพธ์
การเปลี่ยนแปลงนี้ทำให้งานต่อเนื่องที่ใช้เวลานานของ Mercado Libre ลดลงจาก 2 วินาทีเป็น 1 วินาที
Lighthouse แสดง First Input Delay สูงสุดที่อาจเกิดขึ้นลดลง 57%
การทำซ้ำครั้งที่ 2
ทีมได้เจาะลึกงานระยะยาวต่อไปเพื่อค้นหาการปรับปรุงในลำดับถัดไป
จากข้อมูลดังกล่าว ทีมจึงตัดสินใจทำการเปลี่ยนแปลงต่อไปนี้
- ลดขนาด Bundle หลักต่อไปเพื่อเพิ่มประสิทธิภาพเวลาคอมไพล์และแยกวิเคราะห์ (เช่น โดยการนําการพึ่งพาที่ซ้ำกันออกในโมดูลต่างๆ)
- ใช้การแยกโค้ดที่ระดับคอมโพเนนต์เพื่อแบ่ง JavaScript ออกเป็นส่วนเล็กๆ และช่วยให้โหลดคอมโพเนนต์ต่างๆ ได้อย่างชาญฉลาดยิ่งขึ้น
- เลื่อนการจัดเตรียมคอมโพเนนต์ออกไปเพื่อใช้เธรดหลักอย่างชาญฉลาดยิ่งขึ้น เทคนิคนี้มักเรียกกันว่าการทำให้แห้งบางส่วน
วัดผลลัพธ์
การติดตามผล WebPageTest ที่ได้แสดงการเรียกใช้ JS ในส่วนเล็กๆ น้อยๆ ดังต่อไปนี้
และเวลา FID สูงสุดที่อาจเกิดขึ้นใน Lighthouse ลดลงอีก 60%
แสดงภาพความคืบหน้าสําหรับผู้ใช้จริง
แม้ว่าเครื่องมือทดสอบในห้องทดลองอย่าง WebPageTest และ Lighthouse จะยอดเยี่ยมสำหรับการปรับปรุงโซลูชันระหว่างการพัฒนา แต่เป้าหมายที่แท้จริงคือการปรับปรุงประสบการณ์ของผู้ใช้จริง
รายงานประสบการณ์ของผู้ใช้ Chrome มีเมตริกประสบการณ์ของผู้ใช้ที่แสดงให้เห็นว่าผู้ใช้ Chrome ในชีวิตจริงมีการใช้งานเว็บไซต์ที่ได้รับความนิยมในเว็บอย่างไร คุณดูข้อมูลจากรายงานได้โดยการเรียกใช้การค้นหาใน BigQuery, PageSpeedInsights หรือ CrUX API
แดชบอร์ด CrUX เป็นวิธีที่ง่ายในการแสดงให้เห็นความคืบหน้าของเมตริกหลัก
ขั้นตอนถัดไป
ประสิทธิภาพของเว็บเป็นงานที่ต้องทำอย่างต่อเนื่อง และ Mercado Libre เข้าใจคุณค่าที่การเพิ่มประสิทธิภาพเหล่านี้มอบให้แก่ผู้ใช้ ขณะใช้การเพิ่มประสิทธิภาพหลายอย่างในเว็บไซต์อย่างต่อเนื่อง ซึ่งรวมถึงprefetchingในหน้าข้อมูลผลิตภัณฑ์ การเพิ่มประสิทธิภาพรูปภาพ และอื่นๆ พวกเขายังเพิ่มการปรับปรุงหน้าข้อมูลผลิตภัณฑ์เพื่อลดเวลาในการบล็อกทั้งหมด (TBT) และ FID ของพร็อกซีให้มากขึ้น การเพิ่มประสิทธิภาพเหล่านี้ได้แก่
- การทำซ้ำโซลูชันการแยกโค้ด
- การปรับปรุงการเรียกใช้สคริปต์ของบุคคลที่สาม
- การปรับปรุงการรวมชิ้นงานอย่างต่อเนื่องที่ระดับเครื่องมือรวมไฟล์ (webpack)
Mercado Libre มีมุมมองแบบองค์รวมเกี่ยวกับประสิทธิภาพ ดังนั้นในขณะที่เพิ่มประสิทธิภาพการโต้ตอบในเว็บไซต์อย่างต่อเนื่อง ก็เริ่มประเมินโอกาสในการปรับปรุงCore Web Vitals อื่นๆ อีก 2 รายการในปัจจุบันด้วย ได้แก่ LCP (Largest Contentful Paint) และ CLS (Cumulative Layout Shift)