Q198: Image, Font and Static Asset Performance
What Interviewers Want To Evaluate
This question checks whether you can optimize non-JavaScript assets. Interviewers want responsive images, modern formats, image dimensions, font loading, subsetting, static caching, compression, CDN strategy, SVG trade-offs, and avoiding asset-driven Core Web Vitals regressions.
Senior answers should treat assets as part of the critical rendering path.
Short Interview Answer
Images, fonts, and static assets strongly affect LCP, CLS, bandwidth, and perceived quality. Good asset strategy uses responsive images, correct dimensions, modern formats, compression, cacheable hashed files, font subsetting, safe font display behavior, and CDN delivery. Critical assets should be discoverable early, while non-critical assets should load later without shifting layout or blocking interaction.
Detailed Interview Answer
Assets often dominate page weight.
Common asset types:
hero images
content images
icons
fonts
videos
PDFs
CSS
JavaScript
SVGs
favicons
manifest files
Each has different loading and caching behavior.
Image Strategy
Images should match display needs.
Use:
responsive sizes
modern formats
proper compression
width and height
aspect-ratio
lazy loading below fold
priority loading for LCP image
CDN resizing where possible
Avoid serving a 3000px image into a 360px mobile slot.
Responsive Images
Responsive images let the browser choose the right resource.
The browser needs:
srcset
sizes
actual rendered dimensions
device pixel ratio
viewport width
In Next.js, next/image can automate much of this when dimensions and sizes are correct.
Image CLS
Images need reserved space.
Without dimensions, the browser discovers image size after load and shifts content.
Use width and height or CSS aspect ratio.
This protects CLS and perceived polish.
Font Strategy
Fonts can block text or cause layout shifts.
Good strategy:
use system fonts where acceptable
subset custom fonts
limit weights
preload critical fonts
use next/font when possible
choose font-display intentionally
match fallback metrics
Do not load five weights for a UI that uses two.
SVGs and Icons
SVGs are excellent for many icons.
But watch for:
large inline SVGs
unoptimized paths
duplicated icon bundles
SVG script risk from untrusted files
accessibility labels
layout sizing
Icon libraries should be imported in a tree-shakable way.
Static Caching
Hashed assets should be immutable.
app.abc123.js
styles.def456.css
image-hash.webp
If the filename changes when content changes, the browser can cache aggressively.
Unhashed assets need more careful cache rules.
Compression
Text assets benefit from compression.
Brotli
gzip
minification
tree shaking
CSS pruning
Images need image-specific compression, not gzip.
CDN Strategy
A CDN reduces latency and improves asset delivery.
Consider:
cache headers
regional latency
image optimization
purge strategy
stale-while-revalidate
fallback behavior
origin load
CDNs are powerful, but cache invalidation rules must be understood.
Common Mistakes
A common mistake is optimizing JavaScript while shipping huge images.
Another mistake is lazy loading the LCP image.
Another mistake is loading too many font variants.
Another mistake is missing image dimensions.
Another mistake is using uncacheable asset URLs.
Senior Trade-Offs
Asset optimization balances quality and speed.
Too much compression can damage visual quality.
Too little compression wastes user bandwidth.
The right answer depends on content importance, viewport, device class, and business context.
Debugging Workflow
When asset performance is poor:
inspect network waterfall
identify largest assets
check LCP element
check image dimensions
check srcset and sizes
check font files and weights
check cache headers
check compression
check CDN behavior
verify field metrics
Interview Framing
Explain images, fonts, caching, compression, and CDN delivery as part of the render path and Web Vitals strategy.
Revision Notes
Asset performance is often the fastest way to improve real user experience.
Key Takeaways
Serve the right asset, at the right size, at the right time, with stable layout.
Follow-Up Questions
- How do responsive images work?
- Why do image dimensions matter?
- When should images be lazy loaded?
- Why not lazy load LCP images?
- How do fonts affect performance?
- What does font subsetting do?
- How should static assets be cached?
- What should be compressed with Brotli?
- How does a CDN help?
- How do you debug large asset cost?
How I Would Answer This In A Real Interview
I would say I optimize images with responsive sizing, dimensions, modern formats, and priority rules; optimize fonts with subsetting, limited weights, and safe loading; and serve hashed static assets through a CDN with strong caching. Then I would validate with waterfall traces and field Web Vitals.