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
- Convert all images to WebP
- Add lazy loading to components
- Optimize font loading
- 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.
Top comments (0)