HTML Performance Review with AI

Several of the highest-impact performance techniques from the HTML Performance module leave a clear, checkable signature in the HTML source itself. A <script> tag with neither defer nor async, covered in the Defer and Async lessons, visibly blocks rendering. An <img> missing explicit width and height attributes risks layout shift, covered in relation to Core Web Vitals. A below-the-fold image missing loading="lazy", from the Lazy Loading lesson, loads unnecessarily early.

All three are readable directly from the markup — no runtime measurement required — which makes them an excellent fit for a fast AI-assisted review pass.

AI review of static HTML can flag risk factors, but it cannot tell you the actual Largest Contentful Paint time, the real Interaction to Next Paint measurement, or the genuine Cumulative Layout Shift score a real user experiences — these depend on real network conditions, server response behavior, and actual browser rendering, none of which is visible from markup alone.

The correct division of labor: use AI review to catch obvious markup-level risk factors early and cheaply, then use real measurement tools — Lighthouse, WebPageTest, and real-user field data, as covered throughout the HTML Performance module — to get actual, trustworthy performance numbers.

As with every prior lesson in this section, specificity matters. A performance review prompt naming the exact techniques from the HTML Performance module — missing defer/async, missing image dimensions, missing loading="lazy", missing <link rel="preload"> for critical resources — produces a genuinely useful, actionable review, rather than a vague and less reliable general assessment.

This mirrors the specificity principle established across generating, refactoring, and reviewing HTML with AI throughout this entire section: the more precisely a request states its criteria, the more precisely — and usefully — the response matches them.

Catching Performance Mistakes In The Markup Itself. The HTML Performance module covered a specific set of markup-level techniques — defer, async, preload, lazy loading, resource priorities — that directly affect page speed. Many mistakes here are visible directly in the HTML itself, which makes them well suited to a fast AI-assisted review pass before real performance measurement tools ever run.

AI Review Catches Markup-Level Performance Anti-Patterns. A <script> tag without defer or async blocking rendering, an <img> missing width/height causing layout shift, or a below-the-fold image missing loading='lazy' are all visible directly in HTML source — exactly the kind of pattern an AI model can reliably flag, connecting straight back to the HTML Performance module's lessons.

What Performance Issues Are Markup-Visible. Which of these performance issues is directly visible and catchable through HTML markup review alone, without running the page?

• →The actual server response time for a specific user's request
• →A blocking <script> tag missing the defer or async attribute
• →Real network latency experienced by users in a specific region

AI Review Cannot Measure Actual Load Performance. Whether a page actually achieves good Core Web Vitals scores depends on real network conditions, server response time, and actual rendering behavior — none of which is visible from reading HTML alone. AI review flags markup-level risk factors; real measurement tools, covered in the HTML Performance module, provide the actual numbers.

AI Review vs. Real Performance Measurement. What is the correct relationship between an AI-assisted performance review of HTML markup and real performance measurement tools?

• →AI markup review fully replaces the need for any real performance measurement
• →AI review flags markup-level risk factors; real measurement tools provide actual performance numbers
• →The two are unrelated and serve entirely separate purposes

Prompting With The Performance Module's Exact Techniques Produces Focused Results. A performance review prompt naming the specific techniques from the HTML Performance module — 'check for missing defer/async, missing width/height on images, missing loading="lazy" on below-the-fold images, and improper resource priority hints' — produces a far more useful, focused review than a generic 'check performance' request.

Writing A Focused Performance Review Prompt. What makes a performance review prompt more useful: naming specific techniques, or a general 'check performance' request?

• →A general 'check performance' request always produces equally useful results
• →Naming specific techniques from the HTML Performance module — defer/async, image dimensions, lazy loading, resource priorities
• →Neither approach produces meaningfully different results

AI-Assisted Performance Review Mastered. You now understand which performance issues are directly visible and catchable through HTML markup review, why real measurement tools remain necessary for actual performance numbers, and how naming specific techniques from the HTML Performance module produces more focused, useful reviews.

Fix What An AI Performance Review Flags. An AI performance review flagged this offscreen image as render-blocking — lazy-load it.