โปรเจ็กต์ที่มุ่งเน้นการเพิ่มประสิทธิภาพ Core Web Vitals และการย้ายข้อมูลไปยัง Next.js ทําให้อัตรา Conversion เพิ่มขึ้น 5% และหน้าเว็บต่อเซสชันเพิ่มขึ้น 87%
QuintoAndar เป็นบริษัท PropTech ของบราซิลที่มีผลิตภัณฑ์นำเสนอโซลูชันดิจิทัลแบบครบวงจรสำหรับธุรกิจอสังหาริมทรัพย์ ปีนี้เราได้ดำเนินโปรเจ็กต์ที่มุ่งเน้นที่การปรับปรุงประสิทธิภาพของฮับเนื้อหาในแอปของเรา และได้ผลลัพธ์ที่น่าพอใจในการเพิ่มการเข้าชมของผู้ใช้และเมตริก Conversion
46%
อัตราตีกลับลดลง
87%
จำนวนหน้าเว็บต่อเซสชันเพิ่มขึ้น
5%
การปรับปรุงของ Conversion ในขั้นตอนการตรวจสอบ
ความท้าทาย
แอปของเรามีศูนย์รวมเนื้อหาคอนโดมิเนียมที่มีมากกว่า 40,000 หน้า ซึ่งผู้ใช้สามารถดูข้อมูลเกี่ยวกับอสังหาริมทรัพย์ ดูรูปภาพของพื้นที่ส่วนกลาง อ่านข้อมูลเกี่ยวกับละแวกบ้าน และค้นหารายการที่พร้อมให้เช่าหรือขายได้ หน้าเหล่านี้มีความสำคัญมากสำหรับ QuintoAndar
- Conversion เป็นแหล่งที่มาที่สำคัญของการเข้าชมจากการค้นหาทั่วไป ซึ่งมีจำนวนผู้ใช้ที่มาจากผลการค้นหาของเครื่องมือค้นหาเพิ่มขึ้นอย่างต่อเนื่อง
- หน้าเว็บเหล่านี้มีอัตรา Conversion สูงในระยะกลางถึงระยะยาวเมื่อเทียบกับหน้าอื่นๆ
อย่างไรก็ตาม หน้าเหล่านี้ยังพบปัญหาด้านประสิทธิภาพและประสบการณ์ของผู้ใช้
- ประสิทธิภาพที่วัดโดย Core Web Vitals ไม่ได้รับการเพิ่มประสิทธิภาพ และมีปัญหาที่ทราบเกี่ยวกับการโหลดหน้าเว็บช้า การตอบสนองต่ออินพุตของผู้ใช้ช้า และความเสถียรของเลย์เอาต์
- อัตราตีกลับสูง แม้ว่าเราจะคาดไว้ว่าอัตราตีกลับจะสูงกว่าส่วนอื่นๆ ของแอป
- การอัปเดตประสบการณ์การใช้งานหน้าเว็บใน Google Search ซึ่งยังไม่ได้เผยแพร่ในขณะนั้นจะรวม Core Web Vitals ไว้ในอัลกอริทึมการจัดอันดับ ซึ่งหมายความว่าประสิทธิภาพของหน้าเว็บอาจส่งผลต่อวิธีแสดงผลการค้นหา
ในขณะเดียวกัน เรายังได้ระบุโอกาสบางอย่างเกี่ยวกับประสบการณ์ของนักพัฒนาแอปที่อาจช่วยเพิ่มผลกำไรในโปรเจ็กต์อื่นๆ ทั่วทั้งบริษัท ดังนี้
- ตรรกะการแสดงผลฝั่งเซิร์ฟเวอร์ของเราซึ่งแสดงผลหน้าที่มีการเข้าชมสูงทั้งหมด รวมถึงหน้าคอนโดมิเนียมนั้น สร้างขึ้นภายในบริษัท และมีความซับซ้อนเกินกว่าจะรักษาและให้พนักงานใหม่ว่าจ้างต่อไปได้
- ฟีเจอร์สําคัญเพื่อให้แอปมีประสิทธิภาพดี เช่น การแยกโค้ด ยังต้องมีการตั้งค่าที่กำหนดเองและการดำเนินการด้วยตนเองจากนักพัฒนาแอปด้วย
- QuintoAndar มีเว็บแอปพลิเคชัน React มากกว่า 30 รายการ การนำส่งการอัปเดตแอปพลิเคชันเหล่านี้และการดูแลรักษาให้เป็นไปตามแนวทางปฏิบัติแนะนำเป็นงานที่ยาก
แนวทาง
เราเริ่มโครงการเพิ่มประสิทธิภาพของศูนย์รวมเนื้อหาคอนโดมิเนียมเพื่อปรับปรุงประสบการณ์ของผู้ใช้ เนื่องจากการปรับปรุงเหล่านี้สามารถนำไปสู่การได้รับ Conversion เพิ่มขึ้น, SEO ที่ดีขึ้น และการใช้งานที่ดีขึ้น โครงการริเริ่มนี้ยังเป็นโอกาสที่ดีในการปรับปรุงประสบการณ์ของนักพัฒนาแอปด้วย
การย้ายข้อมูลไปยัง Next.js
หน้าคอนโดมิเนียมเวอร์ชันใหม่ติดตั้งใช้งานด้วย Next.js ฮับเนื้อหาคอนโดมิเนียมดูเป็นตัวเลือกที่ดีในการลองใช้เฟรมเวิร์กใหม่เนื่องจากมีความเป็นอิสระจากส่วนอื่นๆ ของแอปเป็นอย่างมาก เราจะเข้าใจความสำคัญของความพยายามในการย้ายข้อมูลและประเมินว่าฟีเจอร์ต่างๆ ของบริการนี้จะช่วยได้โดยไม่กระทบกับแอป React อื่นๆ ใน QuintoAndar
ข้อกําหนดที่ไม่อาจผ่อนปรนคือต้องช่วยให้เครื่องมือค้นหายังคงทำการ Crawl หน้าเว็บได้ Next.js มีคุณสมบัติตรงตามข้อกำหนดนี้โดยรองรับการแสดงผลฝั่งเซิร์ฟเวอร์โดยไม่ต้องแกะกล่อง และทำให้ไม่ต้องใช้การตั้งค่าแบบกำหนดเอง เอกสารประกอบช่วยให้แชร์ความรู้เกี่ยวกับวิธีทํางานต่างๆ เช่น การดึงข้อมูลบนเซิร์ฟเวอร์ และเริ่มต้นใช้งานนักพัฒนาแอปรายใหม่ได้ง่ายขึ้น การแสดงผลฝั่งเซิร์ฟเวอร์ยังเป็นที่รู้จักในด้านการปรับปรุงประสิทธิภาพเมตริกต่างๆ เช่น First Contentful Paint (FCP)
เฟรมเวิร์กนี้ยังมีฟีเจอร์อื่นๆ ที่ส่งผลดีต่อประสิทธิภาพ เช่น การแยกโค้ดและการโหลดล่วงหน้าโดยอัตโนมัติ แม้ว่าโครงสร้างที่มีอยู่จะมีฟีเจอร์ดังกล่าวอยู่แล้ว แต่งานเพิ่มเติมที่นักพัฒนาแอปต้องทำทำให้การนำฟีเจอร์ดังกล่าวไปใช้ล่าช้า เช่น คุณต้องแยกโค้ดที่ระดับหน้าเว็บหรือคอมโพเนนต์ด้วยตนเอง
การเพิ่มประสิทธิภาพทรัพยากร 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 ซึ่งเป็นระยะสุดท้าย เราได้เผยแพร่ URL สำหรับทุกหน้าเว็บ และการเปิดตัวเสร็จสมบูรณ์แล้วสำหรับผู้ใช้ทุกคน
ในระหว่างนี้ ทีมวิศวกรได้วัดประสิทธิภาพหน้าเว็บในเวอร์ชันที่ใช้งานจริงอย่างต่อเนื่องและดำเนินการปรับปรุงอย่างต่อเนื่อง นอกจากนี้ ทางทีมยังได้เปรียบเทียบเมตริกธุรกิจระหว่างเวอร์ชันใหม่กับเวอร์ชันก่อนหน้าอีกด้วย ผลลัพธ์ในระยะเวลาการตรวจสอบนี้มีความน่าพอใจ
ผลลัพธ์
ทีมใช้ SpeedCurve เพื่อเรียกใช้การทดสอบในห้องทดลองกับหน้าคอนโดมิเนียมอย่างต่อเนื่อง ต่อไปนี้คือผลการค้นหาสำหรับเวอร์ชันอุปกรณ์เคลื่อนที่
เมตริก Lab | ก่อน | หลัง | ความแตกต่าง |
---|---|---|---|
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 ทั้งหมดที่เห็นในกรณีศึกษานี้