การแยกตามเส้นทางและระดับคอมโพเนนต์

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

• แบ่งตามเส้นทาง: แบ่งหน้าขนาดใหญ่
• แบ่งระดับคอมโพเนนต์: แบ่งกราฟหรือตัวแก้ไข
• วาง Suspense ชิดบริเวณที่ช้า

แบ่งตามเส้นทาง: มีเพียงแท็บรายงานเท่านั้นที่โหลดเมื่อจำเป็น แท็บอื่นจะแสดงผลทันที

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

โหลดล่วงหน้าตามความตั้งใจ: เริ่มโหลดเมื่อผู้ใช้เลื่อนเมาส์ไปวางเหนือปุ่ม เพื่อให้การคลิกตอบสนองทันที

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

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