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

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

Jeremy Wagner

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

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

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

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

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

วิธีคิดเกี่ยวกับความล่าช้าของอินพุต

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

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

วิธีลดความล่าช้าของอินพุต

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

บทสรุป

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

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