เพิ่มประสิทธิภาพความล่าช้าของอินพุต

ดูความล่าช้าของอินพุต และเรียนรู้เทคนิคในการลดความล่าช้าของอินพุตสำหรับการโต้ตอบที่เร็วขึ้น

Jeremy Wagner

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

ความล่าช้าในการป้อนข้อมูลคืออะไร

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

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

วิธีคำนึงถึงความล่าช้าในการป้อนข้อมูล

โดยทั่วไป คุณควรทำให้การโต้ตอบทั้งหมดสั้นที่สุดเพื่อให้เว็บไซต์มีโอกาสมากที่สุดที่จะบรรลุเกณฑ์ "ดี" ของเมตริก Interaction to Next Paint (INP) ไม่ว่าผู้ใช้จะใช้อุปกรณ์ใด การตรวจสอบเรื่องความล่าช้าของอินพุตเป็นเพียงส่วนหนึ่งของเกณฑ์ดังกล่าว

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

วิธีลดความล่าช้าในการป้อนข้อมูล

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

หลีกเลี่ยงการจับเวลาที่เกิดขึ้นซ้ำๆ ซึ่งทำให้งานเทรดหลักทำงานหนักเกินไป

ฟังก์ชันตัวจับเวลาที่ใช้กันโดยทั่วไปใน JavaScript อยู่ 2 ฟังก์ชันที่ส่งผลให้การป้อนข้อมูลล่าช้า ได้แก่ setTimeout และ setInterval ความแตกต่างระหว่าง 2 อย่างคือ setTimeout จะกำหนดเวลาให้โค้ดเรียกกลับทำงานหลังจากเวลาที่ระบุ ในทางกลับกัน setInterval จะกำหนดเวลาให้โค้ดเรียกกลับทำงานทุก n มิลลิวินาทีหรือจนกว่าตัวจับเวลาจะหยุดด้วย clearInterval

setTimeout ไม่เป็นปัญหาเลย ที่จริงแล้ว ขอแนะนำให้หลีกเลี่ยงงานที่ใช้เวลานาน อย่างไรก็ตาม จะขึ้นอยู่กับเวลาที่เกิดการหมดเวลา และผู้ใช้พยายามโต้ตอบกับหน้าเว็บเมื่อการเรียกกลับหมดเวลาทำงานหรือไม่

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

setInterval เรียกใช้โค้ดเรียกกลับตามช่วงเวลา จึงมีแนวโน้มที่จะขัดขวางการโต้ตอบ นั่นเป็นเพราะว่า การเรียกกลับเพียงครั้งเดียวของ setTimeout แตกต่างจากการเรียกกลับแบบครั้งเดียวที่อาจขัดขวางการโต้ตอบของผู้ใช้ โดยธรรมชาติที่เกิดซ้ำของ setInterval ทำให้มีโอกาสมากขึ้นที่การโทรจะจะขัดขวางการโต้ตอบ ดังนั้นจึงเพิ่มความล่าช้าในการป้อนข้อมูลของการโต้ตอบ

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

หลีกเลี่ยงงานที่ใช้เวลานาน

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

นอกจากการลดปริมาณงานที่คุณทำในงานหนึ่งๆ แล้ว คุณควรพยายามทำงานให้น้อยที่สุดในเทรดหลักทุกครั้งด้วย คุณสามารถปรับปรุงการตอบสนองต่อข้อมูลจากผู้ใช้ด้วยการแบ่งงานที่ใช้เวลานาน

โปรดระวังการโต้ตอบทับซ้อนกัน

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

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

• ลองใช้อินพุตการตีกลับเพื่อจำกัดจำนวนครั้งที่การเรียกกลับของเหตุการณ์จะทำงานในระยะเวลาที่กำหนด
• ใช้ AbortController เพื่อยกเลิกคำขอ fetch ขาออก เพื่อให้เทรดหลักไม่ติดขัดในการจัดการกับโค้ดเรียกกลับ fetch หมายเหตุ: คุณสามารถใช้พร็อพเพอร์ตี้ signal ของอินสแตนซ์ AbortController เพื่อล้มเลิกเหตุการณ์ได้เช่นกัน

อีกสาเหตุที่ทำให้เกิดความล่าช้าในการป้อนข้อมูลเพิ่มขึ้นเนื่องจากการโต้ตอบทับซ้อนกันอาจเป็นภาพเคลื่อนไหวที่มีราคาสูง โดยเฉพาะอย่างยิ่ง ภาพเคลื่อนไหวใน JavaScript อาจเริ่มการทํางานของการเรียกใช้ requestAnimationFrame หลายครั้ง ซึ่งอาจขัดขวางการโต้ตอบของผู้ใช้ ในการหลีกเลี่ยงปัญหานี้ ให้ใช้ภาพเคลื่อนไหว CSS ทุกครั้งที่ทำได้เพื่อหลีกเลี่ยงการจัดคิวเฟรมภาพเคลื่อนไหวที่อาจมีราคาสูง แต่หากทำเช่นนี้ ให้หลีกเลี่ยงภาพเคลื่อนไหวที่ไม่ได้ทำการ Composite เพื่อให้ภาพเคลื่อนไหวทำงานบนเทรด GPU และคอมโพสิเตอร์เป็นหลัก ไม่ใช่ในเทรดหลัก

บทสรุป

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

รูปภาพหลักจาก Unsplash โดย Erik Mclean