The 99/100 Payoff: Bypassing Plugin Overhead for Native Edge Speed

In Part 1 and Part 2, I broke down why I migrated Cohesion Studio to Astro and Sanity, and how I engineered a zero-JS PageBuilder engine to run custom GSAP animations at 60 FPS.

Now let's look at the payoff: jumping from an 83 to a 99 PageSpeed score.

That 83 on WordPress was not a lazy, unoptimized build. I did substantial heavy lifting to reach it: configuring LiteSpeed Cache, tuning image compression plugins, tweaking asset delays, and optimizing database calls. For a motion-heavy WordPress site, an 83 was a solid achievement.

However, 83 was also the hard ceiling.

No matter how many caching plugins, minification rules, or server tweaks you stack on a traditional CMS theme, you are constantly fighting underlying framework overhead. Moving to Astro and Sanity allowed me to throw out the fragile caching plugin stack entirely and achieve a near-perfect score by default.

A key part of that foundation is hosting on high-performance LiteSpeed servers through Seamless Hosting. Ultra-low latency and fast response times ensure server execution never bottlenecks front-end speed.

Here is how our media pipeline, critical rendering path, motion sync, and typography stack up.

1. Native edge delivery over fragile caching plugins

On WordPress, fast image delivery meant relying on plugins to generate WebP or AVIF versions, store them in local uploads folders, and serve them via complex cache rules. It worked, but it was brittle. Cache purges or theme updates could break image URLs or trigger sudden performance regressions.

With Astro and Sanity, image optimization is handled natively at the code level, eliminating third-party optimization plugins altogether.

Using Sanity's @sanity/image-url builder inside Astro, every image asset is resized to exact breakpoint targets and converted on the fly at the edge into modern AVIF formats.

By tuning the Sanity CDN parameter from .quality(80) to .quality(72), I shaved off 15 to 20 percent of image byte weight across high-density photographs with zero perceptible loss in visual clarity.

---
// src/components/SanityImage.astro
import { urlFor } from '../lib/sanity';

interface Props {
  image: any;
  alt: string;
}

const { image, alt } = Astro.props;
const q = 72; // Optimized quality target

const src640  = urlFor(image).width(640).quality(q).auto('format').url();
const src1000 = urlFor(image).width(1000).quality(q).auto('format').url();
const src1400 = urlFor(image).width(1400).quality(q).auto('format').url();
const src1800 = urlFor(image).width(1800).quality(q).auto('format').url();
const src2560 = urlFor(image).width(2560).quality(q).auto('format').url();
const src3600 = urlFor(image).width(3600).quality(q).auto('format').url();

const srcset = `${src640} 640w, ${src1000} 1000w, ${src1400} 1400w, ${src1800} 1800w, ${src2560} 2560w, ${src3600} 3600w`;
---

<img
  src={src1400}
  srcset={srcset}
  sizes="(max-width: 767px) 100vw, (max-width: 1400px) 90vw, (max-width: 1800px) 95vw, 1800px"
  alt={alt}
  loading="eager"
  fetchpriority="high"
  decoding="sync"
/>

Two technical keys unlocked zero-latency LCP:

1. Parameter parity: The preload href and imagesrcset string parameters match the HTML img tag character for character. This guarantees the browser reuses the cached request instead of fetching the image twice.
2. Synchronous frame paint: Setting decoding="sync" on the hero image forces the graphics engine to rasterize and paint the first frame the millisecond image bytes arrive, eliminating frame deferral delays.

This combination dropped Largest Contentful Paint from 2.8 seconds down to 0.8 seconds, a 71 percent performance increase.

3. Eradicating forced reflows in GSAP motion

Heavy animation libraries like GSAP often introduce forced reflows or layout thrashing. When JavaScript reads DOM dimensions immediately after inline styles or classes update, the browser freezes execution to recalculate layout.

During initial profiling, GSAP element initialization triggered a 130ms forced reflow penalty.

I eliminated this main-thread delay entirely through two architectural patterns:

• Double requestAnimationFrame gates: Wrapping GSAP scroller and timeline instantiations inside nested requestAnimationFrame blocks ensures the browser completes the initial layout pass and rendering before GSAP executes visual measurements.
• Batch reads before writes: In reveal scripts (revealAnimation.ts), all layout reads (getBoundingClientRect()) are grouped across target nodes first before any inline GSAP style writes (gsap.set()) take place.

// Batch-reading layout FIRST prevents forced reflow layout thrashing
const rowData = Array.from(rows).map((row) => ({
  row,
  isAlreadyVisible: row.getBoundingClientRect().top < window.innerHeight,
}));

// Perform GSAP setup writes SECOND
rowData.forEach(({ row, isAlreadyVisible }) => {
  if (isAlreadyVisible) {
    gsap.set(contentEls, { autoAlpha: 1, y: 0 }); // Instantly reveal without layout recalculation
    return;
  }
  // Attach ScrollTrigger...
});

This reduced Total Blocking Time to 0ms while keeping complex clip-path expansion and bracket strobe animations perfectly smooth.

4. Zero-CLS typography with local variable fonts

Typography sets the technical tone for Cohesion Studio, relying on JetBrains Mono for UI accents and Mulish for copy.

On traditional builds, fonts often load through external CDNs or plugin headers, causing subtle layout shifts or flash of invisible text while waiting for stylesheet downloads.

In the Astro rebuild, I self-host lightweight, subsetted WOFF2 variable font files directly from the root asset folder:

/* Self-hosted WOFF2 variable font declarations */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('/fonts/Mulish-VariableFont_wght.woff2') format('woff2');
  font-weight: 200 1000;
  font-display: swap;
}

Preloading these key font assets directly in the document head guarantees instant text rendering, bringing Cumulative Layout Shift down to a virtually non-existent 0.009.

5. The business value: Proof of craft

When B2B clients hire Cohesion Studio to build brand and web platforms, they are not just looking for sharp visual design. They are buying technical excellence, speed, and conversion infrastructure.

An agency website is your ultimate proof of craft. Running a studio site with a 99 PageSpeed score, an 0.8s LCP, 0ms Total Blocking Time, and perfect 100s across Accessibility, Best Practices, and SEO demonstrates what is possible when you build with modern engineering standards.

Pushing WordPress to an 83 score required constant maintenance, cache management, and plugin tuning. Rebuilding in Astro and Sanity gave me a clean, zero-maintenance foundation where ultra-fast load times and custom GSAP motion exist together by default.

If you are planning a technical web redesign or want to build a high-performance digital platform, explore Cohesion Studio's brand and web sprint options to see how we scope the work.