Resource Waterfall ดึงทุกคำขอของเพจที่สร้างบนไทม์ไลน์ แต่ละแถบแบ่งออกเป็นเฟสจริง — เข้าคิว, DNS, TCP, TLS, กำลังรอและดาวน์โหลด — พร้อมด้วยเครื่องหมายสำหรับ FCP, LCP, DOMContentLoaded และโหลด
เมื่อหน้าเว็บรู้สึกช้า คำถามก็เหมือนเดิมเสมอ: จะรออะไรอยู่? คำตอบของเบราว์เซอร์นั้นอยู่ในแผงเครือข่าย ซึ่งหมายถึงการเปิด DevTools วางลิ้นชักไว้เหนือหน้าที่คุณกำลังตรวจสอบ และโหลดซ้ำเพื่อเริ่มโหลด
Resource Waterfall วางไทม์ไลน์นั้นไว้ในแผงลอยข้างเพจ ทุกคำขอจะปรากฏเป็นแถบซึ่งวางตำแหน่งตามเวลาที่เริ่มต้นและแบ่งส่วนตามเวลาจริง: เข้าคิวหรือหยุดทำงาน การค้นหา DNS การเชื่อมต่อ TCP การจับมือ TLS รอเซิร์ฟเวอร์ จากนั้นจึงดาวน์โหลด ส่วนสีน้ำเงินยาวคือเซิร์ฟเวอร์ที่ช้า สีเขียวยาวเป็นไฟล์ไขมัน สีเทายาวหมายถึงคำขอนั่งรอถึงคราว ความแตกต่างจะตัดสินว่าคุณควรแก้ไขอะไร
เครื่องหมายเส้นประบนไทม์ไลน์จะแสดง First Contentful Paint, Largest Contentful Paint, DOMContentLoaded และโหลด เพื่อให้คุณสามารถดูได้ว่าคำขอใดเสร็จสิ้นก่อนที่ผู้ใช้จะเห็นสิ่งใด และคำขอใดที่ยังคงดำเนินการอยู่หลังจากนั้น ทรัพยากรการบล็อกการเรนเดอร์และการเข้าถึงแคชจะถูกติดธงไว้ในแต่ละแถว และตัวกรองการบล็อกตัวเดียวจะตัดรายการลงเหลือเพียงสิ่งที่ทำให้การทาสีแรกล่าช้าจริงๆ
กรองตามประเภท ค้นหาตาม URL หรือจัดเรียงตามช้าที่สุดหรือใหญ่ที่สุดเพื่อค้นหาผู้กระทำผิดที่เลวร้ายที่สุดอย่างรวดเร็ว คลิกแถวใดก็ได้เพื่อดู URL แบบเต็ม โปรโตคอล ขนาดการถ่ายโอนและถอดรหัส สถานะ และการแยกย่อยเฟสทั้งหมด คำขอที่มาถึงในขณะที่แผงเปิดสตรีมโดยตรง และ Export JSON จะคัดลอกไทม์ไลน์ทั้งหมด รวมถึงเหตุการณ์สำคัญที่รวมอยู่ด้วย เพื่อให้สามารถส่งผลการค้นพบประสิทธิภาพให้กับบุคคลอื่นได้โดยไม่ต้องจับภาพหน้าจอ
แต่ละแถบจะแบ่งออกเป็นคิว, DNS, TCP, TLS, กำลังรอและดาวน์โหลด ดังนั้นเซิร์ฟเวอร์ที่ช้า ไฟล์หลัก และคำขอที่อยู่ในคิวจึงสามารถแยกแยะได้ทันที
เส้นประสำหรับ FCP, LCP, DOMContentLoaded และโหลดแสดงว่าคำขอใดเสร็จสมบูรณ์ก่อนที่ผู้ใช้จะเห็นเนื้อหา และคำขอใดยังคงทำงานอยู่หลังจากนั้น
คลิกเพียงครั้งเดียวจะลดรายการลงเหลือทรัพยากรที่เก็บสีแรกจริงไว้ พร้อมจำนวนการบล็อกทั้งหมดในแถบสรุป
ทรัพยากรที่ให้บริการจากแคชจะถูกทำเครื่องหมายและติดป้ายกำกับแทนที่จะปรากฏเป็นแถวศูนย์ไบต์ลึกลับ ดังนั้นคุณจึงสามารถยืนยันได้ว่าแคชของคุณใช้งานได้จริง
จำกัดให้แคบลงตามประเภท — เอกสาร, CSS, JS, รูปภาพ, แบบอักษร, XHR, สื่อ — ค้นหาตาม URL หรือจัดเรียงตามช้าที่สุดหรือใหญ่ที่สุดเพื่อเข้าถึงผู้กระทำผิดที่เลวร้ายที่สุดในไม่กี่วินาที
คัดลอกน้ำตกทั้งหมดเป็น JSON รวมถึงเป้าหมาย ยอดรวม และระยะต่อคำขอ เพื่อแนบกับตั๋วหรือเปรียบเทียบกับการดำเนินการในภายหลัง
กรองทรัพยากรที่บล็อกการแสดงผล และดูสไตล์ชีทและสคริปต์ที่อยู่ระหว่างผู้เยี่ยมชมและเนื้อหาที่มองเห็น
จัดเรียงตามช้าที่สุดและดูผู้ให้บริการการวิเคราะห์ แบบอักษร หรือแชทปรากฏที่ด้านบนพร้อมกับระยะรอที่ยาวนานซึ่งไม่เกี่ยวข้องกับโค้ดของคุณ
อ่านสีของเฟส: เวลาที่ใช้ในการรอคือปัญหาแบ็กเอนด์หรือ CDN เวลาที่ใช้ในการดาวน์โหลดเป็นปัญหาเกี่ยวกับขนาดไฟล์ การแก้ไขจะแตกต่างกันไปในแต่ละคน
โหลดซ้ำและยืนยันว่าเนื้อหามาจากแคชและขนาดการถ่ายโอนมีขนาดเล็กกว่าขนาดที่ถอดรหัสมาก ซึ่งพิสูจน์ได้ว่าการบีบอัดเปิดอยู่จริง
ส่งออกไทม์ไลน์เป็น JSON และแนบไปกับตั๋ว เพื่อให้คนถัดไปเห็นตัวเลขเดียวกัน แทนที่จะพยายามสร้างเซสชันของคุณอีกครั้ง
คลิกไอคอน Resource Waterfall ใน Dock DevSuite Pro ทุกสิ่งที่หน้าเว็บโหลดมาจะปรากฏบนไทม์ไลน์ทันที
โหลดซ้ำโดยเปิดแผงเพื่อบันทึกโหลดตั้งแต่คำขอแรกสุด รวมถึงตัวเอกสารและเหตุการณ์สำคัญของการทาสี
กดชิปการบล็อกเพื่อดูเฉพาะทรัพยากรที่บล็อกการแสดงผล หรือเลือกประเภท เช่น js หรือ img เรียงตามช้าที่สุดเพื่อนำผู้กระทำผิดที่เลวร้ายที่สุดมาไว้ด้านบน
คลิกแถวใดก็ได้เพื่อดู URL แบบเต็ม โปรโตคอล ขนาด สถานะ และรายละเอียดทีละขั้นตอนเป็นมิลลิวินาที และคัดลอก URL หากคุณต้องการ
ส่งออก JSON จะคัดลอกไทม์ไลน์ทั้งหมดพร้อมเหตุการณ์สำคัญและผลรวม พร้อมที่จะวางลงในตั๋วหรือเก็บไว้เป็นบันทึกก่อนและหลัง
ติดตั้ง DevSuite Pro ฟรีและปลดล็อกเครื่องมือสำหรับนักพัฒนามากกว่า 71 รายการสำหรับเบราว์เซอร์ของคุณ
