Jonathan Idioseph

Posted on Aug 21

Why Websites Feel Slow, And How I Fix It as a Frontend Developer

#webdev #nextjs #javascript #programming

1. Introduction

A few months ago, I clicked on a website that took 8 seconds to load on my phone.
Guess what? I closed it.

And I wasn’t alone, research shows that most users leave if a site doesn’t load in under 3 seconds.

This is why performance is one of the first things I think about when building. With tools like Next.js (and especially the new App Router), I’ve seen how much easier it is to build apps that feel fast by default.

2. Why Website Speed Matters

It’s not just about being “nice to have.” Website performance impacts the business directly:

People leave slow websites → Lost customers.
Google ranks faster websites higher → Better visibility.
Speed builds trust → Users stay longer and interact more.

A slow site isn’t just annoying. It’s expensive.

3. The Usual Suspects Behind Slow Websites

In my experience (working on projects like HotBuyMart, an E-commerce SaaS, and Intelcampus), these are the main causes:

🖼️ Unoptimized Images → Serving 5MB images when a 200KB version would do.
📦 Huge JavaScript Bundles → Loading code the user doesn’t even need right away.
🔄 No Caching/CDN → Every request goes back to the origin server instead of nearby edge servers.
⏳ Blocking Scripts → Code that “freezes” the browser before the page can render.

4. How I Fix It (Practical Approaches)

Here are some battle-tested techniques I use to make apps faster:

✅ Optimized Images

Instead of manually resizing, I use Next.js’ <Image> component. It automatically serves the right size and format depending on the device.

import Image from 'next/image'

<Image src="/product.jpg" width={600} height={400} alt="Product" />

Result → faster loads, fewer frustrated mobile users.

✅ Code Splitting & Lazy Loading

Not all code needs to load upfront. With dynamic imports, users only download what they need:

const Chart = dynamic(() => import('../components/Chart'), { ssr: false })

Result → Initial page loads quickly, heavy components load later.

✅ Static Site Generation (SSG)

Pages are pre-built at build time and served instantly from the CDN.

export async function generateStaticParams() {
  const products = await getProducts()
  return products.map(p => ({ id: p.id }))
}

Result → Near-instant loads.

✅ Caching

I configure caching headers and leverage edge networks so frequently accessed data doesn’t always hit the origin server.

Result → Users get content faster, especially across different regions.

5. How the Next.js App Router Supercharges This

When Next.js introduced the App Router (from v13+), it changed the game. Performance is no longer something you “add later”, it’s baked into how you structure your app.

Here’s why it’s a powerhouse:

Server Components → Heavy lifting is done on the server. Users download less JS.

Nested Layouts → Shared UI (like navbars/sidebars) doesn’t reload every time.

Streaming & Suspense → Parts of a page appear progressively instead of waiting for everything.

Server Actions → Handle form submissions and mutations without writing extra API routes.

Colocation → Routes, error states, and loading states live in the same folder → cleaner architecture.

Loading States (loading.tsx) → Even if something takes a few seconds, showing a loading state immediately makes users feel like the app is responsive.

Example:

// app/dashboard/loading.tsx
export default function Loading() {
  return <p>Loading dashboard...</p>
}

Whenever /dashboard is loading (like fetching data), this file automatically shows until the content is ready.

👉 It doesn’t literally make the server faster, but it makes the experience faster because users get instant feedback.

From my work at Billsalert → While redesigning the website, I used layouts and server components so the navigation never reloaded, but users could still see live pricing updates. The result? Pages felt instant, even with dynamic data.

6. Real-World Wins

Billsalert (Website Redesign)
→ Used SSG + optimized images + App Router layouts.
→ Reduced load times and improved the overall UX.

Intelcampus (Quiz Platform)
→ Leveraged caching + App Router streaming.
→ Allowed 1,000+ students to take quizzes simultaneously without lag.

7. Why This Matters for Businesses

✅ Faster apps → more conversions & sales.
✅ Better performance → stronger SEO rankings.
✅ Modern architecture → scalable apps that grow with your users.

8. Final Takeaway

A slow website isn’t just frustrating. It costs users, customers, and revenue.

By combining smart optimization practices with the Next.js App Router, I don’t just build apps. I build fast, scalable, and delightful experiences that users want to come back to.

Here is a Summary for your Notes: