โครงสร้าง Pagespeed ของ Google ซึ่งเราคุ้นเคยมานานหลายปีนั้นถูกสร้างขึ้นเพื่อให้แน่ใจว่าเว็บไซต์จะโหลดและให้บริการได้อย่างรวดเร็ว ด้วยการสร้างพารามิเตอร์ที่วัดได้และใช้ประโยชน์จากข้อมูลที่ไม่ระบุตัวตนที่รวบรวมจากส่วนแบ่งการตลาดของ Chrome ทำให้ Google ใช้ตัวชี้วัดเหล่านี้เป็นตัวบ่งชี้ SEO ด้วยการเปิดตัว Interaction to Next Paint (INP) ในปี 2022 จุดเน้นได้เปลี่ยนจากแค่ความเร็วในการโหลดหน้าเว็บไปเป็นมุมมองประสิทธิภาพเว็บที่กว้างขึ้น INP ไม่เพียงวัดความเร็วในการโหลดหน้าเว็บ แต่ยังวัดความเร็วในการประมวลผลการโต้ตอบของผู้ใช้บนหน้าเว็บอีกด้วย โดยพื้นฐานแล้วจะเปลี่ยนประสบการณ์การนำทางไซต์ให้เป็นตัวชี้วัด Pagespeed
ในบล็อกของ Keremแนะนำให้ใช้คำว่า "ความล่าช้าในการโต้ตอบทั่วไป" ว่าเหมาะสมกับแนวคิดนี้ ซึ่ง Google อธิบายไว้อย่างดีในวิดีโอของตัวเองด้วย อย่างไรก็ตาม เพื่อให้เข้าใจการวัดนี้อย่างถ่องแท้ เราจะเจาะลึกหัวข้อนี้ในส่วนต่อไปนี้
คำอธิบายของระยะเวลา INP คืออะไร?
ระยะเวลาของ INP รวมถึง:
- เวลาระหว่างการโต้ตอบของผู้ใช้กับเพจและการดำเนินการของตัวจัดการเหตุการณ์
- เวลาดำเนินการของสคริปต์
- เวลาตั้งแต่การรันโค้ดไปจนถึงการแสดงผลเอาต์พุตแก่ผู้ใช้
โดยทั่วไปกระบวนการเหล่านี้จะเกิดขึ้นภายในมิลลิวินาที แต่บนอุปกรณ์เคลื่อนที่ โดยเฉพาะโทรศัพท์ Android รุ่นเก่าที่ใช้พลังงาน CPU ต่ำ ความล่าช้า (เวลาแฝง) ดังกล่าวมักจะสังเกตเห็นได้ชัดเจน เป็นที่น่าสังเกตว่าข้อมูล INP เช่นเดียวกับข้อมูล Lighthouse อื่นๆ จะถูกรวบรวมโดยไม่ระบุชื่อและประเมินตาม เปอร์เซ็นไทล์ที่ 75- ดังนั้นเป้าหมายคือการสร้างแอปพลิเคชันที่ทำงานได้ดีบนอุปกรณ์ทั่วไป ไม่ใช่แค่บนอุปกรณ์ระดับไฮเอนด์เท่านั้น
ตัวอย่างชีวิตจริงของระยะเวลา INP
ต่อไปนี้คือตัวอย่างในชีวิตจริงบางส่วนจากหน้าอินเทอร์เน็ตที่เราเข้าชมทุกวันเพื่ออธิบายแนวคิดนี้:
การป้อนที่อยู่ในไซต์อีคอมเมิร์ซ
เมื่อคุณซื้อสินค้าบนไซต์อีคอมเมิร์ซและป้อนที่อยู่ในการจัดส่ง คุณจะต้องเลือกจังหวัดก่อน จากนั้น เมื่อคุณคลิกช่องเลือกเพื่อเลือกเขต คุณจะรอสักครู่เพื่อให้โหลดผลลัพธ์ของ Ajax และหลังจากช่วงระยะเวลาหนึ่ง ข้อมูลเขตจะถูกโหลด นี่เป็นตัวอย่างที่ดีของ INP การปรับปรุงประสบการณ์ผู้ใช้ในตัวอย่างนี้อาจเกี่ยวข้องกับการเพิ่ม "ตัวบ่งชี้การโหลด" เพื่อแจ้งให้ผู้ใช้ทราบถึงกระบวนการ Ajax
การเรียงลำดับการเลือก
เมื่อใช้ตัวกรองในหน้ารายการผลิตภัณฑ์ หากผลิตภัณฑ์ที่กรองไม่ได้รับการจัดการอย่างถูกต้องหลังจากคลิกช่องทำเครื่องหมาย INP จะเพิ่มขึ้น การใช้ JS ที่ซับซ้อนน้อยกว่าและการพิจารณาประสบการณ์ผู้ใช้ระหว่างการดำเนินการตัวกรองสามารถช่วยรักษาค่า INP ให้สูงที่สุดได้
แกลเลอรี่ภาพสินค้า
เวลาที่ผู้ใช้รอให้แกลเลอรีรูปภาพโหลดหลังจากคลิกรูปภาพผลิตภัณฑ์ในหน้ารายละเอียดผลิตภัณฑ์อาจส่งผลต่อ INP
ปุ่มจอง
ความล่าช้าในการโต้ตอบระหว่างการคลิกปุ่ม "ทำการจอง" กับหน้าถัดไปเป็นตัวอย่างของ INP
ปุ่มหยิบใส่รถเข็น
ความล่าช้าเป็นมิลลิวินาทีเมื่อคลิกปุ่ม "เพิ่มลงตะกร้า" และสงสัยว่าสินค้าถูกเพิ่มลงในรถเข็นหรือไม่ให้คำจำกัดความ INP อย่างสมบูรณ์
ดังที่เห็นในตัวอย่างเหล่านี้ กับดัก INP มีอยู่ในสถานการณ์ที่ส่งผลต่อทั้ง SEO และอัตรา Conversion โดยตรง
จะปรับปรุง INP ได้อย่างไร?
- ใช้ไลบรารีส่วนหน้า JS ที่ทันสมัย: การปรับปรุงประสิทธิภาพโดยใช้ไลบรารีส่วนหน้า JS ที่ทันสมัย เช่น Vue, React และ Angular มีประโยชน์เนื่องจากให้ข้อได้เปรียบด้านประสิทธิภาพและการนำกลับมาใช้ใหม่ได้
- ลดความซับซ้อนของไลบรารี JS ให้เหลือน้อยที่สุด: แนะนำให้ใช้ไลบรารี JS ที่ซับซ้อนน้อยกว่า โดยส่วนตัวแล้วฉันแนะนำให้หลีกเลี่ยง jQuery ให้มากที่สุด
ระดับเมตริก INP ที่ยอมรับได้
ค่าเกณฑ์สำหรับ ระดับ INP ดี ปานกลาง และต่ำคือ 200 มิลลิวินาทีและ 500 มิลลิวินาที- การรักษา INP ให้อยู่ภายใต้เกณฑ์เหล่านี้เป็นสิ่งสำคัญสำหรับการรักษาประสบการณ์ผู้ใช้ที่ดีและประสิทธิภาพเว็บโดยรวม
