QuintoAndar เพิ่มอัตรา Conversion และจำนวนหน้าเว็บต่อเซสชันด้วยการปรับปรุงประสิทธิภาพของหน้าเว็บได้อย่างไร

โครงการที่มุ่งเน้นการเพิ่มประสิทธิภาพ Core Web Vitals และการเปลี่ยนไปใช้ Next.js ส่งผลให้อัตรา Conversion เพิ่มขึ้น 5% และจํานวนหน้าเว็บต่อเซสชันเพิ่มขึ้น 87%

Daniela Sayuri Yassuda

QuintoAndar เป็นบริษัท ProTech สัญชาติบราซิลที่มีผลิตภัณฑ์ที่นำเสนอโซลูชันดิจิทัลแบบครบวงจรสำหรับอสังหาริมทรัพย์ ในปีนี้ เราดําเนินโครงการที่มุ่งเน้นการปรับปรุงประสิทธิภาพของฮับเนื้อหาในแอป และกระตุ้นผลลัพธ์ในการเพิ่มการเข้าชมของผู้ใช้และเมตริก Conversion

46_%

อัตราการตีกลับลดลง

87_%

จำนวนหน้าเว็บต่อเซสชันเพิ่มขึ้น

5_%

Conversion เพิ่มขึ้นในระหว่างขั้นตอนการตรวจสอบความถูกต้อง

การท้า

แอปของเรามีศูนย์รวมเนื้อหาคอนโดมิเนียมที่มีหน้าเว็บกว่า 40,000 หน้า ซึ่งผู้ใช้สามารถดูข้อมูลเกี่ยวกับอสังหาริมทรัพย์ ตรวจสอบรูปภาพพื้นที่ส่วนกลาง อ่านข้อมูลเกี่ยวกับย่านใกล้เคียง และค้นหาประกาศขายหรือให้เช่า หน้าต่อไปนี้สำคัญอย่างยิ่งสำหรับ QuintoAndar

• แหล่งที่มานี้เป็นแหล่งที่มาสำคัญของการเข้าชมจากการค้นหาทั่วไป โดยมีจำนวนผู้ใช้ที่เพิ่มขึ้นอย่างต่อเนื่องจากผลการค้นหาของเครื่องมือค้นหา
• มีอัตรา Conversion สูงในปานกลางถึงระยะยาวเมื่อเทียบกับหน้าอื่นๆ

แต่ในเรื่องประสิทธิภาพและประสบการณ์ของผู้ใช้ในหน้าเหล่านี้ก็เต็มไปด้วยความท้าทาย

• ไม่มีการเพิ่มประสิทธิภาพที่วัดโดย Core Web Vitals แต่มีปัญหาที่ทราบเกี่ยวกับการโหลดหน้าเว็บที่ช้า การตอบสนองต่อข้อมูลจากผู้ใช้ที่ช้า และความไม่เสถียรของเลย์เอาต์
• อัตราตีกลับของผู้ใช้สูงแม้ว่าเราคาดหวังให้อัตราดังกล่าวสูงกว่าส่วนอื่นๆ ของแอปก็ตาม
• การอัปเดตประสบการณ์การใช้งานหน้าเว็บใน Google Search ซึ่งในขณะนั้นยังไม่ได้เปิดตัวจะรวม Core Web Vitals ไว้ในอัลกอริทึมการจัดอันดับ ซึ่งหมายความว่าประสิทธิภาพของหน้าเว็บอาจส่งผลต่อวิธีแสดงผลการค้นหา

ในขณะเดียวกัน เราก็พบโอกาสในการปรับปรุงประสบการณ์ของนักพัฒนาแอปที่อาจปลดล็อกผลประโยชน์จากโปรเจ็กต์อื่นๆ ทั่วทั้งบริษัท ได้แก่

• ตรรกะการแสดงผลฝั่งเซิร์ฟเวอร์ของเรา (ซึ่งจะแสดงหน้าเว็บที่มีการเข้าชมสูงทั้งหมด รวมถึงหน้าคอนโดมิเนียม) สร้างขึ้นภายในองค์กร และมีความซับซ้อนเกินกว่าที่จะดูแลรักษาและเตรียมความพร้อมพนักงานใหม่
• นอกจากนี้ ยังต้องมีการตั้งค่าที่กำหนดเองและงานที่นักพัฒนาแอปต้องทำเองเพื่อให้แอปทำงานได้อย่างมีประสิทธิภาพเป็นอย่างดี เช่น การแยกโค้ด
• QuintoAndar มีเว็บแอปพลิเคชัน React มากกว่า 30 รายการ การอัปเดตแอปพลิเคชันเหล่านี้และดูแลรักษาแอปพลิเคชันตามแนวทางปฏิบัติแนะนำเป็นงานที่ท้าทาย

แนวทาง

เราเริ่มโครงการเพิ่มประสิทธิภาพของฮับเนื้อหาคอนโดมิเนียมเพื่อปรับปรุงประสบการณ์ของผู้ใช้ เนื่องจากการปรับปรุงเหล่านี้อาจช่วยให้ได้รับ Conversion มากขึ้น, SEO ที่ดีขึ้น และการใช้งานที่ดีขึ้น โครงการริเริ่มนี้เป็นโอกาสที่เหมาะสมในการปรับปรุงประสบการณ์การใช้งานของนักพัฒนาแอปด้วย

การย้ายข้อมูลไปยัง Next.js

หน้าคอนโดมิเนียมเวอร์ชันใหม่ได้รับการติดตั้งด้วย Next.js ฮับเนื้อหาคอนโดมิเนียมดูเป็นอิสระจากส่วนอื่นๆ ของแอปเป็นหลัก จึงดูจะเป็นตัวเลือกที่ดีในการลองใช้เฟรมเวิร์กใหม่ เราจึงเข้าใจความสำคัญของการย้ายข้อมูลและประเมินว่าฟีเจอร์ต่างๆ จะช่วยโดยไม่ส่งผลกระทบต่อแอป React อื่นๆ ใน QuintoAndar ได้อย่างไร

ข้อกำหนดที่ยากคือต้องทำให้เครื่องมือค้นหายังสามารถรวบรวมข้อมูลหน้าเว็บได้ Next.js ทำตามข้อกำหนดนี้โดยรองรับการแสดงผลฝั่งเซิร์ฟเวอร์แบบพร้อมใช้งานทันที และไม่ต้องตั้งค่าที่กำหนดเอง เอกสารประกอบดังกล่าวช่วยให้การแชร์ความรู้เกี่ยวกับวิธีทำงานต่างๆ เช่น การดึงข้อมูลบนเซิร์ฟเวอร์และการเริ่มงานแก่นักพัฒนาซอฟต์แวร์รายใหม่ทำได้ง่ายขึ้น การแสดงผลฝั่งเซิร์ฟเวอร์ยังเรียกว่าเพื่อปรับปรุงประสิทธิภาพเมตริก เช่น First Contentful Paint (FCP)

เฟรมเวิร์กนี้มีฟีเจอร์อื่นๆ ที่เป็นมิตรกับประสิทธิภาพ เช่น การแยกโค้ดอัตโนมัติและการดึงข้อมูลล่วงหน้า แม้ว่าโครงสร้างที่มีอยู่เดิมจะมีฟีเจอร์ดังกล่าวอยู่แล้ว แต่งานเพิ่มเติมที่จำเป็นจากนักพัฒนาแอปก็ทำให้การนำไปใช้ลดลง ตัวอย่างเช่น การแยกโค้ดในระดับหน้าหรือระดับคอมโพเนนต์ต้องทำด้วยตนเอง

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

ขั้นตอนแรกคือนำโค้ดที่ไม่ได้ใช้ออก เราได้ตรวจสอบรายงาน Webpack Bundle analytics ซึ่งแสดงเนื้อหาของแพ็กเกจ JS แต่ละชุด และได้ตรวจสอบสคริปต์ของบุคคลที่สามทั้งหมดอย่างละเอียดแล้ว ด้วยเหตุนี้ เราจึงสามารถล้างไลบรารีการติดตามบางรายการที่ไม่ได้ใช้ในหน้าเว็บหนึ่งๆ ได้

ทีมของเราได้ตรวจสอบเพิ่มเติมและประเมินต้นทุนด้านประสิทธิภาพของฟีเจอร์ที่มีอยู่ ตัวอย่างเช่น ปุ่ม "ชอบ" ต้องใช้ JS จำนวนมากในการทำงาน อย่างไรก็ตาม ในหน้าคอนโดมิเนียม ผู้ใช้น้อยกว่า 0.5% โต้ตอบกับปุ่ม ซึ่งพร้อมใช้งานและใช้บ่อยในส่วนอื่นๆ ของแอป หลังจากพูดคุยเกี่ยวกับทั้งวิศวกรรมและผลิตภัณฑ์ เราจึงตัดสินใจนำฟีเจอร์นี้ออก

ภาพเคลื่อนไหวแสดงฟีเจอร์ปุ่ม “ชอบ” มีการ์ดเกี่ยวกับอพาร์ตเมนต์ให้เช่า ที่มุมขวาล่างของการ์ดจะมีปุ่มรูปหัวใจสีเทาที่จะเปลี่ยนเป็นสีน้ำเงินเมื่อคลิก

มีการใช้การเพิ่มประสิทธิภาพ JS อื่นๆ อยู่แล้ว เช่น การบีบอัดแบบคงที่ด้วย Brotli ซึ่งทําในเวลาที่สร้างโดยใช้ BrotliWebpackPlugin และมีการใช้กับทรัพยากรแบบคงที่ประเภทอื่นๆ ด้วย เริ่มแรกเราอาศัยการบีบอัดที่ได้จาก CDN และ Brotli ลดขนาด JS ลง 18% เมื่อเทียบกับ gzip แต่หลังจากนั้น เราเปลี่ยนมาใช้การบีบอัด Brotli ในเวลาที่สร้าง และพบว่าสามารถลดขนาดลงได้ 24%

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

เวอร์ชันอุปกรณ์เคลื่อนที่แสดงรูปภาพหลักในพื้นที่ส่วนใหญ่ของครึ่งหน้าบน และยังเป็น Largest Contentful Paint (LCP) ของหน้าเว็บด้วย

รูปภาพหลักของหน้าคอนโดมิเนียม

ก่อนหน้านี้รูปภาพทั้งหมดมีแอตทริบิวต์ srcset และ sizes ที่จะแสดงรูปภาพที่ปรับเปลี่ยนตามอุปกรณ์อยู่แล้ว นอกจากนี้ เรายังใช้ Thumbor เพื่อปรับขนาดรูปภาพแบบออนดีมานด์และกำหนดค่า CDN ของเราเพื่อแคชอย่างมีประสิทธิภาพ

อุปกรณ์เคลื่อนที่สมัยใหม่มีจอแสดงผลที่มีความหนาแน่นของพิกเซลสูงมาก ซึ่งหมายความว่าเบราว์เซอร์จะแสดงรูปภาพเวอร์ชัน 3 หรือ 4 เท่า (หากมี) เมื่อความละเอียดเพิ่มขึ้น มนุษย์จะรับรู้ความแตกต่างได้ยากขึ้น แต่ขนาดไฟล์ก็จะเพิ่มขึ้นไม่ว่าอย่างไรก็ตาม การกำหนดความละเอียดของรูปภาพสูงสุดจะปรับปรุงขนาดรูปภาพโดยไม่กระทบต่อประสบการณ์ของผู้ใช้ เราจำกัดรูปภาพหลักให้แสดงเวอร์ชันไม่เกิน 2 เท่า ซึ่งน้อยกว่าเวอร์ชัน 3 เท่าประมาณ 35% และเล็กกว่าเวอร์ชัน 4 เท่าโดยประมาณ 35%

ในการดำเนินการให้เสร็จสมบูรณ์ เราใช้กลยุทธ์การโหลดล่วงหน้าเพื่อดาวน์โหลดและแสดงโดยเร็วที่สุด โดยหวังว่าจะปรับปรุงเมตริก LCP ให้ดีขึ้นในอนาคต

<link rel="preload" href="/img/450x450/892847321-143.0038687080606IMG20180420WA0037.jpg" as="image">

คอมโพเนนต์รูปภาพในตัวของ Next.js มีการเพิ่มประสิทธิภาพหลายอย่าง เช่น การปรับขนาดตามอุปกรณ์ และการโหลดตามลำดับความสำคัญ ในระหว่างโครงการนี้ เราไม่ได้ย้ายข้อมูลรูปภาพที่มีอยู่เพื่อใช้คอมโพเนนต์นี้ แต่เรามีแผนที่จะนำมาใช้ในฟีเจอร์ใหม่ๆ

การลดการเปลี่ยนเลย์เอาต์

หน้าคอนโดมิเนียมมีปัญหา Cumulative Layout Shift (CLS) อยู่เล็กน้อย องค์ประกอบที่มีผลต่อการเปลี่ยนเลย์เอาต์จะแสดงผลในไคลเอ็นต์เท่านั้น เช่น การเติมข้อมูลมาร์กอัปฝั่งเซิร์ฟเวอร์ด้วยคอมโพเนนต์ที่แสดงผลโดยไคลเอ็นต์ หรือรูปภาพที่ไม่มีการกำหนดแอตทริบิวต์ width และ height

ในการแก้ปัญหาเหล่านี้ เราตั้งค่าขนาดที่แน่นอนสําหรับองค์ประกอบเหล่านี้เมื่อเป็นไปได้ หรือค่าโดยประมาณด้วย min-height นอกจากนี้ยังมีตัวเลือกอื่นๆ เช่น การใช้พร็อพเพอร์ตี้ CSS aspect-ratio นอกจากนี้ เรายังสร้างตัวยึดตำแหน่งเพื่อป้องกันไม่ให้คอมโพเนนต์ที่แสดงผลแบบไดนามิกทำให้เกิดการเปลี่ยนเลย์เอาต์ด้วย

การกำหนดมิติข้อมูลขององค์ประกอบ เช่น รูปภาพแผนที่จะลดค่า CLS

การทยอยเปิดตัวการเปลี่ยนแปลง

ทีมของเราต้องการตรวจสอบว่าหน้าฮับคอนโดมิเนียมเวอร์ชันที่มีการเพิ่มประสิทธิภาพเพื่อให้แน่ใจว่าประสบการณ์ของผู้ใช้จะดีขึ้น เราจึงนำกลยุทธ์การเปิดตัวแบบก้าวหน้ามาใช้ ดังนี้

1. ในช่วงแรก เวอร์ชันใหม่มีการเผยแพร่ URL ที่คัดสรรมาแล้วไม่กี่รายการ ทำให้มีเพียงผู้ใช้ไม่กี่ร้อยคนต่อวันที่เห็น URL เหล่านี้
2. ส่วนในระยะที่ 2 มีการเผยแพร่หน้าเว็บเพิ่มเติม ซึ่งคิดเป็นผู้ใช้วันละ 2-3,000 คน
3. ในระยะที่ 3 ซึ่งเป็นเฟสสุดท้าย มีการเผยแพร่หน้าเว็บสำหรับทุกหน้า และการเปิดตัวเสร็จสมบูรณ์สำหรับผู้ใช้ทุกคน

ในช่วงเวลานี้ ทีมวิศวกรได้วัดผลประสิทธิภาพของหน้าเว็บในเวอร์ชันที่ใช้งานจริงอย่างต่อเนื่องและทำการปรับปรุงอยู่เสมอ นอกจากนี้ ทีมยังได้เปรียบเทียบเมตริกธุรกิจระหว่างเวอร์ชันใหม่กับเวอร์ชันเก่าด้วย ผลการทดสอบนี้มีแนวโน้มที่ดี

ผลลัพธ์

ทีมใช้ SpeedCurve เพื่อทำการทดสอบในห้องทดลองกับหน้าคอนโดมิเนียมอย่างต่อเนื่อง นี่คือผลลัพธ์ของเวอร์ชันสำหรับอุปกรณ์เคลื่อนที่

ผลของเมตริกในห้องทดลองที่รวบรวมด้วย SpeedCurve

เมตริกในห้องทดลอง	ก่อน	หลัง	ความแตกต่าง
Largest Contentful Paint (LCP)	2.41 วินาที	1.48 วินาที	ลดลง 39%
เวลาในการตอบสนอง (TTI)	12.16 วินาที	7.48 วินาที	ลดลง 39%
เวลาทั้งหมดในการบล็อก (TBT)	1,124 มิลลิวินาที	1,056 มิลลิวินาที	ลดลง 4%
Cumulative Layout Shift (CLS)	0.0402	0.0093	ลดลง 77%

นอกจากนี้ เรายังอยากตรวจสอบผลกระทบต่อผู้ใช้จริงด้วย เราพิจารณาข้อมูลในช่วง 1 เดือนก่อนและหลังการเปิดตัวจากการใช้ข้อมูลภาคสนามที่รวบรวมด้วย Instana Website Monitoring เมื่อเปรียบเทียบเปอร์เซ็นไทล์ที่ 75 สำหรับผู้ใช้อุปกรณ์เคลื่อนที่ เราพบว่า LCP ลดลง 26% และ FID ลดลง 72%

ผลลัพธ์เมตริกช่องที่รวบรวมด้วย Instana

PageSpeed Insights จะแสดงรายงานข้อมูลภาคสนามในช่วง 28 วันที่ผ่านมา หน้าคอนโดมิเนียมที่มีการเข้าถึงมากที่สุดเพียงอย่างเดียวมีข้อมูลเพียงพอที่จะสร้างรายงานสำหรับผู้ใช้อุปกรณ์เคลื่อนที่ ตั้งแต่เดือนพฤศจิกายน 2021 Core Web Vitals ทั้งหมดอยู่ในช่วง "ดี"

PageSpeed Insights แสดงให้เห็นว่าผู้ใช้อุปกรณ์เคลื่อนที่มีประสบการณ์ที่ดีในหน้าคอนโดมิเนียมที่มีการเข้าถึงมากที่สุด

ในระหว่างการเปิดตัวแบบต่อเนื่อง เราสังเกตเห็นว่าอัตราตีกลับลดลง กว่าเราจะเปิดตัวหน้าเว็บทุกหน้าเสร็จสิ้น Google Analytics ก็แสดงให้เห็นว่าอัตราตีกลับลดลง 46% จำนวนหน้าเว็บต่อเซสชันเพิ่มขึ้น 87% และระยะเวลาเซสชันเฉลี่ยเพิ่มขึ้น 49% อัตราตีกลับที่ลดลงนั้นทำได้ยากขึ้นสำหรับการค้นหาที่เสียค่าใช้จ่าย โดยลดลงถึง 59% ซึ่งเป็นสัญญาณที่ดีเมื่อพูดถึงการลงทุนในโฆษณาแบบจ่ายต่อคลิก (PPC)

Google Analytics แสดงอัตราตีกลับลดลงเมื่อเราเปิดตัวเวอร์ชันใหม่ในหน้าต่างๆ มากขึ้น

ในส่วนของผลกระทบในเมตริกธุรกิจ เราได้วิเคราะห์อัตรา Conversion สําหรับธุรกรรมต่างๆ เช่น การนัดทัวร์และการสมัครเพื่อเช่าหรือซื้ออสังหาริมทรัพย์ ขณะที่เรากำลังเปิดตัวการปรับปรุง ทีมของเราได้เปรียบเทียบ Conversion ระหว่างเวอร์ชันก่อนหน้าและเวอร์ชันใหม่ ในสัปดาห์เดียวกัน กลุ่มหน้าเว็บที่ใช้เวอร์ชันใหม่แสดง Conversion เพิ่มขึ้น 5% ขณะที่หน้าอื่นๆ ได้ลดลงเล็กน้อยในเมตริกเดียวกัน

ภายในสัปดาห์เดียวกัน Conversion ของเวอร์ชันใหม่เพิ่มขึ้น ขณะที่เวอร์ชันก่อนหน้านี้มีปริมาณ Conversion ลดลงเล็กน้อย

บทสรุป

โปรเจ็กต์นี้คือส่วนแรกของความพยายามในการย้ายข้อมูลในระยะยาวจาก React ที่ไม่มีเฟรมเวิร์กไปยัง Next.js ทีมที่ทำงานบนหน้าคอนโดมิเนียมนับตั้งแต่นั้นมาได้ให้ความคิดเห็นเชิงบวกเกี่ยวกับประสบการณ์ที่ดีขึ้นของนักพัฒนาซอฟต์แวร์ ส่วนทีมอื่นๆ ที่ต้องเปิดเว็บแอปใหม่ก็ใช้ Next.js เช่นกัน เราเชื่อว่า Next.js จะช่วยลดความซับซ้อนในการบำรุงรักษาและสร้างรากฐานร่วมกันระหว่างแอปต่างๆ

โดยรวมแล้ว ฮับเนื้อหาคอนโดมิเนียมได้เติบโตขึ้นอย่างต่อเนื่องในแง่ของจำนวนผู้ใช้และธุรกรรมทั้งหมด ในการวิเคราะห์ระยะยาว มีปัจจัยหลายอย่างที่ทำให้เกิดการเปลี่ยนแปลงดังกล่าว เช่น การขยายการดำเนินการของ QuintoAndar และการริเริ่มด้าน SEO เช่น การจัดทำดัชนีหน้าเว็บที่ได้รับการปรับปรุง ในโปรเจ็กต์นี้ เราพบว่าประสิทธิภาพของหน้าเว็บเป็นหนึ่งในปัจจัยเหล่านี้ที่มีโอกาสสร้างผลกระทบเชิงบวกให้กับ Conversion เป็นอย่างมาก

ขอขอบคุณ Pedro Carmo ผู้จัดการผลิตภัณฑ์ของทีม SEO ที่เจาะลึกข้อมูลผู้ใช้และสร้างการวิเคราะห์ Conversion ทั้งหมดที่แสดงในกรณีศึกษานี้