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

แก้ไขล่าสุดเมื่อ 02/11/2025

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

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

นั่นคือสิ่งที่”การโต้ตอบกับ Next Paint” (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% จะมีเวลาในการตอบสนองมากกว่านั้น

การโต้ตอบกับการวาดถัดไป (INP) ทำงานอย่างไร

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• การทดสอบความเร็วเว็บไซต์ของ DebugBear
• ข้อมูลเชิงลึกความเร็ว Google Page
• ส่วนขยาย 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 คุณต้องลดความซับซ้อนและจัดลำดับความสำคัญของรายการสิ่งที่ต้องทำสำหรับเธรดหลักให้มากที่สุด ต่อไปนี้เป็นกลยุทธ์หลักและวิธีเพิ่มประสิทธิภาพเพื่อปรับปรุงค่า Interaction to Next Paint (INP) และเพิ่มการตอบสนอง:

ก. ปรับปรุงประสิทธิภาพของจาวาสคริปต์

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

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

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

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

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

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

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

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

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

Web workers คือบริการที่ช่วยให้ JavaScript สามารถทำงานได้อย่างอิสระจากเธรดหลัก มีประโยชน์สำหรับการรันงานที่ซับซ้อนในเบื้องหลัง

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

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

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

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

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

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

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

ง. จัดลำดับความสำคัญความพร้อมอินพุต

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

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

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

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

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

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

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

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

4. ผู้ฟังเหตุการณ์ที่ไม่ได้เข้าร่วมอย่างแข็งขัน

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

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

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

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

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

ตรวจสอบอินสแตนซ์ของสัญญาณตอบรับด่วนเหล่านี้:

1. ตัวชี้วัดโหลด

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

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

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

3. การตรวจสอบฟิลด์แบบฟอร์ม

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

สรุป

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

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

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

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

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