🧩 Problem
During initial page loads, images (like avatars, banners, or course thumbnails) render progressively without reserved dimensional space. This causes the text and UI elements to jump around the screen as images load, leading to a high Cumulative Layout Shift (CLS) score, which negatively impacts Lighthouse performance metrics and the overall user experience.
🎯 Expected Outcome
Enforce strict width, height, and aspect-ratio CSS configurations or utilize the Next.js <Image> component properly for all media assets across the main landing and dashboard pages to reserve bounding boxes before image fetching.
✅ Acceptance Criteria
Labels requested: level:advanced, type:performance, type:UX
🧩 Problem
During initial page loads, images (like avatars, banners, or course thumbnails) render progressively without reserved dimensional space. This causes the text and UI elements to jump around the screen as images load, leading to a high Cumulative Layout Shift (CLS) score, which negatively impacts Lighthouse performance metrics and the overall user experience.
🎯 Expected Outcome
Enforce strict
width,height, andaspect-ratioCSS configurations or utilize the Next.js<Image>component properly for all media assets across the main landing and dashboard pages to reserve bounding boxes before image fetching.✅ Acceptance Criteria
<img>tags.aspect-ratioutility classes (e.g.,aspect-square,aspect-video) using TailwindCSS.0.00on simulated slow 3G network conditions.Labels requested:
level:advanced,type:performance,type:UX