Core Web Vitals ในทางปฏิบัติ: การลด INP ในเว็บไซต์จริง

ในโลกแห่งการพัฒนาเว็บที่มีการพัฒนาตลอดเวลาการมอบประสบการณ์การใช้งานที่ไร้รอยต่อนั้นไม่ได้เป็นความหรูหราอีกต่อไป-เป็นสิ่งจำเป็น หนึ่งในความคิดริเริ่มที่สำคัญในการปรับปรุงประสิทธิภาพการขับขี่ในวันนี้มาจาก Core Web Vitals ของ Google ซึ่งเป็นชุดของตัวชี้วัดเฉพาะที่มีจุดประสงค์เพื่อปรับปรุงประสบการณ์การใช้งานในหน้าเว็บ ในบรรดาสิ่งเหล่านี้ การมีปฏิสัมพันธ์กับสีถัดไป (INP) ได้รับความสนใจเพิ่มขึ้นเนื่องจากแทนที่การหน่วงเวลาอินพุตครั้งแรก (FID) ในปี 2024 เป็นตัวชี้วัดประสิทธิภาพที่สำคัญ แต่อะไรคือ INP และนักพัฒนาสามารถลดลงบนเว็บไซต์จริงได้อย่างไร

ความเข้าใจใน INP: มันคืออะไรและทำไมมันถึงสำคัญ

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

ตามแนวทางของ Google:

• ดี: inp ≤ 200 ms
• ต้องการการปรับปรุง: 200 ms <inp ≤ 500 ms
• แย่: Inp> 500 ms

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

การประเมิน INP บนเว็บไซต์จริง

ก่อนที่จะปรับให้เหมาะสมคุณต้องวัด เครื่องมือเช่น ข้อมูลเชิงลึก PageSpeed , รายงานประสบการณ์ผู้ใช้ Chrome (CRUX) , ประภาคาร และ การขยาย Web Vitals Chrome เป็นเครื่องมือในการวินิจฉัยประสิทธิภาพของ INP อย่างไรก็ตามจำเป็นต้องแยกความแตกต่างระหว่างข้อมูล ฟิลด์ และ ห้องปฏิบัติการ :

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

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

สาเหตุทั่วไปของ INP ที่ไม่ดี

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

1. การดำเนินการ JavaScript หนัก: งานยาวที่บล็อกเธรดหลักป้องกันไม่ให้เบราว์เซอร์จัดการการโต้ตอบทันที
2. การเรนเดอร์แบบซิงโครนัส: งานที่ได้รับการกระตุ้นเมื่อมีการโต้ตอบกับผู้ใช้ - เช่นการอัปเดต DOM การคำนวณรูปแบบการคำนวณใหม่และการเปลี่ยนรูปแบบ - สามารถแสดงความล่าช้าได้
3. ตัวจัดการเหตุการณ์ขนาดใหญ่: ผู้ฟังเหตุการณ์ที่เชื่อมโยงกับการคลิกหรือองค์ประกอบอินพุตอาจเริ่มต้นการดำเนินงานที่มีราคาแพง
4. ภาพเคลื่อนไหวและการเปลี่ยนแปลง: ภาพเคลื่อนไหวที่ได้รับการปรับปรุงให้ดีที่สุดสามารถชะลอการเปลี่ยนแปลงภาพที่มีความหมายครั้งแรกหลังจากการโต้ตอบของผู้ใช้

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

กลยุทธ์ในการลด INP ในเว็บไซต์จริง

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

1. เพิ่มประสิทธิภาพการดำเนินการ JavaScript

การลดงานยาวและการเขียนสคริปต์ที่มากเกินไปสามารถปรับปรุง INP ได้อย่างมาก นี่คือวิธี:

• เลิกงานยาว: ใช้ setTimeout() , requestIdleCallback() หรือ requestAnimationFrame() เพื่อแบ่งการทำงานหนักเป็นชิ้นเล็ก ๆ
• เลื่อนเวลา JS ที่ไม่สำคัญ: การย้ายสคริปต์ไม่จำเป็นสำหรับการโต้ตอบเริ่มต้นจากเส้นทางการเรนเดอร์ที่สำคัญ
• ใช้ Web Workers: Offload Complex Computations ปิดเธรดหลักทั้งหมด

2. การโหลดสินทรัพย์ที่สำคัญล่วงหน้า

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

• ฟอนต์ที่ใช้ทันทีหลังจากโหลดหน้าเว็บควรโหลดไว้ล่วงหน้าโดยใช้ <link rel="preload" as="font" ...>
• รูปภาพที่เรียกใช้หลังจากการโต้ตอบควรจัดลำดับความสำคัญและโหลดไว้ล่วงหน้าโดยเฉพาะอย่างยิ่งภาพที่เกี่ยวข้องกับ CTA

3. ใช้ส่วนประกอบพร้อมปฏิสัมพันธ์

หากคุณใช้เฟรมเวิร์กเช่น React, Vue หรือ Angular คุณอาจโหลดส่วนประกอบที่แยกรหัสหรือส่วนประกอบที่โหลดขี้เกียจหลังจากการโต้ตอบ สิ่งนี้นำไปสู่ความล่าช้าหลังคลิก แทน:

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

พิจารณาเครื่องมือเช่น React Profiler หรือ ผู้ตรวจสอบประสิทธิภาพของ Svelte สำหรับสิ่งนี้

4. ลดสไตล์และเลย์เอาต์

การคำนวณรูปแบบและการจัดวางรูปแบบสามารถหยุดการปรับปรุงใน Inp ที่ตายไปในแทร็กของพวกเขา การแก้ไขทั่วไป ได้แก่ :

• แคชที่คำนวณค่าแทนการคำนวณใหม่ในทุกการโต้ตอบ
• การใช้ `Will-Change` และ CSS containment เพื่อแยกองค์ประกอบที่หนักจากการกระตุ้นการไหลย้อนกลับทั่วโลก

5. เพิ่มประสิทธิภาพตัวจัดการเหตุการณ์

ทำให้ผู้ฟังกิจกรรมของคุณไม่เอนเอียง ตัวอย่างเช่น:

• หลีกเลี่ยงการดึงข้อมูลหรือเรียกใช้การตรวจสอบความถูกต้องแบบซิงโครนัสทันทีหลังจากคลิก
• ใช้รูปแบบ async/รอหรือแยกตรรกะโดยใช้สัญญาเพื่อให้สีต่อไปไม่ล่าช้า

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

กรณีศึกษา: การปรับปรุง INP บนเว็บไซต์ค้าปลีก

ลองดูตัวอย่างในโลกแห่งความเป็นจริง ผู้ค้าปลีกอีคอมเมิร์ซชั้นนำพบค่า INP ของพวกเขาเฉลี่ย 600 มิลลิวินาทีบนมือถือ ปัญหาหลักคือการคลิกที่“ เพิ่มลงในรถเข็น” จะทำให้ทั้งการอัปเดตฐานข้อมูลและภาพเคลื่อนไหวของรถเข็นทันที - แจกจ่ายเธรดหลัก

ทีมพัฒนาใช้การเพิ่มประสิทธิภาพภายในหลายครั้ง:

• เลื่อนการอัปเดตฐานข้อมูลด้วย setTimeout() 100 ms
• ถ่ายโอนเหตุการณ์การวิเคราะห์ไปยังผู้ปฏิบัติงานบนเว็บ
• ปรับปรุงภาพเคลื่อนไหวของรถเข็นโดยใช้การแปลง CSS แทนภาพเคลื่อนไหวที่ใช้จาวาสคริปต์

ผลลัพธ์? INP ของพวกเขาลดลงเหลือ 140 มิลลิวินาทีและพวกเขาเห็นการแปลงเพิ่มขึ้น 12% ภายในสองสัปดาห์

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

การแก้ไขครั้งเดียวไม่เพียงพอ ประสิทธิภาพของเว็บเป็นความมุ่งมั่นอย่างต่อเนื่อง นี่คือวิธีการควบคุม INP ภายใต้การควบคุม:

1. การตรวจสอบผู้ใช้จริง (RUM): รวมเครื่องมือรัมเช่น Relic ใหม่ , SpeedCurve หรือ เป็นไปได้
2. กำหนดงบประมาณ INP: สร้างเกณฑ์ประสิทธิภาพในไปป์ไลน์ CI/CD ของคุณโดยใช้ Lighthouse CI หรือการตรวจสอบที่กำหนดเอง
3. วิเคราะห์แนวโน้ม: ติดตามคะแนน INP ในเซสชันและสัมพันธ์กับการเปลี่ยนแปลงใน UI การทำงานหรือเงื่อนไขการจราจร

ผลกระทบของมนุษย์ของ INP ที่ดีขึ้น

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

inp ที่ดีกว่าโปรโมต:

• เพิ่มอัตราการแปลง
• การเก็บรักษาผู้ใช้ที่สูงขึ้น
• เพิ่มความสามารถในการเข้าถึงและการรวม

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

บทสรุป

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

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