Critical rendering path

<!-- Blocks HTML parsing until downloaded and executed -->
<script src="script.js"></script>

<div>This content waits for script.js</div>

<!-- Downloads in parallel, executes immediately when ready -->
<script src="analytics.js" async></script>

<!-- Best for: independent scripts like analytics, ads -->
<!-- Execution order: not guaranteed -->

<!-- Downloads in parallel, executes after HTML parsing -->
<script src="app.js" defer></script>

<!-- Best for: scripts that need the DOM -->
<!-- Execution order: guaranteed (document order) -->

<!-- Type="module" scripts are deferred automatically -->
<script type="module" src="main.js"></script>

<!-- Modules maintain dependency order -->

// Load module only when needed
button.addEventListener('click', async () => {
  const module = await import('./heavy-feature.js');
  module.initialize();
});

// Conditional loading
if (window.innerWidth > 768) {
  import('./desktop-features.js').then(module => {
    module.init();
  });
}

// Load script when element is visible
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      import('./chart-library.js').then(module => {
        module.renderChart(entry.target);
      });
      observer.disconnect();
    }
  });
});

observer.observe(document.querySelector('.chart-container'));

// Load during browser idle time
if ('requestIdleCallback' in window) {
  requestIdleCallback(() => {
    import('./analytics.js').then(module => {
      module.trackPageView();
    });
  });
} else {
  // Fallback for browsers without requestIdleCallback
  setTimeout(() => {
    import('./analytics.js').then(module => {
      module.trackPageView();
    });
  }, 1000);
}

<!-- Connect to API domain early -->
<link rel="preconnect" href="https://api.example.com" />

<!-- Connect to CDN -->
<link rel="preconnect" href="https://cdn.example.com" />

<!-- Connect to Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<!-- Modern browsers use preconnect, older use dns-prefetch -->
<link rel="preconnect" href="https://api.example.com" />
<link rel="dns-prefetch" href="https://api.example.com" />

<!-- DNS-prefetch for multiple third-party domains -->
<link rel="dns-prefetch" href="https://analytics.google.com" />
<link rel="dns-prefetch" href="https://connect.facebook.net" />
<link rel="dns-prefetch" href="https://platform.twitter.com" />

// Preconnect based on user interaction
const loginButton = document.querySelector('#login');

loginButton.addEventListener('mouseenter', () => {
  const link = document.createElement('link');
  link.rel = 'preconnect';
  link.href = 'https://auth.example.com';
  document.head.appendChild(link);
}, { once: true });