--- name: page-cro description: "Landing page CRO — 100-point audit checklist, heatmap analysis, statistical testing, conversion optimization. Use when auditing or optimizing a landing/marketing page. For popups see `popup-cro`; for signup flows see `signup-flow-cro`." --- # Landing Page CRO Optimization Framework > Expert-level conversion rate optimization for landing pages with data-driven methodologies, statistically valid experimentation, consent-safe analytics, and accessible, framework-agnostic implementation. ## How to run a CRO engagement (don't start with the checklist) The 100-point audit below is a **first-pass diagnostic**, not the work itself. A real CRO program is a loop: 1. **Instrument & baseline** — confirm conversion tracking is correct, get 2–4 weeks of clean data, know your current CVR, revenue-per-visitor (RPV), and bounce. Never optimize a page you can't measure. 2. **Diagnose** — combine quant (GA4 funnels, scroll/click heatmaps) with qual (session replays, 5-second tests, user interviews, on-page surveys). The checklist scores the page; diagnosis finds *why* it leaks. 3. **Hypothesize** — write each idea as: *"Because [evidence], we believe [change] will cause [metric] to move for [segment]. We'll know from [primary metric]."* No hypothesis, no test. 4. **Prioritize** — score every idea by **PIE** (Potential, Importance, Ease) or **ICE** (Impact, Confidence, Ease), 1–10 each, rank by average. See the prioritization rubric below. 5. **Experiment** — run a powered A/B test (sample size + duration computed up front; see the experimentation section). Most "wins" that aren't powered are noise. 6. **Analyze & ship** — check SRM, primary metric, and guardrails before declaring a winner. Ship winners, document losers, feed learnings back to step 2. **Expected effect sizes (set expectations honestly):** mature pages move 2–10% relative per winning test; a brand-new page or a hero/offer rework can move 20–50%+. Anyone promising "+127% from a button color" is selling, not testing — the example testimonials in this doc are illustrative placeholders, not benchmarks. Sibling skills: popups/exit-intent/cookie-consent UX → `popup-cro`; multi-step signup/onboarding funnels → `signup-flow-cro`. ## 🎯 100-Point CRO Audit Framework **Scoring & verdict.** Each item lists its point value. Tally the five sections (25+25+15+15+10+10 = 100). Interpret: **85–100** strong, ship/iterate on margins; **70–84** solid, fix the flagged items and test; **50–69** material leaks, prioritize fixes before paid traffic; **< 50** rebuild the page. Score by **evidence, not vibes** — for each item record: pass/fail, the evidence (screenshot, Lighthouse/CrUX number, heatmap, replay), and a PIE/ICE score so fixes rank by impact, not order of discovery. ### Above-The-Fold Checklist (25 Points) **Hero Section Critical Elements** - [ ] **Value proposition clarity** (3 points): 7-second rule test passed - [ ] **Headline power** (3 points): Specific, benefit-driven, emotional trigger - [ ] **Subheadline support** (2 points): Reinforces and elaborates on headline - [ ] **CTA visibility** (3 points): Contrasting color, clear action verb, above fold - [ ] **Hero image relevance** (2 points): Supports value prop, shows product in use - [ ] **Social proof placement** (3 points): Logo wall, testimonial, or usage stats - [ ] **Load time optimization** (3 points): <2s LCP, optimized images - [ ] **Mobile hero optimization** (3 points): Stacked layout, thumb-friendly CTA, primary CTA reachable without scroll on a 360×640 viewport - [ ] **Navigation clarity** (2 points): Minimal, focused, supports conversion goal - [ ] **Trust signals** (1 point): Verifiable security/payment badges, certifications, guarantees (see the trust-badge caveat below — never use a self-asserted "GDPR compliant" badge) > **LCP target note:** the Google "good" field threshold is **LCP ≤ 2.5s at p75**. Treat `< 2.0s` as an internal *stretch* target for above-the-fold heroes, not the pass/fail line. Score this item against the official 2.5s threshold (see Core Web Vitals section); award the point only if **field** (CrUX/RUM) data — not just a lab Lighthouse run — clears it. ```html

Double Your Sales in 30 Days with Our Proven CRO System

Join 2,000+ businesses using our 5-step framework to optimize conversions

``` **Mobile-First Above-Fold Optimization** Avoid `min-height: 100vh` on mobile heroes: on iOS/Android the dynamic browser chrome makes `100vh` taller than the visible area, pushing your subheadline and CTA below the fold. Use the **dynamic viewport unit `dvh`** (with a `vh` fallback for old browsers), and prefer a **content-first** height (`min-height: auto` or a capped value) so proof and CTA stay visible. ```css /* Mobile Hero Optimization */ .hero { /* Fallback for browsers without dynamic viewport units (pre-2023) */ min-height: 100vh; /* svh = smallest viewport (chrome shown) → guarantees CTA visible; dvh = dynamic, follows chrome show/hide. Cap so content never gets buried. */ min-height: min(100svh, 720px); padding: 80px 20px 40px; } .hero-headline { font-size: clamp(28px, 8vw, 48px); /* Responsive scaling */ line-height: 1.2; margin-bottom: 16px; font-weight: 700; } .cta-primary { width: 100%; /* Full-width on mobile */ min-height: 56px; /* Thumb-friendly touch target */ margin: 24px 0; border-radius: 8px; font-size: 18px; font-weight: 600; } @media (min-width: 768px) { .cta-primary { width: auto; padding: 16px 32px; } } ``` ### Content & Messaging (25 Points) **Value Proposition Framework** - [ ] **Problem-solution fit** (4 points): Clear pain point identification - [ ] **Unique selling proposition** (4 points): Differentiation from competitors - [ ] **Benefit hierarchy** (3 points): Primary, secondary, tertiary benefits clear - [ ] **Feature-benefit translation** (3 points): Features converted to outcomes - [ ] **Emotional resonance** (2 points): Speaks to the user's real motivation — relief from a genuine pain, aspiration, belonging, or status — *truthfully*. Award the point only if every emotional claim is backed by something real you deliver. - [ ] **Objection handling** (3 points): Common concerns proactively addressed - [ ] **Scannability** (2 points): F-pattern reading, bullet points, headers - [ ] **Reading level** (2 points): 8th grade or lower readability score - [ ] **Action-oriented language** (1 point): Active voice, power words - [ ] **Urgency without manipulation** (1 point): Genuine scarcity or time sensitivity > **Persuasion vs. dark patterns (read before writing any "trigger" copy).** Optimizing for conversion is not a license to manipulate. Dark patterns are increasingly **illegal**, not just unethical: the EU GDPR/EDPB deceptive-design guidance, the **EU Digital Services Act** (bans dark patterns on covered platforms), the **California CPRA** (consent obtained via dark patterns is invalid), and the **US FTC** (enforcement on fake urgency, drip pricing, hidden subscriptions, "negative option" traps) all apply. They also lose money long-term via refunds, chargebacks, churn, and brand damage. > > | Legitimate persuasion (use) | Dark pattern (never) | > |---|---| > | Real scarcity ("12 onboarding slots this month") | Fake/looping countdowns; "only 2 left" on unlimited digital goods | > | Honest social proof (real, attributable testimonials) | Fabricated reviews, invented user counts, fake "X people viewing" | > | Clear default + easy opt-out | Pre-ticked consent, confirmshaming ("No, I don't want to save money") | > | Risk reversal you actually honor | "Free trial" that's hard to cancel or auto-charges silently | > | One prominent primary CTA | Disguised ads, hidden "decline" links, trick-question wording | > > Rule of thumb: if the tactic only works because the user *misunderstands* something, it's a dark pattern. Fix the truth, not the trick. ```javascript // Value Proposition Testing Framework const valuePropositionTests = { headline: [ "Save Time + Money + Effort", // Generic "Cut Research Time by 90%", // Specific benefit "From 8 Hours to 45 Minutes", // Before/after "The Last Tool You'll Need" // Finality ], subheadline: [ "Feature list explanation", // Weak "Social proof reinforcement", // Medium "Risk reversal statement", // Strong "Methodology preview" // Educational ] }; // Implement systematic testing function runValuePropTest(variant) { gtag('event', 'value_prop_test', { variant: variant, element: 'headline', timestamp: Date.now() }); } ``` ### Social Proof & Trust (15 Points) **Trust Signal Hierarchy** 1. **Customer testimonials** (Video > Photo + name > Text only) 2. **Usage statistics** (Users, transactions, years in business) 3. **Media mentions** (Logos of publications that covered you) 4. **Customer logos** (Recognizable brands using your service) 5. **Certifications** (Industry credentials, security badges) 6. **Guarantees** (Money-back, satisfaction, security) ```html
[Real customer name], [Real title] at [Real company] [Verbatim outcome they actually reported]
[#] customers Happy customers
$[#] Revenue generated for clients
Payments secured by Stripe SOC 2 Type II report 30-day money-back guarantee

Privacy Policy · Data Processing Agreement · Subprocessors · Security & data rights

``` > **Trust-badge caveat.** Badges only build trust if they're *true and verifiable*. There is no official "GDPR compliant" badge — GDPR is a regulation, not a certification — so a self-asserted GDPR/"privacy" image asserts nothing and can mislead. Demonstrate data-protection posture the way buyers actually vet it: a lawful basis stated in your privacy policy, a published DPA and subprocessor list, working data-subject-rights (access/delete) flows, and audited attestations (SOC 2, ISO 27001) that link to the report or auditor. Payment/security marks (Stripe, PayPal, Norton/DigiCert) build trust only when served/verifiable, not as a static decorative PNG. **Social Proof Placement Strategy** ```css /* Strategic Trust Signal Positioning */ .social-proof-hero { /* Immediate credibility */ margin-top: 24px; } .social-proof-mid-page { /* Momentum building */ margin: 60px 0; text-align: center; } .social-proof-pre-cta { /* Final objection handling */ margin-bottom: 40px; } .trust-badges-footer { /* Persistent security */ position: sticky; bottom: 0; padding: 8px 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); } ``` ### CTA Optimization (15 Points) **Call-to-Action Best Practices** - [ ] **Primary CTA prominence** (3 points): Single, clear, contrasting primary action - [ ] **CTA copy optimization** (3 points): First-person, action + value ("Get my free audit"); urgency only when a deadline is *genuine* - [ ] **Button design** (2 points): Size, color, spacing optimized for clicks - [ ] **CTA placement** (2 points): Multiple strategic placements without confusion - [ ] **Micro-copy support** (2 points): Risk-reduction text near CTA - [ ] **Loading states** (1 point): Clear feedback during form submission - [ ] **Accessibility & mobile** (2 points): Real `

✓ No credit card required ✓ Setup in 2 minutes ✓ Cancel anytime

``` **CTA A/B Testing Framework** Test **one dimension at a time** as complete variant objects (copy *or* color *or* size), or run a deliberate multivariate test — never index three different-length arrays with the same number (the classic bug: 5 copy options but only 4 colors / 3 sizes → `undefined` styles for variants 4–5). Below, each variant is a self-contained object, and assignment is **sticky per user** (so a returning visitor sees the same variant) rather than re-randomized on every render. ```javascript // Each variant is COMPLETE and self-contained — no cross-array indexing. // Test copy in isolation here; clone the pattern for a color- or size-only test. const ctaCopyVariants = [ { id: 'control', copy: 'Start Free Trial' }, // baseline { id: 'access', copy: 'Get Instant Access' }, // immediacy { id: 'spot', copy: 'Claim Your Spot' }, // exclusivity { id: 'outcome', copy: 'Get My Free Audit' }, // first-person + value ]; const ctaStyle = { bg: '#1f6feb', text: '#ffffff', padding: '16px 32px', fontSize: '18px' }; // Sticky, evenly-weighted assignment. Persist so the user always sees the same arm. function assignCtaVariant(variants, storageKey = 'cta_exp') { let id = localStorage.getItem(storageKey); let v = variants.find(x => x.id === id); if (!v) { v = variants[Math.floor(Math.random() * variants.length)]; localStorage.setItem(storageKey, v.id); } return v; } function renderCta(el) { const v = assignCtaVariant(ctaCopyVariants); el.textContent = v.copy; Object.assign(el.style, { background: ctaStyle.bg, color: ctaStyle.text, padding: ctaStyle.padding, fontSize: ctaStyle.fontSize, }); el.dataset.exp = 'cta_copy'; el.dataset.variant = v.id; // <- log THIS id on exposure + conversion return v.id; } ``` > **Multivariate caveat.** Want to test copy × color × size together? That's a full-factorial MVT (4×4×3 = 48 cells) and needs *far* more traffic than an A/B test — sample size scales with the number of cells, and you must control the family-wise error rate (e.g., Holm–Bonferroni) across comparisons. Unless you have very high traffic, test sequentially or use a fractional design. **Whatever you assign, log the exact `variant` id on both exposure and conversion** so the analysis joins cleanly. ### Form Optimization (10 Points) **Form Conversion Best Practices** - [ ] **Field reduction** (2 points): Minimum viable fields only — every field costs conversions; collect the rest later via progressive profiling (see `signup-flow-cro`) - [ ] **Progressive disclosure** (2 points): Conditional field display - [ ] **Accessible validation** (2 points): Programmatic `

Get Your Free CRO Audit

Enter your website below for instant analysis

We use your email only to deliver the audit and (if you opt in) tips. No third-party sharing. Privacy Policy · unsubscribe anytime.

``` ### Page Speed & Technical (10 Points) **Core Web Vitals Optimization** (thresholds are pass at the **p75** of *field* data) - [ ] **Largest Contentful Paint (LCP)** (3 points): ≤ 2.5s — main content visible - [ ] **Interaction to Next Paint (INP)** (2 points): ≤ 200ms — responsiveness across *all* interactions - [ ] **Cumulative Layout Shift (CLS)** (2 points): ≤ 0.1 — visual stability - [ ] **Image optimization** (1 point): AVIF/WebP, responsive `srcset`, `width`/`height` set (prevents CLS), lazy-load below-fold only - [ ] **Critical CSS inline** (1 point): Above-fold styles inlined - [ ] **JavaScript optimization** (1 point): Async/defer, code splitting, minimize long tasks (the #1 INP lever) > **INP replaced FID.** First Input Delay was retired as a Core Web Vital in **March 2024**; **Interaction to Next Paint (INP)** is the official responsiveness metric. INP measures the full latency (input delay + processing + presentation) of *every* interaction across the visit, not just the first — so a fast FID page can still fail INP if click handlers run long tasks. Lower INP by breaking up long JS tasks (`scheduler.yield()` / `setTimeout` chunking), deferring non-critical work, and shrinking hydration. > > | Metric | Good (p75) | Needs improvement | Poor | > |---|---|---|---| > | LCP | ≤ 2.5s | ≤ 4.0s | > 4.0s | > | INP | ≤ 200ms | ≤ 500ms | > 500ms | > | CLS | ≤ 0.1 | ≤ 0.25 | > 0.25 | > > **Field vs. lab — score on field data.** Lab tools (Lighthouse, PageSpeed Insights lab run, WebPageTest) are reproducible but synthetic and **cannot measure INP** (no real interactions). What actually affects rankings/UX is **field** data at p75: Chrome UX Report (CrUX), the `web-vitals` JS library (RUM), or PSI's "field data" panel. Use lab to debug regressions; use field to pass/fail this section. Thresholds current as of Jun 2026 — verify at https://web.dev/articles/vitals. ```html CRO Dashboard Preview Customer testimonial ``` ## 🔐 Consent-Safe Analytics (read before shipping any tracking) CRO instrumentation is **personal-data processing**. In the EU/UK, the **ePrivacy Directive** requires *prior, informed, opt-in consent* before non-essential storage/reads (analytics cookies, `localStorage`, fingerprinting); **GDPR** governs the resulting data; California's **CPRA** grants opt-out + "Do Not Sell/Share" (honor **Global Privacy Control**). Practical rules for every snippet below: - **Gate on a CMP.** Don't fire analytics/heatmap collection until a Consent Management Platform reports consent for the analytics purpose. With GA4, use **Consent Mode v2** (`ad_storage`, `analytics_storage`, `ad_user_data`, `ad_personalization`) so events are withheld/cookieless until granted. - **Minimize.** Never send raw text the user typed, full URLs with query tokens, emails, or precise coordinates that could re-identify. Send element selectors/ids and *bucketed* values. Truncate IPs; don't log `User-Agent` verbatim. - **No durable IDs without consent.** Use a per-session random id (regenerated each session), not a persistent cross-site identifier. Hash any necessary identifier server-side with a rotating salt. - **Sample.** You don't need 100% of traffic for heatmaps — sample (e.g., 10–25%) to cut data volume, cost, and privacy surface. - **Retention & rights.** Set short retention (GA4 caps event data at 14 months; choose the shortest that's useful). Be able to honor access/delete requests; document processing in your privacy policy and DPA. - **Respect signals.** Skip non-essential tracking when `navigator.globalPrivacyControl === true` or `navigator.doNotTrack === '1'`. ```javascript // Single source of truth other snippets call before collecting anything. function analyticsAllowed() { if (navigator.globalPrivacyControl === true) return false; // GPC opt-out // Replace with your CMP's API (OneTrust, Cookiebot, Osano, Klaro, etc.): return window.__consent?.analytics === true; } // Per-session, non-persistent id — NOT a cross-site tracker. function sessionId() { let id = sessionStorage.getItem('sid'); if (!id) { id = crypto.randomUUID(); sessionStorage.setItem('sid', id); } return id; } const SAMPLE_RATE = 0.2; // 20% of sessions const SAMPLED = Math.random() < SAMPLE_RATE; ``` ## 📊 Heatmap Interpretation Guide ### Click Heatmap Analysis **High-Value Click Patterns** 1. **CTA engagement**: Primary buttons should show intense click density 2. **Navigation patterns**: Identify unexpected click areas indicating user confusion 3. **Dead zone identification**: Areas with zero clicks that consume prime real estate 4. **Mobile vs desktop**: Different interaction patterns requiring separate optimization ```javascript // Consent-gated, sampled, PII-minimized click collection. function trackHeatmapData() { if (!analyticsAllowed() || !SAMPLED) return; // gate + sample document.addEventListener('click', (e) => { const el = e.target.closest('[data-cro-element], a, button') || e.target; // Bucket coordinates into a coarse grid so we can't re-identify a precise gesture. const col = Math.floor((e.clientX / window.innerWidth) * 20); // 20-col grid const row = Math.floor((e.clientY / window.innerHeight) * 40); // 40-row grid gtag('event', 'heatmap_click', { // identifiers / coarse position only — never raw text the user typed cro_el: el.getAttribute?.('data-cro-element') || el.tagName.toLowerCase(), el_id: el.id || undefined, grid: `${col}:${row}`, vw: window.innerWidth, // viewport size for desktop/mobile split vh: window.innerHeight, sid: sessionId(), // per-session, non-persistent }); }, { passive: true }); } ``` ### Scroll Heatmap Insights **Scroll Depth Analysis Framework** - **25% scroll**: Headline and hero effectiveness - **50% scroll**: Content engagement and value demonstration - **75% scroll**: Social proof and objection handling success - **100% scroll**: Complete page engagement, form placement effectiveness ```javascript // Consent-gated scroll depth, throttled, no leaky globals. function trackScrollDepth() { if (!analyticsAllowed() || !SAMPLED) return; const milestones = [25, 50, 75, 100]; const fired = new Set(); // local state, resets per page load let ticking = false; const onScroll = () => { if (ticking) return; ticking = true; requestAnimationFrame(() => { // throttle: at most one calc per frame const scrollable = document.documentElement.scrollHeight - window.innerHeight; const pct = scrollable > 0 ? Math.round((window.scrollY / scrollable) * 100) : 100; for (const m of milestones) { if (pct >= m && !fired.has(m)) { fired.add(m); gtag('event', 'scroll_depth', { depth: m, sid: sessionId() }); } } if (fired.size === milestones.length) { window.removeEventListener('scroll', onScroll); // done; stop listening } ticking = false; }); }; window.addEventListener('scroll', onScroll, { passive: true }); } ``` ## 🧪 Experimentation: Statistically Valid A/B Testing A "win" is only real if the test was **powered up front**, **not peeked at**, and **passed its guardrails**. Most reported CRO wins fail because someone stopped the test the moment p dipped below 0.05. ### Pre-registration (decide before launch) - **Primary metric** (one — usually CVR or RPV). Secondary/guardrail metrics are explicitly secondary. - **Hypothesis** and expected direction. - **MDE** (minimum detectable effect you care about, *relative*), **α** (false-positive rate, usually 0.05), **power** (1−β, usually 0.80), one- vs two-sided (default **two-sided**). - **Fixed sample size & end date** computed from the above. You stop at that point, not before — unless using a proper sequential method (below). - **Allocation** (e.g., 50/50) and **unit of randomization** (visitor, sticky across sessions — never page-view, or returning users contaminate arms). ### Sample-size calculator (correct: z-scores derived from α and power) ```javascript // Inverse standard normal CDF (Acklam's rational approximation, ~1e-9 accuracy). function normInv(p) { if (p <= 0 || p >= 1) throw new RangeError('p must be in (0,1)'); const a=[-3.969683028665376e+01,2.209460984245205e+02,-2.759285104469687e+02,1.383577518672690e+02,-3.066479806614716e+01,2.506628277459239e+00]; const b=[-5.447609879822406e+01,1.615858368580409e+02,-1.556989798598866e+02,6.680131188771972e+01,-1.328068155288572e+01]; const c=[-7.784894002430293e-03,-3.223964580411365e-01,-2.400758277161838e+00,-2.549732539343734e+00,4.374664141464968e+00,2.938163982698783e+00]; const d=[7.784695709041462e-03,3.224671290700398e-01,2.445134137142996e+00,3.754408661907416e+00]; const pl=0.02425, ph=1-pl; let q,r; if (p { const t=1/(1+0.3275911*x); return (((((1.061405429*t-1.453152027)*t)+1.421413741)*t-0.284496736)*t+0.254829592)*t*Math.exp(-x*x); }; const p = erfc(Math.sqrt(chi2 / 2)); return { chi2: +chi2.toFixed(3), p: +p.toFixed(4), srm: p < 0.01 }; } // srmCheck(10050, 9950) → {p: 0.48, srm: false} ok, expected sampling noise // srmCheck(10200, 9800) → {p: 0.005, srm: true} INVALID — 51/49 at n=20k is too skewed to be chance ``` ### No peeking — or use a method built for it Repeatedly checking a fixed-horizon test and stopping at the first p<0.05 inflates the false-positive rate to **30%+**. Options: - **Fixed-horizon (default):** decide N and end date up front; look once, at the end. Simple and correct. - **Sequential / always-valid:** if you must monitor continuously, use a method designed for it — **mSPRT / always-valid p-values** (Optimizely Stats Engine), **group-sequential** with alpha-spending (O'Brien–Fleming / Pocock boundaries), or **Bayesian** continuous monitoring. Don't bolt continuous peeking onto a fixed-horizon t-test. ### Frequentist vs. Bayesian | | Frequentist (t/z, p-value, CI) | Bayesian (posterior, P(B>A), expected loss) | |---|---|---| | Output | "p=0.03; reject null" | "92% probability B beats A; expected loss 0.1%" | | Peeking | Invalid unless sequential | Valid to monitor (with care) | | Stakeholder story | Harder | More intuitive | | Tooling | statsmodels, R `pwr`, VWO | GrowthBook, Dynamic Yield, `PyMC` | Either is fine if used correctly. Pick one per program and don't switch mid-test to whichever looks better (that's just peeking with extra steps). ### Multiple comparisons Testing many variants or many metrics multiplies false positives. Control it: pre-designate **one** primary metric; for k variants vs. control use **Dunnett's** test; for arbitrary families use **Holm–Bonferroni** (less conservative than plain Bonferroni) or Benjamini–Hochberg FDR. Secondary metrics are hypothesis-generating, not ship-deciding. ### Guardrail metrics (don't win the battle, lose the war) A CTA change can lift clicks while tanking revenue, refunds, or trust. Always watch, and require *no significant regression* on, guardrails such as: **revenue-per-visitor**, **AOV**, refund/chargeback rate, **bounce/exit**, downstream **activation/retention**, support tickets, page latency (a heavy variant can regress INP), and accessibility complaints. Ship only when the primary metric wins **and** no guardrail regresses. ### Reading results — ship/iterate/kill - **Winner:** primary metric significant in the right direction, no SRM, no guardrail regression, ran ≥ full cycle → ship; monitor post-launch (effects often shrink vs. test). - **Flat:** CI includes zero → likely underpowered or a weak idea. Don't ship; learn and form a bigger-swing hypothesis. - **Loser:** ship the control, document *why* it lost (often more valuable than a win). - Report the **effect size + confidence/credible interval**, never a bare p-value. "+8% CVR (95% CI +2% to +14%)" beats "p<0.05". ## 🎨 Hero Section Pattern Library ### Pattern 1: Problem-Solution Hero ```html

Tired of Landing Pages That Don't Convert?

Our 100-point CRO framework — used by [# real clients] to find and fix their biggest conversion leaks.

Recent client result: [Actual measured lift, e.g. "+18% trial signups (95% CI +6%–+30%)"]
``` ### Pattern 2: Outcome-Driven Hero ```html

Generate $10K More Revenue This Month

Using our proven 5-step conversion optimization system that's worked for 2,000+ businesses.

💰 Money-back guarantee if you don't see results

Revenue increase chart
``` ## 🏷️ Pricing Page CRO Strategies ### Pricing Table Optimization ```html

Basic

$99/month
  • 5 pages analyzed
  • Basic recommendations
  • Email support
Most Popular

Professional

$299 $199/month
  • ✓ Unlimited page analysis
  • ✓ Custom recommendations
  • ✓ A/B testing setup
  • ✓ Priority support
  • ✓ Monthly strategy calls

30-day money-back guarantee

Enterprise

$499/month
  • Everything in Pro
  • Dedicated CRO manager
  • Weekly optimization reviews
  • Custom integrations
``` ### Urgency & Scarcity Ethics Framework **Ethical Urgency Tactics** 1. **Limited-time bonuses**: Real deadlines for additional value 2. **Seasonal relevance**: Holiday sales, end-of-quarter budget cycles 3. **Capacity constraints**: Genuine service limitations 4. **Price increase notifications**: Advance warning of legitimate price changes ```html
{{ promo.label }}

{{ promo.offer }}

-- days -- hours left
``` ```javascript // Honest countdown: drives from a real future timestamp and removes the offer at expiry. function startCountdown(el) { const end = Date.parse(el.dataset.countdown); if (Number.isNaN(end)) return; const tick = () => { const ms = end - Date.now(); if (ms <= 0) { // genuinely expired: take the offer down el.closest('.urgency-banner')?.remove(); // NEVER reset to fake "15 days" again return clearInterval(timer); } el.querySelector('.countdown-days').textContent = Math.floor(ms / 86400000); el.querySelector('.countdown-hours').textContent = Math.floor((ms % 86400000) / 3600000); }; const timer = setInterval(tick, 60000); tick(); } document.querySelectorAll('.countdown[data-countdown]').forEach(startCountdown); ``` ```html

⚡ Only {{ onboarding.slotsLeft }} onboarding slots left this month

We cap new clients to protect delivery quality.
``` **Unethical Practices to Avoid** - ❌ Fake countdown timers that reset - ❌ Artificial scarcity with unlimited inventory - ❌ False claims about pricing or availability - ❌ High-pressure tactics without genuine time constraints ## 📱 Mobile CRO Optimization ### Mobile-Specific Conversion Factors ```css /* Mobile CRO CSS Framework */ @media (max-width: 768px) { /* Thumb-friendly touch targets */ .btn-primary { min-height: 44px; min-width: 44px; font-size: 16px; padding: 12px 24px; border-radius: 8px; margin: 16px 0; } /* Simplified navigation */ .main-nav { display: none; /* Hidden on mobile to reduce distraction */ } /* Single-column layout */ .hero-split { flex-direction: column; } /* Larger form inputs */ .form-input { font-size: 16px; /* Prevents zoom on iOS */ padding: 16px; border-radius: 8px; border: 2px solid #e1e5e9; } /* Sticky CTA for mobile */ .cta-sticky { position: fixed; bottom: 0; left: 0; right: 0; padding: 16px; background: #ffffff; box-shadow: 0 -4px 12px rgba(0,0,0,0.1); z-index: 1000; } } ``` ## 🔄 Continuous Optimization Process ### CRO Testing Calendar Template ```javascript // Monthly CRO testing schedule const croTestingCalendar = { week1: { focus: "Above-the-fold optimization", tests: ["Headline variations", "Hero image A/B", "CTA button color"], metrics: ["Bounce rate", "Scroll depth", "CTA clicks"] }, week2: { focus: "Content and messaging", tests: ["Value proposition variants", "Social proof placement", "Feature vs benefit copy"], metrics: ["Time on page", "Scroll completion", "Form starts"] }, week3: { focus: "Form and conversion flow", tests: ["Form field reduction", "Progressive disclosure", "Trust signal placement"], metrics: ["Form completion rate", "Form abandonment", "Conversion rate"] }, week4: { focus: "Analysis and iteration", tests: ["Winner implementation", "Combo tests", "Mobile-specific variants"], metrics: ["Overall conversion rate", "Revenue per visitor", "Customer LTV"] } }; ``` ## 🧮 Prioritizing fixes (PIE / ICE) Score every audit finding and test idea so you work on impact, not whatever you noticed first. **PIE** — best for ranking *pages/areas to test*: | Factor | Question | Score 1–10 | |---|---|---| | **P**otential | How much improvement headroom? (low CVR, high bounce, weak page) | | | **I**mportance | How valuable is this traffic? (volume × intent × $) | | | **E**ase | How hard to implement the test? (dev, design, approvals) | | Rank by the **average** of the three. **ICE** (Impact, Confidence, Ease) is the same idea for ranking *individual ideas* — Confidence captures how strong your evidence is. ```javascript const ideas = [ { name: 'Rewrite hero offer', impact: 9, confidence: 6, ease: 5 }, { name: 'Add SOC 2 trust row', impact: 5, confidence: 7, ease: 9 }, { name: 'Cut form 5→2 fields', impact: 8, confidence: 8, ease: 7 }, ]; const ranked = ideas .map(i => ({ ...i, ice: +((i.impact + i.confidence + i.ease) / 3).toFixed(1) })) .sort((a, b) => b.ice - a.ice); // → "Cut form 5→2 fields" (7.7) tops "Add SOC 2 row" (7.0) > "Rewrite hero" (6.7) ``` Bias toward **high-confidence, high-ease wins first** (build momentum + traffic for the riskier big swings). Keep a backlog; re-score as evidence changes. ## 🧩 Framework / stack implementation notes The HTML/CSS/JS above is illustrative. Apply the *principles* (semantic markup, one primary CTA, inline critical CSS, deferred JS, consent-gated analytics) in your stack: - **Static HTML / Astro / 11ty:** inline critical CSS in ``, `defer` scripts, ship AVIF/WebP with explicit `width`/`height`. Easiest path to great Core Web Vitals. - **React / Next.js:** prefer **Server Components / SSR or SSG** for hero + above-the-fold so LCP isn't blocked on hydration; lazy-load below-fold with `next/dynamic`; use `next/image` (auto AVIF/WebP, sizing → no CLS) and `next/font` (no layout shift). Hydration is the usual **INP** culprit — minimize client JS, split bundles, and stream. Run experiments with an edge-decided variant cookie (`middleware`) to avoid a flash of the control. - **Shopify:** edit the theme via Liquid sections/blocks; you usually can't fully inline critical CSS — instead trim apps (each injects render-blocking JS), use the theme's responsive `image_url`/`image_tag` filters, and prefer **native A/B** in Shopify or an app like Intelligems/Visually over a redirect test (redirects hurt LCP and can cause flicker). - **Webflow / Framer / Unbounce / Instapage:** keep the DOM lean (these can over-nest divs and bloat CSS), compress images in-platform, limit embeds/interactions, and use the platform's built-in A/B (Optimize-style) rather than client-side flicker hacks. - **Experimentation platforms (2026):** server-side/edge assignment beats client-side redirects for speed and anti-flicker. Options include **GrowthBook** (open-source, feature-flag + stats), **Optimizely**, **VWO**, **AB Tasty**, Shopify-native, or your own flag service. Whatever you use, fire a single exposure event with the variant id and join it to conversion server-side. - **Analytics:** GA4 (with **Consent Mode v2**) for funnels/events; PostHog or Matomo if you want self-hosted/cookieless-friendly; Microsoft Clarity (free) or Hotjar for heatmaps/replays — all still **consent-gated** per the privacy section, with replay **input masking** on. ## ♿ Accessibility = conversion (WCAG 2.2 AA) Inaccessible pages exclude paying users and, in many markets, create legal exposure. Bake these in (most are also CRO wins): - **Semantics:** real `