How I Got My Portfolio to 100 PageSpeed on Mobile and Desktop

I recently cleaned up my portfolio and got it to 100 in PageSpeed Insights on both mobile and desktop for:

• Performance
• Accessibility
• Best Practices
• SEO

It also got an A on GTmetrix.

This was not because of one magic trick.

It was mostly a lot of small cleanup decisions.

1. I reduced unnecessary client-side work

One thing I focused on was keeping the public page as light as possible.

If something does not need to run in the browser, it should not run in the browser.

That means:

• fewer client-side features
• less JavaScript shipped to the user
• simple rendering flow
• no extra state where it is not needed

This helped keep the page fast.

2. I kept the UI simple

I did not want to add effects just for the sake of it.

A portfolio should load fast and communicate clearly.

So I kept the layout simple:

• clear sections
• readable text
• simple buttons
• no heavy animations
• no unnecessary libraries

This made the site easier to maintain and also helped performance.

3. I cleaned up SEO metadata

SEO was another area I improved.

I checked that the site had:

• proper title and description
• correct canonical URL
• Open Graph metadata
• robots and sitemap behavior
• different handling for production and staging

One important thing was making sure the staging/dev version does not get indexed.

Production should be visible. Staging should stay hidden.

4. I improved accessibility

Accessibility improvements were mostly basic but important.

I checked things like:

• color contrast
• button and link behavior
• readable text sizes
• semantic HTML
• useful fallback screens

Sometimes accessibility is not about adding more code. It is about making the existing UI clearer.

5. I added better error and offline states

I added cleaner fallback screens for error and not-found cases.

I also added a very small offline fallback.

The idea was simple:

If the portfolio is not available offline, show a basic message and still allow the visitor to download the resume.

I did not want to build a full PWA or add unnecessary complexity.

Just enough offline support to be useful.

6. I checked with GTmetrix too

After PageSpeed, I also checked the site with GTmetrix.

The result was:

• GTmetrix Grade: A
• Performance: 99%
• Structure: 99%
• LCP: 781ms
• TBT: 0ms
• CLS: 0

This helped confirm that the site was not only passing one tool, but performing well in another check too.

7. I kept performance features minimal

It is easy to over-engineer performance.

But for this site, the best approach was to keep things boring:

• no heavy runtime logic
• no unnecessary fallbacks
• no large client-side packages
• no complex caching strategy
• no feature that hurts the main page load

The goal was not to add more. The goal was to remove what was not needed.

8. I verified everything before shipping

Before calling it done, I ran checks for:

• lint
• TypeScript
• formatting
• production build
• PageSpeed Insights
• GTmetrix

This helped catch small issues before deployment.

What I learned

Getting a 100 score is not about chasing Lighthouse blindly.

It is about building with discipline.

For me, the main lessons were:

• keep the fast path simple
• avoid unnecessary JavaScript
• care about accessibility from the start
• make SEO explicit
• don’t add features without a reason
• verify before shipping

Small cleanup decisions add up.

That was the biggest learning from this work.