Speed Up First Paint With Resource Hints

by

Imagine clicking a link and waiting… and waiting… until the page loads. We’ve all been there. Those first few seconds matter more than you think. The faster a site paints its content, the happier the user. That’s where resource hints come into play.

They’re like helpful nudges to the browser, saying, “Hey, you’re gonna need this soon—grab it now!”

What Exactly Is a “First Paint”?

The first paint is the moment something—anything—appears on your screen after loading a webpage. It could be a logo, background color, or text. It’s the first sign of life. And faster is better.

When that first paint happens quickly, it gives users confidence. It tells them the page is working and makes them want to stay.

Here’s where resource hints become your best friend.

What Are Resource Hints?

Browsers are smart. But they’re not psychic. They load things as they see them in the HTML—one step at a time. Resource hints let you whisper in the browser’s ear:

  • “You’re going to need this font.”
  • “This image is important. Don’t wait to load it.”
  • “That third-party script? It’s coming. Get ready!”

There are several types of resource hints. Each has a specific job. Let’s explore them!

1. <link rel="preload"> – Preload the Essentials

Use preload when you know there’s a must-have asset early on. Like a header font or hero image. Without it, the page doesn’t feel “done.”

<link rel="preload" href="/fonts/cool-font.woff2" as="font" type="font/woff2" crossorigin>

This snippet tells the browser, “This font is crucial. Load it early.”

Here are common as values you might use:

  • script for JavaScript files
  • style for stylesheets
  • font for fonts
  • image for images

Tip: Preload only what’s critical. If you preload too much, you might slow things down instead of speeding them up!

2. <link rel="prefetch"> – Look Ahead

Prefetch is used for assets you’re likely to need soon, but not right away. Think of it as getting a head start before the browser needs it.

<link rel="prefetch" href="/next-page.html">

It’s perfect for single-page apps or pages with smooth transitions. The browser grabs the resource quietly, in the background.

3. <link rel="dns-prefetch"> – Hello, Domain!

If your site grabs assets from other domains, like Google Fonts or a CDN, use dns-prefetch. It preps the browser to talk to that domain faster.

<link rel="dns-prefetch" href="//fonts.googleapis.com">

This simple hint saves valuable milliseconds during the paint process. And sometimes, that’s all you need.

4. <link rel="preconnect"> – Shake Hands Early

Take dns-prefetch but make it stronger. That’s preconnect.

<link rel="preconnect" href="https://cdn.example.com" crossorigin>

It doesn’t just look up the domain. It establishes a connection: DNS, TCP, and TLS. Basically, it gets all the boring network stuff out of the way before you need it.

Use it for APIs, CDNs, or any third-party resource key to rendering your page.

Why Do These Hints Matter?

Every time your site loads, the browser has a to-do list. Without hints, it works line by line. But with hints, you’re giving it a cheat sheet.

This means:

  • Faster time to first paint
  • Improved user experience
  • Better Core Web Vitals

And we all know that happier users = more engagement = better business.

Where to Put These Hints?

In the <head> section of your HTML. That’s where the browser looks first. If your page is using a framework like React or Vue, use the appropriate hook or plugin to inject them in the head.

How to Know What to Hint?

Good question! You don’t want to throw in every file. Here’s how you pick:

  1. Open your page in Chrome DevTools.
  2. Go to the Network tab and reload.
  3. Sort by time.
  4. Look at the top few files. Fonts? Hero images? Initial scripts?
  5. Those are your preload candidates!

Can’t I Just Optimize Everything Later?

You could. But you’d be missing out. These hints are low-effort and high-reward. They’re one of the easiest ways to make big speed improvements, fast.

Common Mistakes to Avoid

  • Overusing preload: Too many preloads can fight for attention and hurt performance.
  • Forgetting crossorigin: Fonts and third-party connections often need it. Don’t skip it!
  • Using the wrong as attribute: Gets the browser confused. Always match the file type.

Use Case Example

Let’s say you have a blog with a striking header image and a custom headline font. Here’s how you’d preload them:

<link rel="preload" href="/images/hero.jpg" as="image">
<link rel="preload" href="/fonts/header.woff2" as="font" type="font/woff2" crossorigin>

Now, when the user lands on the page, boom! Header shows up fast. Font renders neatly. No janky flash of unstyled text.

Extra Boost: Combine Hints With Lazy Loading

Resource hints help paint content fast. But for things not critical at the top? Use lazy loading.

For images:

<img loading="lazy" src="/images/review.jpg" alt="User review">

It defers loading that image until it’s in view. This gives all priority to the important stuff—aka, your first paint.

Final Thoughts

First impressions matter. And your first paint is the handshake between your site and the user. Make it strong. Make it fast.

Resource hints are a simple way to make a big difference. Help the browser help you. Load what matters early, wait on what doesn’t, and connect to who you need before it’s too late.

Now go! Sprinkle some hints into your HTML. Your users (and Google) will thank you.