pcbjam/features/lp/landing-page-best-practices.md

Landing Page Best Practices — An Exhaustive Reference

A practical, data-backed guide to designing high-converting landing pages for marketing, product, and SaaS sites. Covers conversion optimization, page structure, copy, CTAs, forms, trust, visual design, typography, performance, mobile, accessibility, SEO, experimentation, personalization, and anti-patterns.

How to read this document

Claims in this doc come in two tiers. Treat them differently:

• 🟢 Verified — backed by a primary or strongly-corroborated source, and adversarially fact-checked (see Sources and Caveats). Statistics are cited inline like [U24].
• ⚪ Established practice — broad professional consensus from UX/CRO literature (NN/g, Baymard, CXL, Smashing Magazine) but not individually fact-checked with a hard statistic here. Reliable as guidance; verify the exact number before quoting it externally.

When a figure is a vendor benchmark or dated, the doc says so. Two widely-repeated stats were checked and failed verification — they are listed in Caveats so you don't repeat them.

The single most important meta-principle: none of these are laws. They are strong priors. The only authority on your page is your A/B test with your traffic. Use this doc to generate better hypotheses, not to skip testing.

---

Table of contents

1. Executive summary & checklist
2. Conversion rate optimization: principles & benchmarks
3. Page structure & the canonical sections
4. Copywriting & messaging frameworks
5. Call-to-action (CTA) design
6. Forms & lead capture
7. Trust signals & credibility
8. Visual design: layout, hierarchy, color, imagery, video
9. Typography
10. Performance & Core Web Vitals
11. Mobile-first & responsive design
12. Accessibility (WCAG)
13. SEO for landing pages
14. A/B testing, experimentation & analytics
15. Personalization & message-to-ad match
16. Common mistakes & anti-patterns
17. Pre-launch QA checklist
18. Sources & evidence grade
19. Caveats, source quality & refuted claims

---

1. Executive summary & checklist

A high-converting landing page does five things well, in priority order:

1. Communicates one clear value proposition matched to the visitor's intent, above the fold, in scannable language.
2. Reduces friction — one primary goal, one (or few) CTA, minimal form fields, fast load.
3. Builds trust — social proof, specifics, credible design, guarantees.
4. Loads fast and works everywhere — Core Web Vitals in the green, mobile-first, accessible.
5. Gets measured and iterated — instrumented analytics, disciplined A/B tests.

The one-screen checklist

• One page, one goal. Single conversion action; minimize or remove site nav.
• Headline states the value prop and matches the ad/email that sent the visitor (message match).
• Above-the-fold answers: What is this? What's in it for me? What do I do next?
• Primary CTA is visually dominant, specific ("Start my free trial," not "Submit"), repeated down the page.
• Copy is scannable — short paragraphs, subheads and bullets that lead with information-carrying words, ~5th–7th grade reading level. 🟢[U24]
• Social proof near the CTA — testimonials, logos, counts, ratings, named sources.
• Form asks only for what you need now; consider multi-step for longer forms.
• Benefits before features; show, don't just tell (screenshots, demo, video).
• LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1 at the 75th percentile. 🟢[WV]
• Hero/LCP image is eagerly loaded (never loading="lazy"); everything below the fold lazy-loaded. 🟢[WV]
• Mobile-first: tap targets ≥ ~44px, readable without zoom, no horizontal scroll.
• Contrast: ≥ 4.5:1 body text, ≥ 3:1 large text & UI component borders (WCAG 2.1 AA). 🟢[W3C]
• Analytics + a single primary metric defined before launch; experiments sized and not "peeked." 🟢[GB]

---

2. Conversion rate optimization: principles & benchmarks

2.1 What counts as a "good" conversion rate

⚠️ Source caveat for this whole subsection. All numbers below come from Unbounce's 2024 Conversion Benchmark Report [U24] — 41,000 landing pages, 57M+ conversions, 464M pageviews. It is the most-cited public dataset, but it measures pages built on Unbounce's own platform using median methodology. Treat these as directional benchmarks, not universal population statistics.

• 🟢 Median landing-page conversion rate across all industries: 6.6%. [U24]
• 🟢 A "good" rate (75th percentile) starts around 11.4% and ranges up to 40.8% depending on industry. [U24] Don't conflate this with the median — most pages sit far below it.
• 🟢 Industry medians range from 3.8% (SaaS, the lowest) to 12.3% (entertainment/events, the highest). [U24] SaaS is ~42% below the 6.6% baseline — a SaaS page converting at 4% is roughly average, not broken.

Takeaway: Benchmark against your industry and traffic source, and against your own past performance, not against a global average. The most useful number is your trend line, not the percentile table.

2.2 Traffic source dominates the result

🟢 Conversion varies enormously by audience intent, not just page quality [U24]:

Channel	Avg. conversion	Notes
Email	19.3%	Highest — warm, opted-in, pre-qualified audience
Paid social	~12%
Paid search	~10.9%
Display	~4.1%	Coldest, lowest-intent traffic

Email converts ~60% better than paid social, ~77% better than paid search, and ~370% better than display. [U24]

Critical interpretation: This is an audience-temperature artifact, not proof that one channel is "better." Email visitors already know you. Never benchmark a cold paid-traffic landing page against an email landing page — judge each page against the typical conversion rate for its own channel.

2.3 Simpler copy correlates with higher conversion

🟢 There is a strong correlation between reading ease and conversion [U24]:

Reading level	Conversion rate
5th–7th grade	11.1%
8th–9th grade	7.1% (~56% lower)
Professional/college	5.3% (~2× lower)

Caveats: This is correlation, not causation, on a single-vendor dataset, and there is at least one documented industry exception (entertainment, where higher-grade copy converts better). Still, "write simpler" is one of the safest, highest-leverage moves in CRO.

⛔ Do not cite the related "514% better / 12.9% vs 2.1% for SaaS" figure — it failed verification. See Caveats.

2.4 Core CRO mental models (⚪ established practice)

• Conversion = Motivation − Friction − Anxiety (+ Incentive). Increase motivation (value, relevance), strip friction (steps, fields, load time, choices), and reduce anxiety (risk, trust). This is the operational heart of CRO.
• One page, one goal. Every element either advances the single conversion goal or is a candidate for deletion. Competing CTAs dilute results.
• Attention/decision ratio. A focused landing page ideally has a 1:1 ratio of links to conversion goals — remove site nav, footers full of links, and secondary offers that leak attention.
• Friction audit beats feature addition. Most conversion gains come from removing obstacles (a field, a step, a second of load) rather than adding persuasion.
• The page is a continuation of the click. The visitor arrived with an expectation set by the ad/email/search result. Honor it (see Message match).

---

3. Page structure & the canonical sections

Landing pages follow a well-worn vertical narrative. Not every page needs every section, but this is the canonical order and purpose. (⚪ established practice throughout, with the scanning/hierarchy points 🟢 verified.)

3.1 The above-the-fold / hero

The first screen must answer three questions in ~5 seconds:

1. What is this? (Headline — the value proposition)
2. What's in it for me? (Subhead — the benefit / how it helps)
3. What do I do next? (Primary CTA)

Components:

• Headline — clear over clever. State the outcome the visitor wants. Match the source ad/email wording.
• Subheadline — one or two lines expanding the promise or naming the mechanism.
• Primary CTA — visually dominant button (see §5).
• Hero visual — product screenshot, short demo, or a human/contextual image that reinforces (not decorates) the message. This is usually your LCP element — load it eagerly (§10).
• Optional: a one-line trust strip (logo bar, rating, "trusted by N teams").

🟢 Why the fold still matters: users scan, they don't read, in an F-shaped pattern — a horizontal sweep across the top, a shorter sweep lower, then a vertical scan down the left edge. Exhaustive word-by-word reading is rare, so the most important information must be in the first two paragraphs, and the page must front-load meaning. [NNf]

3.2 Value proposition / problem framing

Immediately below the hero, expand on why this matters: the problem you solve and the transformation you offer. Frameworks like PAS and AIDA (see §4) live here.

3.3 Social proof

Place social proof early and again near each CTA. Forms include:

• Customer logos ("trusted by")
• Testimonials with name, role, company, and photo (specificity = credibility)
• Ratings/reviews (stars, G2/Capterra/Trustpilot badges)
• Quantified outcomes ("cut onboarding time 40%")
• Usage counts ("Join 50,000+ teams")

(See §7 for what makes proof actually credible.)

3.4 Features vs. benefits

Lead with benefits (what the user gains), support with features (how it's delivered). The reliable pattern is benefit headline → feature detail → proof. Pair each with a visual that shows it working. Show, don't just tell.

3.5 How it works

For products with any complexity, a 3-step "how it works" removes uncertainty and reduces anxiety. Keep it to 3–4 steps, each one verb-led and visual.

3.6 Pricing (when present)

⚪ Established practice:

• Show pricing if you can; hiding it adds friction and distrust for many buyers.
• 3-tier "good/better/best" layouts work; visually highlight the recommended plan (anchoring).
• State billing terms plainly; show annual savings if offered.
• Put a risk-reducer next to price (free trial, money-back guarantee, "no credit card required").
• Reduce choice overload — too many tiers/toggles increase decision friction.

3.7 FAQ / objection handling

An FAQ is objection handling in disguise. List the real reasons people don't convert (price, security, switching cost, contract terms, integrations) and answer them. Use an accessible accordion (keyboard-operable, proper ARIA) — but ensure the content is also crawlable for SEO.

3.8 Final CTA / closing section

End with a restated value proposition and a repeated primary CTA. A visitor who scrolled to the bottom is engaged — don't make them scroll back up to convert.

3.9 Footer

For a focused landing page, keep the footer minimal: legal links, privacy, contact, essential trust marks. Avoid a sprawling sitemap footer that re-introduces the navigation you deliberately removed.

3.10 Navigation: usually remove it

⚪ A dedicated campaign landing page typically removes or minimizes top navigation to keep the attention ratio focused on the single goal. (A page that also serves SEO/organic discovery may keep light nav — judge by purpose. Test it.)

---

4. Copywriting & messaging frameworks

Copy is the highest-leverage, lowest-cost lever on most landing pages. (⚪ established practice; the clarity/readability and scanning points are 🟢.)

4.1 Write for scanners

🟢 Because users scan in an F-pattern and rarely read word-by-word [NNf]:

• Front-load every subhead, paragraph, and bullet with information-carrying words — the meaning must survive a left-edge vertical scan.
• Put the most important information in the first two paragraphs.
• Short paragraphs (1–3 lines), generous subheads, bulleted lists.
• One idea per sentence; cut filler, hedges, and throat-clearing intros.

🟢 Keep it simple — aim for a ~5th–7th grade reading level; simpler copy correlates with materially higher conversion. [U24]

4.2 Messaging frameworks (⚪)

• PAS — Problem · Agitate · Solution. Name the pain, deepen it, then present your product as the resolution. Excellent for the section just below the hero.
• AIDA — Attention · Interest · Desire · Action. A whole-page arc: hook → build relevance → create want → ask for the action.
• FAB — Features · Advantages · Benefits. Translate every feature into a concrete user benefit. ("256-bit encryption" → "your data stays private.")
• The 4 U's for headlines — Useful, Urgent, Unique, Ultra-specific.
• Jobs-to-be-done framing. Speak to the outcome the user "hires" the product for, not the product's internals.

4.3 Message match (🟢 principle, see §15)

The headline and hero copy must echo the ad, email, or search query that drove the click. Mismatch between the promise and the page is a top cause of bounce and a direct waste of ad spend. CXL's "maintaining scent" guidance: keep the visual and verbal "scent" continuous from ad → page → conversion. [CXLs]

4.4 Copy craft checklist

• Specificity beats adjectives. "Setup in 4 minutes" > "incredibly fast setup."
• Second person. "You/your," not "users/customers."
• Quantify wherever honest (numbers, %, time saved, $ saved).
• One value proposition, restated — don't make readers assemble it.
• Active voice, concrete verbs.
• Cut jargon unless your audience genuinely speaks it.
• Microcopy matters — button labels, form helper text, error messages, and the reassurance line under the CTA ("No credit card required") all move conversion.

---

5. Call-to-action (CTA) design

5.1 CTA copy: be specific, set accurate expectations

🟢 Generic CTAs like "Get Started" are ambiguous and can mislead. NN/g's usability study found "Get Started" "can apply to almost any goal"; information- seekers who clicked it "expected details about the company, but instead were forced into surveys, onboarding flows, and sales funnels," became "lost, uninformed, and frustrated," and left for competitors. NN/g's guidance: increase information scent by stating precisely what the user should expect. [NNg]

• ✅ "Take the 2-minute style quiz," "Start my free 14-day trial," "Get the pricing PDF," "Book a demo."
• ⚠️ "Get Started," "Submit," "Continue," "Learn more" — vague; the user can't tell what happens next.

Nuance: Some CRO tests show "Get Started" winning on raw click rate. Clicks aren't conversions. A vague CTA can buy a click and lose the trust — optimize for the qualified action, and write CTAs that set honest expectations. [NNg]

• Phrase as first-person value when testing ("Start my free trial").
• Lead with a verb; name the outcome, not the mechanics ("Submit").
• Reduce anxiety with adjacent microcopy ("Free forever," "Cancel anytime," "No credit card required").

5.2 CTA visual design (⚪)

• Make it the most visually dominant element in its section — 🟢 hierarchy is driven primarily by color/contrast and size [NNv]. Use a high-contrast, unused accent color (the classic "make the button a color nothing else on the page uses").
• Button affordance — it should look clickable (solid fill, padding, sometimes subtle depth). 🟢 Its boundary must meet 3:1 contrast for accessibility [W3C].
• Size & tap target — comfortably large; ≥ ~44×44px on touch.
• Whitespace around the button isolates and emphasizes it.

5.3 Placement & quantity (⚪)

• One primary action. You may have a secondary, visually subordinate option (e.g., "Book a demo" ghost button next to "Start free trial"), but never two equal CTAs competing.
• Repeat the same primary CTA down the page (hero, after key sections, final close) so the visitor can act whenever convinced — but keep the action singular.
• Above the fold for low-consideration offers; for complex/expensive products, it's fine (and often better) for the decision to come after the page has made its case — just keep a persistent or repeated CTA available.

---

6. Forms & lead capture

Forms are where intent turns into conversion — and where friction kills it. (⚪ established practice; treat specific field-count numbers as directional.)

6.1 Ask for less

• Every field costs conversions. Request only what you genuinely need at this step. Defer the rest to later in the funnel or progressive profiling.
• Typical guidance: lead-gen forms convert best in the ~3–5 field range; each extra field adds friction. (Exact optimal count is offer- and audience- dependent — test it.)
• Drop optional fields or mark them clearly. Phone number, company size, and "how did you hear about us" are common conversion-killers — collect them later.

6.2 Reduce friction in the fields you keep (⚪, drawn from Baymard-style UX research)

• Single-column layout. Multi-column forms cause misreads and skips.
• Top-aligned labels for fastest completion; keep labels visible (don't rely on disappearing placeholders as labels — an accessibility and usability failure).
• Right input types & autocomplete — type="email", inputmode, autocomplete tokens trigger correct mobile keyboards and autofill.
• Inline, specific validation — validate on blur, explain how to fix the error, show errors adjacent to the field, and never wipe the form on submit failure.
• Don't split fields unnecessarily (e.g., one full-name field beats first/last; one phone field beats three).
• Smart defaults & formatting — auto-format phone/card numbers; default the obvious choice.
• Make the submit button descriptive (§5.1), not "Submit."

6.3 Multi-step forms

• Break long forms into steps to lower perceived effort; show a progress indicator. Each step feels small, and partial-completion creates commitment (sunk-cost / consistency).
• Ask the easy/low-risk questions first (the foot-in-the-door), sensitive ones (payment, phone) last.
• Front-load momentum: a first step that's a simple choice (radio buttons) often outperforms one that opens with an email field.

6.4 Anxiety reducers around the form

• Reassurance microcopy ("We'll never share your email," "30-second signup").
• Security/privacy cues near sensitive fields (§7).
• Clear statement of what happens after submit (and when).

---

7. Trust signals & credibility

Trust closes the gap between "interested" and "converted." Anxiety is a primary conversion blocker; credible signals remove it. (⚪ established practice.)

7.1 Types of trust signals

• Social proof — testimonials (with real name, role, company, photo), case studies, customer logos, star ratings, third-party review badges (G2, Trustpilot, Capterra), and usage counts ("50,000+ teams").
• Authority — press mentions ("as seen in"), awards, certifications, notable customers, expert endorsements.
• Security & privacy — SSL/HTTPS (table stakes), trust seals (Norton/McAfee-style), PCI/SOC 2/ISO badges, GDPR/privacy statements, payment-method logos near checkout.
• Risk reversal — money-back guarantee, free trial, "no credit card required," free cancellation, free returns. These directly attack purchase anxiety.
• Transparency — real company info, a physical address, named team, working contact methods, clear pricing.

7.2 What makes proof credible (not just present)

• Specific beats generic. "Reduced support tickets 38% in 60 days — Maria K., Head of CX at Acme" outperforms "Great product! — A customer."
• Faces and names raise believability; anonymous quotes read as fabricated.
• Relevance/recognizability — logos and testimonials from companies like the visitor's matter more than famous-but-irrelevant ones.
• Proximity to the decision — put proof and risk-reversers right next to the CTA/form, where doubt peaks.
• Don't over-badge. A wall of generic seals can reduce trust (looks spammy); a few relevant, credible marks beat many weak ones.

---

8. Visual design: layout, hierarchy, color, imagery, video

8.1 Visual hierarchy

🟢 Visual hierarchy guides the eye to the most important elements, and importance is communicated primarily through color (and contrast) and size/scale, while proximity and grouping (common regions) show which elements belong together. [NNv]

Calibration note: this was the one finding in the research with a non-unanimous verification (2–1); NN/g's broader writing lists scale, value, color, spacing, placement "and a variety of other signals." Color and size are the two most- emphasized cues, but they aren't the only ones. [NNv]

Apply it:

• The primary CTA should be the highest-contrast, attention-grabbing element in its viewport.
• A clear type scale (§9) makes headline > subhead > body obvious at a glance.
• Group related items (label with its field, benefit with its icon) via proximity; separate unrelated ones with whitespace.

8.2 Layout & scanning patterns

🟢 Design for F-pattern scanning on text-heavy pages: front-load meaning, left-align key content, use subheads as scan anchors. [NNf]

⚪ The Z-pattern suits sparse, hero-style layouts (logo top-left → CTA top-right → diagonal → bottom CTA). Use Z for minimal hero sections, F for content-dense pages.

⚪ Whitespace (negative space) is an active design tool: it increases comprehension, reduces cognitive load, isolates the CTA, and signals quality. Don't fear emptiness around the key action.

⚪ Directional cues — arrows, a person's gaze, lines, motion — can guide attention toward the CTA/form. (Eye-tracking shows people tend to look where a pictured face looks.)

8.3 Color & contrast

• ⚪ Use a restrained palette: a neutral base, one brand color, and a single high-contrast accent reserved for CTAs. Color's job here is hierarchy, not decoration — don't dilute the accent by using it everywhere.
• 🟢 Meet contrast minimums: ≥ 4.5:1 for body text, ≥ 3:1 for large text and UI component borders (WCAG 2.1 AA — §12). [W3C]
• ⚪ Don't rely on color alone to convey meaning (errors, required fields, states) — pair with text/icons for colorblind users.
• ⚪ "Which button color converts best" is context-dependent — the winning color is whatever contrasts most with its surroundings and the rest of the palette, not a universally magic hue. Test it.

8.4 Imagery vs. illustration

• ⚪ Show the actual product (real screenshots, UI, the thing in use) — it outperforms generic stock imagery and decorative abstractions for most products.
• ⚪ Avoid clichéd stock photos (handshakes, faceless "business people"); they read as filler and can lower trust.
• ⚪ Images must reinforce the message, not just fill space — a "hero image" that says nothing about the offer is wasted real estate (and often the LCP cost).
• ⚪ Human faces can increase warmth and direct attention, but choose authentic, relevant imagery over staged stock.
• Performance: the hero image is usually the LCP element — optimize and eagerly load it (§10).

8.5 Video

• ⚪ A short explainer/demo video can lift conversion for products that benefit from showing motion or workflow — but it adds weight and can distract.
• Never autoplay with sound. Make controls obvious. Provide captions (accessibility + sound-off viewing).
• Don't let video block the LCP/critical render — use a lightweight poster image, lazy-load the player, and avoid heavy embeds above the fold.
• Provide a text/visual fallback — many users won't press play; the page must still convert without the video.

---

9. Typography

Type is most of what a landing page is — it carries the message and a large share of perceived quality. (⚪ established practice; web-font performance ties to the 🟢 Core Web Vitals section.)

9.1 Readability fundamentals

• Body size: ~16px minimum on the web; larger (18–20px) is increasingly common and improves readability. Never ship sub-14px body copy.
• Line length (measure): aim for ~50–75 characters per line (~45–75). Too long tires the eye; too short breaks rhythm.
• Line height (leading): roughly 1.4–1.6× the font size for body text.
• Sufficient contrast (§8.3 / §12) — light-gray-on-white body text is a common, avoidable readability and accessibility failure.
• Left-aligned body text for LTR languages; avoid justified text on the web (uneven spacing/rivers). Don't center long paragraphs.

9.2 Type scale & hierarchy

• Use a modular scale (e.g., 1.2–1.333 ratio) so headline, subhead, body, and caption sizes relate harmoniously and the hierarchy reads instantly.
• Establish 2–3 clear levels of heading plus body and small/caption. Differ by size and weight, not many different fonts.
• Hierarchy via weight and size, sparingly via color — ties back to 🟢 visual hierarchy being driven by size and color [NNv].

9.3 Font pairing (⚪, Smashing Magazine)

• Limit to two typefaces (often one display/heading + one body), occasionally three. More than that looks chaotic and hurts performance.
• Pair by contrast, not similarity — combine fonts that are clearly different (e.g., a characterful serif heading with a clean sans body) so each has a job; near-identical fonts create awkward tension. [SMt]
• A single well-chosen superfamily (with multiple weights/styles) can do the whole job and guarantees harmony. [SMt]
• Match mood and x-height; ensure both fonts have the weights you need.

9.4 System fonts vs. custom web fonts (performance trade-off)

• System font stacks (e.g., -apple-system, Segoe UI, Roboto, …) have zero network cost, no FOIT/FOUT, and instant render — the fastest possible choice and great for LCP/CLS. The trade-off is less brand distinctiveness.
• Custom web fonts strengthen brand but add bytes and a render dependency that can hurt LCP (text paint) and cause CLS (layout shift on swap). If you use them:
  • Subset to the characters/weights you actually use.
  • Use woff2 (smallest modern format).
  • font-display: swap (or optional) to avoid invisible text (FOIT); swap favors content visibility, optional favors stability.
  • <link rel="preload"> the critical (above-the-fold) font files.
  • Self-host where feasible (avoids a third-party connection; third-party font CDNs add a connection and are no longer cache-shared across sites).
  • Set size-adjust/@font-face metric overrides or a matched fallback to minimize the layout shift when the web font swaps in (protects CLS).
• Pragmatic default: system fonts (or one preloaded, subset display font for headings + a system body) gives most of the brand benefit at a fraction of the performance cost.

---

10. Performance & Core Web Vitals

Speed is a conversion feature, an SEO factor, and a UX baseline. (🟢 thresholds and lazy-loading are primary-sourced from Google.)

10.1 The Core Web Vitals thresholds

🟢 Google's Core Web Vitals define the bar for a good experience, measured at the 75th percentile of page loads [WV]:

Metric	Measures	Good	Needs improvement	Poor
LCP (Largest Contentful Paint)	Loading	≤ 2.5s	2.5–4s	> 4s
INP (Interaction to Next Paint)	Interactivity	≤ 200ms	200–500ms	> 500ms
CLS (Cumulative Layout Shift)	Visual stability	≤ 0.1	0.1–0.25	> 0.25

🟢 INP replaced First Input Delay (FID) as a stable Core Web Vital in March 2024. [WV]

10.2 Optimizing each metric (⚪ tactics, 🟢 the lazy-load rule)

LCP (loading) — usually the hero image or headline text:

• 🟢 Never lazy-load the LCP/above-the-fold image. Lazy-loading it opts it out of the preload scanner and de-prioritizes it, hurting LCP. Eagerly load in-viewport images; lazy-load everything below the fold — fewer bytes and better CWV. In Google's A/B tests, disabling lazy-load on the hero improved LCP ~13% desktop / ~15% mobile. Best result pairs eager loading with fetchpriority="high". [WV]
• Serve responsive, modern-format images (AVIF/WebP), correctly sized; compress.
• Preload the LCP image/font; inline critical CSS; minimize render-blocking JS/CSS.
• Use a CDN; enable caching; reduce server response time (TTFB).

INP (interactivity):

• Ship less JavaScript; code-split and defer non-critical scripts.
• Break up long tasks; avoid heavy work on the main thread during interactions.
• Audit third-party scripts (tag managers, chat widgets, A/B-test tools) — they're a top INP and weight offender.

CLS (visual stability):

• Always set explicit width/height (or aspect-ratio) on images, videos, iframes, and ad slots so space is reserved.
• Reserve space for late-loading content (banners, embeds, cookie bars).
• Avoid inserting content above existing content after load.
• Prevent font-swap shift (see §9.4 — size-adjust/metric overrides).

10.3 Speed and conversion

🟢 Mobile speed is conversion-critical [GMS]:

• 53% of mobile visits are abandoned if a site takes longer than 3 seconds to load.
• Bounce rate climbs steeply with load time — ~13% for pages under 3s, rising to nearly 60% by 9s.

⚠️ Caveats: these figures are from Google research dated ~2016–2017 (≈9–10 years old) and describe correlation, not proven causation. They are still widely cited and directionally sound — faster is better — but don't present them as fresh or causal. ⛔ The related "1 second faster → up to 27% more conversions" claim failed verification — do not cite it (see Caveats).

10.4 Performance checklist

• Measure with field data (CrUX / real-user monitoring), not just lab tools.
• LCP element identified, optimized, eagerly loaded + preloaded. 🟢
• Images: responsive, modern format, compressed, dimensioned.
• Below-fold media loading="lazy". 🟢
• Fonts subset, woff2, preloaded, font-display: swap. (§9.4)
• JS minimized, deferred, third-parties audited.
• CLS guarded with reserved space everywhere.
• Tested on a real mid-tier phone on throttled network, not just desktop.

---

11. Mobile-first & responsive design

The majority of landing-page traffic is mobile; design for the small screen first, then enhance. (⚪ established practice; speed and accessibility points are 🟢.)

• Design mobile-first. Decide what matters on a 360–390px-wide screen, then add for larger viewports. Don't shrink a desktop page as an afterthought.
• Single-column, thumb-friendly layouts. Stack content; keep the primary CTA reachable and prominent (consider a persistent/sticky CTA on long pages).
• Tap targets ≥ ~44×44px with adequate spacing so users don't mis-tap.
• Readable without zoom — ≥16px body, sufficient contrast, no horizontal scroll.
• Compress the above-the-fold — mobile folds are short; get value prop + CTA into the first screen.
• Right input types & autofill on forms (§6.2) — mobile typing is costly.
• Mind fat-finger zones and avoid hover-dependent interactions (no hover on touch).
• 🟢 Mobile performance is non-negotiable — see the 53%/bounce-curve data (§10.3) [GMS]. Mobile users are on worse networks and devices; budget accordingly.
• Responsive ≠ accessible automatically, but they overlap: fluid layouts, scalable text (respect user zoom up to 200%), and reflow without loss of content serve both. [LA]
• Test on real devices across iOS/Android and a range of widths, not just the browser emulator.

---

12. Accessibility (WCAG)

Accessibility widens your audience, reduces legal risk, and overlaps heavily with good UX and SEO. Target WCAG 2.1 (or 2.2) Level AA. (🟢 contrast is primary- sourced from W3C; the rest is established WCAG guidance.)

12.1 Contrast (🟢 verified)

WCAG 2.1 AA minimums [W3C]:

• Body/normal text & images of text: ≥ 4.5:1 (SC 1.4.3).
• Large text (≥18pt, or ≥14pt bold): ≥ 3:1.
• Non-text UI components & graphics — button boundaries, form-field borders, icons that convey meaning, focus indicators: ≥ 3:1 (SC 1.4.11 Non-text Contrast).

(The stricter 7:1 / 4.5:1 thresholds are AAA, optional.)

12.2 Other essentials (⚪ WCAG AA)

• Semantic structure — real <h1>…<h6> order, landmarks (header/main/nav/ footer), lists, and a single descriptive <h1> (also helps SEO).
• Keyboard operable — every interactive element reachable and usable by keyboard, in a logical order, with a visible focus indicator.
• Alt text — meaningful images get descriptive alt; decorative images get empty alt="".
• Labels — every form field has a programmatically associated, persistent <label>; errors are announced and described in text (not color alone).
• Don't convey meaning by color alone (§8.3).
• Respect prefers-reduced-motion; avoid content that flashes > 3×/sec.
• Captions/transcripts for video/audio.
• Resizable text / zoom to 200% without loss of content or function.
• Accessible accordions/modals/tabs (FAQ, menus) — correct ARIA, focus management, escape handling.
• Test with automated tools (axe, Lighthouse, WAVE) and manual keyboard + screen-reader passes; automation catches only a fraction of issues.

---

13. SEO for landing pages

Even paid/campaign pages benefit from SEO hygiene; organic landing pages depend on it. (⚪ established practice; overlaps with 🟢 performance & accessibility.)

• Search intent match — the page must satisfy the query it targets; align headline and content to intent.
• One primary keyword/topic per page, in the <title>, <h1>, an early paragraph, and naturally throughout — no stuffing.
• Unique, compelling <title> (~50–60 chars) and meta description (~150–160 chars) — they drive click-through from the SERP.
• One <h1>, logical heading hierarchy (also accessibility, §12).
• Descriptive, readable URL with the keyword; avoid parameter soup.
• Crawlable content — important copy in HTML text, not baked into images; FAQ/accordion content present in the DOM.
• Internal links & canonical tag — set rel="canonical", especially when paid variants risk duplicate-content issues.
• Structured data (FAQ, Product, Review, Breadcrumb schema) for rich results where appropriate.
• Core Web Vitals are a ranking signal — §10 does double duty. 🟢[WV]
• Mobile-friendliness (mobile-first indexing) — §11.
• Image SEO — descriptive filenames + alt text; compressed (also CWV).
• Avoid thin/duplicate content across many near-identical paid landing pages; if they shouldn't rank, consider noindex and rely on canonical/intent for the rest.

---

14. A/B testing, experimentation & analytics

Optimization without measurement is decoration. But naïve testing produces confident, wrong answers — rigor matters. (🟢 statistical pitfalls are primary- sourced.)

14.1 Instrument before you optimize (⚪)

• Define one primary conversion metric (the macro-conversion) before launch; track micro-conversions (scroll depth, CTA clicks, form starts/abandons) as diagnostics.
• Use analytics + session recordings / heatmaps to find problems, then A/B testing to validate fixes. Qualitative tools generate hypotheses; experiments confirm them.
• Watch the whole funnel, not just the landing page — a page "win" that lowers downstream quality is a loss.

14.2 Run experiments that don't lie to you (🟢)

• 🟢 The multiple-comparisons problem. Testing one hypothesis at the 5% significance level across 20 metrics gives ~64% probability of at least one false positive by chance alone (1 − 0.95²⁰ = 0.6415). Pick a primary metric; apply a correction (e.g., Bonferroni) when you must judge many. [GB]
• 🟢 Don't "peek." Repeatedly checking results and stopping when you see significance inflates the false-positive rate — the more you peek, the worse it gets. Evan Miller's canonical example: a nominal 1% test can hit ~5%+ actual false-positive rate after ten peeks; worst-case ~26% vs a nominal 5%. Use a fixed sample size set in advance, or a proper sequential testing method designed for continuous monitoring. [GB][EM]

14.3 Methodology checklist (⚪ + 🟢)

• Form a hypothesis ("Changing X will improve Y because Z"), not a random tweak.
• Calculate sample size & duration up front from baseline rate, minimum detectable effect, and power (usually 80%). 🟢 (avoids peeking)
• Run full business cycles (≥1–2 weeks; cover weekday/weekend) to avoid day-of-week and novelty effects.
• One primary metric; secondary metrics are directional only. 🟢
• Don't stop early on a "significant" result; respect the predetermined endpoint. 🟢
• Ensure adequate traffic — low-traffic pages can't power reliable tests; prioritize bigger changes or longer runs.
• Test meaningful changes (value prop, offer, layout) over trivial ones (button shade) when traffic is scarce — bigger effects need less traffic.
• Segment results (device, source, new vs returning) — an aggregate tie can hide a strong segment win/loss.
• Account for guardrail metrics (revenue quality, churn, support load), not just the click.

14.4 "Best practices" are hypotheses, not guarantees (⚪)

Every recommendation in this document is a prior, not a verdict. CXL's point stands: copied "best practices" frequently fail because they ignore your context, audience, and traffic. [CXLf] Use this doc to generate tests; let your data decide.

---

15. Personalization & message-to-ad match

Relevance is conversion fuel — the more the page feels made for this visitor and this click, the better it converts. (🟢 the scent principle is primary-sourced to NN/g's broader work via CXL; treat specifics as established practice.)

• Message match / "maintaining scent." Keep the verbal and visual "scent" continuous from ad → landing page → conversion. The headline should echo the ad's promise and keywords; the imagery and offer should match. Breaking scent (different wording, different offer, generic homepage) spikes bounce and wastes ad spend. [CXLs]
• Dedicated page per campaign/segment. Don't send paid traffic to a generic homepage; build a focused page per offer/audience. One ad promise → one matching page.
• Dynamic Text Replacement (DTR). Swap headline/keywords to mirror the exact search term or ad variant, so every visitor sees their own query reflected back.
• Audience/segment personalization. Tailor copy, social proof, and imagery by industry, role, geography, device, or funnel stage when you have the data — relevant proof (logos/testimonials like the visitor) converts harder.
• Honor intent and temperature. Cold paid traffic needs more education and trust before the ask; warm email traffic can convert faster (recall the channel data, §2.2 — but it's an intent artifact, not page magic). [U24]
• Personalize responsibly. Respect privacy/consent; don't be creepy. Test that personalization actually lifts conversion — it isn't free of complexity or risk.

---

16. Common mistakes & anti-patterns

A consolidated "what kills conversion" list. (⚪ established; ⛔ marks the two specific stats that failed verification — don't repeat them.)

Strategy & focus

• ❌ Multiple competing goals / CTAs — diluted attention, lower conversion.
• ❌ Sending paid traffic to the homepage instead of a dedicated, message-matched page.
• ❌ Full site navigation that leaks attention off the conversion path.
• ❌ Treating best practices as laws and skipping testing. [CXLf]

Message & copy

• ❌ Vague or clever-over-clear headline that doesn't state the value.
• ❌ Message mismatch between ad and page (broken scent). [CXLs]
• ❌ Feature-dumping with no benefit/translation; "we" language instead of "you."
• ❌ Copy too complex — higher reading level correlates with lower conversion. 🟢[U24]
• ❌ Generic CTA copy ("Get Started"/"Submit") that misleads or under-motivates. 🟢[NNg]
• ❌ Walls of text that ignore F-pattern scanning. 🟢[NNf]

Forms & friction

• ❌ Too many form fields / asking for data you don't need yet.
• ❌ Placeholder-as-label, multi-column forms, vague error messages, form-wipe on error.

Trust

• ❌ No social proof, or generic/anonymous testimonials.
• ❌ Badge spam that reads as spammy and lowers trust.
• ❌ Hidden pricing / unclear terms / no risk reversal.

Visual & type

• ❌ Weak visual hierarchy — CTA not dominant; everything shouts equally. 🟢[NNv]
• ❌ Low-contrast text, cramped line length, tiny body type. 🟢[W3C]
• ❌ Clichéd stock photos and decorative images that carry no message.
• ❌ Too many typefaces.

Performance

• ❌ Lazy-loading the hero/LCP image — directly harms LCP. 🟢[WV]
• ❌ Unoptimized images, heavy third-party scripts, layout shift from un-dimensioned media/fonts.
• ❌ Ignoring mobile speed — see the 53%/bounce data. 🟢[GMS]

Mobile & accessibility

• ❌ Desktop-first pages crammed onto phones; tiny tap targets; horizontal scroll.
• ❌ Failing contrast / no keyboard access / missing labels & alt text. 🟢[W3C]

Measurement

• ❌ Peeking and stopping early; ❌ judging many metrics with no correction. 🟢[GB][EM]
• ❌ Calling tests on tiny samples / partial cycles; ❌ no analytics at all.

⛔ Do NOT cite these (failed verification):

• ⛔ "Simpler SaaS copy converts 514% better (12.9% vs 2.1%)." — refuted.
• ⛔ "1 second faster load → up to 27% more conversions." — refuted.

---

17. Pre-launch QA checklist

Message & structure

• One clear value proposition, above the fold, matching the source ad/email.
• Hero answers What / Why-me / What-next within ~5 seconds.
• Benefits lead; features support; product is shown, not just described.
• Social proof present and specific, near each CTA.
• FAQ answers the real objections; risk-reversal stated.
• Copy scannable, ~5th–7th grade reading level. 🟢

CTA & forms

• Primary CTA is specific, visually dominant, repeated; only one primary action.
• Form asks the minimum; single-column; persistent labels; good input types; inline validation; descriptive submit button.

Visual & type

• Clear hierarchy (size/color); restrained palette; CTA accent reserved.
• ≤2–3 typefaces; readable size, line length (~50–75 chars), and line height.

Performance 🟢

• LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1 in field data.
• Hero/LCP image eager + preloaded; below-fold lazy-loaded.
• Images responsive/modern/compressed/dimensioned; fonts subset+preloaded; third-parties audited.

Mobile & accessibility 🟢

• Mobile-first layout; tap targets ≥44px; no horizontal scroll; readable without zoom; tested on real device + throttled network.
• WCAG 2.1 AA: contrast ≥4.5:1 / 3:1; keyboard operable; visible focus; labels & alt text; not color-alone; zoom to 200%.

SEO

• Title/meta/H1/URL optimized to intent; content crawlable; canonical set; structured data where relevant.

Measurement 🟢

• Analytics + primary metric live; conversion tracked end-to-end.
• First experiment: hypothesis written, sample size/duration pre-computed, no plan to peek.

---

Sources & evidence grade

Citation keys used inline. P = primary source; B = blog/secondary (corroborating). Verified findings were adversarially fact-checked (3-vote majority) in the research pass that produced this doc.

Key	Source	Grade	Used for
[U24]	Unbounce — 2024 Conversion Benchmark Report (41k pages, 57M+ conversions) — unbounce.com/conversion-benchmark-report/ (+ /saas-conversion-rate/, /landing-pages/whats-a-good-conversion-rate/)	P (vendor)	Conversion benchmarks, channel rates, readability
[NNg]	Nielsen Norman Group — "Get Started" Stops Users — nngroup.com/articles/get-started/	P	CTA copy / information scent
[NNf]	Nielsen Norman Group — F-Shaped Pattern of Reading (2006 + 2017 follow-up) — nngroup.com/articles/f-shaped-pattern-reading-web-content-discovered/	P	Scanning, front-loading copy
[NNv]	Nielsen Norman Group — Visual Hierarchy (video + article) — nngroup.com/videos/visual-hierarchy/	P	Hierarchy via color & size
[WV]	Google web.dev — Core Web Vitals / LCP / INP / CLS & LCP & lazy-loading — web.dev/articles/vitals, /lcp, /inp, /cls, /lcp-lazy-loading	P	CWV thresholds, eager-load LCP
[GMS]	Google / Think with Google — Mobile Site Speed Playbook (data ~2016–17)	P (dated)	53% abandonment, bounce-vs-load curve
[W3C]	W3C — WCAG 2.1 (SC 1.4.3, 1.4.11) + WebAIM contrast guide	P	Contrast minimums, AA
[GB]	GrowthBook — Experimentation Problems docs	P	Multiple comparisons, peeking
[EM]	Evan Miller — How Not To Run an A/B Test	P	Peeking / sequential testing
[CXLs]	CXL — Maintaining scent for advertising ROI	B	Message match / scent
[CXLf]	CXL — Why conversion optimization best practices fail	B	Best-practices-as-hypotheses
[SMt]	Smashing Magazine — Best Practices of Combining Typefaces & typography references	B	Font pairing
[LA]	Level Access — Responsive design & accessibility	B	Responsive/accessible overlap

Additional corroborating sources reviewed in the research pass: foundrycro, genesysgrowth, seosherpa, landingi, marketingcharts (benchmarks); MDN, DebugBear, GTmetrix, 2025 Web Almanac (LCP/lazy-load); Wikipedia (family-wise error rate), Spotify Engineering, Statsig, analytics-toolkit (experimentation).

---

Caveats, source quality & things that got refuted

Read this before quoting any number externally.

1. Conversion benchmarks are single-vendor (Unbounce) and median-based. The 6.6% median, 3.8% SaaS, 11.4–40.8% "good," 19.3% email channel, and readability figures all come from one platform's own pages. They carry selection bias — use them as directional benchmarks, not universal truth. [U24]
2. Median ≠ "good." The true cross-industry median is only 6.6%; the "good" 11.4%+ is the 75th-percentile threshold. Don't conflate them.
3. Channel ranking is an intent artifact. Email's 19.3% reflects a warm, opted-in audience, not channel superiority. Never benchmark a cold paid page against an email page.
4. Mobile-speed stats are ~9–10 years old (2016–17) and correlational. The 53% abandonment and 13%→60% bounce curve are still widely cited and directionally right, but are not fresh and not proven causal. [GMS]
5. Visual hierarchy "primarily color & size" was the one non-unanimous finding (2–1). Color and size are the most-emphasized importance cues, but NN/g's broader framing lists more signals. [NNv]
6. Strongest, fully-current claims: Core Web Vitals thresholds [WV] and WCAG contrast minimums [W3C] — primary specs from Google and W3C.
7. ⛔ Refuted in verification — do not cite:
   • "Simpler SaaS copy converts 514% better (12.9% vs 2.1%)." (1–2 refuted)
   • "Reducing load time by 1 second increases conversions up to 27%." (1–2 refuted)
8. Areas marked ⚪ (forms field-counts, trust-signal effect sizes, typography line-length/pairing specifics, framework conversion impact) are established professional practice, not individually fact-checked statistics here. They are reliable as guidance; verify exact numbers (e.g., via Baymard, CXL, or your own tests) before quoting figures.

Final reminder: these are strong priors to generate hypotheses. The only authority on your page is a well-run experiment on your own traffic (§14).