Rolan Lobo

Posted on Jan 18

How I Accidentally Became a Performance Guru

#webdev #performance #beginners #react

The Classic Beginner Move: Doing Everything Backwards

You know that feeling when you're building your portfolio as a beginner and you suddenly think:

“THIS is going to be legendary.”

Yeah. That was me.

I planned everything with extreme seriousness:

✅ Cool animations
✅ Smooth transitions
✅ Project showcase
✅ Fancy tech stack badges
✅ Blog section
❌ Resume… eventually?

Here’s the thing about being a beginner:

You overthink the simple stuff

and underthink the important stuff.

I spent days perfecting my hero section animation.

But adding my actual resume to my portfolio?

“Eh… I’ll do it later.”

So naturally, I added my resume dead last.

You know —

the ONE thing employers might actually want to see.

By the time I got to it, I had already:

implemented three color themes
refactored my components twice
memorized half of the React docs
emotionally bonded with my CSS

Classic beginner behavior. 🤦‍♂️

The React-PDF Rabbit Hole 🕳️🐇

When I finally decided to add my resume, I told myself:

“I’m a developer now.

I must do this the developer way.”

So I did what any self-respecting beginner does:

🔍 Googled: “How to add PDF to React website”

And there it was.

✨ react-pdf ✨

A whole library just for PDFs?

Perfect.

Libraries = Professional.

More code = Smarter developer.

Right?

import { Document, Page } from 'react-pdf';

// Look at me using a library 😎
<Document file="/Rolan_Resume.pdf">
  <Page pageNumber={1} />
</Document>

I felt unstoppable.

Installed dependencies
Configured webpack
read 15 Stack Overflow answers
Fought canvas rendering errors
Questioned my life choices

This was REAL development, right?

The Wake-Up Call 😱

Then I ran Lighthouse.

Performance: 67

💀💀💀

My beautifully crafted portfolio — the one I spent weeks polishing — was being absolutely murdered by a PDF renderer.

Mobile users were probably aging in real time
Resume loading slower than my motivation on Mondays
And for WHAT?

The PDF:

wasn’t interactive
didn’t zoom properly
took forever to load

I had officially used a sledgehammer to hang a photo frame.

The “Duh” Moment: WebP to the Rescue 🧠✨

One day, while optimizing my project images (you know… the things I optimized before my resume 🙃), I converted everything to WebP.

File sizes dropped like my hopes during a failed npm install.

And suddenly…

💡 It hit me.

“Wait…
Why am I rendering a PDF…
when I could just show an image?”

🤯🤯🤯

Groundbreaking thinking, I know.
Someone call the Nobel committee.

So I did the most un-developer thing possible:

Opened my resume PDF
Exported it as a high-quality image
Converted it to WebP
Deleted react-pdf like it owed me money

Replaced all of this complexity with:

<img 
  src="/resume-preview.webp" 
  alt="Resume Preview"
  loading="lazy"
/>

That’s it.

No library.
No config.
No pain.
Just ✨ a native <img> tag no libraries involved ✨.

The Results Were… Embarrassingly Good 😐

Before (react-pdf)

📦 Bundle size: +500KB
⏱️ Load time (3G): 3.2s
🎨 Lighthouse score: 67
😤 Stress level: High

After (WebP)

📦 File size: ~45KB
⏱️ Load time (3G): 0.3s
🎨 Lighthouse score: 95
😎 Stress level: Chill

I accidentally made my site 10x faster by doing the simplest thing possible.

What This Taught Me (Besides Humility)

1️⃣ Not Everything Needs a Library

Just because a library exists doesn’t mean you need it.

Sometimes the browser already does the job perfectly fine.

Using a library for this felt like buying a smart electric can opener…
when you have hands.

2️⃣ WebP Is a Game Changer

If you’re not using WebP yet… why? 😭

25–35% smaller than PNG/JPEG
Better quality at lower sizes
Supported by all modern browsers (sorry IE11, this party isn’t for you)

WebP is basically a free performance upgrade.

3️⃣ The Beginner Advantage 🧠

As a beginner, I wasn’t emotionally attached to “the right way”.

When something didn’t work well, I didn’t defend it.

I just went:

“This sucks.”
Delete.
Try something simpler.

That mindset saved my performance.

4️⃣ Performance > Complexity

No recruiter will ever say:

“Wow… you used react-pdf.”

But they will notice when your site loads faster than their coffee machine.

Users don’t see your code.
They feel your performance.

The Irony of It All 🎭

I thought being a “real developer” meant:

more libraries
more configs
more complexity

But the biggest improvement to my portfolio came from:

Converting a file
and using an <img> tag.

Sometimes the best code
is the code you don’t write.

How You Can Do This Too (Dead Simple)

Export your resume as a high-quality image
Convert it to WebP
Use this:

<img src="resume-preview.webp" alt="Resume" loading="lazy" />

Still offer the PDF download:

<a href="/resume.pdf" download>Download PDF</a>

Done. 🎉

You’ve now avoided:

PDF.js headaches
Webpack nightmares
“canvas is not defined” errors
Performance crimes

Final Thoughts

Building a portfolio as a beginner is basically:

doing things backwards
learning the hard way
accidentally discovering best practices

I added my resume last.
I over-engineered a simple problem.
But I learned something valuable:

Simple beats fancy.
Fast beats clever.
Users beat libraries.

If my Lighthouse score went from 67 → 95 just by using WebP…

Imagine what yours could be.

Now if you’ll excuse me, I need to refactor something that’s working perfectly fine —
you know, as developers do. 😅

TL;DR
Tried to be fancy with react-pdf, murdered performance.
Switched to WebP image preview, became accidentally fast.
WebP is magic. Simple is better.

Got similar over-engineering stories?
Drop them in the comments — let’s laugh at our beginner mistakes together 👇

P.S. Yes, my resume is still downloadable as a PDF.
I’m not a monster. But the preview?
That’s pure WebP goodness. 😌

DEV Community