Page Speed Optimization Beyond the Basics: Advanced Techniques | AuditMySite

· 5 min read

You've Done the Basics. Now What?

You've compressed images. Enabled caching. Minified CSS and JavaScript. Your PageSpeed score went from 45 to 72, and now it's stuck. Sound familiar?

The basic optimizations get you 70-80% of the way there. That last 20%—going from 72 to 95+—requires fundamentally different techniques.

Technique 1: Resource Hints and Priority Signals

Preconnect

Establish early connections to third-party origins:

  • <link rel="preconnect" href="https://fonts.googleapis.com">
  • Impact: Saves 100-300ms per origin (DNS + TCP + TLS handshake)
  • Limit: Maximum 4-6 origins—each preconnect consumes a connection

Preload with fetchpriority

  • <link rel="preload" href="/hero.avif" as="image" fetchpriority="high">
  • Impact: Typically 200-500ms LCP improvement

Speculation Rules API (2025+)

Tells the browser to prerender entire pages the user is likely to navigate to:

  • Supported in Chrome 121+ and Edge
  • Can prerender on hover, reducing perceived navigation to near-zero
  • Use with caution—each prerender consumes memory and bandwidth

Technique 2: JavaScript Architecture Optimization

JavaScript is the #1 performance bottleneck. The average page ships 471KB of compressed JavaScript (HTTP Archive, 2025).

Code Splitting Done Right

  • Route-based splitting: Each page loads only its own JS
  • Component-based splitting: Heavy components load on interaction
  • Feature-flag splitting: A/B test variants load only for their cohort

Real example: A client's product page shipped 380KB JS. After splitting the review widget, zoom gallery, and recommendations into dynamic imports, initial load dropped to 95KB—a 75% reduction improving INP by 180ms.

Third-Party Script Management

  1. Measure impact: Block the script in DevTools → see performance difference
  2. Quantify value: What revenue does this script generate?
  3. Calculate trade-off: If a chat widget costs 200ms and generates $500/month, is that worth the bounce rate increase?

Technique 3: Edge Computing and CDN Optimization

Edge computing runs server logic at the CDN edge, reducing round-trips from 200-500ms to 10-50ms.

  • Cloudflare Workers: 300+ edge locations. Free: 100,000 requests/day
  • Vercel Edge Functions: Automatic with Next.js
  • Netlify Edge Functions: Deno-based, great for personalization

A local contractor's website served from a Sacramento edge node loads 3-5x faster for local visitors than from a Virginia data center.

Smart Caching Strategies

  • HTML: Cache-Control: public, max-age=0, s-maxage=3600, stale-while-revalidate=86400
  • CSS/JS (hashed): Cache-Control: public, max-age=31536000, immutable
  • Images: Cache-Control: public, max-age=2592000 (30 days)
  • API responses: Cache-Control: private, max-age=300

Technique 4: Font Optimization Deep Dive

Custom fonts add 100-300KB and block rendering for 100-3000ms.

The Optimal Font Stack

  1. Subset your fonts. Latin-only subsets reduce size 60-80%. Use pyftsubset or glyphhanger
  2. Use WOFF2 exclusively. 30% smaller than WOFF, 97% browser support
  3. Self-host instead of Google Fonts. Eliminates 2 extra origins. The BrandScout team recommends google-webfonts-helper for self-hosting any Google Font
  4. Use font-display: optional for fastest perceived load

Technique 5: Image Delivery Architecture

Responsive Images with Art Direction

  • Use srcset with width descriptors for every image
  • Serve AVIF with WebP and JPEG fallbacks via <picture>
  • Use sizes attribute accurately

Blur-Up Technique

Load a tiny blurred placeholder inline as base64, then swap in the full image. Eliminates blank space pop-in. Libraries: plaiceholder (Next.js), sqip (generic).

Measuring Advanced Performance

  • WebPageTest (free): Multi-location testing, waterfall analysis, filmstrip view
  • Chrome DevTools Performance Panel: Flame charts showing exactly which functions are slow
  • Lighthouse User Flows: Measure across multiple interactions, not just initial load
  • CrUX Dashboard (free): BigQuery access to real Chrome user data

The Performance Mindset

Advanced optimization isn't about checklists—it's about building a culture where performance is a feature. Set budgets, automate testing, and treat regressions like bugs. Every millisecond saved compounds across every visitor, every day, forever.

Ready to audit your site?

Run a free SEO scan and get actionable recommendations in seconds.

Start Free Scan →