All 10 Episodes
Click any episode to open the full fix-it guide. Check off episodes as you complete them to track your learning journey.
Slow LCP — Unoptimized Hero Image
Your largest above-the-fold element is loading last. Google noticed.
The hero image is almost always the LCP element — and it's almost always the last thing the browser loads.
Key Fix Preview: Compress the hero image to WebP, add a <link rel=preload> hint, and set explicit width and height attributes.
Slow LCP — Render-Blocking Resources
CSS and JavaScript are holding your page hostage before it can paint.
Render-blocking resources prevent the browser from displaying any content until they fully load — directly delaying LCP.
Key Fix Preview: Defer non-critical JavaScript, inline critical CSS, and move render-blocking scripts to the bottom of the page.
High CLS — Layout Shifts from Ads
Your page jumps every time an ad loads. Users hate it. Google measures it.
Ad slots without reserved dimensions inject content into the layout after the page has already painted — causing visible, measurable shifts.
Key Fix Preview: Reserve explicit height for every ad slot with a min-height CSS rule before the ad loads.
High CLS — Images Without Dimensions
No width and height on images = a layout that rebuilds itself on every load.
When browsers don't know an image's dimensions upfront, they reserve zero space. When the image loads, everything below it jumps down.
Key Fix Preview: Add explicit width and height attributes to every img element across the site — this is the single fastest CLS fix available.
Poor INP — Third-Party Scripts
Tag Manager, chat widgets, and trackers are making every click feel broken.
Third-party scripts run on the browser's main thread. Every script added is blocking time stolen from user interaction responses.
Key Fix Preview: Audit all third-party scripts, defer non-essential ones, and load chat widgets and trackers after the main thread is free.
Poor INP — JavaScript Execution Bloat
Your client's site has too much JavaScript blocking every interaction.
Unused JavaScript that loads and executes on page load occupies the main thread — making every click, tap, and keystroke feel sluggish.
Key Fix Preview: Tree-shake unused JS, code-split large bundles, and defer everything not needed for the initial interaction.
Slow TTFB — Shared Hosting Bottleneck
Your server is the problem. No front-end optimization will fix a slow origin.
TTFB is how long the browser waits for the server's first byte. On shared hosting, that wait is often 1–3 seconds before any content loads.
Key Fix Preview: Move to a VPS or managed hosting, implement server-side caching, and layer Cloudflare in front of the origin.
Slow TTFB — Missing Caching Headers
Every page is being served fresh from the server. Every single time.
Without proper caching headers, browsers and CDNs can't store page resources. Every visitor triggers a full server round-trip.
Key Fix Preview: Set Cache-Control headers on all static assets, configure browser caching in your server config, and enable CDN edge caching.
FCP Failures — Web Font Loading Delays
Your client's brand fonts are delaying the first thing users ever see.
Custom web fonts block First Contentful Paint when loaded synchronously — the browser waits to render any text until the font file downloads.
Key Fix Preview: Add font-display: swap to all @font-face declarations and preload critical font files in the page head.
CWV Audit Workflow for Agencies
How to diagnose, prioritize, and present Core Web Vitals fixes to any client.
The complete agency framework — from opening PageSpeed Insights on a new client site to packaging a CWV remediation proposal that wins budget approval.
Key Fix Preview: Use the 5-step agency audit workflow to diagnose all three metrics, prioritize by impact, and build a client-ready remediation roadmap.