โปรเจ็กต์ที่มุ่งเน้นการเพิ่มประสิทธิภาพ Core Web Vitals และการย้ายข้อมูลไปยัง Next.js ทําให้อัตรา Conversion เพิ่มขึ้น 5% และหน้าเว็บต่อเซสชันเพิ่มขึ้น 87%
QuintoAndar เป็นบริษัท PropTech ของบราซิลที่มีผลิตภัณฑ์นำเสนอโซลูชันดิจิทัลแบบครบวงจรสำหรับธุรกิจอสังหาริมทรัพย์ ปีนี้เราได้ดำเนินโปรเจ็กต์ที่มุ่งเน้นที่การปรับปรุงประสิทธิภาพของฮับเนื้อหาในแอปของเรา และได้ผลลัพธ์ที่น่าพอใจในการเพิ่มการเข้าชมของผู้ใช้และเมตริก 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 จะช่วยได้มากน้อยเพียงใดโดยไม่ส่งผลต่อแอป React อื่นๆ ใน QuintoAndar
ข้อกําหนดที่ไม่อาจผ่อนปรนคือต้องช่วยให้เครื่องมือค้นหาทำการ Crawl หน้าเว็บได้ Next.js มีคุณสมบัติตรงตามข้อกําหนดนี้ด้วยการรองรับการแสดงผลฝั่งเซิร์ฟเวอร์โดยค่าเริ่มต้น และไม่ต้องตั้งค่าเอง เอกสารประกอบช่วยให้แชร์ความรู้เกี่ยวกับวิธีทํางานต่างๆ เช่น การดึงข้อมูลบนเซิร์ฟเวอร์และเริ่มต้นใช้งานนักพัฒนาแอปรายใหม่ได้ง่ายขึ้น นอกจากนี้ การแสดงผลฝั่งเซิร์ฟเวอร์ยังช่วยปรับปรุงประสิทธิภาพของเมตริกต่างๆ เช่น First Contentful Paint (FCP)
เฟรมเวิร์กนี้ยังมีฟีเจอร์อื่นๆ ที่ส่งผลดีต่อประสิทธิภาพ เช่น การแยกโค้ดและprefetchingอัตโนมัติ แม้ว่าโครงสร้างที่มีอยู่จะมีฟีเจอร์ดังกล่าวอยู่แล้ว แต่งานเพิ่มเติมที่นักพัฒนาแอปต้องทำทำให้การนำฟีเจอร์ดังกล่าวไปใช้ล่าช้า เช่น คุณต้องแยกโค้ดที่ระดับหน้าเว็บหรือคอมโพเนนต์ด้วยตนเอง
การเพิ่มประสิทธิภาพทรัพยากร JavaScript
ขั้นตอนแรกคือนำโค้ดที่ไม่ได้ใช้งานออก เราได้ตรวจสอบรายงานWebpack Bundle Analyzer ซึ่งแสดงเนื้อหาของ JS Bundle แต่ละรายการ และตรวจสอบสคริปต์ของบุคคลที่สามทั้งหมดอย่างละเอียด ด้วยเหตุนี้ เราจึงล้างไลบรารีการติดตามบางรายการที่ไม่ได้ใช้ในหน้านี้
ทีมของเราได้ดำเนินการต่อและประเมินต้นทุนด้านประสิทธิภาพของฟีเจอร์ที่มีอยู่ เช่น ปุ่ม "ชอบ" ต้องใช้ 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 เท่าประมาณ 50%
สุดท้าย เราใช้กลยุทธ์การโหลดล่วงหน้าเพื่อดาวน์โหลดและแสดงโฆษณาโดยเร็วที่สุด หวังว่าจะปรับปรุงเมตริก LCP ได้
<link rel="preload" href="/img/450x450/892847321-143.0038687080606IMG20180420WA0037.jpg" as="image">
คอมโพเนนต์รูปภาพที่ฝังอยู่ใน Next.js มีการเพิ่มประสิทธิภาพหลายอย่าง เช่น การปรับขนาดที่ตอบสนองตามอุปกรณ์และการโหลดแบบมีลำดับความสำคัญ ในระหว่างโปรเจ็กต์นี้ เราไม่ได้ทำย้ายข้อมูลรูปภาพที่มีอยู่เพื่อใช้คอมโพเนนต์นี้ แต่เราวางแผนที่จะนำคอมโพเนนต์นี้ไปใช้กับฟีเจอร์ใหม่ๆ
การลดการเปลี่ยนแปลงเลย์เอาต์
หน้าคอนโดมิเนียมมีปัญหาเล็กน้อยเกี่ยวกับการเปลี่ยนเลย์เอาต์สะสม (CLS) องค์ประกอบที่รับผิดชอบต่อการเปลี่ยนแปลงเลย์เอาต์จะแสดงผลในไคลเอ็นต์เท่านั้น เช่น การไฮเดรตมาร์กอัปฝั่งเซิร์ฟเวอร์ด้วยคอมโพเนนต์ที่แสดงผลโดยไคลเอ็นต์ หรือรูปภาพที่ไม่มีการกำหนดแอตทริบิวต์ width
และ height
ในการแก้ปัญหาเหล่านี้ เราจะกำหนดขนาดที่แน่นอนสำหรับองค์ประกอบเหล่านี้เมื่อเป็นไปได้ หรือใช้ค่าโดยประมาณที่มี min-height
แต่ยังมีตัวเลือกอื่นๆ อีกมากมาย เช่น การใช้พร็อพเพอร์ตี้ CSS aspect-ratio
นอกจากนี้ เรายังสร้างตัวยึดตําแหน่งเพื่อป้องกันไม่ให้คอมโพเนนต์ที่แสดงผลแบบไดนามิกทําให้เลย์เอาต์เปลี่ยน

เปิดตัวการเปลี่ยนแปลงทีละน้อย
ทีมของเราต้องการยืนยันว่าหน้าฮับคอนโดมิเนียมเวอร์ชันที่เพิ่มประสิทธิภาพแล้วจะช่วยให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดีขึ้น เราใช้กลยุทธ์การเปิดตัวแบบค่อยเป็นค่อยไปเพื่อให้บรรลุเป้าหมายนี้
- ในระยะแรก เราได้เผยแพร่เวอร์ชันใหม่สำหรับ URL เพียงไม่กี่รายการที่คัดสรรมาเอง ดังนั้นจะมีผู้ใช้เพียงไม่กี่ร้อยคนต่อวันที่เห็น URL ดังกล่าว
- ในระยะที่ 2 มีการเผยแพร่ในหน้าเว็บเพิ่มเติม ซึ่งคิดเป็นผู้ใช้หลายพันคนต่อวัน
- ในเฟสที่ 3 ซึ่งเป็นเฟสสุดท้าย เราได้เผยแพร่ฟีเจอร์นี้ในหน้าเว็บทั้งหมด และเปิดตัวฟีเจอร์นี้ให้กับผู้ใช้ทุกคนแล้ว
ในระหว่างนี้ ทีมวิศวกรได้วัดประสิทธิภาพหน้าเว็บในเวอร์ชันที่ใช้งานจริงอย่างต่อเนื่องและดำเนินการปรับปรุงอย่างต่อเนื่อง นอกจากนี้ ทีมยังเปรียบเทียบเมตริกทางธุรกิจระหว่างเวอร์ชันใหม่กับเวอร์ชันเก่าด้วย ผลลัพธ์ในระยะเวลาการตรวจสอบนี้มีความน่าสนใจ
ผลลัพธ์
ทีมใช้ 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% |
นอกจากนี้ เรายังต้องการตรวจสอบผลกระทบต่อผู้ใช้จริงด้วย จากการใช้ข้อมูลภาคสนามที่รวบรวมด้วยการตรวจสอบเว็บไซต์ของ Instana เราพิจารณาระยะเวลา 1 เดือนก่อนและหลังการเปิดตัว เมื่อเปรียบเทียบเปอร์เซ็นไทล์ที่ 75 ของผู้ใช้อุปกรณ์เคลื่อนที่ เราพบว่า LCP ลดลง 26% และ FID ลดลง 72%


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

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

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

บทสรุป
โปรเจ็กต์นี้เป็นช่วงแรกของความพยายามในการย้ายข้อมูลจาก React แบบไม่มีเฟรมเวิร์กไปยัง Next.js ในระยะยาว ทีมที่ทำงานเกี่ยวกับหน้าคอนโดมิเนียมนับตั้งแต่นั้นมาต่างให้ความคิดเห็นเชิงบวกเกี่ยวกับประสบการณ์การใช้งานที่ดีขึ้นสำหรับนักพัฒนาแอป ทีมอื่นๆ ที่ต้องเริ่มต้นใช้งานเว็บแอปใหม่ได้ดำเนินการด้วย Next.js แล้ว เราเชื่อว่า Next.js จะช่วยให้การดูแลรักษาง่ายขึ้นและสร้างรากฐานร่วมกันระหว่างแอปต่างๆ
โดยรวมแล้ว ฮับเนื้อหาคอนโดมิเนียมมีการเติบโตอย่างต่อเนื่องในแง่ของจำนวนผู้ใช้และธุรกรรม ในการวิเคราะห์ระยะยาว มีหลายปัจจัยที่ส่งผลให้เกิดเหตุการณ์นี้ เช่น การขยายการดำเนินงานของ QuintoAndar และโครงการริเริ่มด้าน SEO เช่น การปรับปรุงการจัดทําดัชนีหน้าเว็บ ในระหว่างโปรเจ็กต์นี้ เราพบว่าประสิทธิภาพของหน้าเว็บเป็นหนึ่งในปัจจัยเหล่านี้ที่มีศักยภาพสูงในการทำให้เกิด Conversion ในเชิงบวก
ขอขอบคุณเป็นพิเศษ Pedro Carmo ผู้จัดการผลิตภัณฑ์ของทีม SEO ที่ให้ความร่วมมือในการวิเคราะห์ข้อมูลผู้ใช้และสร้างการวิเคราะห์ Conversion ทั้งหมดที่เห็นในกรณีศึกษานี้