Adhiraj
Back to blog
•
5 min read
A Nerd's Guide to Making Websites Blazing Fast

How to use browser magic to make your site feel like it's on rocket fuel. No, really.

Nothing sucks more than a slow website. You pour your heart and soul into a project, ship it, and then… crickets. The page takes forever to load, and users bounce before they even see your awesome work. We’ve all been there.

A slow site feels janky and can kill your project before it even has a chance. Luckily, browsers give us a few magic tricks to tell them how to load stuff more intelligently. Let’s get into four of them: preload, prefetch, preconnect, and dns-prefetch. They sound similar, but they do very different things.

rel="preload"

Think of preload as you, the developer, telling the browser with absolute certainty: “Hey, we are going to need this resource to render the current page. Don’t wait, start grabbing it right now.”

It’s perfect for critical assets that the browser might discover late, like a font file declared deep inside a CSS file, or the main image in your hero section.

You use it by adding a <link> tag to your HTML’s <head>:

<link rel="preload" href="styles.css" as="style" />

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

<link rel="preload" href="hero-image.jpg" as="image" />

The as attribute is super important: it tells the browser the priority of the request and helps it apply the right security policies.

rel="prefetch"

prefetch is less of a command and more of a gentle suggestion. You’re telling the browser, “Look, if you’ve got some spare time and nothing better to do, the user will probably navigate to this other page next. Maybe start downloading its assets in the background? No pressure.”

It’s great for resources that will be needed on the next navigation, not the current one. For example, if you have a multi-page article, you could prefetch the assets for page 2 while the user is reading page 1.

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

<link rel="prefetch" href="big-image-for-next-page.jpg" />

rel="preconnect"

Every time your site needs to grab something from a third-party domain (like Google Fonts, a CDN, or an analytics service), it has to do a little dance: DNS lookup, TCP handshake, and TLS negotiation. This can add hundreds of milliseconds of latency for each new domain.

preconnect is like sending a scout ahead of time. You’re telling the browser, “I know we’ll be needing assets from this domain soon. Go ahead and do the whole connection handshake now so we’re ready to go when the requests actually start.”

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

This is a game-changer for speeding up third-party font and script loading.

rel="dns-prefetch"

If preconnect is the full handshake, dns-prefetch is just the first step. It tells the browser, “Just figure out the IP address for this domain and cache it. Nothing else.”

It’s a much smaller, lighter hint. It’s useful for third-party domains that you might need later, but that aren’t as critical as the ones you preconnect.

<link rel="dns-prefetch" href="https://my-cdn.com" />

Quick aside: preconnect is more powerful, but also more expensive. A good rule of thumb is to preconnect to your most critical 1-2 third-party domains and use dns-prefetch for the rest.

So, What’s the Catch?

With great power comes great responsibility. While these tools are awesome, you can shoot yourself in the foot if you’re not careful.

  • Don’t go overboard: Preloading and prefetching everything is a terrible idea. You’ll just waste your user’s bandwidth and might even slow the site down by fighting for resources with more important assets. Be selective.
  • Cache Pollution: If you preload a resource and don’t use it within a few seconds, the browser will complain (and you’ve wasted resources). Only preload what you need for the current page.
  • Server Load: Firing off a bunch of extra requests can put more strain on your server. It’s usually not an issue, but something to be aware of.

The Pro-Gamer Moves (Tips & Tricks)

  1. Prioritise Above-the-Fold: Focus on what the user sees first. preload your hero image, the main font, and critical CSS. First impressions matter.
  2. Use a CDN: This is a no-brainer. A Content Delivery Network serves your assets from a location physically closer to your user. Combine this with preconnect for maximum speed.
  3. Optimise Your Images: No amount of preloading will fix a massive, uncompressed 5MB JPEG. Compress your images! Use modern formats like AVIF or WebP.
  4. Audit Your Site: Use tools like PageSpeed Insights or WebPageTest to see what your critical request waterfall looks like. This will show you exactly what to preload or preconnect.

At the end of the day, these are all just tools in your toolbox. They won’t magically fix a fundamentally bloated website, but when used wisely, they can make your site feel incredibly snappy and professional. It’s about giving the browser hints so it can help you deliver a better, faster experience.

Now go ahead, make your websites faster. Keep building awesome shit!