DIY Website Speed Optimization

If your website scores below 90 on Google PageSpeed Insights, you're leaving money on the table. According to Google research, 53% of mobile visitors abandon a site that takes longer than 3 seconds to load. And Google's ranking algorithm penalizes slow sites through Core Web Vitals — with Largest Contentful Paint (LCP) being the #1 failure point.

The good news: you can fix most of this yourself. We've published our exact optimization playbook — the same techniques we use to achieve 100/100 scores on production sites — as a free, step-by-step guide series. No fluff, no upsells, just the fixes that actually move your score.

Your Optimization Roadmap

We've broken the optimization process into four stages. Start wherever your current score falls, and work your way up:

📘 Stage 1: Understand the Stack

The Tech Stack Behind 100/100 PageSpeed Scores

Before you start optimizing, understand what makes a site fast at the architectural level. This guide covers the exact tools, frameworks, and configurations behind perfect PageSpeed scores — including Next.js, AVIF images, server-side analytics, font budgets, and more. Even if you're on WordPress, understanding these principles will help you make better optimization decisions.

You'll learn: Why server components eliminate hydration cost, how AVIF delivers 72% smaller images than JPEG, why inline CSS beats external stylesheets for LCP, and the exact <Image> props that produce a 100/100 score.

📗 Stage 2: Quick Wins (Score 65 → 85)

Improve Your PageSpeed Score: From 65 to 85

This is where most sites see the biggest gains with the least effort. If your score is below 85, start here. These are the fixes you can implement in a single afternoon — proper image sizes props, priority flags on your hero image, CLS fixes, and eliminating the most obvious render-blocking resources.

You'll learn: How to run a 30-minute PageSpeed audit, fix the sizes prop mistake that wastes 100-300KB per image, add fetchPriority="high" to your LCP element, and eliminate layout shifts from fonts and images.

📙 Stage 3: Intermediate Fixes (Score 86 → 93)

Reduce Unused JavaScript: PageSpeed 86 to 93

Once the quick wins are done, the next bottleneck is almost always JavaScript. This guide walks you through dynamic imports, dead dependency removal, server-side analytics (replacing 171KB of gtag.js with 1KB), and fixing forced reflows that block the main thread.

You'll learn: How to audit your bundle for unused dependencies, convert client components to server components, replace Google Analytics with a 1KB server-side alternative, and fix CSS-triggered forced reflows.

📕 Stage 4: Advanced LCP Engineering (Score 93 → 98+)

Fix LCP Issues: Advanced PageSpeed Optimization

The last 5-7 points are the hardest. This guide covers the non-obvious techniques: preload engineering, font budget audits, compositor layer traps, CSS scroll animation gotchas, and Next.js 16-specific image bugs. These are the fixes that separate a 93 from a 98.

You'll learn: How to diagnose LCP preload mismatches, enforce a 50KB font budget, avoid will-change: transform traps, fix duplicate preloads caused by React 19, and use decoding="auto" for synchronous image decode.

Where Does Your Score Fall?

The Root Cause of Slow Sites: Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest visual element on your screen (usually a hero image or banner text) to become fully visible. If your LCP takes more than 2.5 seconds, Google flags your site as "Poor" or "Needs Improvement". According to real-user data from the Chrome User Experience Report (CrUX), nearly half of all mobile websites fail to meet Google's threshold for a "Good" LCP score.

Most websites suffer from poor LCP due to:

• Unoptimized hero images loaded without prioritization
• Heavy, render-blocking JavaScript and styling frameworks
• Slow server response times (TTFB) and lack of edge caching
• Third-party tracking scripts competing for bandwidth during the critical initial paint phase

Every guide in our series addresses these root causes with specific, copy-paste fixes.

The Third-Party Script Problem

Many developers assume a perfect PageSpeed score is impossible with Google Analytics, call tracking, or chat widgets running. That's wrong.

The key is how you load them:

• Google Analytics: Replace the 171KB gtag.js client library with a ~1KB server-side implementation using the Measurement Protocol v2. Our intermediate guide walks you through this step-by-step.
• Call tracking (CallRail, etc.): Load via requestIdleCallback so the script fires ~50-200ms after LCP — numbers swap almost instantly without waiting for user interaction, and it's invisible to PageSpeed since Lighthouse never reaches idle.
• Chat widgets: Use dynamic(() => import(...), { ssr: false }) to exclude them from the critical rendering path entirely.

WordPress vs. Next.js

If you're on WordPress, you can still apply most optimizations from our guides — image compression, font audits, script deferral, and CDN configuration all apply. Focus on:

• Advanced database query caching (WP Super Cache or W3 Total Cache)
• Replacing heavy plugins with lightweight code
• Implementing Cloudflare or a similar edge-caching CDN
• Enforcing image optimization workflows with WebP/AVIF conversion

If you're on Next.js (or considering a migration), our tech stack guide covers the exact configuration for a perfect score — including next.config.ts settings, image optimization, and CSS delivery strategy.

What These Techniques Achieve: 10 Live Site Results

These are real-world websites optimized using the exact techniques covered in our guides. For each site, we show the Google PageSpeed Insights Mobile Score (demonstrating a perfect 100/100) next to the Chrome Performance Timeline (verifying sub-1-second loading times).

1. Tuan Le Law

A premier California personal injury law firm website. The site features rich media and dynamic layouts, yet renders instantly.

• Key Fixes: Lazy-loaded below-fold certification badges, optimized LCP hero image compression, and deferred heavy structured-data scripts.

2. Minuteman Floors

A local flooring contractor website showcasing a massive portfolio of project images.

• Key Fixes: Migrated portfolio image galleries to responsive formats (AVIF/WebP) and deferred third-party widget initialization.

3. Balderas (Demolition OC)

A residential and commercial demolition contractor serving Southern California.

• Key Fixes: Consolidated inline CSS payloads and optimized web fonts delivery.

4. Despora

An interactive marketing platform showcasing rich dashboards and product previews.

• Key Fixes: Optimized image optimization rules for S3 assets and deferred heavy animation libraries.

5. Hoodbuilder

A commercial construction contractor specializing in restaurant building.

• Key Fixes: Replaced raw image embeds with optimized reactive images and deferred non-critical script assets.

6. Nationwide Fire Protection

A multi-location commercial fire safety and suppression provider.

• Key Fixes: Optimized LCP hero background load order and structured-data scripts.

7. RR Security Guards

A premium private security firm providing commercial guard services.

• Key Fixes: Eliminated render-blocking JS bundles and lazy-loaded map/location API plugins.

8. Stealth Watch Security

A premium private security company offering armed, unarmed, and virtual guarding services across Southern California.

• Key Fixes: Replaced 4 static Barlow font files (62KB) with a single variable font (18KB), deferred font loading after LCP, disabled RSC route prefetching (165KB saved), and lazy-loaded below-fold assets.

9. APS Hoods

A full-service commercial kitchen hood cleaning and fire safety company serving Denver, Colorado.

• Key Fixes: Removed inline CSS experiment (reduced HTML from 217KB to 143KB), eliminated quality variants array, and optimized structured data scripts.

10. Eco Green Vision

A California-based HVAC modernization and energy solutions company specializing in central plant optimization and healthcare engineering.

• Key Fixes: Removed 2 unused font families (Geist Sans and Geist Mono), reducing font downloads from 5 to 3 files and freeing bandwidth for the hero image.

Need Help? We're Here.

If you get stuck, hit a wall at 93, or just want someone to handle it — we optimize sites to 100/100 for a living. Reach out below.