Preload Scanner Optimization | Blue Frog Docs

Preload Scanner Optimization

Understanding and optimizing browser preload scanner hints to accelerate resource discovery and loading

Preload Scanner Optimization

What This Means

The preload scanner is a secondary HTML parser built into modern browsers that runs ahead of the main parser to discover resources (images, scripts, stylesheets, fonts) early and begin downloading them while HTML is still being parsed. Optimizing for the preload scanner means structuring your HTML and using resource hints so the browser can discover and fetch critical resources as quickly as possible, dramatically improving page load performance.

How the Preload Scanner Works

Browser Parsing Process:

  1. Main HTML Parser - Parses HTML, builds DOM tree (can be blocked by scripts)
  2. Preload Scanner - Scans ahead during blocking, finds <link>, <script>, <img> tags
  3. Resource Loader - Downloads discovered resources in parallel
  4. Result - Resources ready when main parser needs them

What Preload Scanner Can Find:

  • <script src="..."> tags
  • <link rel="stylesheet"> tags
  • <img src="..."> tags
  • <link rel="preload"> hints
  • <video> and <audio> sources

What Preload Scanner Cannot Find:

  • Resources loaded by JavaScript
  • CSS background images
  • Dynamically injected elements
  • Resources behind @import in CSS
  • Fonts declared in CSS @font-face

Impact on Your Business

Performance Benefits:

  • LCP Improvement: 20-50% faster LCP for image-based LCP elements
  • FCP Improvement: Faster discovery of critical CSS and fonts
  • Resource Loading: Parallel downloads start earlier
  • Reduced Waterfall: Fewer serial resource dependencies

User Experience:

  • Faster visual rendering
  • Earlier interactivity
  • Smoother loading experience
  • Better mobile performance

Business Metrics:

Common Problems from Poor Optimization:

  • LCP images discovered late
  • Fonts load after text renders (FOIT/FOUT)
  • Critical CSS delayed
  • Hero images appear slowly
  • JavaScript-injected resources cause waterfalls

How to Diagnose

Method 1: Chrome DevTools Network Panel

  1. Open Chrome DevTools (F12)
  2. Navigate to "Network" tab
  3. Reload page
  4. Look at "Waterfall" column
  5. Identify resources that start downloading late

What to Look For:

  • Late-discovered resources (starting after 1-2 seconds)
  • Resources waiting for JavaScript to execute
  • Fonts loading after CSS
  • Images discovered late despite being above-fold
  • Long gaps between resource downloads

Priority Indicators:

  • Highest - Critical resources found early ✓
  • High - Important resources
  • Medium - Less important
  • Low - Deferred resources
  • Lowest - Lazy-loaded resources

Method 2: Chrome DevTools Performance Panel

  1. Open Chrome DevTools (F12)
  2. Navigate to "Performance" tab
  3. Click record, reload page, stop recording
  4. Look at "Network" track
  5. Check when resources are discovered vs when they're needed

What to Look For:

  • Resource requests happening late in timeline
  • Gaps between resource discovery and download
  • Resources blocked by JavaScript execution
  • Parser-blocking resources
  • Late font discovery

Method 3: WebPageTest Resource Timing

  1. Visit WebPageTest.org
  2. Enter your URL and run test
  3. View "Waterfall" chart
  4. Look for:
    • Request start times
    • DNS lookup, connection, download times
    • Priority levels

What to Look For:

  • Resources starting after 1 second
  • Critical resources with "Low" priority
  • Fonts loading late
  • LCP image discovered late
  • Sequential loading patterns (should be parallel)

Example Issue:

0.0s: HTML download starts
0.5s: HTML parsed enough to find CSS
0.8s: CSS downloads
1.2s: CSS parsed, font discovered ❌ (too late!)
1.5s: Font downloads
2.0s: Text visible

Method 4: Lighthouse Resource Hints Audit

  1. Open Chrome DevTools (F12)
  2. Navigate to "Lighthouse" tab
  3. Run Performance audit
  4. Check these diagnostics:
    • "Preload key requests"
    • "Preconnect to required origins"
    • "Uses efficient cache policy"

What to Look For:

  • Recommendations to preload specific resources
  • Estimated time savings
  • Resources in critical request chain
  • Third-party origins to preconnect

Method 5: Manual HTML Inspection

Check your HTML source:

<!-- Look for inline scripts before resource hints -->
<head>
  <script>/* inline script */</script> ❌
  <link rel="preload"> <!-- Too late! -->
</head>

<!-- Better: Resource hints before anything blocking -->
<head>
  <link rel="preload"> ✓
  <link rel="dns-prefetch"> ✓
  <script>/* inline script */</script>
</head>

What to Look For:

  • Resource hints placement (should be early in <head>)
  • Missing preload for LCP image
  • Missing preconnect for third-party resources
  • JavaScript-loaded critical resources
  • CSS @import blocking font discovery

General Fixes

Fix 1: Preload Critical Resources

Help preload scanner find resources early:

  1. Preload LCP Image:

    <head>
  <!-- Preload hero image to improve LCP -->
  <link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
</head>

<body>
  <img src="/hero.webp" alt="Hero" fetchpriority="high">
</body>

  2. Preload Critical CSS:

    <head>
  <!-- Preload CSS if it's not immediately in head -->
  <link rel="preload" as="style" href="/critical.css">
  <link rel="stylesheet" href="/critical.css">
</head>

  3. Preload Web Fonts:

    <head>
  <!-- Preload fonts to avoid FOIT/FOUT -->
  <link rel="preload" as="font" type="font/woff2"
        href="/fonts/main.woff2" crossorigin>
  <link rel="preload" as="font" type="font/woff2"
        href="/fonts/bold.woff2" crossorigin>
</head>

  4. Preload Critical Scripts:

    <head>
  <!-- Preload JavaScript needed for initial render -->
  <link rel="preload" as="script" href="/app.js">
  <script src="/app.js" defer></script>
</head>

Resource Types:

  • as="image" - Images
  • as="script" - JavaScript files
  • as="style" - CSS files
  • as="font" - Web fonts (requires crossorigin)
  • as="fetch" - API data
  • as="video" - Video files
  • as="audio" - Audio files

Fix 2: Use Fetchpriority Attribute

Control resource priority:

  1. Boost LCP Image Priority:

    <!-- Tell browser this image is high priority -->
<img src="/hero.jpg" alt="Hero" fetchpriority="high">

<!-- Or with preload -->
<link rel="preload" as="image" href="/hero.jpg" fetchpriority="high">

  2. Lower Priority for Below-Fold Images:

    <!-- Defer loading priority for footer images -->
<img src="/footer-logo.png" alt="Logo" fetchpriority="low">

  3. Prioritize Critical Scripts:

    <!-- High priority for critical functionality -->
<script src="/critical.js" fetchpriority="high"></script>

<!-- Low priority for analytics -->
<script src="/analytics.js" fetchpriority="low" defer></script>

Priority Levels:

  • fetchpriority="high" - LCP images, critical resources
  • fetchpriority="auto" - Default, browser decides
  • fetchpriority="low" - Below-fold images, analytics, non-critical

Fix 3: Preconnect to Third-Party Domains

Reduce connection overhead for external resources:

  1. Preconnect to Critical Origins:

    <head>
  <!-- Preconnect to font provider -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

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

  <!-- Preconnect to API -->
  <link rel="preconnect" href="https://api.example.com">
</head>

  2. DNS-Prefetch for Less Critical Origins:

    <head>
  <!-- Lighter hint for analytics, ads -->
  <link rel="dns-prefetch" href="https://www.google-analytics.com">
  <link rel="dns-prefetch" href="https://www.googletagmanager.com">
</head>

When to Use Each:

  • rel="preconnect" - Critical third-party resources (fonts, APIs)
  • rel="dns-prefetch" - Less critical (analytics, ads)
  • Limit preconnect to 4-6 domains (it's expensive)

Fix 4: Optimize HTML Structure for Scanner

Structure HTML to help preload scanner:

  1. Put Resource Hints First:

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Page Title</title>

  <!-- 1. Resource hints FIRST -->
  <link rel="preconnect" href="https://cdn.example.com">
  <link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
  <link rel="preload" as="font" href="/font.woff2" crossorigin>

  <!-- 2. Critical CSS -->
  <style>/* Inline critical CSS */</style>

  <!-- 3. Everything else -->
  <link rel="stylesheet" href="/main.css">
  <script src="/app.js" defer></script>
</head>

  2. Avoid Blocking the Preload Scanner:

    <!-- Bad: Synchronous script blocks scanner -->
<head>
  <script src="/blocking.js"></script> ❌
  <link rel="preload" href="/hero.jpg"> <!-- Delayed! -->
</head>

<!-- Good: Async/defer doesn't block -->
<head>
  <link rel="preload" href="/hero.jpg"> ✓
  <script src="/app.js" defer></script>
</head>

  3. Don't Hide Resources Behind JavaScript:

    <!-- Bad: Image loaded by JavaScript -->
<script>
  const img = new Image();
  img.src = '/hero.jpg'; // Discovered late ❌
  document.body.appendChild(img);
</script>

<!-- Good: Image in HTML -->
<img src="/hero.jpg" alt="Hero"> ✓

<!-- Or if dynamic, preload it -->
<link rel="preload" as="image" href="/hero.jpg">

  4. Avoid CSS @import:

    /* Bad: @import blocks scanner */
@import url('fonts.css'); ❌

    <!-- Good: Multiple link tags -->
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="fonts.css"> ✓

Fix 5: Optimize Font Loading for Scanner

Make fonts discoverable early:

  1. Preload Fonts in HTML:

    <head>
  <!-- Preload before CSS -->
  <link rel="preload" as="font" type="font/woff2"
        href="/fonts/main.woff2" crossorigin>
  <link rel="preload" as="font" type="font/woff2"
        href="/fonts/bold.woff2" crossorigin>

  <style>
    @font-face {
      font-family: 'Main';
      src: url('/fonts/main.woff2') format('woff2');
      font-display: swap;
    }
    @font-face {
      font-family: 'Main';
      src: url('/fonts/bold.woff2') format('woff2');
      font-weight: bold;
      font-display: swap;
    }
  </style>
</head>

  2. Inline Font Declarations:

    <head>
  <!-- Inline @font-face so scanner sees it immediately -->
  <style>
    @font-face {
      font-family: 'Main';
      src: url('/fonts/main.woff2') format('woff2');
      font-display: swap;
    }
  </style>
</head>

  3. Avoid External Font CSS:

    <!-- Bad: Fonts hidden behind external CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto"> ❌

<!-- Better: Self-host and preload -->
<link rel="preload" as="font" href="/fonts/roboto.woff2" crossorigin>

Fix 6: Use Modern Image Loading

Optimize image discovery:

  1. Use <img> Tags in HTML:

    <!-- Scanner can find this -->
<img src="/hero.jpg" alt="Hero" fetchpriority="high" loading="eager">

<!-- Scanner can find this too -->
<picture>
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" alt="Hero" fetchpriority="high">
</picture>

  2. Preload Responsive Images:

    <head>
  <!-- Preload with srcset for responsive images -->
  <link rel="preload" as="image"
        href="/hero-800.jpg"
        imagesrcset="/hero-400.jpg 400w, /hero-800.jpg 800w, /hero-1200.jpg 1200w"
        imagesizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px">
</head>

  3. Avoid CSS Background Images for LCP:

    /* Bad: Scanner can't find this */
.hero {
  background-image: url('/hero.jpg'); ❌
}

    <!-- Good: Scanner finds this -->
<img src="/hero.jpg" alt="Hero" fetchpriority="high"> ✓

<!-- Or preload CSS background if necessary -->
<link rel="preload" as="image" href="/hero.jpg">

Fix 7: Optimize Third-Party Resources

Help scanner with external resources:

  1. Preconnect Early:

    <head>
  <!-- As early as possible in <head> -->
  <link rel="preconnect" href="https://cdn.example.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>

  2. Self-Host Critical Third-Party Resources:

    <!-- Instead of -->
<script src="https://cdn.example.com/library.js"></script>

<!-- Self-host critical libraries -->
<script src="/js/library.js"></script>

  3. Use Resource Hints for Analytics:

    <head>
  <!-- DNS-prefetch for analytics (low priority) -->
  <link rel="dns-prefetch" href="https://www.google-analytics.com">
  <link rel="dns-prefetch" href="https://www.googletagmanager.com">

  <!-- Load analytics late -->
  <script src="https://www.google-analytics.com/analytics.js" defer></script>
</head>

  4. Module Preload for ES Modules:

    <head>
  <!-- Preload ES modules -->
  <link rel="modulepreload" href="/app.js">
  <link rel="modulepreload" href="/utils.js">
</head>

<script type="module">
  import { init } from '/app.js';
  init();
</script>

Platform-Specific Guides

Detailed implementation instructions for your specific platform:

Platform Troubleshooting Guide
Shopify Shopify Preload Scanner Guide
WordPress WordPress Preload Scanner Guide
Wix Wix Preload Scanner Guide
Squarespace Squarespace Preload Scanner Guide
Webflow Webflow Preload Scanner Guide

Verification

After optimizing for preload scanner:

  1. Check Network Waterfall:

    • Critical resources start downloading immediately
    • No large gaps in waterfall
    • Parallel downloads, not sequential
    • LCP image starts loading within first 500ms

  2. Run Lighthouse:

    • "Preload key requests" passes
    • "Preconnect to required origins" passes
    • LCP improves
    • FCP improves

  3. Test Resource Priority:

    // In DevTools console
performance.getEntriesByType('resource').forEach(r => {
  console.log(r.name, r.startTime.toFixed(0) + 'ms');
});

  4. Verify Font Loading:

    • Fonts start loading early (< 500ms)
    • No invisible text flash
    • font-display: swap working

  5. Check Third-Party Timing:

    • Preconnect reduces time to first byte from third parties
    • DNS lookup time reduced
    • Connection time reduced

Common Mistakes

  1. Over-preloading - Preloading too many resources (limit to 2-3)
  2. Preloading low-priority resources - Wastes bandwidth
  3. Missing crossorigin on fonts - Fonts won't preload properly
  4. Preload after blocking scripts - Defeats the purpose
  5. Not updating preloads - Stale preload hints
  6. Preloading deferred content - Below-fold images
  7. Wrong resource type - Using as="script" for image
  8. Duplicate preloads - Preloading already-linked resources
  9. Preconnecting to too many domains - Wastes resources
  10. Ignoring fetchpriority - Not prioritizing LCP resources

Additional Resources

↑ Back to top
// SYS.FOOTER