Originally published on adiss.dev

Every second of delay costs you conversions. Google knows it, users feel it — and you're probably ignoring it.

What's Actually the Problem?

The most common causes of a slow landing page aren't complex. In 90% of cases, it comes down to three things:

• Unoptimized images that are too large
• JavaScript blocking rendering
• Fonts loading synchronously

Each of these can add 2–4 seconds to your load time.

Images Are the #1 Killer

If you're uploading a 4MB hero.png directly to your server, you've already lost the visitor before they saw your headline.

The fix is simple:

// Bad
<img src="/hero.png" />

// Good
<img src="/hero.webp" loading="lazy" width="1200" height="630" />

WebP format is on average 30% smaller than PNG at the same quality.

JavaScript Blocks Everything

React apps have a specific problem — bundle size. If you load all components at once, the browser has to parse hundreds of KB of code before rendering anything.

The fix is lazy loading:

const HeavyComponent = lazy(() => import('./HeavyComponent'));

I use this on my own portfolio — each section loads only when needed.

Fonts — The Silent Culprit

Google Fonts are convenient but slow if you don't use them correctly.

<!-- Bad — blocks rendering -->
<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />

<!-- Good — non-blocking -->
<link href="..." rel="stylesheet" media="print" onload="this.media='all'" />

How to Measure

Two tools I use every day:

• Lighthouse — built into Chrome DevTools, gives a score from 0–100
• PageSpeed Insights — Google's tool, shows real-world data

The goal isn't a perfect score. The goal is the user seeing content within 2 seconds.

Fix Order

1. Convert all images to WebP
2. Add lazy loading to components
3. Optimize font loading
4. Measure results

Each of these can be implemented in under an hour.

---

I build fast, clean websites for small businesses in Bosnia and beyond. Check out adiss.dev if you need one.