Mai Chi Bao

Posted on Jul 14

Let’s Be Honest… Slow Websites Scare People Away 😢

#react #mrzaizai2k #webdev #performance

I'm not a professional web developer — but even so, just by following these 5 simple steps, I managed to hit 95 on PageSpeed 🚀

But hey — don’t just skim this. The last tip could make or break all your efforts.

Stick around until the end for the real game-changer!

📚 Table of Contents

🔍 Analyze with PageSpeed
✂️ Code Splitting and Reducing Unused Stuff
🖼️ Optimize Images
🔬 Code Review and Lazy Loading
🎨 CSS Optimizations
🌐 Real-World Network Testing
🎁 What's Next
📎 References

🔍 Analyze with PageSpeed

Start with the easiest step — use PageSpeed Insights to check your site’s performance.

Here’s the result I got for my website mrzaizai2k.xyz:

It not only gives you a score — it shows you exactly what’s slowing your site down:

✅ Step 1: Done — you now know where your site stands and what to fix!

✂️ Code Splitting and Reducing Unused Stuff

JavaScript can be a performance killer if not handled properly.

By default, browsers download and parse all JS — even if parts aren’t needed right away.

That’s why we:

Split code using tools like Webpack or dynamic imports.
Remove unused code, especially third-party scripts or unused CSS classes.

This reduces the size of initial payloads, speeds up rendering, and improves the Time to Interactive metric ⚡

💡 Imagine JS as a buffet — don’t serve the whole menu if the user only asked for a sandwich.

🖼️ Optimize Images

Use tools like TinyPNG to compress your images — no quality loss, just smaller size!

I optimized this image and saved 68% in size with just a few clicks:

📸 Also:

Crop unnecessary parts.
Use WebP or AVIF formats when possible.
Set correct image dimensions to avoid layout shifts.

🔬 Code Review and Lazy Loading

Here’s how I use React.lazy() and Suspense to load components only when they’re needed:

<Suspense fallback={<div>Loading...</div>}>
  <Home2 />
</Suspense>

<img
  src={homeLogo}
  alt="home pic"
  className="img-fluid"
  style={{ maxHeight: "450px" }}
  loading="lazy"
/>

Why this works:

React.lazy: breaks your app into smaller chunks. This means non-critical parts don’t load until needed.
loading="lazy" on images: tells the browser not to load off-screen images until the user scrolls to them.

This greatly reduces initial load time, especially for users on low-end devices or slow networks 🌍

🎨 CSS Optimizations

I keep my CSS minimal, responsive, and optimized for rendering.
Here’s one example from my code:

  .tech-icons {
    font-size: 4.5em;
    margin: 15px;
    padding: 10px;
    box-shadow: 4px 5px 4px 3px rgba(89, 4, 168, 0.137);
    transition: all 0.4s ease;
  }

What’s going on here:

🧽 Clean layout: Simple margin/padding, avoiding deep nesting.
🧠 Efficient rendering: transition, box-shadow, and no heavy animations.
📱 Responsive by default: Paired with media queries to scale well on mobile.

Avoid bloated libraries and unnecessary CSS classes. Stick to what you use — nothing more.

🌐 Real World Network Testing

Your site might be fast for you, but what about users on 3G or rural networks?

I tested my Projects page:
🔗 mrzaizai2k.xyz/project

Looked fine on fast Wi-Fi:

But in Edge DevTools, I:

Pressed F12
Opened the Network tab
Enabled Disable Cache
Switched to Slow 3G

What happened?

YouTube previews didn’t load.
No visual feedback = bad UX.
User probably leaves before seeing your work.

My Fix:

I added a "Demo" button as a fallback, so users can still explore projects even if previews fail to load 🔁

Always think like a user:

"If I saw a blank screen, would I wait? Probably not."

🎁 What's Next

🎯 Here’s the big one:
Even with all the above, it’s not enough without thinking about build and deployment.

In the next post, I’ll show you:

How to create a super-light Dockerfile
How npm run build makes your app production-ready
Why deploying static files the right way boosts speed like crazy

👉 Don’t miss it — follow me so you get notified when it’s live!
👍 If this post helped you, please like, comment, or share
⭐️ A star on the repo also means a lot!