ทีมเว็บของ Zalando พบว่าการผสานรวม Lighthouse CI ช่วยสร้างแนวทางเชิงรุกในด้านประสิทธิภาพ โดยมีการตรวจสอบสถานะอัตโนมัติที่เปรียบเทียบการคอมมิตปัจจุบันกับสาขาหลักเพื่อป้องกันการถดถอยของประสิทธิภาพ
Zalando เป็นแพลตฟอร์มแฟชั่นออนไลน์ชั้นนําของยุโรปที่มีลูกค้าใช้งานอยู่กว่า 35 ล้านคน โพสต์นี้จะอธิบายเหตุผลที่เราเริ่มใช้ Lighthouse CI, ความง่ายในการใช้งาน และข้อดีสำหรับทีมของเรา
ที่ Zalando เราทราบดีว่าประสิทธิภาพของเว็บไซต์และรายได้มีความเกี่ยวข้องกัน ที่ผ่านมา เราทดสอบว่าการเพิ่มขึ้นของเวลาในการโหลดหน้าแคตตาล็อกที่เกิดจากการจําลองส่งผลต่ออัตราตีกลับ อัตรา Conversion และรายได้ต่อผู้ใช้อย่างไร ผลลัพธ์ชัดเจน การปรับปรุงเวลาในการโหลดหน้าเว็บให้เร็วขึ้น 100 มิลลิวินาทีทําให้การมีส่วนร่วมเพิ่มขึ้นโดยมีอัตราตีกลับลดลงและรายได้ต่อเซสชันเพิ่มขึ้น 0.7%
100มิลลิวินาที
การปรับปรุงเวลาในการโหลดหน้าเว็บ
0.7%
รายได้ต่อเซสชันเพิ่มขึ้น
การยอมรับของบริษัทไม่ได้แปลว่าจะได้ประสิทธิภาพเสมอไป
แม้ว่าคนในบริษัทจะยอมรับประสิทธิภาพอย่างเต็มตัว แต่หากไม่ได้ตั้งค่าประสิทธิภาพเป็นเกณฑ์การนำส่งผลิตภัณฑ์ ประสิทธิภาพก็อาจถูกมองข้ามได้ง่ายๆ เมื่อออกแบบเว็บไซต์ Zalando ใหม่ในปี 2020 เรามุ่งเน้นที่การนำเสนอฟีเจอร์ใหม่ๆ ไปพร้อมกับการรักษาประสบการณ์การใช้งานที่ยอดเยี่ยมของผู้ใช้และปรับโฉมเว็บไซต์ด้วยแบบอักษรที่กำหนดเองและสีสันที่สดใสยิ่งขึ้น อย่างไรก็ตาม เมื่อเว็บไซต์และแอปที่ออกแบบใหม่พร้อมเผยแพร่แล้ว เมตริกของผู้ใช้งานกลุ่มแรกๆ แสดงให้เห็นว่าเวอร์ชันใหม่ช้ากว่า First Contentful Paint ช้าลงสูงสุด 53% และเวลาในการตอบสนองที่วัดได้ช้าลงสูงสุด 59%
เว็บที่ Zalando
เว็บไซต์ Zalando สร้างโดยทีมหลักที่พัฒนาเฟรมเวิร์ก โดยมีทีมฟีเจอร์กว่า 15 ทีมที่มีส่วนร่วมในไมโครเซอร์วิสฝั่งหน้าเว็บ ขณะรองรับรุ่นใหม่ เรายังได้เปลี่ยนเว็บไซต์บางส่วนเป็นสถาปัตยกรรมแบบรวมศูนย์มากขึ้นด้วย
สถาปัตยกรรมเดิมชื่อ Mosaic มีวิธีวัดประสิทธิภาพหน้าเว็บด้วยเมตริกภายใน อย่างไรก็ตาม เราเปรียบเทียบเมตริกประสิทธิภาพก่อนเปิดตัวกับผู้ใช้จริงได้ยากเนื่องจากไม่มีเครื่องมือตรวจสอบประสิทธิภาพของห้องทดลองภายใน แม้ว่าจะมีการทําให้ใช้งานได้ทุกวัน แต่นักพัฒนาซอฟต์แวร์ที่ต้องปรับปรุงประสิทธิภาพก็ได้รับความคิดเห็นในรอบประมาณ 1 วัน
Web Vitals และ Lighthouse จะช่วยแก้ปัญหานี้
เรายังไม่พอใจกับเมตริกที่พัฒนาขึ้นเองทั้งหมด เนื่องจากเมตริกเหล่านั้นปรับให้เข้ากับการตั้งค่าใหม่ได้ไม่ดีนัก และที่สำคัญกว่านั้นคือไม่ได้มุ่งเน้นที่ประสบการณ์ของลูกค้า เราเปลี่ยนไปใช้ Core Web Vitals เนื่องจากเป็นชุดเมตริกที่กระชับแต่ครอบคลุมและเน้นผู้ใช้
เราต้องสร้างสภาพแวดล้อมห้องทดลองที่เหมาะสมเพื่อปรับปรุงประสิทธิภาพก่อนการเผยแพร่ ซึ่งให้ค่าการวัดที่ซ้ำกันได้ นอกเหนือจากเงื่อนไขการทดสอบที่แสดงถึงข้อมูลภาคสนาม 90 เปอร์เซ็นต์ของเรา ตอนนี้วิศวกรที่ทำงานเกี่ยวกับการปรับปรุงประสิทธิภาพทราบแล้วว่าควรมุ่งเน้นที่จุดใดเพื่อให้เกิดผลลัพธ์มากที่สุด เราใช้รายงานการตรวจสอบ Lighthouse ในพื้นที่อยู่แล้ว ดังนั้น Iteration แรกของเราคือการพัฒนาบริการตามโมดูลโหนด Lighthouse ซึ่งสามารถทดสอบการเปลี่ยนแปลงจากสภาพแวดล้อมการทดสอบได้ ข้อมูลนี้ช่วยให้เราได้รับความคิดเห็นเกี่ยวกับประสิทธิภาพที่เชื่อถือได้ประมาณ 1 ชั่วโมง ซึ่งช่วยให้เราปรับปรุงประสิทธิภาพให้เทียบเท่าและช่วยกู้คืนรุ่นได้
แสดงความคิดเห็นเกี่ยวกับประสิทธิภาพให้นักพัฒนาแอปทราบในคำขอการดึงข้อมูล
แต่เราไม่ได้หยุดอยู่แค่นั้นเนื่องจากต้องการใช้โอกาสนี้ไม่เพียงเพื่อตอบสนองต่อประสิทธิภาพ แต่ยังเพื่อเตรียมพร้อมรับมือด้วย การเปลี่ยนจากโมดูลโหนด Lighthouse ไปใช้เซิร์ฟเวอร์ Lighthouse CI (LHCI) นั้นไม่ยากเกินไป เราเลือกใช้โซลูชันที่โฮสต์เองเพื่อให้ผสานรวมกับบริการของบริษัทที่มีอยู่ได้ดียิ่งขึ้น แอปพลิเคชันเซิร์ฟเวอร์ LHCI ของเราสร้างขึ้นเป็นอิมเมจ Docker จากนั้นจึงนำไปติดตั้งใช้งานในคลัสเตอร์ Kubernetes พร้อมกับฐานข้อมูล PostgreSQL และรายงานไปยัง GitHub
เฟรมเวิร์กของเราให้ความคิดเห็นเกี่ยวกับประสิทธิภาพแก่นักพัฒนาซอฟต์แวร์อยู่แล้ว โดยระบบจะเปรียบเทียบขนาดของกลุ่มคอมโพเนนต์กับค่าเกณฑ์ในการคอมมิตแต่ละครั้ง ตอนนี้เรารายงานเมตริก Lighthouse เป็นการตรวจสอบสถานะ GitHub ได้แล้ว ปัญหาเหล่านี้ทําให้ไปป์ไลน์ CI ทำงานไม่สำเร็จหากไม่เป็นไปตามเกณฑ์ประสิทธิภาพ โดยมีลิงก์ไปยังรายงาน Lighthouse แบบละเอียดดังที่แสดงในรูปภาพต่อไปนี้
การขยายการครอบคลุมประสิทธิภาพ
เราเริ่มต้นด้วยแนวทางที่เน้นการปฏิบัติจริง ปัจจุบัน Lighthouse ทำงานในหน้าที่สำคัญที่สุด 2 หน้าเท่านั้น ได้แก่ หน้าแรกและหน้ารายละเอียดผลิตภัณฑ์ แต่ Lighthouse CI ช่วยขยายการกำหนดค่าการเรียกใช้ได้อย่างง่ายดาย ทีมฟีเจอร์ที่ทำงานในหน้าเว็บที่เฉพาะเจาะจงสามารถตั้งค่ารูปแบบ URL และการยืนยันที่ตรงกันได้ เมื่อใช้ฟีเจอร์นี้ เราค่อนข้างมั่นใจว่าความครอบคลุมของประสิทธิภาพจะเพิ่มขึ้น
ตอนนี้เรามั่นใจมากขึ้นในการสร้างรุ่นที่ใหญ่ขึ้น และนักพัฒนาแอปสามารถรับความคิดเห็นเกี่ยวกับประสิทธิภาพของโค้ดได้เร็วขึ้นมาก