โครงการที่มุ่งเน้นการเพิ่มประสิทธิภาพ Core Web Vitals และการเปลี่ยนไปใช้ Next.js ส่งผลให้อัตรา Conversion เพิ่มขึ้น 5% และจํานวนหน้าเว็บต่อเซสชันเพิ่มขึ้น 87%
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
นอกจากนี้ เรายังสร้างตัวยึดตำแหน่งเพื่อป้องกันไม่ให้คอมโพเนนต์ที่แสดงผลแบบไดนามิกทำให้เกิดการเปลี่ยนเลย์เอาต์ด้วย
การทยอยเปิดตัวการเปลี่ยนแปลง
ทีมของเราต้องการตรวจสอบว่าหน้าฮับคอนโดมิเนียมเวอร์ชันที่มีการเพิ่มประสิทธิภาพเพื่อให้แน่ใจว่าประสบการณ์ของผู้ใช้จะดีขึ้น เราจึงนำกลยุทธ์การเปิดตัวแบบก้าวหน้ามาใช้ ดังนี้
- ในช่วงแรก เวอร์ชันใหม่มีการเผยแพร่ URL ที่คัดสรรมาแล้วไม่กี่รายการ ทำให้มีเพียงผู้ใช้ไม่กี่ร้อยคนต่อวันที่เห็น URL เหล่านี้
- ส่วนในระยะที่ 2 มีการเผยแพร่หน้าเว็บเพิ่มเติม ซึ่งคิดเป็นผู้ใช้วันละ 2-3,000 คน
- ในระยะที่ 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% |
นอกจากนี้ เรายังอยากตรวจสอบผลกระทบต่อผู้ใช้จริงด้วย เราพิจารณาข้อมูลในช่วง 1 เดือนก่อนและหลังการเปิดตัวจากการใช้ข้อมูลภาคสนามที่รวบรวมด้วย Instana Website Monitoring เมื่อเปรียบเทียบเปอร์เซ็นไทล์ที่ 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 ทั้งหมดที่แสดงในกรณีศึกษานี้