HTML Loading and Performance

Render-blocking scripts

A plain <script src> in the <head> stops HTML parsing until it's downloaded and run, delaying everything below it.

Use defer (or modules) for application code, and async for independent scripts such as analytics.

<p id="log"></p>
<script>
  const log = (msg) => document.getElementById("log").innerHTML += msg + "<br>";
  log("1. inline script runs while parsing");
  document.addEventListener("DOMContentLoaded", () => log("3. DOMContentLoaded: deferred scripts have run"));
</script>
<script defer src="data:text/javascript,document.getElementById('log').innerHTML+='2. deferred script runs after parsing<br>'"></script>
<p>Paragraph parsed before the deferred script runs.</p>

Resource hints

• <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin> fetches a critical file early. Preload only what the first view needs; too many preloads compete with each other.
• <link rel="preconnect" href="https://cdn.example.com"> sets up the connection to an important third-party origin early.
• fetchpriority="high" on the hero image tells the browser it's important; loading="lazy" delays offscreen images and iframes.

Measure

Use Lighthouse and the browser's Performance panel, and track real-user Core Web Vitals (Largest Contentful Paint, Interaction to Next Paint, Cumulative Layout Shift).