Swappie เพิ่มรายได้จากอุปกรณ์เคลื่อนที่ 42% ด้วยการมุ่งเน้นที่ Core Web Vitals ได้อย่างไร

การค้นหาความสัมพันธ์ระหว่างประสิทธิภาพของเว็บไซต์และเมตริกธุรกิจเป็นกุญแจสำคัญในการขับเคลื่อนความสำเร็จของการเพิ่มประสิทธิภาพ

Lina Hansson

Swappie เป็นบริษัทสตาร์ทอัพที่ประสบความสำเร็จซึ่งขายโทรศัพท์แบบซ่อมแซมใหม่ พวกเขาให้ความสำคัญกับการเพิ่มฟีเจอร์ใหม่ๆ มากกว่าประสิทธิภาพของเว็บไซต์มาเป็นเวลา 2-3 ปี แต่เมื่อสังเกตเห็นว่าผลลัพธ์ของธุรกิจบนเว็บไซต์ในอุปกรณ์เคลื่อนที่ช้ากว่าเวอร์ชันเดสก์ท็อป ก็มีการเปลี่ยนแปลงเกิดขึ้น ทางบริษัทมุ่งเน้นที่การเพิ่มประสิทธิภาพ และไม่นานหลังจากนั้นก็พบว่า รายได้จากอุปกรณ์เคลื่อนที่เพิ่มขึ้น

เน้นให้เห็นโอกาส

อัตรา Conversion อุปกรณ์เคลื่อนที่สัมพัทธ์ (Rel mCvR) คำนวณโดยการหารอัตรา Conversion อุปกรณ์เคลื่อนที่ด้วยอัตรา Conversion เดสก์ท็อป มีโอกาสมากมายในการติดตามเมตริกความเร็ว แต่ การเชื่อมต่อกับเมตริกธุรกิจอาจค่อนข้างยุ่งยาก เนื่องจากแคมเปญและฤดูกาลเดียวกันเข้าถึงทั้งอุปกรณ์เคลื่อนที่และเดสก์ท็อป เมตริก mCvR ของ Rel จึงตัดผลกระทบของพารามิเตอร์ภายนอกเหล่านี้ออกไป และจะแสดงเฉพาะว่าเว็บไซต์ในอุปกรณ์เคลื่อนที่มีการปรับปรุงหรือไม่เท่านั้น

ค่าเฉลี่ยสำหรับเว็บไซต์อีคอมเมิร์ซที่ใหญ่ที่สุด 10 แห่งในสหรัฐอเมริกาคือ Rel mCvR 50% แต่ Swappie มีอัตราส่วนอยู่ที่ 24% สิ่งนี้แสดงให้เห็นว่าเว็บไซต์ในอุปกรณ์เคลื่อนที่มีความท้าทายและบริษัทยังขาดรายได้ ซึ่งนำไปสู่การเปิดตัวโครงการปรับปรุงประสิทธิภาพ

การวัดผลกระทบของการปรับปรุงประสิทธิภาพ

Swappie ใช้ Google Analytics เพื่อตั้งค่าการติดตามรายวันของ Rel mCvR และเวลาในการโหลดหน้าเว็บเฉลี่ยบนอุปกรณ์เคลื่อนที่โดยใช้สเปรดชีตเทมเพลตนี้ (อ่านวิธีการใช้สเปรดชีต) นอกจากนี้ยังได้เริ่มติดตาม Core Web Vitals ผ่าน Google Analytics และ BigQuery ด้วย เมื่อมีการติดตาม นักพัฒนาซอฟต์แวร์จึงเริ่มปรับปรุงประสิทธิภาพของเว็บไซต์

หลังจากทำงานไปได้แค่ 3 เดือน ผลลัพธ์ก็เห็นได้ชัดเจน นั่นคือ Rel mCVR เพิ่มขึ้นจาก 24% เป็น 34% และรายได้จากอุปกรณ์เคลื่อนที่ก็เพิ่มขึ้น 42%

การเพิ่มประสิทธิภาพ

การเพิ่มประสิทธิภาพสำหรับ LCP และ CLS

ทีมพัฒนาของ Swappie พบว่ายังมีพื้นที่มากมายสำหรับการปรับปรุงสิ่งเล็กๆ น้อยๆ ที่เรามองข้ามไปมาเป็นเวลานาน การศึกษาเว็บไซต์ในวิวพอร์ตและภาษาต่างๆ ซึ่งไฮไลต์ปัญหา LCP และ CLS ที่แก้ไขได้ง่ายและส่งผลกระทบอย่างมากต่อประสิทธิภาพโดยรวม เช่น การแสดงผลองค์ประกอบ LCP บนเซิร์ฟเวอร์แทนไคลเอ็นต์เมื่อเป็นไปได้ ทำให้ LCP ลดลง

การตรวจหาการเปลี่ยนแปลงเลย์เอาต์นั้นทําได้ยาก เนื่องจากอาจแตกต่างกันไปมากโดยขึ้นอยู่กับวิวพอร์ตและการเชื่อมต่อ หลังจากนำ Core Web Vitals จากผู้ใช้มาสู่ข้อมูลวิเคราะห์แล้ว พวกเขาก็ทราบว่ามาถูกทางแล้วเนื่องจาก 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 (ในห้องทดลอง) พวกเขาก็ได้มุ่งเน้นไปที่การเพิ่มประสิทธิภาพในสิ่งที่เหมาะสมซึ่งจะส่งผลต่อผู้คนจำนวนมากที่สุด