Front-End Exercise 4

1. Title: “Gallery images cause layout shift (CLS) on load.”
2. Environment: “Chrome DevTools with Network throttled to ‘Slow 3G’; viewport 390×844.”
3. Steps to reproduce:
   1. Open the page and throttle the network (Slow 3G).
   2. Scroll to the gallery and wait for images to load.
   3. Observe text/buttons jumping as each image appears.
4. Expected vs. Actual:
   • Expected: Content should stay stable while images load.
   • Actual: Content jumps (layout shifts) as images load without reserved space.
5. Impact/Severity: “Medium–High — hurts perceived quality; may cause mis-clicks and lower engagement; impacts Core Web Vitals (CLS).”
6. Recommendation: “Add explicit width/height or CSS aspect-ratio; consider placeholders/skeletons; keep dimensions consistent.”
7. Hand-off: “I’ll attach a short recording and a Lighthouse report showing CLS spikes.”

• CLS (Cumulative Layout Shift) — a metric that measures unexpected layout movement during page load.
• layout shift — visible movement of elements when content loads in.
• placeholder — temporary block that reserves space until the real content loads.
• aspect ratio — proportional relationship between width and height.
• Lighthouse — Google’s tool for auditing performance and web vitals.
• Core Web Vitals — UX metrics (e.g., LCP, CLS, INP).
• throttling — simulating slow network/CPU in DevTools.
• viewport — visible area of a web page in the browser.

• reserve space for images
• stabilize the layout
• reduce layout shift
• audit Core Web Vitals
• simulate slow networks
• add width/height attributes
• apply an aspect ratio

• jump around — move erratically (“The page jumps around while loading.”)
• zero in on — focus on the main cause.
• iron out — smooth or fix minor issues.
• lock in — secure a value (e.g., “lock in the aspect ratio”).
• point out — highlight an issue to others.

• Present continuous for live observation: “The buttons are jumping when images load.”
• Present simple for facts: “CLS measures unexpected layout movement.”
• Passive for impact: “User experience is affected by layout shifts.”
• Cause–effect with participles: “Missing dimensions causes instability.”

• “We should add width/height attributes to reserve space.”
• “Engineering could use aspect-ratio for consistency.”
• “Design might want to align image crops to a fixed ratio.”
• “We can provide a skeleton as a placeholder.”

“Title: Gallery images cause layout shift (CLS) on load. Environment: Chrome with Slow 3G, mobile viewport. Steps: open the page, scroll to the gallery, and wait for images to load. Expected: the content remains stable while images load. Actual: the cards jump as each image appears, which is distracting and can cause mis-clicks. Impact: medium–high, and it negatively affects Core Web Vitals, specifically CLS. Likely cause: images are missing explicit width/height or an aspect-ratio placeholder, so the browser can’t reserve space. Recommendation: add width and height attributes to images (letting the browser infer aspect ratio), or apply CSS aspect-ratio with a reserved height/skeleton. I’ll add a short screen recording and a Lighthouse report to the ticket.”