DevToolbox

Preloading Above-the-Fold Resources

Identify and preload above-the-fold resources to optimize First Contentful Paint and Largest Contentful Paint scores for better Core Web Vitals.

Practical Scenarios

Detailed Explanation

Preloading Above-the-Fold Resources

Above-the-fold content — the portion of the page visible without scrolling — determines your First Contentful Paint (FCP) and Largest Contentful Paint (LCP) scores. Preloading the resources needed for this content ensures the browser can render the initial viewport as quickly as possible.

Identifying Above-the-Fold Resources

Resources that typically need preloading for above-the-fold rendering:

  1. Critical CSS — the styles needed for above-the-fold layout and appearance
  2. Hero image — the LCP element on most pages
  3. Web fonts — fonts used in headings and body text above the fold
  4. Critical JavaScript — scripts needed for initial interactivity (if any)

Audit Methodology

1. Load your page in Chrome DevTools
2. Open Coverage tab (Ctrl+Shift+P > "Show Coverage")
3. Record a page load
4. Note which CSS/JS bytes are used during initial render
5. Check Network panel for resource timing — look for late-discovered resources
6. Run Lighthouse — it identifies "Eliminate render-blocking resources"

Example: Complete Above-the-Fold Preload Setup

<head>
  <!-- Preconnect to third-party origins -->
  <link rel="preconnect" href="https://fonts.gstatic.com"
        crossorigin="anonymous" />

  <!-- Preload critical CSS -->
  <link rel="preload" href="/css/critical.css" as="style"
        fetchpriority="high" />

  <!-- Preload hero image -->
  <link rel="preload" href="/images/hero.webp" as="image"
        fetchpriority="high" />

  <!-- Preload primary font -->
  <link rel="preload" href="/fonts/inter.woff2" as="font"
        type="font/woff2" crossorigin="anonymous" />

  <!-- Load critical CSS -->
  <link rel="stylesheet" href="/css/critical.css" />

  <!-- Defer non-critical CSS -->
  <link rel="preload" href="/css/below-fold.css" as="style"
        fetchpriority="low" />
  <link rel="stylesheet" href="/css/below-fold.css"
        media="print" onload="this.media='all'" />
</head>

Priority Order

Place preload tags in this order for optimal loading:

  1. preconnect to critical third-party origins
  2. preload for critical CSS (fetchpriority="high")
  3. preload for LCP image (fetchpriority="high")
  4. preload for primary web font
  5. CSS <link> tags
  6. preload for non-critical resources (fetchpriority="low")

What NOT to Preload

  • Resources below the fold — use lazy loading instead
  • Resources for other pages — use prefetch
  • Resources already inline in the HTML
  • More than 6-8 resources total — too many preloads dilute priority

Use Case

A landing page audit reveals that the hero image (LCP element) starts loading 1.8 seconds after navigation because it is referenced in a CSS background-image. By adding a preload tag with fetchpriority="high" directly in the <head>, the image starts loading within 200ms, improving LCP from 3.2s to 1.6s.

Try It — Preload Generator

Open full tool →

Related Topics

Preloading Hero Images for Better LCP

Preload Use Cases

Preloading Critical CSS for Faster First Paint

Preload Use Cases

Preloading Web Fonts with Crossorigin

Preload Use Cases

Using the fetchpriority Attribute for Resource Prioritization

Advanced

Preload vs Prefetch — When to Use Each Resource Hint

Fundamentals