Achieving 100/100 PageSpeed Score Through Full-Stack Optimization

Overview

A client approached me with performance concerns on their website, particularly around load speed and user experience. While the site was functional, it was underperforming in speed metrics, which can directly impact SEO rankings and conversion rates.

The objective was to optimize the website for maximum performance and achieve top scores in performance benchmarks without compromising functionality or design.

Initial Performance Metrics

Mobile Score: 65

Mobile Score Before

Desktop Score: 78

The site had multiple performance bottlenecks including unoptimized assets, render-blocking resources, and inefficient loading strategies.

Optimization Strategy

1. Server-Level Optimization

Since the client’s server was running on LiteSpeed, I leveraged server-side optimizations:

  • Enabled server caching using the LiteSpeed Cache plugin
  • Activated compression (GZIP/Brotli) via PHP extensions
  • Configured browser caching through .htaccess rules

These changes significantly reduced server response time and improved repeat visit performance.

2. Code Structure Optimization

The website contained multiple static HTML pages with repeated code blocks.

To improve maintainability and performance:

  • Moved header and footer into reusable PHP includes
  • Reduced redundant code across pages
  • Minimized DOM size and improved rendering efficiency

3. CSS Optimization

  • Removed unused CSS across pages
  • Compressed and optimized remaining styles
  • Inlined critical CSS directly into the <head> to eliminate render-blocking requests

This ensured faster above-the-fold rendering.

4. Media Optimization

Video Optimization:

  • Original video size: 18 MB
  • Optimized size: ~4 MB (without noticeable quality loss)
  • Added a lightweight thumbnail for initial load

Image Optimization:

  • Resized images to match actual display dimensions
  • Reduced file sizes without quality degradation
  • Eliminated oversized assets

5. Script Loading Improvements

  • Moved Google Tag Manager (GTM) script higher in the <head> to improve initialization timing
  • Ensured faster tracking execution without delaying page rendering

6. Lazy Loading reCAPTCHA

To avoid unnecessary script loading, I implemented a lazy-loading strategy for Google reCAPTCHA.

With assistance from ChatGPT, I implemented the following optimized loading approach:

const SITE_KEY = 'MY_SITE_KEY_VALUE'; 

// Lazy-load reCAPTCHA only when user interacts with the form
let recaptchaLoaded = false;

function loadRecaptcha() {
  if (recaptchaLoaded) return;
  recaptchaLoaded = true;
  const script = document.createElement('script');
  script.src = 'https://www.google.com/recaptcha/api.js?render=' + SITE_KEY;
  script.async = true;
  document.head.appendChild(script);
}

// Load reCAPTCHA on first interaction
const formEl = document.getElementById('contactForm');
if (formEl) {
  ['focusin', 'input', 'touchstart'].forEach(function(evt) {
    formEl.addEventListener(evt, loadRecaptcha, { once: true });
  });
}

This ensured the script loads only when needed, reducing initial page load time.

7. Font Optimization

To eliminate unnecessary third-party requests:

  • Subsetted Font Awesome using Python (fonttools/pyftsubset)
  • Extracted only the required icon glyphs
  • Converted and embedded them as a self-hosted base64 CSS file

This removed dependency on external CDNs and reduced network requests.

8. UI/UX Performance Adjustments

  • Reduced heavy animations in the above-the-fold section
  • Prioritized content visibility over visual effects
  • Improved perceived load speed and user experience

Final Results

Mobile Score: 100

Desktop Score: 100

Key Improvements Achieved

  • Faster initial load and rendering
  • Reduced server response time
  • Optimized asset delivery
  • Eliminated render-blocking resources
  • Improved Core Web Vitals
  • Reduced dependency on third-party resources

Outcome

  • ✅ Perfect performance scores across devices
  • ✅ Improved user experience and engagement
  • ✅ Better SEO performance potential
  • ✅ Fully optimized, scalable architecture

Conclusion

This project demonstrates that achieving a perfect PageSpeed score requires a holistic approach, combining server-level optimization, frontend performance tuning, and smart loading strategies.

By addressing bottlenecks at every level—from server configuration to asset delivery—the website was transformed into a high-performance, efficient system without compromising functionality.

Related Posts