Prefetching and preloading in Astro - Mini Project: Build & Apply

Prefetching and Preloading in Astro

📖 Scenario: You are building a simple Astro website with multiple pages. To improve user experience, you want to make sure that when users hover over navigation links, the linked pages start loading in the background (prefetching). Also, you want to preload a key image on the homepage to make it appear faster.

🎯 Goal: Build an Astro component with navigation links that use prefetch to load pages early on hover, and preload a hero image on the homepage for faster display.

📋 What You'll Learn

Create a navigation list with links to /about and /contact pages

Add prefetch attribute to these links to enable prefetching on hover

Add a <link rel="preload" as="image" href="/hero.jpg" /> tag in the <head> to preload the hero image

Use Astro syntax and components correctly

💡 Why This Matters

🌍 Real World

Prefetching and preloading help websites feel faster by loading resources before users need them, improving user experience.

💼 Career

Web developers use these techniques to optimize site performance and reduce wait times, which is important for user retention and SEO.

1

Create navigation links

Create an Astro component with a <nav> element containing two links: one to /about and one to /contact. Use <a> tags with href attributes exactly "/about" and "/contact".

Astro

Hint

Use <a href="/about">About</a> and <a href="/contact">Contact</a> inside a <nav>.

2

Add prefetch attribute to links

Add the prefetch attribute to both <a> tags linking to /about and /contact to enable prefetching when users hover over these links.

Astro

  About
  Contact
  

Hint

Add prefetch inside the opening <a> tags.

3

Preload hero image in head

Add a <link> tag inside the <head> of your Astro page to preload the hero image located at /hero.jpg. Use rel="preload" and as="image" attributes exactly as shown.

Astro

---
---

  
    
  
  
    
      About
      Contact
    
  

Hint

Place <link rel="preload" as="image" href="/hero.jpg" /> inside the <head> section.

4

Add hero image to body

Add an <img> tag inside the <body> below the navigation. Set its src attribute to "/hero.jpg" and alt attribute to "Hero image".

Astro

---
---

  
    
  
  
    
      About
      Contact
    
    
  

Hint

Use <img src="/hero.jpg" alt="Hero image" /> inside the <body> after the navigation.

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