การหาความสัมพันธ์ระหว่างประสิทธิภาพของเว็บไซต์กับเมตริกทางธุรกิจเป็นกุญแจสำคัญในการขับเคลื่อนความสําเร็จของการเพิ่มประสิทธิภาพ
Swappie เป็นสตาร์ทอัพที่ประสบความสำเร็จซึ่งขายโทรศัพท์ที่ผ่านการซ่อม ในช่วง 2-3 ปีที่ผ่านมา ทางบริษัทให้ความสําคัญกับการเพิ่มฟีเจอร์ใหม่มากกว่าประสิทธิภาพของเว็บไซต์ แต่เมื่อสังเกตเห็นว่าผลลัพธ์ทางธุรกิจในเว็บไซต์เวอร์ชันอุปกรณ์เคลื่อนที่ล้าหลังเวอร์ชันเดสก์ท็อป ทางบริษัทจึงมีการเปลี่ยนแปลง โดยมุ่งเน้นที่การเพิ่มประสิทธิภาพและไม่นานก็เห็นรายได้จากอุปกรณ์เคลื่อนที่เพิ่มขึ้น
42%
รายได้ที่เพิ่มขึ้นจากผู้เข้าชมบนอุปกรณ์เคลื่อนที่
10pp*
*เปอร์เซ็นต์ที่ mCVR เพิ่มขึ้นแบบสัมพัทธ์
ไฮไลต์โอกาส
อัตรา Conversion อุปกรณ์เคลื่อนที่แบบสัมพัทธ์ (rel mCvR) คำนวณโดยการหารอัตรา Conversion อุปกรณ์เคลื่อนที่ด้วยอัตรา Conversion ของเดสก์ท็อป การติดตามเมตริกความเร็วมีโอกาสหลายอย่าง แต่การเชื่อมโยงเมตริกเหล่านี้กับเมตริกทางธุรกิจอาจเป็นเรื่องยาก เนื่องจากแคมเปญและช่วงเวลาเดียวกันเข้าถึงทั้งอุปกรณ์เคลื่อนที่และเดสก์ท็อป เมตริก mCvR แบบสัมพัทธ์จึงตัดอิทธิพลของพารามิเตอร์ภายนอกเหล่านี้ออก และแสดงเฉพาะว่าเว็บไซต์เวอร์ชันอุปกรณ์เคลื่อนที่ดีขึ้นหรือไม่
ค่าเฉลี่ยของเว็บไซต์อีคอมเมิร์ซ 10 อันดับใหญ่ที่สุดในสหรัฐอเมริกาคือ mCVR แบบสัมพัทธ์ 50% แต่ Swappie อยู่ที่ 24% ข้อมูลนี้บ่งชี้ว่าเว็บไซต์เวอร์ชันอุปกรณ์เคลื่อนที่มีปัญหาและบริษัทสูญเสียรายได้ จึงมีการเปิดตัวโปรเจ็กต์ปรับปรุงประสิทธิภาพ
การวัดผลกระทบของการปรับปรุงประสิทธิภาพ
Swappie ใช้ Google Analytics เพื่อตั้งค่าการติดตาม Rel mCvR และเวลาในการโหลดหน้าเว็บเฉลี่ยรายวันโดยใช้สเปรดชีตเทมเพลตนี้ (อ่านวิธีการใช้สเปรดชีต) รวมถึงเริ่มติดตาม Core Web Vitals ผ่าน Google Analytics และ BigQuery ด้วย เมื่อติดตั้งการติดตามแล้ว นักพัฒนาแอปก็เริ่มปรับปรุงประสิทธิภาพเว็บไซต์
หลังจากทํางานเพียง 3 เดือน ผลลัพธ์ก็ชัดเจน นั่นคือ mCVR สัมพัทธ์เพิ่มขึ้นจาก 24% เป็น 34% และรายได้จากอุปกรณ์เคลื่อนที่เพิ่มขึ้น 42%
23%
เวลาในการโหลดหน้าเว็บโดยเฉลี่ยลดลง
55%
LCP ต่ำลง
91%
CLS ต่ำลง
90%
FID ลดลง
การเพิ่มประสิทธิภาพ
การเพิ่มประสิทธิภาพเพื่อ LCP และ CLS
ทีมพัฒนาของ Swappie พบว่ายังมีสิ่งเล็กๆ น้อยๆ อีกมากมายที่ควรปรับปรุง ซึ่งถูกมองข้ามมาเป็นเวลานาน การศึกษาเว็บไซต์ในวิวพอร์ตต่างๆ และในภาษาต่างๆ แสดงให้เห็นปัญหาเกี่ยวกับ LCP และ CLS ที่แก้ไขได้ง่ายและมีผลกระทบอย่างมากต่อประสิทธิภาพโดยรวม เช่น การแสดงผลองค์ประกอบ LCP ในเซิร์ฟเวอร์แทนที่จะเป็นในไคลเอ็นต์เมื่อเป็นไปได้ทําให้ LCP ลดลง
การตรวจหาการเปลี่ยนแปลงเลย์เอาต์เป็นเรื่องยาก เนื่องจากอาจแตกต่างกันไปมากโดยขึ้นอยู่กับวิวพอร์ตและการเชื่อมต่อ หลังจากนำ Core Web Vitals จากผู้ใช้ไปใช้กับ Analytics แล้ว ทีมก็รู้ว่ากำลังเดินไปในทิศทางที่ถูกต้องเนื่องจาก CLS ลดลง
รูปภาพ
รูปภาพได้รับการเพิ่มประสิทธิภาพด้วยการโหลดล่วงหน้า การโหลดแบบ Lazy Loading และการปรับขนาดที่เหมาะสม โดยจะโหลดรูปภาพหลักไว้ล่วงหน้า (เช่น LCP) ขณะที่โหลดรูปภาพนอกวิวพอร์ตก็ต่อเมื่อจำเป็นเท่านั้น
แบบอักษร
Swappie เพิ่มประสิทธิภาพแบบอักษรโดยเปลี่ยนผู้ให้บริการ ซึ่งส่งผลอย่างมากเนื่องจากบริษัทต้องการวิธีที่ดีที่สุดในการจัดการแบบอักษรที่จําเป็นสําหรับภาษาต่างๆ
สคริปต์ของบุคคลที่สาม
Swappie ทุ่มเทอย่างมากในการตรวจสอบสคริปต์และวิดเจ็ตของบุคคลที่สามแต่ละรายการ ตำแหน่งที่ใช้ และฟังก์ชันการทำงานที่ให้บริการ หลังจากพูดคุยกับผู้มีส่วนเกี่ยวข้องทั้งหมดแล้ว ทางทีมได้วางแผนที่จะลดผลกระทบของสคริปต์ที่มีต่อเว็บไซต์ไปพร้อมกับคงฟังก์ชันการทำงานไว้ โดยนําสิ่งที่ไม่จําเป็นออกและเพิ่มประสิทธิภาพส่วนที่เหลือ ซึ่งลดจํานวน JavaScript ของบุคคลที่สามในเว็บไซต์ได้อย่างมาก
การนำโค้ดที่ไม่ได้ใช้งานออกและการเพิ่มประสิทธิภาพการรวม
การเพิ่มประสิทธิภาพการนําเข้าและนํา JS และ CSS ที่ไม่ได้ใช้ออกช่วยปรับปรุงประสิทธิภาพเว็บไซต์ของ Swappie ได้เล็กน้อย แต่การปรับปรุงเล็กๆ น้อยๆ เหล่านั้นจะส่งผลมากขึ้นเมื่อเวลาผ่านไป รวมถึงเพิ่มประสิทธิภาพการตั้งค่าการรวมกลุ่มด้วย
การสร้างวัฒนธรรมด้านประสิทธิภาพที่ Swappie
ผลลัพธ์ที่ Swappie ได้รับไม่ได้มาจากการเปลี่ยนแปลงโค้ดเท่านั้น แต่ยังมาจากการเปลี่ยนแปลงในองค์กรและลำดับความสำคัญด้วย
Teemu Huovinen หัวหน้าทีมวิศวกรอธิบายว่า
คุณต้องลิงก์ความเร็วเว็บไซต์กับเมตริกทางธุรกิจเพื่อเน้นความสำคัญของความเร็วเว็บไซต์ ทั้งหมดนี้ขึ้นอยู่กับการจัดลําดับความสําคัญเมื่อคุณมีเวลาและทรัพยากรจํากัด ซึ่งมักจะเป็นเช่นนั้นเสมอ การให้ความสําคัญกับมูลค่าของลูกค้าเป็นแนวทางที่ถูกต้อง แต่การมุ่งเน้นที่ฟีเจอร์ใหม่และการปรับปรุง Conversion ที่ตรงมากขึ้นนั้นทําได้ง่ายมากหากคุณเห็นว่าความเร็วของเว็บไซต์เป็นเพียงการปรับปรุง "ความรู้สึก" ของเว็บไซต์เท่านั้น การเชื่อมโยงความเร็วของเว็บไซต์กับเมตริกทางธุรกิจนั้นไม่ใช่เรื่องง่ายเสมอไป การคํานวณด้วย Rel mCvR จึงช่วยเราได้มาก
Teemu Huovinen
เมื่อทีมนักพัฒนาซอฟต์แวร์ได้รับโอกาสให้มุ่งเน้นที่ความเร็วของเว็บไซต์อย่างเต็มรูปแบบเป็นเวลา 1 ไตรมาส ทีมก็มีความมุ่งมั่นที่จะเจาะลึกมากขึ้น
การรวมผลกระทบของเราเข้ากับการเติบโตของทีมเป็นสิ่งที่น่าประทับใจยิ่งกว่า นักพัฒนาแอป 4 ใน 7 คนของเราเริ่มทำงานภายในเดือนที่เราเริ่มปรับปรุงประสิทธิภาพ ขอขอบคุณทีมทุกคน เรารู้สึกดีใจที่ได้พูดคุยเกี่ยวกับหัวข้อนี้และสร้างผลกระทบที่ยิ่งใหญ่ได้
Teemu Huovinen
นอกจากนี้ Teemu ยังชี้ให้เห็นถึงความสำคัญของการใช้เวลาในช่วงเริ่มต้นเพื่อวางแผนโดยอิงตามข้อมูล เรียนรู้วิธีใช้แท็บประสิทธิภาพของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ และตั้งค่าข้อมูลวิเคราะห์ผู้ใช้ก่อนที่จะทำการปรับปรุง กราฟ (โดยเฉพาะกราฟที่ไปในทิศทางที่ถูกต้อง) เป็นแหล่งข้อมูลความคิดเห็นและการยืนยันที่ยอดเยี่ยมสำหรับผลงานของคุณ การดู Core Web Vitals ในพื้นที่พร้อมกับคะแนน Lighthouse (จากห้องทดลอง) ช่วยให้ทีมมุ่งเน้นที่การเพิ่มประสิทธิภาพสิ่งที่เหมาะสมซึ่งจะส่งผลต่อผู้ใช้มากที่สุด