Uploaded August 2025 | Updated September 2026, 4 hours ago
When you hover over a link, it should feel like the page loads instantly. In this video, we push Inertia and Vue a little further by prefetching not just the data, but also the heavy images users will see first so pages feel faster without any extra clicks.
Send down low-quality placeholder strategy video: youtu.be/UNODn5b52u4
Follow me:
Twitter: twitter.com/aarondfrancis
LinkedIn: linkedin.com/in/aarondfrancis
Website: aaronfrancis.com - find articles, podcasts, courses, and more.
Chapters:
00:00 - Why prefetching matters for performance
00:49 - The problem with large above-the-fold images
01:12 - Strategy 1: Low-quality image placeholders
01:20 - Strategy 2: Prefetch full images on hover
01:49 - Inspecting media card components
02:17 - Looking into Inertia’s prefetch lifecycle
03:44 - Verifying event details and response data
04:53 - Parsing Inertia props to find prefetch targets
05:29 - Sending additional prefetch info from server
05:56 - Adding a `prefetch` prop with image URL
06:52 - Triggering fetch for extra URLs in app.js
07:42 - Confirming image fetch works in browser devtools
08:11 - Cleaning up with a Laravel-style macro
09:05 - Creating the Inertia prefetch macro
09:57 - Making prefetch smarter with request context
11:08 - Final test: Everything works!
When you hover over a link, it should feel like the page loads instantly. In this video, we push Inertia and Vue a little further by prefetching not just the data, but also the heavy images users will see first so pages feel faster without any extra clicks.
Send down low-quality placeholder strategy video: youtu.be/UNODn5b52u4
Follow me:
Twitter: twitter.com/aarondfrancis
LinkedIn: linkedin.com/in/aarondfrancis
Website: aaronfrancis.com - find articles, podcasts, courses, and more.
Chapters:
00:00 - Why prefetching matters for performance
00:49 - The problem with large above-the-fold images
01:12 - Strategy 1: Low-quality image placeholders
01:20 - Strategy 2: Prefetch full images on hover
01:49 - Inspecting media card components
02:17 - Looking into Inertia’s prefetch lifecycle
03:44 - Verifying event details and response data
04:53 - Parsing Inertia props to find prefetch targets
05:29 - Sending additional prefetch info from server
05:56 - Adding a `prefetch` prop with image URL
06:52 - Triggering fetch for extra URLs in app.js
07:42 - Confirming image fetch works in browser devtools
08:11 - Cleaning up with a Laravel-style macro
09:05 - Creating the Inertia prefetch macro
09:57 - Making prefetch smarter with request context
11:08 - Final test: Everything works!
