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

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

Jeremy Wagner

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

ความล่าช้าของอินพุตคืออะไร

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

บทสรุป

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

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