Performance / Beginner
Use width, height, or aspect-ratio so images and embeds do not create layout shifts.
Why this matters
Images and embeds without reserved dimensions cause content to jump after loading.
That layout shift hurts reading comfort and can affect Core Web Vitals.
Reserve dimensions with width and height attributes, aspect-ratio CSS, or framework image components.
<img
src="/case-study.jpg"
alt="Dashboard case study"
width="1200"
height="675"
loading="lazy"
/>How this applies outside a perfect demo, including frameworks, CMS platforms, stores, and builder workflows.
HTML: Width and height attributes let browsers calculate aspect ratio early.
Next.js: Image enforces dimensions unless using fill, where the parent must reserve space.
Embeds: Wrap videos and maps in an aspect-ratio container.
Explore other stacks
Move from this Performance note into related HTML, CSS, Next.js, JavaScript, React, WordPress, and performance lessons.
Pre-render dynamic pages at build time instead of on every request to cut TTFB.
Local state avoids unnecessary parent renders and keeps component intent obvious.
Cancel outdated browser requests so fast UI changes do not render old data.
Fluid spacing keeps layouts responsive without a forest of breakpoint overrides.
Sanitize on input, escape on output, and keep theme templates strict about user content.
If it changes state, use button. If it navigates, use a link.