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

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

Daniela Sayuri Yassuda
Daniela Sayuri Yassuda

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) ของหน้าเว็บด้วย

หน้าคอนโดมิเนียมสำหรับ Edifício Copan (เซาเปาลู บราซิล) ภาพที่ถ่ายจากระดับพื้นดินแสดงเส้นโค้งของโครงสร้างอาคาร
รูปภาพหลักของหน้าคอนโดมิเนียม

ก่อนหน้านี้รูปภาพทั้งหมดมีแอตทริบิวต์ 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 นอกจากนี้ เรายังสร้างตัวยึดตำแหน่งเพื่อป้องกันไม่ให้คอมโพเนนต์ที่แสดงผลแบบไดนามิกเป็นสาเหตุให้เกิดการเปลี่ยนเลย์เอาต์

รูปภาพแสดงพื้นที่เมืองใน Google Maps ที่มีเครื่องหมายสีแดงอยู่ตรงกลาง
การกำหนดขนาดขององค์ประกอบ เช่น รูปภาพแผนที่ลด CLS

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

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

  1. ในช่วงแรก เราจะเผยแพร่เวอร์ชันใหม่สำหรับ URL ไม่กี่แห่งที่คัดสรรมาอย่างดี ทำให้มีผู้ใช้เพียงไม่กี่ร้อยคนต่อวันที่เห็น URL เหล่านั้น
  2. ในระยะที่ 2 มีการเผยแพร่ในหน้าเว็บเพิ่มเติม ซึ่งคิดเป็นผู้ใช้หลายพันคนต่อวัน
  3. ในระยะที่ 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%
ผลลัพธ์เมตริกจากห้องทดลองที่รวบรวมด้วย SpeedCurve

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

กราฟเส้นที่มีค่า LCP ซึ่งเปรียบเทียบเวอร์ชันใหม่กับเวอร์ชันก่อนหน้าในช่วงเดือนปัจจุบันและเดือนที่ผ่านมา เส้นโค้งสำหรับเวอร์ชันใหม่จะลอยอยู่ระหว่าง 2 ถึง 4 วินาที โดยมักจะอยู่ต่ำกว่าเส้นโค้งสำหรับเวอร์ชันก่อนหน้าเป็นส่วนใหญ่
แผนภูมิเส้นที่มีค่า FID ซึ่งเปรียบเทียบเวอร์ชันใหม่กับเวอร์ชันก่อนหน้าในช่วงเดือนปัจจุบันและเดือนที่ผ่านมา เส้นโค้งของเวอร์ชันใหม่จะต่ำกว่า 100 มิลลิวินาทีเกือบตลอดเวลา ขณะที่เส้นโค้งของเวอร์ชันเก่ามีจุดที่เพิ่มขึ้นสูงกว่า 250 มิลลิวินาทีอยู่ 2-3 จุด
ผลลัพธ์เมตริกภาคสนามที่รวบรวมด้วย Instana

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

ภาพหน้าจอของรายงาน PageSpeed Insights ที่เน้นส่วนข้อมูลภาคสนาม เมตริกทั้งหมดของ Core Web Vitals (FCP, FID, LCP, CLS) พร้อมใช้งานแล้ว
PageSpeed Insights แสดงให้เห็นว่าผู้ใช้อุปกรณ์เคลื่อนที่ได้รับประสบการณ์การใช้งานที่ดีในหน้าคอนโดมิเนียมที่มีการเข้าชมมากที่สุด

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

ภาพหน้าจอของกราฟจาก Google Analytics โดยจะเปรียบเทียบอัตราตีกลับระหว่าง 2 ระยะเวลาที่แตกต่างกันในเดือนมีนาคม 2021 ตั้งแต่วันที่ 17 มีนาคม อัตราตีกลับลดลงเล็กน้อย ยอดดูลดลงอย่างชัดเจนในวันที่ 24 มีนาคม
Google Analytics แสดงให้เห็นว่าอัตราตีกลับลดลงเมื่อเราเปิดตัวเวอร์ชันใหม่ในหน้าเว็บจํานวนมากขึ้น

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

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

บทสรุป

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

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

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