Homepage Speed Fix: 90-Minute Checklist (With Before/After Proof) -

Job: reduce homepage load time fast without breaking layout.
Outcome: measurable Core Web Vitals improvement with before/after proof in one working session.

HOW TO USE: Copy any script or snippet and replace tokens like {PaymentLink}, {LoomLink}, {FolderPath}, {Business}, {FontName}, {cdn-domain}. These are placeholders for your links and files. Deliverables + proof live in your client folder, not on this website.

Outcomes & acceptance criteria

Mobile LCP reduced by 30–50% from baseline.
CLS ≤ 0.1 on homepage.
Desktop score ≥ 90 or +20 points vs baseline (whichever comes first).
TTFB improved vs baseline and page served from cache (verified in headers).
Hero/LCP image not lazy-loaded; width/height set; font swap enabled.
Proof package delivered (screens + 60s recap + file tree).

90-minute plan (outputs per block)

0–10 min: Baseline + snapshot → “before” metrics saved (mobile/desktop, waterfall, headers).
10–25 min: Caching & compression → static assets cached 30 days; HTML cached (anonymous); compression on.
25–40 min: Media fixes → hero sized + compressed, fetchpriority="high"; below-the-fold lazy-load; convert heavy images.
40–55 min: JavaScript → defer non-critical, async third-party, remove 1–2 heavy scripts.
55–70 min: CSS & fonts → inline/preload critical CSS; font-display: swap; limit webfont variants.
70–80 min: CDN & resource hints → preconnect/preload top origins; verify headers.
80–90 min: Retest + proof → screenshots, recap, delivery summary.

Access & pre-flight

Access needed (ask in one email)

CMS/WordPress admin or site builder login
Hosting panel (caching/compression)
CDN/DNS (if used)
Backups enabled
List of must-keep plugins/integrations

Baseline (take screenshots)

Core Web Vitals report (mobile + desktop)
Network waterfall for homepage
Response headers for HTML and a static asset
LCP element identification (usually hero image/heading)

Risk notes

Do not lazy-load the LCP image.
Defer carefully; if critical JS initializes layout, exclude it from defer.
Take a backup/snapshot before changes.

Step-by-step checklist (time-boxed)

1) Measure baseline (0–10 min)

Record mobile/desktop scores and metrics (LCP, CLS, FID/INP).
Note TTFB and whether cache headers exist (Cache-Control/Age/x-cache).
Identify LCP element (hero image or large heading).

Output: baseline screenshots saved to /before.

2) Turn on caching & compression (10–25 min)

Enable full-page caching for anonymous users.
Set static asset caching: 30 days (immutable for versioned files).
Turn on GZIP/Brotli compression at server/CDN.
Verify via headers (Cache-Control, Content-Encoding, Age/x-cache).

Apache (.htaccess)

&lt;!-- Compression --&gt;
&lt;IfModule mod_deflate.c&gt;
 AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript application/json image/svg+xml
&lt;/IfModule&gt;

&lt;!-- Caching --&gt;
&lt;IfModule mod_expires.c&gt;
 ExpiresActive On
 ExpiresByType text/css "access plus 7 days"
 ExpiresByType application/javascript "access plus 7 days"
 ExpiresByType image/webp "access plus 30 days"
 ExpiresByType image/jpeg "access plus 30 days"
 ExpiresByType image/png "access plus 30 days"
 ExpiresDefault "access plus 1 hour"
&lt;/IfModule&gt;

&lt;FilesMatch "\.(js|css|png|jpg|jpeg|gif|webp|svg)$"&gt;
 Header set Cache-Control "public, max-age=2592000, immutable"
&lt;/FilesMatch&gt;

Nginx (server block)

gzip on;
gzip_types text/plain text/css application/javascript application/json image/svg+xml;
gzip_min_length 1024;

location ~* \.(js|css|png|jpg|jpeg|gif|svg|webp)$ {
 add_header Cache-Control "public, max-age=2592000, immutable";
}

Output: headers screenshot showing cache + compression.

3) Fix media (25–40 min)

Resize hero to actual render size; compress (target <200 KB if possible).
Mark hero as LCP: use fetchpriority="high", do not lazy-load, set width/height.
Convert heavy images to WebP/AVIF with JPEG/PNG fallback.
Lazy-load below-the-fold images.

HTML

&lt;picture&gt;
  &lt;source type="image/webp" srcset="/images/hero.webp"&gt;
  &lt;img src="/images/hero.jpg" width="1280" height="720" fetchpriority="high" alt="{Alt}"&gt;
&lt;/picture&gt;

&lt;img src="/images/gallery-1.jpg" width="800" height="600" loading="lazy" alt="{Alt}"&gt;

Output: hero file optimized; gallery images lazy-loaded.

4) Tame JavaScript (40–55 min)

Defer site JS not needed for first paint.
Async third-party (analytics, chat, heatmaps).
Remove at least one non-essential script from homepage.
Move non-critical inline JS to a deferred file if safe.

JS includes

&lt;script defer src="/js/app.js"&gt;&lt;/script&gt;
&lt;script async src="https://{analytics-domain}/script.js"&gt;&lt;/script&gt;

Click-to-load heavy embeds (e.g., map/video)

&lt;div id="map-placeholder"&gt;
  &lt;img src="/images/map-static.jpg" width="800" height="450" alt="Map"&gt;
  &lt;button id="load-map"&gt;Open Map&lt;/button&gt;
&lt;/div&gt;
&lt;script&gt;
document.getElementById('load-map').addEventListener('click', function(){
  document.getElementById('map-placeholder').innerHTML =
    '&lt;iframe src="{MapEmbedURL}" width="800" height="450" loading="lazy" style="border:0" allowfullscreen&gt;&lt;/iframe&gt;';
});
&lt;/script&gt;

Output: fewer blocking scripts; embed loads on demand.

5) CSS & fonts (55–70 min)

Inline/preload critical CSS for above-the-fold; load the rest non-blocking.
Limit webfont variants (regular + bold). Preload WOFF2; enable swap.
Set explicit dimensions or aspect-ratio for media to prevent CLS.

Head

&lt;link rel="preload" as="style" href="/css/critical.css" onload="this.rel='stylesheet'"&gt;
&lt;noscript&gt;&lt;link rel="stylesheet" href="/css/critical.css"&gt;&lt;/noscript&gt;

&lt;link rel="preload" as="font" type="font/woff2" href="/fonts/{FontName}.woff2" crossorigin&gt;

CSS

@font-face{
  font-family:'{FontName}';
  src:url('/fonts/{FontName}.woff2') format('woff2');
  font-display:swap;
}
.embed-16x9{ aspect-ratio:16/9; width:100%; }

Output: no render-blocking font/CSS; CLS stable.

6) CDN & resource hints (70–80 min)

Preconnect to your CDN and critical third-party domains.
Preload the LCP image if fetchpriority isn’t available in your stack.
Verify that CDN serves compressed, cached assets.

Head

&lt;link rel="preconnect" href="https://{cdn-domain}"&gt;
&lt;link rel="preconnect" href="https://{font-domain}" crossorigin&gt;
&lt;link rel="preload" as="image" href="/images/hero.webp"&gt;

Output: faster connection setup; confirmed CDN headers.

7) Retest & proof (80–90 min)

Re-run metrics (mobile + desktop) and capture screenshots.
Confirm CLS ≤ 0.1, LCP drop 30–50%, desktop score target met.
Verify headers show cache hit and compression.
Record 60-second recap; send delivery summary.

Output: /after folder + recap video + delivery email.

Platform notes (quick wins)

WordPress: enable page caching, image compression, lazy-loading (keep hero excluded), defer JS, disable duplicate/unused plugins, avoid combining CSS/JS if it breaks; version assets to keep aggressive caching safe.
Hosted builders (Shopify/Wix/Squarespace): compress/resize images, trim app integrations on homepage, defer chat/heatmaps, replace map/video with click-to-load, use theme settings for fonts (system fonts if possible).
Custom stacks: ship WOFF2 only where compatible, HTTP/2 or HTTP/3 on, TLS session resumption, keep HTML under CDN if allowed.

Proof kit (what to capture)

Folder

/Clients/{Business}/{YYYY-MM-DD}-Speed-Fix/
/before
/after
/delivery
/video
/headers

Screenshots

Core Web Vitals (mobile + desktop) before/after.
Network waterfall before/after.
Response headers (HTML + one static asset) showing cache/compression.
LCP element before/after (identify hero).

File naming

{YYYY-MM-DD}{Business}speed{metric}{before/after}.png
{YYYY-MM-DD}{Business}headers{html/static}{after}.png
{YYYY-MM-DD}_{Business}_recap_60s.mp4

60-second recap (talking points)
What slowed the page (10s), changes made (20s), numbers (20s), next best step (10s).

Copy-paste scripts

Access request email

Subject: 90-minute homepage speed pass — access checklist

Please send:
- CMS/WordPress admin (temp user) + hosting panel (cache/compression)
- CDN/DNS (if used) and confirm backups are enabled
- List of must-keep plugins/apps on homepage
- Homepage URL + 2 critical inner pages

I’ll confirm access and schedule the 90-minute session.

Delivery summary email

Subject: {Business} — Homepage speed fix delivered (before/after inside)

Done:
- Caching + compression enabled
- Hero (LCP) optimized; below-the-fold lazy-loaded
- Non-critical JS deferred; heavy embed click-to-load
- Critical CSS + font-display: swap; resource hints added

Before/After:
- Mobile LCP: {BeforeLCP} → {AfterLCP}
- CLS: {BeforeCLS} → {AfterCLS}
- Desktop score: {BeforeDesktop} → {AfterDesktop}
- TTFB improved; cache headers verified

Proof folder: {FolderPath}
60s recap: {LoomLink}

If this matches the acceptance criteria, please reply “APPROVED.” I’ll include a 7-day check-in.

“Results I’d Expect” nudge (if they ghost after audit)

Based on your current setup, I’d expect mobile LCP to drop ~30–50% and CLS ≤0.1 in one 90-minute pass. Proceed for {Price}? {PaymentLink}

QA checklist (paste into your tracker)

[ ] Baseline screenshots saved (mobile/desktop metrics, waterfall, headers)
[ ] Full-page cache on for anonymous users
[ ] Cache-Control set; compression on (GZIP/Brotli)
[ ] Hero (LCP) sized, compressed, fetchpriority high, not lazy-loaded
[ ] Below-the-fold images lazy-loaded
[ ] Non-critical JS deferred; third-party async; one script removed
[ ] Critical CSS inlined/preloaded; font-display: swap; limit variants
[ ] Resource hints added (preconnect/preload)
[ ] Retest captured; CLS ≤0.1; LCP drop 30–50% or documented gains
[ ] Headers show cache hit + compression
[ ] Proof folder + delivery email sent

Pitfalls & fast fixes

Hero is lazy-loaded → CLS/LCP worse: remove loading="lazy" on LCP; add fetchpriority="high"; set width/height.
Layout jump from fonts → add font-display: swap; preload WOFF2; limit weights.
Defer breaks UI → exclude critical JS; keep order for dependencies; test after each change.
Cache misses → purge and retest; ensure HTML caching for anonymous users; set proper vary headers.
Third-party bloat → disable chat/heatmap/A/B on homepage; click-to-load or move to intent pages.
Image CDN over-compresses → balance quality; ensure dimensions match render size.
CDN caching HTML for logged-in users → bypass cache for cookies/sessions; cache only anonymous traffic.
CLS from embeds → reserve space with aspect-ratio or fixed height; use click-to-load.

Mini scope (paste-ready)

Project: Homepage Speed Fix (90-Minute) for {Business}
Price: {Price} (prepaid via {PaymentLink})
Turnaround: Single 90-minute session + proof same day

Scope:
- Caching/compression, hero optimization, lazy-load, JS defer/async, critical CSS, font swap, resource hints, proof pack

Acceptance criteria:
- Mobile LCP reduced 30–50% from baseline
- CLS ≤0.1 on homepage
- Desktop score ≥90 or +20 points vs baseline
- TTFB improved; cache/compression verified in headers
- Proof folder + 60s recap delivered

Exclusions:
- Theme redesign, server migration, ongoing optimization beyond this pass

Access required:
- CMS/hosting/CDN; backups enabled; must-keep list

Approval:
- Reply “AGREED” to proceed

FAQ

What if desktop is already 90+ but mobile is low?
Prioritize hero image, JS defer, and font swap; mobile is the target for LCP.

Is combining CSS/JS required?
No. In HTTP/2+, focus on deferring and right-sizing. Combine only if it clearly helps.

How do I know what the LCP is?
Inspect the performance report; it highlights the LCP element (often the hero image).

What if TTFB is high (>800 ms) even with cache?
Enable HTML caching for anonymous users; if still high, check slow origin (database, cold functions) after the session.

Can I keep the chat widget?
Yes—load it on click or only on contact pages, not on initial homepage render.

Will this break SEO?
No, if done correctly. You’re improving Core Web Vitals and stability.

What if the site builder limits headers or lazy-load?
Optimize images, defer third-party scripts, and use click-to-load embeds. Document what can’t be changed.

How soon will metrics update?
Lab tests are instant. Field data updates over days/weeks; provide lab proof now and note the expected field improvement window.

CTA

Run the 90-minute pass, ship the proof, and use the win to sell your next micro-offer. When you want everything pre-packaged, use the Speed Fix Pack.

GMM Speed Fix Pack (90 Minutes)
– Checklists: baseline, cache/compress, media, JS, CSS/fonts, CDN/hints, proof
– Snippets: .htaccess, Nginx, HTML lazy-load/fetchpriority, font swap, resource hints, click-to-load embed
– Proof Kit: screenshot set, file tree, headers checklist, 60s recap script
– Templates: access request, delivery summary, mini scope, results nudge
– Tracker CSV headers: date,business,contact,platform,baseline_lcp,baseline_cls,baseline_desktop,steps_applied,after_lcp,after_cls,after_desktop,headers_ok,proof_link,notes

Download the Speed Fix Pack (90 Minutes)

Homepage Speed Fix: 90-Minute Checklist (With Before/After Proof)