The 30-Technique Playbook That Got Us to 100/100 Mobile

Reaching a perfect 100/100 on Google PageSpeed Insights mobile is not about one clever trick or a single plugin. It is the result of applying dozens of coordinated techniques across every layer of the stack — fonts, CSS, JavaScript, images, HTML, server configuration, and resource loading strategy. Each technique contributes a measurable amount to the overall score, and the combined effect is what separates a site that scores in the 60s from one that consistently hits 95-100.

Over the course of optimizing dozens of production websites, we developed a structured playbook of 30 techniques. This article walks through the methodology behind that playbook, organized into the categories that matter most for PageSpeed performance.

Font Engineering (Techniques 1-6)

Fonts are one of the most overlooked performance bottlenecks on the web. A typical site loads 4-8 font files totaling 200-500KB, often from Google Fonts via a render-blocking external stylesheet. Our first six techniques address this entirely.

We self-host all fonts as variable WOFF2 files, eliminating the external DNS lookup and connection overhead to fonts.googleapis.com. Each font file is subset to Latin characters only, reducing file size by 60-80%. We define metric-matched fallback fonts using size-adjust, ascent-override, and descent-override properties — this eliminates the Cumulative Layout Shift (CLS) that occurs when web fonts swap in and push content around.

Font files are preloaded with the crossorigin attribute (mandatory for font preloads to work), and we use font-display: swap for invisible text prevention. The result is zero layout shift from font loading and total font payload typically under 50KB for two full variable font families.

CSS Architecture (Techniques 7-12)

CSS is the second render-blocking resource after HTML itself. Our CSS techniques focus on two principles: eliminate external CSS files entirely, and minimize the total CSS payload.

We use Astro's build-time CSS inlining to embed all styles directly in the HTML document. No external stylesheet requests, no render-blocking CSS downloads. Tailwind CSS is configured with aggressive purging to remove unused utility classes — a typical page ships under 15KB of total CSS.

Critical above-the-fold styles are prioritized in the document order. Component-scoped styles prevent specificity conflicts and dead CSS accumulation. We avoid CSS-in-JS entirely, as it requires JavaScript execution before styles can be applied — a fundamental performance anti-pattern for initial render.

JavaScript Elimination (Techniques 13-16)

The single most impactful category in our playbook is JavaScript elimination. Not optimization, not minification, not code-splitting — elimination. Every kilobyte of JavaScript that does not ship is a kilobyte that does not need to be downloaded, parsed, compiled, or executed.

We achieve this by building on Astro's zero-JS-by-default architecture. Interactive elements like mobile menus, scroll-reveal animations, FAQ accordions, and header scroll effects are implemented with minimal inline vanilla JavaScript — typically under 1KB total for an entire page. No React. No Vue. No framework runtime. No hydration overhead.

Third-party scripts are audited ruthlessly. Analytics scripts are loaded with the defer attribute or removed entirely if they are not providing actionable data. Chat widgets, social embeds, and tracking pixels are either eliminated or loaded only on interaction. The goal is a page that ships zero external JavaScript files.

Image Pipeline (Techniques 17-22)

Images typically account for 50-80% of a page's total weight. Our image pipeline automates the conversion of all images to WebP or AVIF format at build time, with appropriate quality settings for each use case — hero images at 80% quality, thumbnails at 70%, decorative backgrounds at 60%.

All images include explicit width and height attributes to prevent layout shift. Images below the fold use loading="lazy" and decoding="async" for deferred loading. Above-the-fold hero images use fetchpriority="high" to signal the browser to prioritize them.

We size images to their display dimensions using responsive srcset attributes, preventing the browser from downloading a 2000px image for a 400px container. SVG icons are inlined directly in the HTML rather than loaded as external files, eliminating additional HTTP requests.

Resource Loading Strategy (Techniques 23-26)

How and when resources load is as important as their size. We use preload hints for critical assets (fonts, hero images), preconnect for required third-party origins, and dns-prefetch for lower-priority external domains.

The document head is ordered deliberately: critical meta tags first, then icon and sitemap links, then font preloads, then SEO meta, then inlined CSS. This ordering ensures the browser can begin rendering as early as possible while critical resources are already in flight.

We implement content-visibility: auto on below-fold sections, which tells the browser to skip layout and paint calculations for content not yet visible in the viewport. This alone can reduce initial render time by 30-50% on content-heavy pages.

Server and Delivery (Techniques 27-30)

The final four techniques address server-level optimization. We configure Brotli compression for all text-based assets (HTML, CSS, JS, SVG, JSON), achieving 15-20% better compression than gzip. Cache headers are set with appropriate durations — immutable hashes for versioned assets, shorter TTLs for HTML.

We ensure proper HTTP/2 or HTTP/3 support for multiplexed resource loading, eliminating the head-of-line blocking that plagued HTTP/1.1. DNS resolution is optimized through minimal external domain dependencies — ideally, the entire page loads from a single origin.

The result of all 30 techniques applied together is a page that loads in under 1 second on a 4G connection, achieves First Contentful Paint under 800ms, Largest Contentful Paint under 1.2 seconds, zero Cumulative Layout Shift, and a consistent PageSpeed score of 95-100 across multiple test runs.

Frequently Asked Questions