Question 1

Which HTML choices most affect LCP?

Accepted Answer

Hero image/video prioritization, preload hints, avoid lazy on LCP element, server TTFB. fetchpriority=high on LCP image, correct sizes, modern formats. Reduce render-blocking resources in head.

Question 2

What does <link rel=preload> do?

Accepted Answer

Early fetch of critical resources with as type before the browser discovers them. Over-preloading competes for bandwidth. Use for fonts/LCP images/critical CSS carefully.

Question 3

Explain defer vs async on script tags.

Accepted Answer

async executes when ready (order not guaranteed); defer waits for parse and runs in order before DOMContentLoaded. module scripts defer by default. Put non-critical scripts deferred; avoid blocking parser without reason.

Question 4

How do resource hints dns-prefetch, preconnect, prefetch differ?

Accepted Answer

dns-prefetch resolves DNS; preconnect warmer connection; prefetch fetches likely next navigation resources. preconnect is costlier — limit origins. prefetch is speculative and low priority.

Question 5

Why do width/height on images matter for performance UX?

Accepted Answer

They reserve layout space reducing CLS; help browser pick dimensions with sizes. Modern alternative: CSS aspect-ratio. Missing dimensions cause jank as images load.

Question 6

How does critical CSS relate to HTML?

Accepted Answer

Inline or prioritize CSS needed for first paint; defer the rest. Don't inline megabytes. Extract above-the-fold carefully. Measure FCP/LCP.

Question 7

What is the cost of too many third-party scripts in head?

Accepted Answer

Main-thread contention, delayed hydration/LCP, privacy risk, unpredictable failures. Load async, delay until interaction, self-host when possible, tag managers carefully.

Question 8

When should you use loading=lazy on iframes?

Accepted Answer

For below-the-fold embeds (maps, videos) to reduce initial network/CPU. Don't lazy the primary above-the-fold embed. Still sandbox/third-party risk remains.

Question 9

How do you prioritize fonts in HTML?

Accepted Answer

preconnect to font origin, preload critical woff2, use font-display strategy in CSS. Too many family/weights hurt. Subset when possible.

Question 10

What HTML streaming/SSR concerns affect performance?

Accepted Answer

Time to first byte, progressive HTML, avoiding request waterfalls for data. Flush early shells. Don't block entire HTML on slow secondary data.

Question 11

How can <link rel=modulepreload> help?

Accepted Answer

Preloads ES modules and their dependency graph earlier. Useful for critical app entry. Wrong usage wastes bandwidth.

Question 12

Define a performance budget for HTML assets on a content site.

Accepted Answer

Limits for document size, image weight, third parties, LCP element rules, CI checks. Encode budgets into CMS constraints and monitoring alerts.

Performance HTML Interview Questions

Other HTML interview topics