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 สูงในระยะกลางถึงระยะยาวเมื่อเทียบกับหน้าอื่นๆ

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

  • ประสิทธิภาพที่วัดโดย 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) ของหน้าเว็บด้วย

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

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

ผลลัพธ์

ทีมใช้ 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%
ผลลัพธ์เมตริกจากห้องทดลองที่รวบรวมด้วย 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) อยู่ในกลุ่ม &quot;ดี&quot;
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 ทั้งหมดที่เห็นในกรณีศึกษานี้