งานที่ใช้เวลานานคือโค้ด JavaScript ที่ผูกชุดข้อความหลักเป็นระยะเวลานาน ทำให้ UI "ค้าง"
ระหว่างที่หน้าโหลดอยู่ งานที่ใช้เวลานานอาจเชื่อมโยงเทรดหลักเข้าด้วยกันและทำให้หน้าเว็บไม่ตอบสนองต่อข้อมูลจากผู้ใช้แม้ว่าจะดูดีแล้วก็ตาม การคลิกและแตะมักจะไม่ได้ผลเนื่องจากฟีเจอร์แบบอินเทอร์แอกทีฟ เช่น Listener เหตุการณ์และตัวแฮนเดิลคลิกยังไม่ได้แนบไปกับองค์ประกอบ UI ด้วยเหตุนี้ งานที่ใช้เวลานานจึง เพิ่มเวลาในการโต้ตอบได้อย่างมาก
![เวลาในการตอบสนองที่แสดงในรายงาน Lighthouse](https://web.dev/static/articles/long-tasks-devtools/image/time-interactive-display-81e5dbb6e6aaa.png?authuser=6&hl=th)
ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สามารถแสดงภาพงานที่ใช้เวลานานได้แล้ว ทำให้ดูงานที่ต้องเพิ่มประสิทธิภาพได้ง่ายขึ้น
สิ่งที่ถือเป็นงานที่ใช้เวลานาน
งานที่ใช้เวลานานใน CPU เกิดจากงานที่ซับซ้อนซึ่งใช้เวลานานกว่า 50 มิลลิวินาที โมเดล RAIL แนะนำให้คุณประมวลผลเหตุการณ์อินพุตของผู้ใช้ใน 50 มิลลิวินาที เพื่อให้แน่ใจว่าการตอบสนองที่มองเห็นได้ภายใน 100 มิลลิวินาที และรักษาความเชื่อมโยงระหว่างการดำเนินการและปฏิกิริยา
ประเด็นสำคัญ: แม้ว่าโมเดล RAIL จะแนะนำให้ตอบสนองด้วยภาพต่ออินพุตของผู้ใช้ภายใน 100 มิลลิวินาที แต่เกณฑ์ของเมตริก การโต้ตอบกับ Next Paint (INP) ให้เวลาสูงสุด 200 มิลลิวินาทีในการตั้งค่าความคาดหวังที่เป็นไปได้มากยิ่งขึ้น โดยเฉพาะสำหรับอุปกรณ์ที่ทำงานช้าลง
มีงานที่ใช้เวลานานในหน้าของฉันที่อาจทำให้การโต้ตอบล่าช้าไหม
ก่อนหน้านี้คุณต้องค้นหา "บล็อกสีเหลืองขนาดยาว" ของสคริปต์ที่ยาวกว่า 50 มิลลิวินาทีด้วยตนเองใน Chrome DevTools หรือใช้ Long Tasks API เพื่อค้นหาว่างานใดที่ทำให้การโต้ตอบล่าช้า
![ภาพหน้าจอของแผงประสิทธิภาพสำหรับเครื่องมือสำหรับนักพัฒนาเว็บแสดงความแตกต่างระหว่างงานสั้นๆ กับงานที่ใช้เวลานาน](https://web.dev/static/articles/long-tasks-devtools/image/a-devtools-performance-pa-938d4fa393ba4.png?authuser=6&hl=th)
เพื่อช่วยให้เวิร์กโฟลว์การตรวจสอบประสิทธิภาพง่ายขึ้น ตอนนี้ DevTools แสดงภาพงานที่ใช้เวลานาน งาน (แสดงเป็นสีเทา) จะมีธงสีแดงหากเป็นงานที่ใช้เวลานาน
![เครื่องมือสำหรับนักพัฒนาเว็บแสดงภาพงานที่ใช้เวลานานเป็นแถบสีเทาในแผงประสิทธิภาพพร้อมธงสีแดงสำหรับงานที่ยาว](https://web.dev/static/articles/long-tasks-devtools/image/devtools-visualizing-long-9441dd5be61ea.png?authuser=6&hl=th)
วิธีใช้เครื่องมือแสดงข้อมูลเป็นภาพแบบใหม่
- บันทึกการติดตามในแผงประสิทธิภาพของการโหลดหน้าเว็บ
- มองหาธงสีแดงในมุมมองชุดข้อความหลัก ตอนนี้คุณจะเห็นว่ามีการทำเครื่องหมายงานเป็นสีเทาและติดป้ายกำกับว่างานแล้ว
- วางเมาส์ไว้เหนือแถบสีเทา คุณจะเห็นกล่องโต้ตอบที่แสดงระยะเวลาของงานและพิจารณาว่าระยะเวลาดังกล่าวถือว่าเป็นงานที่ใช้เวลานานหรือไม่
สาเหตุของงานที่ใช้เวลานานของฉันคืออะไร
หากต้องการดูสาเหตุของงานที่ใช้เวลานาน ให้เลือกแถบงานสีเทา ในลิ้นชักด้านล่าง ให้เลือกล่างขึ้นบนและจัดกลุ่มตามกิจกรรม วิธีนี้ช่วยให้คุณดูได้ว่ากิจกรรมใดมีส่วนมากที่สุด (โดยรวม) กับงานที่ใช้เวลานานมาก ในตัวอย่างต่อไปนี้ สาเหตุของความล่าช้ามีลักษณะเหมือนชุดคำค้นหา DOM ที่มีราคาแพง
![การเลือกงานที่ใช้เวลานานในเครื่องมือสำหรับนักพัฒนาเว็บจะแสดงกิจกรรมที่รับผิดชอบงานนั้น](https://web.dev/static/articles/long-tasks-devtools/image/selecting-long-task-lab-acf1b77536fe5.png?authuser=6&hl=th)
วิธีทั่วไปในการเพิ่มประสิทธิภาพงานที่ใช้เวลานานมีอะไรบ้าง
สคริปต์ขนาดใหญ่มักเป็นสาเหตุหลักที่ทำให้ใช้เวลานาน ลองแยกส่วนข้อมูลออก นอกจากนี้ ให้คอยตรวจสอบสคริปต์ของบุคคลที่สามซึ่งอาจมีงานที่ใช้เวลานาน ซึ่งทำให้เนื้อหาหลักกลายเป็นแบบอินเทอร์แอกทีฟล่าช้า
แบ่งงานทั้งหมดออกเป็นส่วนๆ ที่ใช้เวลาน้อยกว่า 50 มิลลิวินาที และทำงานเหล่านี้ให้ถูกที่ถูกเวลา ตำแหน่งที่ถูกต้องสำหรับบางรายการอาจอยู่นอกเทรดหลักใน Service Worker ดูคำแนะนำในการแบ่งงานที่ใช้เวลานานได้จาก Optimize Long Tasks และ Idleuntil Urgent ของ Phil Walton
ทำให้หน้าเว็บตอบสนองอยู่เสมอ การลดงานที่ใช้เวลานานเป็นวิธีที่ยอดเยี่ยมที่จะช่วยให้ผู้ใช้ได้รับประสบการณ์ที่น่าพึงพอใจเมื่อเข้าชมเว็บไซต์ ดูข้อมูลเพิ่มเติมเกี่ยวกับงานที่ใช้เวลานานได้ที่เมตริกประสิทธิภาพที่เน้นผู้ใช้เป็นหลัก