Prefetching and preloading in Astro - Step-by-Step Execution

Concept Flow - Prefetching and preloading

Page Loads

↓

Detect Links to Other Pages

↓

Prefetch Resources in Background

↓

User Hovers or Nears Link

↓

Load Prefetched Data Quickly

↓

User Clicks Link

↓

Render New Page Instantly

↓

Preloading

↓

Identify Critical Resources

↓

Load Resources Early

↓

Use Resources Immediately When Needed

When a page loads, Astro detects links and prefetches their resources quietly in the background. If the user hovers or approaches a link, the prefetched data loads fast, making navigation instant. Preloading loads critical resources early so they are ready when needed.

Execution Sample

Astro

<a href="/about" rel="prefetch">About</a>
<a href="/contact" rel="preload" as="fetch">Contact</a>

This code shows two links: one uses prefetch to load the About page resources in the background, the other preloads Contact page data early.

Execution Table

Step	Action	Resource Targeted	Prefetch/Preload	Effect
1	Page loads	N/A	N/A	Initial page content rendered
2	Detect link with rel='prefetch'	/about	Prefetch	Starts background fetch of /about resources
3	Detect link with rel='preload'	/contact	Preload	Immediately loads /contact resources for early use
4	User hovers over /about link	/about	Prefetch	Prefetched data ready, speeds up navigation
5	User clicks /about link	/about	Prefetch	Page renders instantly using prefetched data
6	User clicks /contact link	/contact	Preload	Page renders instantly using preloaded data
7	No more links to prefetch or preload	N/A	N/A	Prefetching and preloading complete

💡 All prefetched and preloaded resources are loaded or used, no further action needed

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	Final
PrefetchQueue	empty	/about resource queued	/about resource queued	/about resource ready	empty	empty
PreloadQueue	empty	empty	/contact resource loaded	/contact resource loaded	/contact resource loaded	empty
UserHover	false	false	false	true	true	false
UserClick	false	false	false	false	true (/about)	true (/contact)

Key Moments - 3 Insights

Why does prefetching not block the initial page load?

Prefetching happens in the background after the page loads (see Step 2 in execution_table), so it does not delay showing the initial content.

What is the difference between prefetch and preload in timing?

Prefetch loads resources quietly in the background (Step 2), while preload loads critical resources immediately (Step 3), so preload is faster but used only for essential assets.

How does user interaction affect prefetching?

When the user hovers over a link (Step 4), prefetched data is ready to speed up navigation, making the page render instantly on click (Step 5).

Visual Quiz - 3 Questions

Look at the execution_table, what resource is prefetched at Step 2?

A Initial page content

B /contact

C /about

D No resource

💡 Hint

Check the 'Resource Targeted' column at Step 2 in the execution_table

At which step does the user hover over a link triggering faster load?

A Step 4

B Step 5

C Step 3

D Step 6

💡 Hint

Look for 'User hovers' action in the execution_table

If the preload link was removed, what would change in the variable_tracker?

A PrefetchQueue would load /contact instead

B PreloadQueue would remain empty after Step 3

C UserHover would become true earlier

D UserClick would never be true

💡 Hint

Check PreloadQueue values in variable_tracker after Step 3

Concept Snapshot

Prefetching and preloading in Astro:
- Prefetch loads linked page resources quietly after page load
- Preload loads critical resources immediately for early use
- Prefetch speeds navigation when user hovers or nears a link
- Preload ensures essential assets are ready before needed
- Use rel='prefetch' or rel='preload' on <a> or <link> tags
- Improves user experience by reducing wait times on navigation

Full Transcript

When an Astro page loads, it looks for links with rel='prefetch' or rel='preload'. Prefetching quietly fetches linked page resources in the background without delaying the initial page. Preloading immediately loads critical resources needed soon. When the user hovers over a prefetched link, the data is ready, so clicking the link renders the new page instantly. Preloading ensures essential assets are ready early for fast use. This process improves navigation speed and user experience by reducing waiting times.

Practice

1. What is the main purpose of prefetching in Astro?

easy

A. To remove unused resources from the page

B. To load resources immediately for current use

C. To load resources in the background before they are needed

D. To delay loading resources until user interaction

Solution

1. Step 1: Understand prefetching concept

   Prefetching means loading resources quietly in the background before the user needs them.

2. Step 2: Compare with other options

   Preloading loads immediately, delaying is opposite, and removing resources is unrelated.

3. Final Answer:

   To load resources in the background before they are needed -> Option C

4. Quick Check:

   Prefetching = background loading [OK]

Hint: Prefetching = load early but quietly in background [OK]

Common Mistakes:

• Confusing prefetching with preloading
• Thinking prefetching delays loading
• Assuming prefetching removes resources

2. Which is the correct way to add a prefetch link in Astro's <head>?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify correct rel attribute for prefetch

   Prefetch uses rel="prefetch" to hint browser to load resource in background.

2. Step 2: Check other options

   Preload uses rel="preload", but question asks for prefetch. rel="fetch" is invalid.

3. Final Answer:

   <link rel="prefetch" href="/script.js"> -> Option D

4. Quick Check:

   Prefetch link uses rel="prefetch" [OK]

Hint: Prefetch link uses rel="prefetch" exactly [OK]

Common Mistakes:

• Using preload instead of prefetch
• Missing the rel attribute
• Using invalid rel values like fetch

3. Given this Astro component snippet, what will happen?

<head>
  <link rel="preload" as="style" href="/styles.css" />
</head>
<body>
  <h1>Hello</h1>
</body>

medium

A. The styles.css file loads immediately to style the page quickly

B. The styles.css file loads in the background after page load

C. The styles.css file is ignored by the browser

D. The styles.css file loads only when user scrolls

Solution

1. Step 1: Understand preload with as="style"

   Preload with as="style" tells browser to load CSS immediately for fast styling.

2. Step 2: Compare with prefetch behavior

   Prefetch loads in background, but preload loads right away to speed up rendering.

3. Final Answer:

   The styles.css file loads immediately to style the page quickly -> Option A

4. Quick Check:

   Preload with as="style" = immediate CSS load [OK]

Hint: Preload with as="style" loads CSS immediately [OK]

Common Mistakes:

• Confusing preload with prefetch
• Thinking preload delays loading
• Ignoring the as attribute importance

4. Identify the error in this Astro prefetch usage:

<head>
  <link rel="prefetch" as="script" href="/app.js" />
</head>

medium

A. Prefetch should not use the 'as' attribute

B. The href attribute is missing

C. rel="prefetch" is invalid in Astro

D. The link tag must be inside the body

Solution

1. Step 1: Check prefetch attribute usage

   Prefetch links should not include the as attribute; it's only for preload.

2. Step 2: Validate other attributes and placement

   The href is present, rel="prefetch" is valid, and link tags belong in head, not body.

3. Final Answer:

   Prefetch should not use the 'as' attribute -> Option A

4. Quick Check:

   Prefetch without 'as' attribute [OK]

Hint: Prefetch links never use 'as' attribute [OK]

Common Mistakes:

• Adding 'as' attribute to prefetch
• Placing link tags inside body
• Confusing prefetch with preload

5. You want to optimize loading a large image that will be shown on the next page in Astro. Which combination is best?

hard

A. Use <link rel="preload" as="image" href="/large.jpg" /> on current page

B. Use <link rel="prefetch" href="/large.jpg" /> on current page and preload on next page

C. Use <link rel="prefetch" href="/large.jpg" as="image" /> on current page

D. Do not preload or prefetch; load image only when user clicks

Solution

1. Step 1: Understand prefetch for next page resources

   Prefetch loads resources in background for future use, ideal for next page images.

2. Step 2: Combine with preload on next page

   Preloading on next page ensures immediate display when user arrives, improving UX.

3. Step 3: Check invalid options

   Preload on current page wastes bandwidth if image not shown now; 'as' attribute invalid with prefetch; delaying load hurts UX.

4. Final Answer:

   Use <link rel="prefetch" href="/large.jpg" /> on current page and preload on next page -> Option B

5. Quick Check:

   Prefetch now + preload later = best for next page image [OK]

Hint: Prefetch for next page, preload on arrival for speed [OK]

Common Mistakes:

• Preloading large images too early wasting bandwidth
• Adding 'as' attribute to prefetch links
• Not prefetching resources needed soon