เรียนรู้วิธีนำข้อมูลภาคสนามของคุณไปไว้ที่ห้องทดลองเพื่อทำซ้ำและระบุสาเหตุของการโต้ตอบที่ช้าผ่านการทดสอบด้วยตนเอง
ส่วนที่ท้าทายในการเพิ่มประสิทธิภาพ Interaction to Next Paint (INP) คือการค้นหาสาเหตุของ INP ที่ไม่ดี ซึ่งอาจเกิดจากสาเหตุหลายประการ เช่น สคริปต์ของบุคคลที่สามที่ตั้งเวลางานจำนวนมากในเทรดหลัก, DOM ขนาดใหญ่, โค้ดเรียกกลับของเหตุการณ์ราคาแพง และตัวการอื่นๆ
การปรับปรุง INP อาจเป็นเรื่องยาก ในการเริ่มต้น คุณต้องทราบว่าการโต้ตอบใดมีแนวโน้มที่จะทำให้เกิด INP ของหน้าเว็บ หากคุณไม่ทราบว่าการโต้ตอบใดในเว็บไซต์มีแนวโน้มที่จะเกิดขึ้นช้าที่สุดจากมุมมองของผู้ใช้จริง โปรดอ่านค้นหาการโต้ตอบที่ช้าในช่องดังกล่าว เมื่อมีข้อมูลภาคสนามที่จะแนะนำคุณแล้ว คุณจะสามารถทดสอบการโต้ตอบที่เฉพาะเจาะจงเหล่านั้นด้วยตนเองในเครื่องมือห้องทดลองเพื่อดูว่าเหตุใดการโต้ตอบเหล่านั้นจึงล่าช้า
จะทำอย่างไรหากคุณไม่มีข้อมูลภาคสนาม
การมีข้อมูลภาคสนามเป็นสิ่งสำคัญ เนื่องจากช่วยประหยัดเวลาได้มากในการพิจารณาว่าการโต้ตอบแบบใดที่ต้องเพิ่มประสิทธิภาพ อย่างไรก็ตาม คุณอาจอยู่ในตำแหน่งที่ไม่มีข้อมูลภาคสนามอยู่ หากตรงกับสถานการณ์ของคุณ คุณยังคงค้นหาการโต้ตอบเพื่อช่วยปรับปรุงได้แม้ว่าอาจต้องใช้ความพยายามเพิ่มเติมอีกเล็กน้อยและวิธีที่ต่างออกไป
Total block Time (TBT) เป็นเมตริกในห้องทดลองที่ประเมินการตอบสนองของหน้าเว็บระหว่างการโหลด และสัมพันธ์กับ INP เป็นอย่างดี หากหน้าเว็บมี TBT สูง นั่นเป็นสัญญาณว่าหน้าเว็บอาจไม่ตอบสนองการโต้ตอบของผู้ใช้มากนักในขณะที่โหลดหน้าเว็บ
หากต้องการกำหนด TBT ของหน้าเว็บ ให้ใช้ Lighthouse หาก TBT ของหน้าเว็บสูง อาจเป็นไปได้ว่าเทรดหลักไม่ว่างในระหว่างการโหลดหน้าเว็บ และอาจส่งผลกระทบต่อการตอบสนองของหน้าเว็บในช่วงเวลาที่สำคัญในวงจรของหน้า
หากต้องการค้นหาการโต้ตอบที่ช้าหลังจากหน้าเว็บโหลดแล้ว คุณอาจต้องใช้ข้อมูลประเภทอื่นๆ เช่น การไหลเวียนของผู้ใช้ทั่วไปที่คุณอาจระบุไว้ในข้อมูลวิเคราะห์ของเว็บไซต์แล้ว เช่น หากคุณทำในเว็บไซต์อีคอมเมิร์ซ ขั้นตอนทั่วไปของผู้ใช้คือการกระทำของผู้ใช้เมื่อเพิ่มสินค้าลงในรถเข็นช็อปปิ้งออนไลน์และชำระเงิน
ไม่ว่าคุณจะมีข้อมูลภาคสนามหรือไม่ก็ตาม ขั้นตอนต่อไปคือการทดสอบและทำซ้ำการโต้ตอบที่ช้าด้วยตนเอง เนื่องจากการสร้างการโต้ตอบที่ช้านั้นจะต้องทำเมื่อคุณสามารถทำให้เกิดการโต้ตอบที่ช้าซึ่งคุณสามารถแก้ไขได้ด้วยตนเองเท่านั้น
สร้างการโต้ตอบที่ช้าในห้องทดลอง
คุณสามารถสร้างการโต้ตอบที่ช้าในห้องทดลองได้หลายวิธีโดยการทดสอบด้วยตนเอง แต่คุณสามารถลองใช้เฟรมเวิร์กต่อไปนี้
บันทึกการติดตาม
เครื่องมือสร้างโปรไฟล์ประสิทธิภาพของ Chrome เป็นเครื่องมือที่แนะนำสำหรับการวินิจฉัยและแก้ปัญหาการโต้ตอบที่ช้า หากต้องการสร้างโปรไฟล์การโต้ตอบในเครื่องมือสร้างโปรไฟล์ประสิทธิภาพของ Chrome ให้ทำตามขั้นตอนต่อไปนี้
- เปิดหน้าที่ต้องการทดสอบ
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome แล้วไปที่แผงประสิทธิภาพ
- คลิกปุ่มบันทึกที่ด้านซ้ายบนของแผงเพื่อเริ่มการติดตาม
- ดำเนินการโต้ตอบที่คุณต้องการแก้ปัญหา
- คลิกปุ่มบันทึกอีกครั้งเพื่อหยุดการติดตาม
เมื่อเครื่องมือสร้างโปรไฟล์ป้อนข้อมูลแล้ว ที่แรกที่ควรดูคือสรุปกิจกรรมที่ด้านบนของเครื่องมือสร้างโปรไฟล์ สรุปกิจกรรมจะแสดงแถบสีแดงที่ด้านบนซึ่งมีงานที่ใช้เวลานานในการบันทึก ซึ่งจะช่วยให้คุณซูมเข้าในพื้นที่ที่เป็นปัญหาได้อย่างรวดเร็ว
คุณสามารถโฟกัสกับส่วนที่เป็นปัญหาได้อย่างรวดเร็วโดยลากและเลือกเขตในสรุปกิจกรรม คุณสามารถใช้ฟีเจอร์เบรดครัมบ์ในเครื่องมือสร้างโปรไฟล์เพื่อช่วยจำกัดไทม์ไลน์ให้แคบลงและละเว้นกิจกรรมที่ไม่เกี่ยวข้องได้
เมื่อคุณมุ่งเน้นที่ตำแหน่งที่การโต้ตอบเกิดขึ้น แทร็กการโต้ตอบจะช่วยจัดเรียงการโต้ตอบและกิจกรรมที่เกิดขึ้นในแทร็กเทรดหลักข้างใต้
คุณสามารถดูรายละเอียดเพิ่มเติมว่าการโต้ตอบส่วนใดนานที่สุดโดยวางเมาส์เหนือการทำซ้ำในแทร็กการโต้ตอบ ดังนี้
ส่วนที่เป็นลายของการโต้ตอบแสดงระยะเวลาการโต้ตอบเกิน 200 มิลลิวินาที ซึ่งเป็นขีดจำกัดสูงสุดของเกณฑ์ "ดี" สำหรับ INP ของหน้าเว็บ การโต้ตอบในส่วนต่างๆ มีดังนี้
- ความล่าช้าในการป้อนข้อมูล - แสดงภาพโดยเครื่องหมายหนวดเส้นซ้าย
- ระยะเวลาการประมวลผล ซึ่งแสดงโดยบล็อกทึบอยู่ระหว่างหนวดเคราด้านซ้ายและขวา
- ความล่าช้าในการนำเสนอ - แสดงภาพโดยวิสเกอร์ที่เหมาะสม
ในส่วนนี้ เราจะพูดถึงการเจาะลึกปัญหาที่ทำให้เกิดการโต้ตอบที่ช้า ซึ่งจะกล่าวถึงภายหลังในคู่มือนี้
ส่วนขยาย Web Vitals ใน Chrome
เครื่องมือสร้างโปรไฟล์ประสิทธิภาพเป็นวิธีที่แนะนำในการวินิจฉัยการโต้ตอบที่เป็นที่ทราบกันว่าการโต้ตอบที่ช้า แต่อาจใช้เวลาสักพักเพื่อระบุการโต้ตอบที่ช้า โดยที่คุณไม่ทราบว่าการโต้ตอบใดที่ทำให้เกิดปัญหา วิธีหนึ่งที่ควรคำนึงถึงคือการใช้ส่วนขยาย Chrome ของ Web Vitals คุณสามารถใช้ส่วนขยายนี้เพื่อลองใช้การโต้ตอบหลายๆ แบบได้อย่างรวดเร็วเพื่อค้นหาการโต้ตอบที่เป็นปัญหาก่อนที่คุณจะเปลี่ยนไปใช้เครื่องมือสร้างโปรไฟล์ประสิทธิภาพ
เมื่อติดตั้งแล้ว ส่วนขยาย Web Vitals จะแสดงข้อมูลการโต้ตอบในคอนโซล DevTools หากคุณทำตามขั้นตอนต่อไปนี้
- ใน Chrome ให้คลิกไอคอนส่วนขยายทางด้านขวาของแถบที่อยู่
- ค้นหาส่วนขยาย Web Vitals ในเมนูแบบเลื่อนลง
- คลิกไอคอนทางด้านขวาเพื่อเปิดการตั้งค่าของส่วนขยาย
- คลิกตัวเลือก
- เลือกช่องทำเครื่องหมายการบันทึกคอนโซลในหน้าจอผลลัพธ์ แล้วคลิกบันทึก
หลังจากทำตามขั้นตอนเหล่านี้แล้ว ให้เปิดคอนโซลใน Chrome DevTools แล้วเริ่มทดสอบการโต้ตอบที่น่าสงสัยในหน้าเว็บ เมื่อคุณโต้ตอบ ข้อมูลการวินิจฉัยจะปรากฏในคอนโซลดังนี้
แม้ว่าส่วนขยาย Web Vitals จะช่วยระบุการโต้ตอบที่ช้าและให้รายละเอียดบางอย่างเพื่อช่วยแก้ไขข้อบกพร่อง INP แต่คุณอาจยังใช้เครื่องมือสร้างโปรไฟล์ประสิทธิภาพเพื่อวิเคราะห์การโต้ตอบที่ช้า เนื่องจากส่วนขยายดังกล่าวจะให้ข้อมูลโดยละเอียดที่คุณต้องใช้ในการเข้าถึงโค้ดเวอร์ชันที่ใช้งานจริงของเว็บไซต์เพื่อหาสาเหตุของการโต้ตอบที่ช้า
วิธีระบุว่าการโต้ตอบส่วนใดที่ช้า
การโต้ตอบจะประกอบไปด้วย 3 ส่วน ได้แก่ ความล่าช้าของอินพุต ระยะเวลาการประมวลผล และความล่าช้าของการนำเสนอ วิธีเพิ่มประสิทธิภาพการโต้ตอบเพื่อลด INP ของหน้าเว็บจะขึ้นอยู่กับว่าส่วนใดที่ใช้เวลามากที่สุด
วิธีระบุความล่าช้าในการป้อนข้อมูลที่ใช้เวลานาน
ความล่าช้าของอินพุตอาจทำให้เวลาในการตอบสนองของการโต้ตอบสูง ความล่าช้าในการป้อนข้อมูลคือส่วนแรกของการโต้ตอบ คือระยะเวลานับจากที่ระบบปฏิบัติการได้รับการดำเนินการของผู้ใช้เป็นครั้งแรกจนถึงเวลาที่เบราว์เซอร์สามารถเริ่มประมวลผลโค้ดเรียกกลับของตัวแฮนเดิลเหตุการณ์แรกของการโต้ตอบนั้น
การระบุความล่าช้าในการป้อนข้อมูลในเครื่องมือสร้างโปรไฟล์ประสิทธิภาพของ Chrome ทำได้โดยค้นหาการโต้ตอบในแทร็กการโต้ตอบ ความยาวของเครื่องหมายกริ่งด้านซ้ายจะเป็นช่วงความล่าช้าในการป้อนข้อมูลของการโต้ตอบ และคุณจะดูค่าที่แม่นยำได้ในเคล็ดลับเครื่องมือโดยวางเมาส์เหนือการโต้ตอบในเครื่องมือสร้างโปรไฟล์ประสิทธิภาพ
ความล่าช้าของอินพุตจะไม่เป็น 0 เลย แต่คุณควบคุมได้ว่าจะหน่วงเวลาระยะเวลาของอินพุตหรือไม่ ข้อสำคัญคือตรวจสอบว่ามีงานที่ทำงานอยู่ในเทรดหลักซึ่งทำให้การเรียกกลับทำงานทันทีที่ควรหรือไม่
ในรูปก่อนหน้านี้ งานจากสคริปต์ของบุคคลที่สามกำลังทำงานเมื่อผู้ใช้พยายามโต้ตอบกับหน้าเว็บ ซึ่งจะขยายการหน่วงเวลาอินพุต ความล่าช้าของการป้อนข้อมูลที่ขยายแล้วจะมีผลกับเวลาในการตอบสนองของการโต้ตอบ และอาจส่งผลต่อ INP ของหน้าเว็บ
วิธีระบุระยะเวลาการประมวลผลที่นาน
โค้ดเรียกกลับของเหตุการณ์จะทำงานทันทีหลังจากความล่าช้าของอินพุต ส่วนเวลาที่ใช้ในการดำเนินการจะเรียกว่าระยะเวลาการประมวลผล หากการเรียกกลับของเหตุการณ์ทำงานนานเกินไป อาจทำให้เบราว์เซอร์ไม่แสดงเฟรมถัดไปและอาจทำให้เวลาในการตอบสนองรวมของการโต้ตอบเพิ่มขึ้นอย่างมาก การประมวลผลที่ยาวนานอาจเป็นผลมาจาก JavaScript ของบุคคลที่หนึ่งหรือบุคคลที่สามที่มีการคำนวณราคาแพง และในบางกรณีก็เกิดขึ้นทั้ง 2 อย่าง ในเครื่องมือสร้างโปรไฟล์ประสิทธิภาพ ส่วนนี้จะแสดงเป็นส่วนที่เป็นของการโต้ตอบในแทร็กการโต้ตอบ
การค้นหาโค้ดเรียกกลับเหตุการณ์ที่มีราคาแพงนั้นทำได้โดยสังเกตข้อมูลต่อไปนี้ในการติดตามสำหรับการโต้ตอบที่เฉพาะเจาะจง
- พิจารณาว่างานที่เชื่อมโยงกับโค้ดเรียกกลับของเหตุการณ์เป็นงานที่ใช้เวลานานหรือไม่ หากต้องการเปิดเผยงานที่ใช้เวลานานในการตั้งค่าห้องทดลองให้เสถียรมากขึ้น คุณอาจต้องเปิดใช้การควบคุม CPU ในแผงประสิทธิภาพ หรือเชื่อมต่ออุปกรณ์ Android ระดับล่างไปจนถึงระดับกลางและใช้การแก้ไขข้อบกพร่องระยะไกล
- หากงานที่เรียกใช้โค้ดเรียกกลับของเหตุการณ์เป็นงานที่ใช้เวลานาน ให้มองหารายการเครื่องจัดการเหตุการณ์ เช่น รายการที่มีชื่อ เช่น เหตุการณ์: คลิก ในสแต็กการเรียกใช้ที่มีรูปสามเหลี่ยมสีแดงที่มุมขวาบนของรายการ
คุณสามารถลองใช้หนึ่งในกลยุทธ์ต่อไปนี้เพื่อลดระยะเวลาการประมวลผลของการโต้ตอบ
- ทำงานให้น้อยที่สุดเท่าที่จะเป็นไปได้ ทุกสิ่งที่เกิดขึ้นในการติดต่อกลับหากิจกรรมราคาแพงนั้นจำเป็นมากไหม หากไม่ ให้ลองนำโค้ดนั้นออกทั้งหมดหากเป็นไปได้ หรือเลื่อนการดำเนินการออกไปในภายหลังหากทำไม่ได้ นอกจากนี้ คุณยังใช้ประโยชน์จากฟีเจอร์เฟรมเวิร์กได้เช่นกัน เช่น ฟีเจอร์การบันทึกเนื้อหาของ React อาจข้ามการแสดงผลที่ไม่จำเป็นของคอมโพเนนต์ไปเมื่ออุปกรณ์ประกอบไม่เปลี่ยนแปลง
- เลื่อนงานการไม่แสดงผลในการเรียกกลับเหตุการณ์ไปยังช่วงเวลาในภายหลัง งานที่ใช้เวลานานสามารถแบ่งย่อยได้โดยการปฏิเสธไปยังเทรดหลัก เมื่อใดก็ตามที่กลับไปยังเทรดหลัก จะเป็นการสิ้นสุดการดำเนินการของงานปัจจุบันและแบ่งงานที่เหลือออกเป็นงานอื่น วิธีนี้ช่วยให้โหมดแสดงภาพมีโอกาสประมวลผลการอัปเดตอินเทอร์เฟซผู้ใช้ที่ดำเนินการก่อนหน้านี้ในการเรียกกลับของเหตุการณ์ หากใช้ React ฟีเจอร์การเปลี่ยน ฟีเจอร์นี้ช่วยคุณได้
กลยุทธ์เหล่านี้ควรสามารถช่วยคุณเพิ่มประสิทธิภาพโค้ดเรียกกลับของเหตุการณ์เพื่อให้ใช้เวลาในการเรียกใช้น้อยลง
วิธีระบุความล่าช้าของงานนำเสนอ
ความล่าช้าในการป้อนข้อมูลที่ยาวนานและระยะเวลาในการประมวลผลไม่ใช่สาเหตุของ INP ที่ต่ำเพียงอย่างเดียว บางครั้งการอัปเดตการแสดงผลที่เกิดขึ้นเพื่อตอบสนองต่อโค้ดเรียกกลับของเหตุการณ์จำนวนน้อยอาจมีค่าใช้จ่ายสูง ระยะเวลาที่เบราว์เซอร์ใช้ในการแสดงผลการอัปเดตด้วยภาพในอินเทอร์เฟซผู้ใช้เพื่อแสดงผลของการโต้ตอบเรียกว่าความล่าช้าของงานนำเสนอ
งานแสดงผลส่วนใหญ่มักประกอบด้วยงานต่างๆ เช่น การคำนวณรูปแบบ การจัดเลย์เอาต์ การลงสี และการผสม และแสดงด้วยบล็อกสีม่วงและสีเขียวในแผนภูมิเปลวไฟของเครื่องมือสร้างโปรไฟล์ ความล่าช้าในการนำเสนอทั้งหมดจะแสดงโดยข้อความขวาของการโต้ตอบในแทร็กการโต้ตอบ
จากสาเหตุที่เป็นไปได้ทั้งหมดของเวลาในการตอบสนองของการโต้ตอบสูง ความล่าช้าในการนำเสนออาจเป็นเรื่องที่แก้ไขและแก้ไขได้ยากที่สุด การแสดงผลมากเกินไปอาจเกิดจากสาเหตุต่อไปนี้
- DOM ขนาดใหญ่ ต้องมีการแสดงผลงานเพื่ออัปเดตการนำเสนอของหน้าเว็บมักจะเพิ่มขึ้นตามขนาด DOM ของหน้าเว็บ อ่านข้อมูลเพิ่มเติมได้ที่วิธีที่ DOM ขนาดใหญ่ส่งผลต่อการโต้ตอบและสิ่งที่คุณทำได้
- การบังคับให้จัดเรียงใหม่ กรณีนี้เกิดขึ้นเมื่อคุณใช้การเปลี่ยนแปลงรูปแบบกับองค์ประกอบใน JavaScript แล้วค้นหาผลลัพธ์ของงานนั้นทันที ผลที่ได้คือเบราว์เซอร์ต้องปรับปรุงเลย์เอาต์ก่อนที่จะดำเนินการใดๆ เพิ่มเติม เพื่อให้เบราว์เซอร์แสดงรูปแบบที่อัปเดตแล้วได้ ดูข้อมูลเพิ่มเติมและเคล็ดลับเกี่ยวกับการหลีกเลี่ยงการบังคับให้จัดเรียงใหม่ได้ที่หัวข้อหลีกเลี่ยงเลย์เอาต์ขนาดใหญ่และซับซ้อน รวมถึงจัดวางเลย์เอาต์
- การทำงานที่มากเกินไปหรือไม่จำเป็นในโค้ดเรียกกลับของ
requestAnimationFrameโค้ดเรียกกลับrequestAnimationFrame()จะทำงานระหว่างช่วงการแสดงผลของลูปเหตุการณ์ และต้องเสร็จสมบูรณ์ก่อนจึงจะแสดงเฟรมถัดไปได้ หากคุณใช้requestAnimationFrame()เพื่อทำงานที่ไม่เกี่ยวข้องกับการเปลี่ยนแปลงอินเทอร์เฟซผู้ใช้ โปรดทราบว่าคุณอาจหน่วงเวลาเฟรมถัดไป ResizeObservercallback โค้ดเรียกกลับดังกล่าวจะทำงานก่อนการแสดงผล และอาจทำให้การนำเสนอเฟรมถัดไปล่าช้าหากงานในเฟรมนั้นมีราคาสูง เช่นเดียวกับโค้ดเรียกกลับของเหตุการณ์ เลื่อนลอจิกที่ไม่จำเป็นสำหรับเฟรมถัดไป
จะเกิดอะไรขึ้นหากคุณจำลองการโต้ตอบที่ช้าไม่ได้
จะเกิดอะไรขึ้นหากข้อมูลภาคสนามของคุณแสดงให้เห็นว่าการโต้ตอบบางอย่างเกิดขึ้นช้า แต่คุณไม่สามารถจำลองปัญหาของห้องทดลองด้วยตัวเองได้ กรณีนี้อาจเกิดจากสาเหตุ 2 ประการ
เหตุผลหนึ่งคือ สถานการณ์ขณะที่คุณทดสอบการโต้ตอบจะขึ้นอยู่กับฮาร์ดแวร์และการเชื่อมต่อเครือข่ายของคุณ คุณอาจใช้อุปกรณ์ที่เร็วด้วยการเชื่อมต่อที่รวดเร็ว แต่ไม่ได้หมายความว่าผู้ใช้จะใช้อุปกรณ์ของตนเอง คุณสามารถลองดำเนินการ 1 ใน 3 ข้อต่อไปนี้หากตรงกับกรณีของคุณ
- หากคุณมีอุปกรณ์ Android ที่จับต้องได้ ให้ใช้การแก้ไขข้อบกพร่องระยะไกลเพื่อเปิดอินสแตนซ์ Chrome DevTools ในเครื่องโฮสต์และพยายามจำลองการโต้ตอบที่ช้าที่นั่น อุปกรณ์เคลื่อนที่มักไม่เร็วเท่าแล็ปท็อปหรือเดสก์ท็อป ดังนั้นการโต้ตอบที่ช้าจึงอาจมองเห็นได้สำเร็จมากกว่าในอุปกรณ์เหล่านี้
- หากคุณไม่มีอุปกรณ์จริง ให้เปิดใช้ฟีเจอร์การควบคุม CPU ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
อีกสาเหตุหนึ่งอาจเป็นเพราะคุณรอให้หน้าเว็บโหลดก่อนที่จะโต้ตอบ แต่ผู้ใช้ไม่โหลด หากใช้เครือข่ายที่เร็ว ให้จำลองสภาพเครือข่ายที่ช้าลงโดยเปิดใช้การควบคุมเครือข่าย จากนั้นจะโต้ตอบกับหน้าเว็บทันทีที่แสดงผล คุณควรทำเช่นนี้เนื่องจากเทรดหลักมักจะมีการเข้าชมมากที่สุดในช่วงเริ่มต้น และการทดสอบในช่วงเวลาดังกล่าวอาจเผยถึงประสบการณ์ของผู้ใช้
INP ของการแก้ปัญหาเป็นกระบวนการที่ต้องทำซ้ำ
การค้นหาสาเหตุที่ทำให้เวลาในการตอบสนองของการโต้ตอบสูงและ INP ไม่ดีต้องอาศัยการทำงานเป็นอย่างมาก แต่หากคุณสามารถปักหมุดสาเหตุได้ ก็มาได้ครึ่งทางแล้ว การทำตามแนวทางที่เป็นระบบในการแก้ปัญหา INP ที่ด้อยประสิทธิภาพจะช่วยให้คุณระบุสิ่งที่เป็นสาเหตุของปัญหาได้อย่างวางใจ และมาถึงวิธีแก้ไขที่เหมาะสมได้เร็วขึ้น วิธีตรวจสอบ
- อาศัยข้อมูลภาคสนามเพื่อหาการโต้ตอบที่ช้า
- ทดสอบการโต้ตอบในช่องที่เป็นปัญหาด้วยตนเองในห้องทดลองเพื่อดูว่าสามารถทำให้เกิดซ้ำได้หรือไม่
- ระบุว่าสาเหตุเกิดจากความล่าช้าของอินพุตที่นาน การเรียกกลับของเหตุการณ์ที่มีราคาแพง หรือการแสดงภาพที่มีราคาแพง
- ทำซ้ำ
ข้อสุดท้ายคือสิ่งที่สำคัญที่สุด การแก้ปัญหาและการปรับปรุง INP เป็นกระบวนการแบบวนซ้ำเช่นเดียวกับงานอื่นๆ ส่วนใหญ่ที่คุณทำเพื่อปรับปรุงประสิทธิภาพของหน้าเว็บ เมื่อคุณแก้ไขการโต้ตอบที่ช้า 1 รายการ ให้ไปยังการโต้ตอบถัดไปและทำซ้ำจนกว่าจะเริ่มเห็นผลลัพธ์