Prefetching and preloading in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you use client:idle in Astro?

In Astro, using client:idle on a component delays its hydration until the browser is idle. What is the main effect of this on the page behavior?

A The component hydrates only after the browser is idle, improving initial load performance.

B The component never hydrates, so it remains static and uninteractive.

C The component hydrates immediately during page load, increasing initial CPU usage.

D The component hydrates only when the user clicks on it, delaying all scripts.

💡 Hint

Think about when the browser considers itself 'idle' and how that affects script execution.

Using client:idle defers hydration until the browser is idle, which means the component becomes interactive after the main page load tasks finish. This improves initial load speed and reduces CPU strain.

📝 Syntax

intermediate

Which Astro syntax correctly preloads a font resource?

You want to preload a font file in your Astro project to improve text rendering speed. Which of the following is the correct way to add a preload link in the <head> section?

A <link rel="prefetch" href="/fonts/myfont.woff2" as="font">

B <link rel="preload" href="/fonts/myfont.woff2" as="font" crossorigin>

C <link rel="stylesheet" href="/fonts/myfont.woff2" preload>

D <link rel="preload" href="/fonts/myfont.woff2">

💡 Hint

Preloading fonts requires specifying the resource type and cross-origin attribute.

Preloading fonts requires rel="preload", as="font", and crossorigin to ensure the font loads early and correctly.

🔧 Debug

advanced

Why does this Astro prefetch code not trigger prefetching?

Consider this Astro component snippet:

<a href="/about" client:prefetch>About</a>

Why might the prefetch not happen as expected when hovering over the link?

Astro

<a href="/about" client:prefetch>About</a>

A Prefetching requires the <code>client:load</code> directive instead of <code>client:prefetch</code>.

B The link must have <code>rel="prefetch"</code> attribute to trigger prefetching.

C The <code>client:prefetch</code> directive is deprecated and no longer supported.

D The <code>client:prefetch</code> directive only works on components, not plain <code>&lt;a&gt;</code> tags.

💡 Hint

Check if directives apply to plain HTML elements or only Astro components.

The client:prefetch directive only works on Astro components, not on plain HTML elements like <a>. To prefetch on links, you need to wrap them in a component or use native browser prefetch techniques.

❓ state_output

advanced

What is the output when using client:visible on a component?

An Astro component uses client:visible hydration directive. What happens to the component's state and rendering behavior?

A The component hydrates only when it scrolls into the viewport, delaying state initialization.

B The component hydrates immediately on page load and updates state instantly.

C The component never hydrates, so state updates are ignored.

D The component hydrates after a fixed timeout regardless of visibility.

💡 Hint

Think about when the browser detects the component is visible on screen.

client:visible delays hydration until the component enters the viewport, which means state and interactivity start only when the user scrolls to it.

🧠 Conceptual

expert

How does Astro's prefetching improve user experience compared to traditional preloading?

Astro supports both prefetching and preloading resources. Which statement best explains how prefetching in Astro enhances user experience differently than preloading?

A Prefetching blocks the main thread until all resources are loaded, ensuring zero delay on navigation.

B Prefetching forces all scripts to load before rendering, improving SEO but slowing initial load.

C Prefetching loads resources during idle time or on user intent, reducing wasted bandwidth compared to preloading everything upfront.

D Prefetching disables caching to always fetch fresh resources, improving security.

💡 Hint

Consider when prefetching triggers resource loading versus preloading.

Prefetching loads resources based on user behavior or idle time, so it avoids loading unnecessary files upfront. This saves bandwidth and speeds up perceived navigation without blocking initial page load.

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