🎯 Critical Rendering Path

<!-- Different JavaScript loading strategies -->

<!-- ❌ Blocking script (blocks HTML parsing) -->
<script src="blocking-script.js"></script>

<!-- ✅ Async script (downloads in parallel, executes when ready) -->
<script async src="analytics.js"></script>

<!-- ✅ Defer script (downloads in parallel, executes after DOM ready) -->
<script defer src="app.js"></script>

<!-- ✅ Module script (modern browsers, automatic defer) -->
<script type="module" src="modern.js"></script>
<script nomodule src="legacy.js"></script>

<!-- ✅ Dynamic import (load on demand) -->
<script>
// Load feature when needed
document.getElementById('feature-button').addEventListener('click', async () => {
  const { initFeature } = await import('./feature.js')
  initFeature()
})

// Preload critical JavaScript
const link = document.createElement('link')
link.rel = 'preload'
link.as = 'script'
link.href = '/critical.js'
document.head.appendChild(link)
</script>

<!-- ✅ Service Worker for caching -->
<script>
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
}
</script>

<!-- Resource hints for better loading -->

<!-- Preconnect to external domains -->
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://api.example.com" crossorigin>

<!-- DNS prefetch for late-discovered resources -->
<link rel="dns-prefetch" href="//cdn.example.com">
<link rel="dns-prefetch" href="//analytics.google.com">

<!-- Preload critical resources -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/hero-image.webp" as="image">
<link rel="preload" href="/critical.css" as="style">
<link rel="preload" href="/app.js" as="script">

<!-- Prefetch likely next resources -->
<link rel="prefetch" href="/page2.html">
<link rel="prefetch" href="/components.js">

<!-- Module preload for ES modules -->
<link rel="modulepreload" href="/modules/app.js">

<!-- Fetch priority (experimental) -->
<script fetchpriority="high" src="/critical.js"></script>
<img src="/hero.jpg" fetchpriority="high" alt="Hero">
<img src="/secondary.jpg" fetchpriority="low" alt="Secondary">

<!-- Resource hints in JavaScript -->
const link = document.createElement('link')
link.rel = 'preload'
link.href = '/dynamic-resource.js'
link.as = 'script'
document.head.appendChild(link)

// Critical metrics measurement
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    switch (entry.entryType) {
      case 'paint':
        if (entry.name === 'first-contentful-paint') {
          console.log('FCP:', entry.startTime)
        }
        break

      case 'largest-contentful-paint':
        console.log('LCP:', entry.startTime)
        break

      case 'layout-shift':
        console.log('CLS:', entry.value)
        break
    }
  }
})

observer.observe({
  entryTypes: ['paint', 'largest-contentful-paint', 'layout-shift']
})

// Critical resource timing
window.addEventListener('load', () => {
  const resources = performance.getEntriesByType('resource')

  // Identify render-blocking resources
  const blockingResources = resources.filter(resource => {
    return resource.renderBlockingStatus === 'blocking'
  })

  console.log('Blocking resources:', blockingResources.length)

  // Measure critical path metrics
  const navigation = performance.getEntriesByType('navigation')[0]
  const domComplete = navigation.domComplete
  const loadComplete = navigation.loadEventEnd

  console.log('Critical path time:', domComplete)
  console.log('Full load time:', loadComplete)
})

// Lighthouse programmatic audit
const lighthouse = require('lighthouse')
const chromeLauncher = require('chrome-launcher')

async function auditCriticalPath(url) {
  const chrome = await chromeLauncher.launch()
  const options = { port: chrome.port }

  const result = await lighthouse(url, options)
  const audits = result.lhr.audits

  return {
    fcp: audits['first-contentful-paint'].numericValue,
    lcp: audits['largest-contentful-paint'].numericValue,
    renderBlocking: audits['render-blocking-resources'].score,
    unusedCSS: audits['unused-css-rules'].score,
    criticalRequest: audits['critical-request-chains'].displayValue
  }
}