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

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

Jeremy Wagner

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

บทสรุป

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

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