DEV Community

Cover image for Scaling 98/100 PageSpeed for 100+ Pages: My Technical Workflow
Code Cat
Code Cat

Posted on

Scaling 98/100 PageSpeed for 100+ Pages: My Technical Workflow

#webdev #ai #programming #productivity

Optimizing a single landing page is one thing. Maintaining a "Green Zone" score across 100+ pages (services, districts, and blog) is a technical challenge.

I managed to hit 93–98 on Mobile and 98–100 on Desktop without a huge dev team, using Claude AI as my co-pilot. Here is the exact technical workflow.

1. The LCP Revolution: fetchpriority over Preload

Largest Contentful Paint (LCP) is the most critical Core Web Vital. I ditched CSS background-image for all Hero banners.

  • The Fix: Moved to standard <img> tags with fetchpriority="high".
  • The Logic: This signals the browser to prioritize the image immediately in the HTML stream. While I use <link rel="preload"> on the homepage, the <img> + fetchpriority combo is much cleaner to maintain across 40+ unique service templates without cluttering the <head>.

2. Taming the "Analytics Tax"

Tracking scripts (Google Analytics, Yandex Metrica, Roistat) are performance killers. On mobile, they can strip 10–15 points off your score.

  • The Hack: I wrapped all tracking scripts in a requestIdleCallback with a 3000ms timeout.
  • The Result: Scripts load only when the main thread is idle. If a user bounces in under 3 seconds, they weren't going to convert anyway. For everyone else, the UI is instant.

3. Rational Image Strategy: WebP vs JPG

I didn't follow the "WebP everywhere" dogma blindly:

  1. Home & District Pages: Use WebP for maximum byte savings on high-traffic entry points.
  2. Service Pages: Kept optimized JPGs.

With fetchpriority="high", the LCP difference is negligible, but the visual fidelity of JPG remains superior.

4. The Infrastructure

  • Critical CSS: Inlined core styles for the first fold directly into the <head>.
  • Self-hosted Fonts: Switched to local woff2 files (Inter) to eliminate external DNS lookups.
  • Server-side: Configured .htaccess for a 1-year static cache and Gzip/DEFLATE compression.

5. Scaling with AI

Optimizing 100+ pages manually is a nightmare. I used Claude to:

  • Refactor 40+ PHP templates.
  • Generate complex .htaccess rules.
  • Audit Schema.org JSON-LD for every page type.

The Bottom Line: Performance isn't just a metric; it's clean engineering. By focusing on native HTML5 attributes and smart script loading, you can achieve elite speeds at scale.

What’s your go-to trick for LCP optimization? Let’s discuss in the comments!

Top comments (0)