Learning overview
- Estimated time
- 4 minutes
- Difficulty
- Beginner
- Prerequisites
- No prior experience required
- Learning outcome
- Explain html using a clear mental model · Apply html in practical HTML work
- Last updated
- July 18, 2026
Reserve space and deliver appropriate media
Width and height attributes let the browser calculate an image’s aspect ratio before download, reducing layout shifts. Srcset and sizes help it choose an appropriately sized source instead of downloading a desktop image for every phone.
<img
src="/images/course-800.webp"
srcset="/images/course-400.webp 400w,
/images/course-800.webp 800w,
/images/course-1200.webp 1200w"
sizes="(max-width: 640px) 100vw, 800px"
alt="Visual lesson showing the CSS box model"
width="800"
height="450">Match loading priority to user experience
Do not lazy-load the likely largest image above the fold. Lazy-load offscreen images and iframes. Preload only a small number of critical resources whose early discovery genuinely improves rendering; excessive preload competes for bandwidth.
- Load the primary visible image normally
- Use loading="lazy" for offscreen images
- Use fetchpriority sparingly and based on measurement
- Avoid autoplaying heavy media
Prevent scripts from blocking parsing unnecessarily
A classic script without async or defer blocks HTML parsing while it downloads and executes. Defer preserves document order and runs after parsing. Async runs as soon as available, so it suits independent scripts that do not depend on document order.
<script src="/js/navigation.js" defer></script>
<script src="https://example.com/independent-analytics.js" async></script>Measure the result
Use browser network and performance tools to verify discovery order, transfer size, blocking time, largest contentful paint, and layout shifts. Keep markup changes only when evidence confirms they improve the target experience.
Frequently asked questions
Should every image use lazy loading?
No. Images visible in the initial viewport, especially the likely LCP image, should generally load immediately. Lazy loading is most useful below the fold.
What is the difference between async and defer?
Both avoid blocking download during parsing. Deferred scripts run after parsing in document order; async scripts execute whenever ready without preserving order.
Topic graph
A taxonomy-generated path through this subject.
Related courses
Related learning
Recommended automatically from shared technologies, topics, intent, and difficulty.
Related Guides
Related Tutorials
Related Glossary
Related Cheatsheets
Related Projects
Related Interview Questions
Related reading
Hand-picked companion pages that deepen this topic.
Your next steps