การโต้ตอบกับ Next Paint (INP): คู่มือทางเทคนิคฉบับสมบูรณ์และมาตรฐานการเพิ่มประสิทธิภาพ

การโต้ตอบกับ Next Paint (INP) เป็นตัวชี้วัดอย่างเป็นทางการของ Google Core Web Vital ที่นำมาใช้เพื่อประเมินการตอบสนองอินเทอร์เฟซโดยรวมของหน้าเว็บ

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

ตอบ-สรุปข้อแรก

Interaction to Next Paint (INP) คือตัววัด Core Web Vital ที่วัดเวลาที่ผ่านไปนับจากเวลาที่ผู้ใช้โต้ตอบกับเพจ (การคลิก แตะ หรือกดปุ่ม) จนกระทั่งเบราว์เซอร์แสดงเฟรมภาพที่อัปเดตไปยังหน้าจอเวลาแฝงของ INP ประกอบด้วยสามส่วนย่อย: ความล่าช้าในการป้อนข้อมูล ระยะเวลาการประมวลผล และความล่าช้าในการนำเสนอคะแนน INP ที่ผ่านคือ 200 มิลลิวินาทีหรือน้อยกว่าที่เปอร์เซ็นไทล์ที่ 75 ของการเข้าชมโดยผู้ใช้จริงในเดือนมีนาคม 2024 INP ได้เข้ามาแทนที่ First Input Delay (FID) อย่างเป็นทางการในอัลกอริทึมการจัดอันดับการค้นหาของ Google

เกณฑ์คะแนน INP และระดับการให้คะแนน

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

ดี: $\le 200\text {ms} $ (สีเขียว) - การตอบสนอง UI ที่รวดเร็วและลื่นไหลซึ่งผู้ใช้รู้สึกได้ทันที
จำเป็นต้องปรับปรุง: $> 200\text {ms} $ และ $\le 500\text {ms} $ (สีเหลืองอำพัน) - ความล่าช้าที่เห็นได้ชัดเจนระหว่างการคลิกหรือการแตะซึ่งส่งผลต่อการมีส่วนร่วมของผู้ใช้
แย่: $> 500\text {ms} $ (สีแดง) - อินเทอร์เฟซค้างอย่างรุนแรงและการบล็อกเธรดหลักซึ่งทำให้ผู้ใช้หงุดหงิดและอัตราตีกลับสูง

INP เวลาแฝง	คะแนนประสิทธิภาพ	ผลกระทบต่อประสบการณ์ผู้ใช้	สถานะการจัดอันดับการค้นหาของ Google
$\le 200\ข้อความ {ms} $	ดี	การตอบสนองด้วยภาพทันทีเมื่อแตะหรือคลิก	คะแนนผ่านเต็มสำหรับการประเมิน Core Web Vitals
$201\ข้อความ {ms} - 500\ข้อความ {ms} $	จำเป็นต้องปรับปรุง	ปฏิสัมพันธ์ที่ล้าหลัง;การอัปเดตสถานะ UI ล่าช้าอย่างเห็นได้ชัด	อาจได้รับการลงโทษในการจัดอันดับคำหลักที่แข่งขันกัน
$> 500\ข้อความ {ms} $	แย่	ปุ่มไม่ตอบสนอง UI ที่ค้าง และการหยุดชะงักของเธรดหลัก	ไม่ผ่านการประเมิน Core Web Vitalsการลงโทษการจัดอันดับที่ใช้งานอยู่

องค์ประกอบสามประการของความล่าช้าในการโต้ตอบ INP

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

ความล่าช้าในการป้อนข้อมูล: เวลาที่ผ่านไประหว่างเวลาที่ผู้ใช้เริ่มต้นการโต้ตอบทางกายภาพ (คลิก แตะ หรือกดปุ่ม) และเมื่อเธรดหลักของเบราว์เซอร์เริ่มดำเนินการตัวจัดการเหตุการณ์ที่เกี่ยวข้องความล่าช้าในการป้อนข้อมูลมีสาเหตุหลักมาจากความแออัดของเธรดหลักจากงาน JavaScript พื้นหลังยาวที่ทำงานระหว่างการโหลดเพจหรือการแสดงผลส่วนประกอบอีกครั้ง
ระยะเวลาการประมวลผล: เวลาที่ใช้ในการรันโค้ด JavaScript ภายใน Listener เหตุการณ์ที่ลงทะเบียนทั้งหมดสำหรับการโต้ตอบนั้น (เช่น onclick , onkeydown หรือตัวจัดการการอัปเดตสถานะปฏิกิริยาของเฟรมเวิร์ก)
ความล่าช้าในการนำเสนอ: เวลาที่ผ่านไปหลังจากที่ตัวจัดการเหตุการณ์เสร็จสมบูรณ์จนกว่าเบราว์เซอร์จะคำนวณรูปแบบใหม่ เค้าโครง ลงสีพิกเซลที่อัปเดต และแสดงเฟรมภาพถัดไปบนฮาร์ดแวร์แสดงผลของผู้ใช้

ในทางคณิตศาสตร์ เวลาแฝง INP ทั้งหมดสำหรับการโต้ตอบครั้งเดียวจะแสดงเป็น:

$$\text{INP Latency} = \text{ความล่าช้าในการป้อนข้อมูล} + \text{ระยะเวลาการประมวลผล} + \text{ความล่าช้าในการนำเสนอ}$$

เหตุใด Google จึงแทนที่ FID ด้วย INP ในเดือนมีนาคม 2024

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

ขอบเขตการโต้ตอบเดี่ยว: FID ละเว้นการโต้ตอบของผู้ใช้ที่ตามมาทั้งหมดหลังจากโหลดหน้าเว็บ ไม่สามารถจับภาพความล่าช้าระหว่างการนำทางฝั่งไคลเอ็นต์ของแอปพลิเคชันหน้าเดียวที่ซับซ้อน (SPA)
การวัดเวลาแฝงที่ไม่สมบูรณ์: FID วัดเฉพาะความล่าช้าของอินพุต โดยไม่สนใจเวลาการประมวลผลและความล่าช้าในการนำเสนอโดยสิ้นเชิงตัวจัดการเหตุการณ์ที่ใช้เวลา 2,000 มิลลิวินาทีในการดำเนินการได้รับคะแนน FID ที่ผ่าน หากความล่าช้าในการป้อนข้อมูลเริ่มต้นต่ำกว่า 50 มิลลิวินาที

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

การโต้ตอบของผู้ใช้ที่มีคุณสมบัติตามที่กำหนดกับเหตุการณ์ที่ไม่เข้าเกณฑ์

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

ปฏิสัมพันธ์ที่วัดได้

การคลิกเมาส์: การคลิกที่ปุ่ม ลิงก์ การควบคุมแบบฟอร์ม หรือส่วนประกอบแบบโต้ตอบที่กำหนดเอง
การแตะหน้าจอสัมผัส: การแตะองค์ประกอบบนอุปกรณ์เคลื่อนที่หรือแท็บเล็ต
การกดแป้นพิมพ์: การกดแป้นบนแป้นพิมพ์จริงหรือเสมือน (เช่น Enter , Space หรือแป้นตัวอักษรและตัวเลขในการป้อนข้อความ)

เหตุการณ์ที่ไม่ได้วัดผล

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

กลยุทธ์ทางเทคนิคที่ได้รับการพิสูจน์แล้วเพื่อเพิ่มประสิทธิภาพคะแนน INP สูง

เพื่อลดเวลาแฝงของ INP ให้ต่ำกว่าเกณฑ์ 200ms ทีมวิศวกรควรใช้การปรับแต่งทางเทคนิคต่อไปนี้:

แยกงานเธรดหลักแบบยาว: ใช้ requestIdleCallback() , setTimeout() หรือ scheduler.yield() เพื่อแบ่งงานดำเนินการที่ยาวกว่า 50 มิลลิวินาทีออกเป็นส่วนย่อยๆ ทำให้เบราว์เซอร์สามารถประมวลผลอินพุตของผู้ใช้ที่เข้ามาได้ทันทีระหว่างบล็อกการดำเนินการงาน
เพิ่มประสิทธิภาพการอัปเดตสถานะกรอบงาน: ในแอปพลิเคชัน Vue 3 และ Nuxt 4 ให้เลื่อนการเรนเดอร์ UI ที่ไม่สำคัญอีกครั้งโดยใช้ขอบเขตส่วนประกอบ async หรือการอัปเดตการอ้างอิงปฏิกิริยาที่เลื่อนออกไป
ย่อขนาดเค้าโครงให้เล็กสุด: หลีกเลี่ยงการอ่านคุณสมบัติเรขาคณิต DOM (เช่น offsetHeight หรือ getBoundingClientRect() ) ทันทีหลังจากการเปลี่ยนแปลงองค์ประกอบ DOM ซึ่งจะบังคับให้มีการคำนวณเค้าโครงแบบซิงโครนัสใหม่
ลดความลึกของแผนผัง DOM: แผนผัง DOM ขนาดใหญ่จะเพิ่มการคำนวณรูปแบบและต้นทุนการจัดวางระหว่างการนำเสนอล่าช้ารักษาจำนวนองค์ประกอบ DOM ทั้งหมดให้ต่ำกว่า 1,500 โหนดต่อหน้า
เพิ่มประสิทธิภาพสคริปต์ของบุคคลที่สาม: สคริปต์ของบุคคลที่สามจำนวนมาก (การวิเคราะห์ เครือข่ายโฆษณา วิดเจ็ตแชทกับลูกค้า) มักจะแย่งชิงเธรดหลักเลื่อนหรือพนักงานเว็บถ่ายสคริปต์บุคคลที่สามที่ไม่จำเป็น

การตรวจสอบ INP อย่างต่อเนื่องด้วย SimpleOps

SimpleOps ติดตามประสิทธิภาพของ INP อย่างต่อเนื่องโดยบันทึกชุดข้อมูลชุดข้อมูลภาคสนามของผู้ใช้จริงของ Chrome UX Report (CrUX) ควบคู่ไปกับการตรวจสอบ Lighthouse แบบสังเคราะห์SimpleOps แจ้งเตือนทีมของคุณโดยอัตโนมัติทุกครั้งที่ INP เปอร์เซ็นไทล์ที่ 75 ของเว็บไซต์ของคุณเกิน 200 มิลลิวินาที เพื่อให้มั่นใจว่าแอปพลิเคชันของคุณยังคงรวดเร็ว ลื่นไหล และปรับให้เหมาะสมสำหรับการจัดอันดับของเครื่องมือค้นหา