หน้าเว็บโหลดเร็วแต่รู้สึกช้า? นั่นเป็นเพราะ INP

รายงาน Lighthouse ของคุณดูเป็นสีเขียว LCP ปกติ CLS ปกติ หน้าเว็บโหลดเร็ว

แต่คะแนนในโลกความเป็นจริง (real-world scores) กลับลดลง และคุณก็ไม่รู้ว่าเพราะอะไร

ปัญหาอาจมาจาก INP Interaction to Next Paint เข้ามาแทนที่ FID เมื่อเดือนมีนาคม 2024 FID วัดเพียงแค่ความล่าช้าครั้งแรกเท่านั้น แต่ INP จะวัดทุกการโต้ตอบ (interaction) ในขณะที่ผู้ใช้ยังอยู่บนหน้าเว็บของคุณ และจะรายงานค่าที่ช้าที่สุดออกมา

INP ไม่ใช่ตัวชี้วัดด้านการโหลด (loading metric) แต่มันคือตัวชี้วัดด้านการตอบสนอง (responsiveness metric) มันตอบคำถามเพียงข้อเดียวคือ: เมื่อคุณคลิกหรือพิมพ์ จะต้องรอนานแค่ไหนกว่าหน้าจอจะเปลี่ยน?

Google แบ่งเกณฑ์ไว้ดังนี้:

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

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

หากต้องการดูตัวเลขจริง ให้ใช้โค้ดนี้:

import { onINP } from 'web-vitals';
onINP(function (metric) {
  console.log('INP', metric.value, metric.entries);
});

โค้ดนี้จะบันทึก (log) การโต้ตอบที่ช้าและระบุ element ที่มีปัญหา

ปัญหา INP เกิดขึ้นเพราะ Main Thread กำลังทำงานหนัก เบราว์เซอร์ไม่สามารถวาดหน้าจอ (paint) เพื่อตอบสนองได้ จนกว่างาน JavaScript จะเสร็จสิ้น

สาเหตุที่พบบ่อย:

แก้ไขได้ด้วยการแบ่งงานที่ยาวเกินไปออกเป็นส่วนย่อยๆ ปล่อยให้เบราว์เซอร์ได้ "หายใจ" ระหว่างขั้นตอน:

async function onClick() {
  doUrgentPart(); 
  await yieldToMain(); 
  doExpensivePart(); 
}

ใช้ yieldToMain เพื่อให้เบราว์เซอร์สามารถวาด UI ได้ก่อนที่งานที่ใช้เวลานานจะเริ่มขึ้น

วิธีแก้ไขอื่นๆ:

เลิกจ้องแต่ LCP ได้แล้ว หากคะแนนจริงของคุณยังต่ำอยู่ หันมาวัดผลการโต้ตอบ (interactions) ของคุณแทน

Source: https://dev.to/lamas51/your-page-loads-fast-but-still-feels-slow-its-inp-not-load-time-2gkn