How I Accidentally Became a Performance Guru
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.
I:
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-pdflike 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. 😌
