การโต้ตอบกับสีถัดไป: มันคืออะไรและทำอย่างไร?

คุณเคยประสบปัญหาเว็บไซต์หรือแอปที่ช้าและไม่ตอบสนองหรือไม่?

บางทีคุณอาจคลิกปุ่มและใช้เวลานานก่อนที่บางสิ่งบางอย่างจะปรากฏบนหน้าจอ นั่นเป็นประสบการณ์ที่น่าหงุดหงิดใช่ไหม?

นั่นคือสิ่งที่ “การโต้ตอบกับสีถัดไป” (INP) เป็นเรื่องเกี่ยวกับ

การโต้ตอบกับ Next Paint (INP) เป็นตัวชี้วัดใหม่ที่ Google ใช้เพื่อประเมินว่าเว็บไซต์ของคุณตอบสนองต่ออินพุตของผู้ใช้เร็วแค่ไหน ในวันที่ 12 มีนาคม 2024 เกณฑ์ดังกล่าวได้กลายเป็นหนึ่งในเกณฑ์ Core Web Vitals ที่ส่งผลต่อการจัดอันดับของ Google

ทำไมเรื่องนี้ถึงสำคัญ?

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

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

มาตรวจสอบ INP แบบเจาะลึกและสำรวจวิธีวัดผลเพื่อปรับปรุงคะแนนที่มีอยู่ของคุณกัน

การโต้ตอบกับ Next Paint (INP) คืออะไร?

การโต้ตอบกับ Next Paint (INP) คือการวัดประสิทธิภาพเว็บที่นับเวลาระหว่างการโต้ตอบของผู้ใช้ (เช่น การคลิก แตะ หรือการเลื่อน) และครั้งถัดไปที่พิกเซลถูกวาดบนหน้าจออันเป็นผลมาจากการโต้ตอบนั้น

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

สำหรับการโต้ตอบกับผู้ใช้ส่วนใหญ่ ค่า INP ที่แนะนำคือน้อยกว่า 200 มิลลิวินาที (ms) ค่า INP ที���มากกว่า 300ms ถือว่าไม่ดี และผู้ใช้จะมองว่าช้า

การโต้ตอบกับ Next Paint ในฐานะ Core Web Vital

การโต้ตอบกับ Next Paint เปิดตัวเป็นหนึ่งในสามเมตริก Google Core Web Vitals เมื่อวันที่ 12 มีนาคม 2024 โดยมาแทนที่เมตริก First Input Delay ก่อนหน้านี้

เนื่องจากเป็นเมตริก Core Web Vitals การโต้ตอบกับ Next Paint ที่ไม่ดีอาจส่งผลต่ออันดับการค้นหาของ Google

การโต้ตอบกับสีถัดไปแตกต่างจากความล่าช้าในการป้อนข้อมูลครั้งแรกอย่างไร

INP เป็นตัววัดที่สืบทอดมาจาก First Input Delay (FID) ทั้งสองอย่างเป็นเมตริกการตอบสนอง

FID และ INP แตกต่างกันในสองวิธี:

• FID วัดเฉพาะความล่าช้าในการประมวลผลครั้งแรก ในขณะที่ INP วัดระยะเวลาทั้งหมดระหว่างอินพุตของผู้ใช้และการอัปเดต UI
• FID เพียงนับการโต้ตอบของผู้ใช้ครั้งแรกบนหน้าเว็บ แต่ INP จะพิจารณา (โดยประมาณ) เวลาแฝงที่ยิ่งใหญ่ที่สุด

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

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

โดยทั่วไปการโต้ตอบกับ Next Paint จะประเมินเวลาแฝงของอินพุตที่เลวร้ายที่สุดบนเพจ อย่างไรก็ตาม หากมีการพบผู้ใช้จำนวนมาก ค่าผิดปกติจะถูกละทิ้ง และ Google จะประเมินเปอร์เซ็นไทล์ที่ 98 สำหรับความล่าช้าในการโต้ตอบ

ดังนั้น หาก INP ของเพจคือ 250 มิลลิวินาที การโต้ตอบของผู้ใช้ 2% จะมีเวลาในการตอบสนองมากกว่านั้น

การโต้ตอบกับ Next Paint (INP) ทำงานอย่างไร

INP เป็นตัวชี้วัดการตอบสนองที่เน้นไปที่เวลาที่ผ่านไประหว่างการโต้ตอบของผู้ใช้ โดยจะวัดความเร็วที่องค์ประกอบของหน้าเว็บตอบสนองเมื่อมีการดำเนินการบางอย่างกับองค์ประกอบนั้น

นี่คือวิธีการทำงานของ INP:

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

คะแนน INP ที่ต่ำบ่งชี้ว่าหน้าเว็บตอบสนองต่ออินพุตของผู้ใช้อย่างมาก INP มีความสำคัญเนื่องจากเป็นส่วนหนึ่งของ Core Web Vitals เนื่องจากเหตุผลต่อไปนี้

• ปรับปรุงประสบการณ์ผู้ใช้:คะแนน INP ที่สูงบ่งชี้ว่าผู้เยี่ยมชมต้องรอเป็นเวลานานกว่าที่หน้าเว็บจะตอบสนองต่อกิจกรรมของตน ซึ่งอาจสร้างความรำคาญได้

• SEO (การปรับแต่งเว็บไซต์ให้ติดอันดับบนเครื่องมือการค้นหา):INP และ Core Web Vitals อื่นๆ เป็นส่วนหนึ่งของสัญญาณประสบการณ์การใช้งานหน้าเว็บของ Google ซึ่งส่งผลต่อการจัดอันดับเว็บไซต์ในหน้าผลการค้นหา สิ่งนี้เน้นย้ำถึงความสำคัญของ INPตัวชี้วัด SEO.

• ลดอัตราตีกลับ:เวลาในการโหลดช้าอาจทำให้ลูกค้าออกจากเพจ ส่งผลให้ผลกำไรของบริษัทลดลง

INP มีการวัดผลอย่างไร?

INP ติดตามเวลาที่ผ่านไประหว่างอินพุตของผู้ใช้ เช่น การคลิกและการกดแป้นพิมพ์ และการอัปเดต UI ครั้งถัดไป ความล่าช้านี้มีสามองค์ประกอบ:

ก. ความล่าช้าในการป้อนข้อมูล

กำลังรอการดำเนินการเบื้องหลังบนเว็บไซต์เพื่อป้องกันไม่ให้ตัวจัดการเหตุการณ์ทำงาน

ข. ระยะเวลาดำเนินการ

การดำเนินการจัดการเหตุการณ์ใน JavaScript

ค. การนำเสนอล่าช้า

การจัดการกับการดำเนินการอื่นๆ ที่ค้างอยู่ การคำนวณเค้าโครงหน้าใหม่ และการลงสีเนื���อหาของหน้า INP มีหน่วยวัดเป็นมิลลิวินาที (ms) เกณฑ์มาตรฐานที่ดีคือน้อยกว่า 200 มิลลิวินาที และอะไรก็ตามที่อยู่ระหว่างนั้นถึง 500 มิลลิวินาทีถือว่าจำเป็นต้องได้รับการปรับปรุง เวลาแฝง 500 ms ขึ้นไปถือว่าไม่ดี

ตัวแปรหลายตัวมีอิทธิพลต่อค่า INP รวมถึงขนาดและความซับซ้อนของหน้าเว็บ ตลอดจนจำนวนไฟล์ JavaScript และ CSS ที่โหลด

คุณอาจใช้เครื่องมือมากมายในการประเมินการโต้ตอบกับ Next Paint เช่น:

• การทดสอบความเร็วเว็บไซต์ของ DebugBear
• ข้อมูลเชิงลึกเกี่ยวกับความเร็วของหน้า Google
• ส่วนขยาย Chrome ความเร็วไซต์ของเรา
• ดีบักเกอร์ INP
• Google Search Console
• ไลบรารี Web Vitals

เครื่องมือทดสอบความเร็วเว็บไซต์สามารถช่วยคุณกำหนดค่า INP ของเว็บไซต์ได้ แอปพลิเคชันประเภทนี้ให้ข้อมูลประสิทธิภาพการทำงานของเมตริก Core Web Vitals และให้คำแนะนำวิธีเพิ่มประสิทธิภาพ

Google PageSpeed ​​Insights เป็น���ครื่องมือยอดนิยมสำหรับการวิเคราะห์ INP และประสิทธิภาพของเว็บไซต์. จะประเมินไซต์และให้คำแนะนำเกี่ยวกับแนวทางปฏิบัติที่ดีที่สุดที่จะนำไปใช้ คุณยังสามารถตรวจสอบความเร็วที่เว็บไซต์ของคุณโหลดบนอุปกรณ์มือถือและเดสก์ท็อปได้อีกด้วย

PageSpeed ​​Insights นำเสนอการค้นพบสองประเภท ส่วนบนสุดจะแสดงเมตริก Core Web Vitals ของเว็บไซต์จากรายงาน Chrome UX ซึ่งเป็นชุดเมตริกประสิทธิภาพในชีวิตจริงจากผู้ใช้ Chrome

ค่าที่แสดงในรายงานด้านล่างมาจากการตั้งค่าห้องปฏิบัติการที่ได้รับการควบคุมซึ่งใช้ Google Lighthouse ข้อมูลนี้อาจใช้เพื่อทดสอบฟีเจอร์ใหม่ๆ ก่อนที่จะเผยแพร่

หากไม่มีข้อมูล INP ของไซต์ ให้ดูที่ Total Blocking Time (TBT) ตัวชี้วัดนี้จะประเมินการตอบสนองรูปแบบใหม่ โดยเน้นที่ระยะเวลาที่เว็บไซต์ไม่ตอบสนองต่อการโต้ตอบของผู้ใช้ขณะโหลด

ในส่วนด้านล่าง มีแนวคิดเกี่ยวกับวิธีปรับปรุงเมตริก Core Web Vitals ดังนี้

จะปรับให้เหมาะสมสำหรับการโต้ตอบกับสีถัดไป (INP) ได้อย่างไร

ดังนั้น เพื่อเพิ่มประสิทธิภาพ INP คุณต้องลดความซับซ้อนและจัดลำดับความสำคัญของรายการสิ่งที่ต้องทำสำหรับเธรดหลักให้มากที่สุด ต่อไปนี้เป็นกลยุทธ์หลักและวิธีการเพิ่มประสิทธิภาพสำหรับค่าการโต้ตอบกับสีถัดไป (INP) ที่ได้รับการปรับปรุงและเพิ่มการตอบสนอง:

ก. ปรับปรุงประสิทธิภาพ JavaScript

จาวาสคริปต์เป็นองค์ประกอบสำคัญของเว็บไซต์หลายแห่ง มีองค์ประกอบแบบโต้ตอบมากมาย อย่างไรก็ตามมันยังสามารถชะลอความเร็วของเว็บไซต์ได้อีกด้วย

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

เพื่อปรับปรุงการตอบสนอง ให้เพิ่มประสิทธิภาพ JavaScript ของคุณ คุณสามารถทำได้โดย:

• การลดขนาดไฟล์ JavaScriptลดจำนวน JavaScript ทำให้สามารถโหลดได้มากขึ้นอย่างรวดเร็ว.

• เปิดใช้งานการบีบอัด GZipอีกวิธีทั่วไปในการบีบอัดไฟล์และข้อมูลเว็บไซต์

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

• การใช้ CDNเทคโนโลยีนี้เรียกว่าเครือข่ายการจัดส่งเนื้อหา ซึ่งจะกระจายไฟล์ JavaScript ของคุณจากเซิร์ฟเวอร์ที่ตั้งอยู่ใกล้กับกลุ่มเป้าหมายของคุณ ส่งผลให้เวลา���นการโหลดเร็วขึ้น

JavaScript ที่ไม่มีประสิทธิภาพสามารถบล็อกเธรดหลัก ทำให้เกิดความล่าช้าในการแสดงผล การแยกโค้ด การโหลดแบบ Lazy Loading การใช้พนักงานเว็บ และการหลีกเลี่ยงการดำเนินการที่ยาวนานบนเธรดหลัก ล้วนเป็นทางเลือกในการลดความล่าช้าของ JavaScript

ข. ใช้คนทำงานเว็บ

พนักงานเว็บเป็นบริการที่อนุญาตให้ JavaScript ทำงานโดยอิสระจากเธรดหลัก มีประโยชน์สำหรับการรันงานที่ซับซ้อนในเบื้องหลัง

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

อีกวิธีหนึ่งในการหลีกเลี่ยงไม่ให้เธรดหลักค้างคือการแบ่งงาน JavaScript ขนาดใหญ่ออกเป็นส่วนย่อยๆ

ค. ทำลายงานที่ยาวนาน

การแบ่งงานขนาดใหญ่ช่วยให้เว็บเบราว์เซอร์สามารถจัดการงานเหล่านั้นเป็นส่วนเล็กๆ ได้ในแต่ละครั้ง เป็นผลให้เธรดหลักมีอิสระในการปฏิบัติหน้าที่ที่สำคัญกว่า

ดังที่คุณทราบ งานที่มีความยาวจะบล็อกเธรดหลัก ป้องกันไม่ให้เบราว์เซอร์ทำกิจกรรมโต้ตอบ ถึงปรับปรุงการตอบสนองของไซต์ของคุณลดความเครียดบนด้ายหลัก และลองแยกการทำงานขนาดใหญ่ออก

ด้วยการแบ่งกิจกรรมขนาดใหญ่ออกเป็นบิตเล็กๆ เธรดหลักจึงสามารถทำงานอื่นๆ และตอบสนองต่อการโต้ตอบของผู้ใช้ได้รวดเร็วยิ่งขึ้น

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

ง. จัดลำดับความสำคัญความพร้อมในการป้อนข้อมูล

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

ต่อไปนี้คือวิธีจัดลำดับความสำคัญของความพร้อมในการป้อนข้อมูลและเพิ่ม INP:

1. JavaScript ที่ไม่สำคัญจะถูกเลื่อนออกไป

จาวาสคริปต์บางตัวไม่จำเป็นสำห��ับการโหลดหน้าเริ่มต้น และสามารถดำเนินการได้หลังจากหน้าหลักเนื้อหา. ซึ่งช่วยให้เธรดหลักจัดลำดับความสำคัญของการโต้ตอบของผู้ใช้ และเพิ่มการตอบสนองของเพจโดยรวม

2. การควบคุมปริมาณ

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

3. การเด้งกลับ

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

4. ผู้ฟังกิจกรรมที่ไม่ได้เข้าร่วม

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

จ. ให้ข้อเสนอแนะทันที

กิจกรรมบางอย่าง เช่น การกรอกแบบฟอร์มโดยป้อนข้อมูลหลายรายการ อาจส่งผลให้การตอบสนองล่าช้าอย่างมาก

นั่นคือที่มาของการตอบรับทันที กลยุทธ์นี้ช่วยให้ลูกค้ามองเห็นได้ว่าเว็บไซต์ได้รับแล้วและกำลังดำเนินการตามคำขอของพวกเขา

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

ลองดูตัวอย่างข้อเสนอแนะสั้นๆ เหล่านี้:

1. ตัวบ่งชี้การโหลด

แสดงสปินเนอร์หรือแถบความคืบหน้าเมื่อกระบวนการกำลังทำงานอยู่ โดยเฉพาะอย่างยิ่งเมื่อนำเสนอข้อมูลหร��อสลับไปยังหน้าใหม่

2. ข้อความรับทราบป๊อปอัป

เป็นความคิดที่ดีที่จะแสดงข้อความยืนยันว่าการดำเนินการ เช่น การเพิ่มสินค้าลงในรถเข็น เสร็จสมบูรณ์แล้ว

3. การตรวจสอบความถูกต้องของฟิลด์แบบฟอร์ม

ตัวอย่างเช่น หากผู้ใช้��้อนที่อยู่อีเมลที่มีรูปแบบไม่ถูกต้อง ให้แสดงการแจ้งเตือนข้อผิดพลาดทันที แทนที่จะรอจนกว่าจะส่งแบบฟอร์ม

บทสรุป

ปิดท้ายด้วยการนำเสนอประสบการณ์การใช้งานที่ยอดเยี่ยมบนเว็บมีสิ่งหนึ่งที่สำคัญ: การตอบสนอง ความเร็วที่เว็บไซต์หรือแอปของคุณตอบสนองต่อเหตุการณ์ของผู้ใช้ เช่น การคลิก การแตะ และการเรียกดู สามารถกำหนดได้ว่าเป็นประสบการณ์ที่สนุกสนานหรือช้าอย่างน่าหงุดหงิด

นั่นคือเหตุผลที่การปรับเวลาโต้ตอบไปยังสีถัดไป (INP) อย่างรวดเร็วจึงมีความสำคัญมาก INP ติดตามนาทีสำคัญระหว่างเวลาที่มีคนโต้ตอบกับเว็บไซต์ของคุณและเมื่อพวกเขาได้รับการยืนยันด้วยภาพบนหน้าจอ ยิ่ง INP ต่ำ ทุกอย่างก็จะดูเร็วขึ้นและตอบสนองได้ดีขึ้น

ดังนั้นไปข้างหน้าและปลดล็อคพลังของ INP ที่ปรับให้เหมาะสมแล้ว!

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

คำถามที่พบบ่อย