HTML · Performance

Resource Preloading

Tell the browser what to load in advance for optimal performance

Find videos you like?

Save to resource drawer for future reference!

What is Resource Preloading?

Give the browser hints about what resources to load early

Resource preloading allows you to tell the browser about critical resources that should be loaded as soon as possible, before the browser would naturally discover them. This can significantly improve page load performance.

Three Types of Resource Hints

Preload

High priority, needed NOW

Prefetch

Low priority, might need LATER

Preconnect

Prepare connection early

Preload Syntax

Load critical resources with high priority

Basic Preload Examples:

<!-- Preload CSS -->
<link rel="preload" href="styles.css" as="style">

<!-- Preload Font (requires crossorigin) -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

<!-- Preload Image -->
<link rel="preload" href="hero.jpg" as="image">

<!-- Preload JavaScript -->
<link rel="preload" href="script.js" as="script">

The "as" Attribute is Required!

The as attribute tells the browser what type of resource it is, so it can assign the correct priority and apply the right Content Security Policy.

style

CSS files

script

JS files

font

Font files

image

Images

Preload CSS and Fonts Example

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preload CSS & Fonts</title>
    <!-- Preload critical CSS -->
    <link rel="preload" href="styles/critical.css" as="style">
    <link rel="preload" href="styles/main.css" as="style">
    <!-- Preload fonts -->
    <link rel="preload" href="fonts/inter-regular.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="fonts/inter-bold.woff2" as="font" type="font/woff2" crossorigin>
    <!-- Apply stylesheets -->
    <link rel="stylesheet" href="styles/critical.css">
    <link rel="stylesheet" href="styles/main.css">
  </head>
  <body>
    <div class="container">
      <h1>⚡ Resource Preloading</h1>
      <p class="subtitle">Load critical resources faster with preload hints</p>
      <div class="feature-grid">
        <div class="feature-card">
          <div class="feature-icon">🎨</div>
          <div class="feature-title">Preloaded CSS</div>
          <div class="feature-text">
            Critical styles loaded before parser encounters them
          </div>
        </div>
        <div class="feature-card">
          <div class="feature-icon">✍️</div>
          <div class="feature-title">Preloaded Fonts</div>
          <div class="feature-text">
            Custom fonts ready instantly, no FOUT or FOIT
          </div>
        </div>
        <div class="feature-card">
          <div class="feature-icon">⚡</div>
          <div class="feature-title">Faster Rendering</div>
          <div class="feature-text">
            Page renders faster with all resources ready
          </div>
        </div>
      </div>
      <div class="info-box">
        <div class="info-title">✨ How Preload Works</div>
        <div class="info-text">
          The <code>rel="preload"</code> attribute tells the browser to download resources
          immediately, even before they're needed. This is perfect for critical assets like
          fonts, CSS, and hero images that you know will be needed.
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Preload Hero Images

Eliminate layout shift and improve LCP score

Hero images (large above-the-fold images) should always be preloaded to improve Largest Contentful Paint (LCP) and prevent layout shifts.

Benefits:

No Layout Shift: Image space reserved immediately
Faster LCP: Critical image loads first
Better UX: Hero section appears instantly

Hero Image Preload Example

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preload Hero Images</title>
    <!-- Preload hero image -->
    <link rel="preload"
      href="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200"
      as="image">
    </head>
    <body>
      <div class="hero">
        <img
          class="hero-image"
          src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200"
          alt="Mountain landscape"
          >
          <div class="hero-content">
            <h1 class="hero-title">Hero Image Preloaded!</h1>
            <p class="hero-subtitle">No layout shift, instant display</p>
            <div class="badge">✨ Optimized Performance</div>
          </div>
        </div>
        <div class="content">
          <h2>📊 Performance Benefits</h2>
          <p>By preloading the hero image, we ensure it loads immediately without causing layout shifts or delays.</p>
          <div class="metrics">
            <div class="metric">
              <div class="metric-value">0ms</div>
              <div class="metric-label">Layout Shift</div>
            </div>
            <div class="metric">
              <div class="metric-value">50%</div>
              <div class="metric-label">Faster LCP</div>
            </div>
            <div class="metric">
              <div class="metric-value">100</div>
              <div class="metric-label">Perfect Score</div>
            </div>
          </div>
        </div>
      </body>
    </html>

Live Preview

Loading preview...

Prefetch vs Preload

Understanding the difference between these two hints

Preload (Urgent)

• High priority
• For current page
• Loads immediately
• Use for critical resources

Prefetch (Later)

• Low priority
• For future pages
• Loads when idle
• Use for next navigation

Prefetch Syntax:

<!-- Prefetch next page -->
<link rel="prefetch" href="/next-page.html">

<!-- Prefetch image for next page -->
<link rel="prefetch" href="/next-page-hero.jpg">

Prefetch vs Preload Comparison

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prefetch vs Preload</title>
    <!-- Preload: High priority, needed NOW -->
    <link rel="preload" href="critical-style.css" as="style">
    <!-- Prefetch: Low priority, might be needed LATER -->
    <link rel="prefetch" href="next-page.html">
    <link rel="prefetch" href="next-page-image.jpg">
  </head>
  <body>
    <div class="container">
      <h1>🔥 Prefetch vs Preload</h1>
      <div class="comparison">
        <!-- Preload Card -->
        <div class="card preload-card">
          <div class="card-header">
            <div class="card-icon preload-icon">⚡</div>
            <div class="card-title">Preload</div>
          </div>
          <div class="priority-badge high-priority">HIGH PRIORITY</div>
          <p class="description">
            Tells the browser: "I need this resource RIGHT NOW for the current page!"
          </p>
          <ul class="features">
            <li>🎯 Loads immediately</li>
            <li>⚡ High priority in network queue</li>
            <li>📦 Used for current page</li>
            <li>🚀 Mandatory attribute: <code>as</code></li>
            <li>⏱️ Downloaded during page load</li>
          </ul>
          <div class="use-case">
            <div class="use-case-title">Perfect For:</div>
            <div class="use-case-text">
              • Critical CSS<br>
              • Web fonts<br>
              • Hero images<br>
              • Above-the-fold resources
            </div>
          </div>
        </div>
        <!-- Prefetch Card -->
        <div class="card prefetch-card">
          <div class="card-header">
            <div class="card-icon prefetch-icon">🔮</div>
            <div class="card-title">Prefetch</div>
          </div>
          <div class="priority-badge low-priority">LOW PRIORITY</div>
          <p class="description">
            Tells the browser: "I might need this later, load it when you have time."
          </p>
          <ul class="features">
            <li>⏰ Loads when browser is idle</li>
            <li>📉 Low priority in network queue</li>
            <li>🔜 Used for future navigation</li>
            <li>💾 Cached for later use</li>
            <li>🎯 Downloaded opportunistically</li>
          </ul>
          <div class="use-case">
            <div class="use-case-title">Perfect For:</div>
            <div class="use-case-text">
              • Next page resources<br>
              • Images for next page<br>
              • Scripts for future routes<br>
              • Predictable user journeys
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Preconnect & DNS-Prefetch

Prepare connections to third-party domains

When loading resources from third-party domains (fonts, APIs, CDNs), you can save time by establishing connections early.

Connection Hints:

<!-- Preconnect: Full connection (DNS + TCP + TLS) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com">

<!-- DNS-Prefetch: DNS lookup only (lighter weight) -->
<link rel="dns-prefetch" href="https://api.example.com">

Preconnect

Full connection setup (DNS + TCP + TLS handshake). Use for critical third-party resources.

DNS-Prefetch

DNS lookup only. Lighter weight, use for less critical domains.

Best Practices

Don't Overuse Preload

Only preload 3-5 critical resources. Everything marked as high priority is effectively no priority.

Always Use Preload for Fonts

Fonts are discovered late in the render process. Preload them to eliminate FOUT/FOIT.

Use Prefetch for Predictable Navigation

If 80% of users click "Next", prefetch the next page resources during idle time.

Watch for Unused Preloads

Chrome DevTools will warn you about preloaded resources that weren't used within 3 seconds.

Browser Support

Preload: Excellent support across all modern browsers

Chrome: 50+ (April 2016)
Firefox: 85+ (January 2021)
Safari: 11.1+ (March 2018)
Edge: 79+ (January 2020)

Prefetch, Preconnect, DNS-Prefetch: Universal support in all modern browsers

Previous Topic

Lazy Loading

loading="lazy" attribute for images and iframes.

Next Topic

Async & Defer

Script loading strategies with async and defer attributes.

Ask a Question

Have a question about Resource Preloading? Ask our AI assistant.

🔐 Login to use AI Assistant

HTML Code Editor

Write and experiment with HTML code.

Output

Click "Run Code" to see the output.

Execution is only supported for Java, Spring, and JavaScript.

HTML · Performance

Resource Preloading

Tell the browser what to load in advance for optimal performance

Find videos you like?

Save to resource drawer for future reference!

What is Resource Preloading?

Give the browser hints about what resources to load early

Three Types of Resource Hints

Preload

High priority, needed NOW

Prefetch

Low priority, might need LATER

Preconnect

Prepare connection early

Preload Syntax

Load critical resources with high priority

Basic Preload Examples:

<!-- Preload CSS -->
<link rel="preload" href="styles.css" as="style">

<!-- Preload Font (requires crossorigin) -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

<!-- Preload Image -->
<link rel="preload" href="hero.jpg" as="image">

<!-- Preload JavaScript -->
<link rel="preload" href="script.js" as="script">

The "as" Attribute is Required!

The as attribute tells the browser what type of resource it is, so it can assign the correct priority and apply the right Content Security Policy.

style

CSS files

script

JS files

font

Font files

image

Images

Preload CSS and Fonts Example

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preload CSS & Fonts</title>
    <!-- Preload critical CSS -->
    <link rel="preload" href="styles/critical.css" as="style">
    <link rel="preload" href="styles/main.css" as="style">
    <!-- Preload fonts -->
    <link rel="preload" href="fonts/inter-regular.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="fonts/inter-bold.woff2" as="font" type="font/woff2" crossorigin>
    <!-- Apply stylesheets -->
    <link rel="stylesheet" href="styles/critical.css">
    <link rel="stylesheet" href="styles/main.css">
  </head>
  <body>
    <div class="container">
      <h1>⚡ Resource Preloading</h1>
      <p class="subtitle">Load critical resources faster with preload hints</p>
      <div class="feature-grid">
        <div class="feature-card">
          <div class="feature-icon">🎨</div>
          <div class="feature-title">Preloaded CSS</div>
          <div class="feature-text">
            Critical styles loaded before parser encounters them
          </div>
        </div>
        <div class="feature-card">
          <div class="feature-icon">✍️</div>
          <div class="feature-title">Preloaded Fonts</div>
          <div class="feature-text">
            Custom fonts ready instantly, no FOUT or FOIT
          </div>
        </div>
        <div class="feature-card">
          <div class="feature-icon">⚡</div>
          <div class="feature-title">Faster Rendering</div>
          <div class="feature-text">
            Page renders faster with all resources ready
          </div>
        </div>
      </div>
      <div class="info-box">
        <div class="info-title">✨ How Preload Works</div>
        <div class="info-text">
          The <code>rel="preload"</code> attribute tells the browser to download resources
          immediately, even before they're needed. This is perfect for critical assets like
          fonts, CSS, and hero images that you know will be needed.
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Preload Hero Images

Eliminate layout shift and improve LCP score

Hero images (large above-the-fold images) should always be preloaded to improve Largest Contentful Paint (LCP) and prevent layout shifts.

Benefits:

No Layout Shift: Image space reserved immediately
Faster LCP: Critical image loads first
Better UX: Hero section appears instantly

Hero Image Preload Example

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preload Hero Images</title>
    <!-- Preload hero image -->
    <link rel="preload"
      href="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200"
      as="image">
    </head>
    <body>
      <div class="hero">
        <img
          class="hero-image"
          src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200"
          alt="Mountain landscape"
          >
          <div class="hero-content">
            <h1 class="hero-title">Hero Image Preloaded!</h1>
            <p class="hero-subtitle">No layout shift, instant display</p>
            <div class="badge">✨ Optimized Performance</div>
          </div>
        </div>
        <div class="content">
          <h2>📊 Performance Benefits</h2>
          <p>By preloading the hero image, we ensure it loads immediately without causing layout shifts or delays.</p>
          <div class="metrics">
            <div class="metric">
              <div class="metric-value">0ms</div>
              <div class="metric-label">Layout Shift</div>
            </div>
            <div class="metric">
              <div class="metric-value">50%</div>
              <div class="metric-label">Faster LCP</div>
            </div>
            <div class="metric">
              <div class="metric-value">100</div>
              <div class="metric-label">Perfect Score</div>
            </div>
          </div>
        </div>
      </body>
    </html>

Live Preview

Loading preview...

Prefetch vs Preload

Understanding the difference between these two hints

Preload (Urgent)

• High priority
• For current page
• Loads immediately
• Use for critical resources

Prefetch (Later)

• Low priority
• For future pages
• Loads when idle
• Use for next navigation

Prefetch Syntax:

<!-- Prefetch next page -->
<link rel="prefetch" href="/next-page.html">

<!-- Prefetch image for next page -->
<link rel="prefetch" href="/next-page-hero.jpg">

Prefetch vs Preload Comparison

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prefetch vs Preload</title>
    <!-- Preload: High priority, needed NOW -->
    <link rel="preload" href="critical-style.css" as="style">
    <!-- Prefetch: Low priority, might be needed LATER -->
    <link rel="prefetch" href="next-page.html">
    <link rel="prefetch" href="next-page-image.jpg">
  </head>
  <body>
    <div class="container">
      <h1>🔥 Prefetch vs Preload</h1>
      <div class="comparison">
        <!-- Preload Card -->
        <div class="card preload-card">
          <div class="card-header">
            <div class="card-icon preload-icon">⚡</div>
            <div class="card-title">Preload</div>
          </div>
          <div class="priority-badge high-priority">HIGH PRIORITY</div>
          <p class="description">
            Tells the browser: "I need this resource RIGHT NOW for the current page!"
          </p>
          <ul class="features">
            <li>🎯 Loads immediately</li>
            <li>⚡ High priority in network queue</li>
            <li>📦 Used for current page</li>
            <li>🚀 Mandatory attribute: <code>as</code></li>
            <li>⏱️ Downloaded during page load</li>
          </ul>
          <div class="use-case">
            <div class="use-case-title">Perfect For:</div>
            <div class="use-case-text">
              • Critical CSS<br>
              • Web fonts<br>
              • Hero images<br>
              • Above-the-fold resources
            </div>
          </div>
        </div>
        <!-- Prefetch Card -->
        <div class="card prefetch-card">
          <div class="card-header">
            <div class="card-icon prefetch-icon">🔮</div>
            <div class="card-title">Prefetch</div>
          </div>
          <div class="priority-badge low-priority">LOW PRIORITY</div>
          <p class="description">
            Tells the browser: "I might need this later, load it when you have time."
          </p>
          <ul class="features">
            <li>⏰ Loads when browser is idle</li>
            <li>📉 Low priority in network queue</li>
            <li>🔜 Used for future navigation</li>
            <li>💾 Cached for later use</li>
            <li>🎯 Downloaded opportunistically</li>
          </ul>
          <div class="use-case">
            <div class="use-case-title">Perfect For:</div>
            <div class="use-case-text">
              • Next page resources<br>
              • Images for next page<br>
              • Scripts for future routes<br>
              • Predictable user journeys
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Preconnect & DNS-Prefetch

Prepare connections to third-party domains

When loading resources from third-party domains (fonts, APIs, CDNs), you can save time by establishing connections early.

Connection Hints:

<!-- Preconnect: Full connection (DNS + TCP + TLS) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com">

<!-- DNS-Prefetch: DNS lookup only (lighter weight) -->
<link rel="dns-prefetch" href="https://api.example.com">

Preconnect

Full connection setup (DNS + TCP + TLS handshake). Use for critical third-party resources.

DNS-Prefetch

DNS lookup only. Lighter weight, use for less critical domains.

Best Practices

Don't Overuse Preload

Only preload 3-5 critical resources. Everything marked as high priority is effectively no priority.

Always Use Preload for Fonts

Fonts are discovered late in the render process. Preload them to eliminate FOUT/FOIT.

Use Prefetch for Predictable Navigation

If 80% of users click "Next", prefetch the next page resources during idle time.

Watch for Unused Preloads

Chrome DevTools will warn you about preloaded resources that weren't used within 3 seconds.

Browser Support

Preload: Excellent support across all modern browsers

Chrome: 50+ (April 2016)
Firefox: 85+ (January 2021)
Safari: 11.1+ (March 2018)
Edge: 79+ (January 2020)

Prefetch, Preconnect, DNS-Prefetch: Universal support in all modern browsers

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Lazy Loading

Async & Defer

HTML Code Editor

Building Your Learning Module...

Resource Preloading

Three Types of Resource Hints

Preload

Prefetch

Preconnect

Basic Preload Examples:

The "as" Attribute is Required!

Preload CSS and Fonts Example

Benefits:

Hero Image Preload Example

Preload (Urgent)

Prefetch (Later)

Prefetch Syntax:

Prefetch vs Preload Comparison

Connection Hints:

Preconnect

DNS-Prefetch

Don't Overuse Preload

Always Use Preload for Fonts

Use Prefetch for Predictable Navigation

Watch for Unused Preloads

Browser Support

Lazy Loading

Async & Defer

HTML Code Editor

Resource Preloading

Three Types of Resource Hints

Preload

Prefetch

Preconnect

Basic Preload Examples:

The "as" Attribute is Required!

Preload CSS and Fonts Example

Benefits:

Hero Image Preload Example

Preload (Urgent)

Prefetch (Later)

Prefetch Syntax:

Prefetch vs Preload Comparison

Connection Hints:

Preconnect

DNS-Prefetch

Don't Overuse Preload

Always Use Preload for Fonts

Use Prefetch for Predictable Navigation

Watch for Unused Preloads

Browser Support