Preloading and Resource Hints
Use preload, prefetch, preconnect, and priority hints to fetch critical-path resources earlier and shorten the time to first meaningful paint.
Preloading and Resource Hints is a free Web Performance Optimization & Lighthouse lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Performance Optimization & Lighthouse learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Helping the Browser Prioritize
The browser discovers resources as it parses HTML, but key assets like fonts or hero images may be found late. Resource hints let you tell the browser what to fetch early, shrinking the critical path.
preconnect
preconnect opens the DNS + TCP + TLS connection to an origin ahead of time, so the actual request starts faster. Ideal for font and CDN origins.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>dns-prefetch
dns-prefetch is a lighter hint that resolves only DNS. Use it as a fallback for browsers without preconnect or for many third-party origins.
<link rel="dns-prefetch" href="https://analytics.example.com">preload
preload fetches a specific resource the current page needs soon, at high priority. Always set the correct as attribute so the browser assigns the right priority and reuses the fetch.
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>Preloading the LCP Image
The hero image driving Largest Contentful Paint is often discovered late. Preloading it can cut LCP significantly.
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">prefetch
prefetch fetches resources for a future navigation at low priority during idle time. Great for the next page a user is likely to visit.
<link rel="prefetch" href="/dashboard.js">Priority Hints
The fetchpriority attribute nudges relative priority. Mark the hero image high and below-the-fold or non-critical assets low.
<img src="/hero.webp" fetchpriority="high" alt="Hero">
<img src="/footer-logo.png" fetchpriority="low" alt="Logo">modulepreload
For ES modules, modulepreload preloads a module and its dependency graph, avoiding the waterfall of discovering imports one by one.
<link rel="modulepreload" href="/app.mjs">Avoiding Over-Preloading
Hints compete for bandwidth. Preloading too much delays truly critical resources and can hurt performance. Preload only assets that are critical and discovered late.
Verifying Hints
Check the DevTools Network panel: preloaded resources show high priority and early start times. Lighthouse flags both missing preloads for the LCP element and unused preloads.
Choosing the Right Hint
- preconnect warm up an origin.
- preload critical asset for this page.
- prefetch asset for the next page.
- fetchpriority fine-tune relative order.
Quick Check
You want a hero image that drives LCP to download as early and as high priority as possible. Which hint fits best?
Recap
You learned to steer the critical path with resource hints: preconnect/dns-prefetch for connections, preload/modulepreload for current-page assets, prefetch for future pages, and fetchpriority to fine-tune. Use them sparingly and verify in DevTools.
Frequently asked questions
Is the “Preloading and Resource Hints” lesson free?
Yes — the full text of “Preloading and Resource Hints” is free to read here on the web, and the Web Performance Optimization & Lighthouse course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Performance Optimization & Lighthouse course, upgrade to CoddyKit PRO.
What will I learn in “Preloading and Resource Hints”?
Use preload, prefetch, preconnect, and priority hints to fetch critical-path resources earlier and shorten the time to first meaningful paint. You practise Web Performance Optimization & Lighthouse with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Performance Optimization & Lighthouse?
No prior experience is required. Web Performance Optimization & Lighthouse on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Preloading and Resource Hints” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Performance Optimization & Lighthouse lesson?
Yes. Every Web Performance Optimization & Lighthouse lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Understanding the Critical Path
- Render-Blocking Resources
- Prioritizing Content for Speed
- Preloading and Resource Hints