From 42 to 98 on PageSpeed: My 7 Game-Changing Optimizations

My portfolio had a PageSpeed score of 42 on mobile. Forty-two. I'd spent weeks perfecting the design, UX, and content — and Google was rating me like a 2000s website. That was 6 months ago. In two hours of targeted optimizations, I went to 98. Here's exactly what I did.

Measure Before Optimizing

Absolute rule: never optimize blindly. Before touching anything, measure with:

• PageSpeed Insights (pagespeed.web.dev) — Google's official tool, tests mobile AND desktop
• Chrome DevTools > Lighthouse — for a local audit
• WebPageTest.org — for tests from multiple locations

Optimization #1: Images (The Number One Culprit)

In my case, 2MB PNG images that should have been 80KB. Images represent an average of 60-70% of a web page's size. This is your first target.

<!-- ❌ Before: heavy image, suboptimal format -->
<img src="hero.png" width="1200" height="600" alt="Hero image">

<!-- ✅ After: WebP, srcset, explicit dimensions, lazy loading -->
<picture>
    <source srcset="hero.webp 1200w, hero-600.webp 600w" type="image/webp">
    <img src="hero.jpg" width="1200" height="600"
         alt="DEZ Koffi — Laravel Developer"
         loading="lazy" decoding="async">
</picture>

Result on my site: 1.8MB saved. LCP dropped from 4.2s to 1.9s.

Optimization #2: Minify and Defer CSS and JavaScript

<!-- Critical CSS inline, rest asynchronous -->
<style>
    body { font-family: sans-serif; margin: 0; }
    .hero { height: 100vh; }
</style>

<link rel="preload" href="/css/app.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">

<script src="/js/app.js" defer></script>

Optimization #3: Enable Gzip/Brotli Compression on Nginx

gzip on;
gzip_types text/plain text/css application/json application/javascript;
gzip_comp_level 6;

brotli on;
brotli_comp_level 6;

Result: 60-80% reduction in text file size.

Optimization #4: Aggressive Browser Caching

location ~* \.(jpg|jpeg|webp|gif|svg|ico|css|js|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

Optimization #5: Preload Critical Resources

<link rel="preload" href="/fonts/inter-v13-latin-regular.woff2"
      as="font" type="font/woff2" crossorigin>

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preload" href="/images/hero.webp" as="image">

Before / After: Real Metrics

Two hours of work. Direct impact on SEO and user experience. One of the best returns on investment I've achieved on this site.