Lesson 11 of 12
Structured learning draftImprove images, fonts and rendering performance
Performance is a user-experience constraint. Slow transfers and unstable layouts particularly affect mobile users and constrained networks. This lesson pairs implementation with repeatable browser evidence so the learner can explain both the result and its limits.
Learning objectives
- Deliver appropriately sized images.
- Prevent avoidable layout movement.
- Measure before and after optimization.
Improve images, fonts and rendering performance
Improve images, fonts and rendering performance: responsive images to layout shift to critical rendering path.
Deliver appropriately sized images.
Prevent avoidable layout movement.
Measure before and after optimization.
<img src="project-800.webp"
srcset="project-480.webp 480w, project-800.webp 800w, project-1280.webp 1280w"
sizes="(min-width: 48rem) 50vw, 100vw"
width="1280" height="853"
alt="Prototype appointment flow displayed across three screens">srcset supplies candidates and sizes describes the expected rendered width so the browser can choose. Intrinsic dimensions reserve aspect-ratio space. Compress assets, avoid shipping decorative media at hero priority, and use system or carefully subset fonts. Measure transfer size, largest contentful paint and layout shift instead of assuming a format change helped.
Run a measured optimization
- Record a baseline with cache disabled and network throttling.
- Identify the largest transferred and rendered resources.
- Resize and encode one image for its actual display sizes.
- Repeat with the same conditions and record the difference.
| Evidence | Record |
|---|---|
| Source | The exact HTML and CSS tested |
| Environment | Browser, viewport and input method |
| Result | Observed behavior and test outcome |
| Limitation | Unresolved issue and next action |
Common mistakes
- Uploading a multi-megabyte image and shrinking it with CSS.
- Lazy-loading the likely largest contentful image.
- Comparing measurements taken under different conditions.
Practice activity
Apply the lesson
Optimize the portfolio hero and project images. Produce a before/after table containing bytes, dimensions and measured loading observations. Submit the source files, test environment, observed result, one failure or boundary case, and a short limitation with the next corrective action.
Check your understanding
What is the purpose of the sizes attribute when srcset uses width descriptors?
Lesson summary
- Responsive images reduce unnecessary transfer.
- Dimensions prevent layout shift.
- Optimization claims require comparable measurements.
Sources and further reading
- Learn web developmentMDN Web Docs - accessed 2026-09-04
- HTML StandardWHATWG - accessed 2026-09-04
- Page Structure TutorialW3C Web Accessibility Initiative - accessed 2026-09-04
- Web Content Accessibility Guidelines 2.2W3C - accessed 2026-09-04
Personal study note