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

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

Jeremy Wagner

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

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

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

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

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

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

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

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

วิธีลดเวลาในการตอบสนอง

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

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

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

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

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

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

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

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

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

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

ภาพการโต้ตอบที่เกิดขึ้นเมื่องานนานเกินไปและเบราว์เซอร์ตอบสนองต่อการโต้ตอบได้ไม่เร็วพอ เทียบกับเมื่อแบ่งงานที่ยาวออกเป็นงานที่เล็กลง

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

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

คำนึงถึงการทับซ้อนของการโต้ตอบ

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

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

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

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

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

บทสรุป

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

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