On-Page, CRO and Tool UX

Overview

Course 7 costed the assets. This course makes them work on the page. The unifying idea is that the old on-page playbook was written for a world where arriving on your page was the win. It no longer is. Traffic is smaller, better informed and less patient, so every page has to earn its keep in one visit — or earn a second one.

The 30% tools allocation from Rule 6 gets its full treatment here, because an interactive tool is the least displaceable thing a small publisher can build: a summary can describe your calculator, but it cannot run it on the reader's own numbers.

8.1 What does answer-first page structure mean?

What is it?

Putting the direct answer, the number or the result within the first screen — then using the remaining page for the things a summary cannot deliver: your method, your data, your tool, and your reason to return.

Why it matters

Two audiences read the top of your page: a reader who may already have seen a generated summary, and a machine deciding what to extract and whether to attribute it. Burying the answer under 600 words of preamble fails both. It also fails the only honest test of a page — could the reader get what they came for without scrolling past three ads and a newsletter modal?

How to do it

1. Open with the answer in one or two sentences, stated plainly, with the date it was verified.
2. Follow immediately with what makes it yours: the method, the sample, the dataset, or the tool that produced it.
3. Structure with honest headings that match real questions. One idea per heading, so the page can be scanned and safely extracted.
4. Put the interactive element high — above the long explanation, not buried at the bottom where only 8% of readers reach.
5. Give every page exactly one primary action and make it obvious. Competing calls to action convert worse than a single clear one.
6. Keep the first screen free of interstitials, auto-playing media and layout-shifting elements. Read Course 5 again if this is tempting.

Tools needed

One existing page, the content brief builder, and a phone to check the real first screen.

Lab 8.1

Take your highest-traffic page. Rewrite the first screen so the answer appears within it, dated. Then load it on an actual phone and photograph what is visible without scrolling. Count how many elements above the answer are not the answer.

Artifact

Page structure pattern
  Page | Answer present in first screen? Y/N | Words before the answer (before → after)
  Elements above the answer that are not the answer: ___
  Primary action (exactly one) | Interactive element position | Verified date shown? Y/N

Common mistakes

• Treating the first screen as advertising inventory, then wondering why engagement metrics are poor.
• Two or three competing calls to action, which reliably reduces total conversions.
• Checking the first screen only on a desktop monitor, where it looks nothing like what most readers see.

Pro astuces

• Answer-first is also a discipline test: if you cannot state the answer in two sentences, you may not have one yet.
• A visible verification date in the first screen does double duty — trust for the reader, and a signal of currency for anything extracting the page.

8.2 Why are tools the most durable asset you can build?

What is it?

An interactive utility — calculator, scorer, checklist, generator, tracker — that takes the reader's own inputs and returns a result they could not have got from a summary of your page.

Why it matters

This is the direct answer to the governing question. A generated answer can describe your tool; it cannot substitute for it, because the value is created at the moment of use with data only the reader has. Tools also produce the two things a publisher most needs and rarely gets: a genuine reason to return, and a natural, non-coercive moment to ask for an email.

How to do it

1. Pick one calculable job your audience actually does — the thing they currently do badly in a spreadsheet.
2. Show a useful result with zero inputs. Sensible defaults produce an instant result; the reader then adjusts. An empty form is a bounce.
3. Keep required inputs to the minimum that produces a defensible answer. Every extra field costs completions.
4. Produce a keepable output: a copyable summary, a downloadable file, a shareable permalink. This is what turns a session into an asset.
5. Save state locally so returning is rewarded, and be explicit that nothing is uploaded. Privacy is a feature — say so.
6. Show the method behind the calculation. An unexplained black box is not trustworthy, and the explanation is also your citable originality.

Tools needed

Your component library from Course 4, plain JavaScript, and IndexedDB or local storage.

Lab 8.2

Ship one tool end to end: sensible defaults, minimum inputs, a keepable output, a stated method, and local-only storage. Then watch one real person use it without helping them, and write down every place they hesitated.

Artifact

Tool UX spec
  Job it does | Inputs (required vs optional) | Default values and their source
  Result format | Keepable output (copy / export / permalink)
  Method statement | Stated limitations | Storage: local-only? Y/N
  Observed hesitations from 1 real user | Fixes shipped

Common mistakes

• Gating the result behind an email, which kills both citation and word of mouth to gain a few low-quality addresses.
• Twelve inputs when four would produce a defensible answer.
• An unexplained formula, which is unciteable and rightly distrusted on financial or security topics.

Pro astuces

• The export file is a brand surface that travels into spreadsheets and decks you will never see. Put your name and the tool's URL in it.
• Watching one real person use your tool finds more problems in ten minutes than a month of analytics.

8.3 How do you convert a visitor who already has the answer?

What is it?

Conversion paths designed for informed, low-patience traffic: fewer visitors, further along, who need a reason to do something now rather than an introduction to the topic.

Why it matters

Zero-click filtering changes the composition of your traffic, not just its volume. The casual browsers are absorbed by summaries; the people who still click tend to have a specific unmet need. Conversion rate per visit should therefore rise as traffic falls — and if it does not, the page is still written for the old audience.

How to do it

1. Define what conversion means for each asset type before optimising anything. For most pages here it is a subscriber, a tool completion, or a qualified commercial click.
2. Rank your conversions by durability: subscriber > returning tool user > commercial click > ad impression. Optimise the durable ones first.
3. Offer the next step that matches where they already are. Someone who has read a summary does not need an introduction; they need the detail the summary omitted.
4. Make the offer specific. "Subscribe for updates" is weak; "the same cash-flow numbers, updated every Thursday" is a reason.
5. Remove friction you have stopped noticing: cookie walls stacked on newsletter modals stacked on ads.
6. Measure conversion per visit, not total conversions, so a traffic decline cannot disguise a page getting better or worse.

Conversion path map (per asset)
  Asset | Visitor state on arrival (already knows ___ / needs ___)
  Primary conversion | Durability rank (1 subscriber → 4 ad impression)
  Specific offer wording | Friction elements removed
  Conversion per visit: baseline ___ → after ___  (dates)

Tools needed

Your analytics, the revenue & RPM calculator, and your newsletter platform.

Lab 8.3

Pick three assets. For each, write what the visitor already knows, what the summary would have omitted, and the single most durable next step. Rewrite the offer to be specific, then baseline conversion per visit and re-measure after 30 days.

Artifact

Conversion path map for 3 assets, with conversion-per-visit baseline and 30-day re-measure

Common mistakes

• Reading falling total conversions as falling page quality when traffic composition has changed. Per-visit rates tell the truth.
• Optimising ad impressions — the least durable conversion — because it is the easiest to increase.
• Generic offers that could appear on any site in the niche.

Pro astuces

• If conversion per visit is not rising while traffic falls, your page is still written for browsers rather than for the informed readers you now get.
• The most effective specific offer is usually the thing that keeps your best asset current. People subscribe to updates of something they already valued.

8.4 What does an honest commercial page look like?

What is it?

The 20% of your assets that carry affiliate links, comparisons, recommendations or sponsored placements — built so that the commercial relationship is disclosed clearly and the recommendation could withstand being read aloud to the reader it affects.

Why it matters

These pages carry most of the revenue and nearly all of the compliance exposure. A comparison table that quietly ranks by commission is the fastest way to destroy the trust the other 80% of the portfolio was built to earn — and disclosure obligations are not optional. Review the FTC endorsement, influencer and review guidance before you build any of them.

How to do it

1. Disclose clearly and near the top, in plain language, before the reader acts on any recommendation — not in a footer.
2. State the ranking basis explicitly, and never let commission determine order. If a table is sortable, make the criteria visible.
3. Publish the review methodology: what you tested, how, when, and what you did not test.
4. Include the negatives. A comparison where every option is excellent is not a comparison.
5. Attach every factual product claim — price, feature, limit — to the claim register from 7.3 with a short volatility cycle. Prices go stale fastest.
6. Keep a "why this may not suit you" section. Disqualifying readers honestly improves conversion quality and reduces refunds and complaints.

Tools needed

Your claim register, review methodology page, advertiser disclosure page, and the reviewer register.

Lab 8.4

Rewrite one commercial page to the standard: disclosure above the first recommendation, stated ranking criteria, a dated method, real negatives for every option, and every price in the claim register on a 30-day cycle. Then read it aloud and ask whether a reader who bought on your advice would feel fairly treated.

Artifact

Commercial page standard
  Page | Disclosure position & wording | Ranking criteria (commission excluded? Y/N)
  Method statement date | Negatives per option | Claims in register | Verified date shown
  Read-aloud test: would a reader who acted on this feel fairly treated? Y/N + why

Common mistakes

• Ordering by commission while describing the order as "best".
• Footer-only disclosure, which arrives after the decision it was supposed to inform.
• Letting prices go stale on the highest-revenue pages, which is both a trust failure and a compliance risk.

Pro astuces

• A prominent "this is not for you if…" section raises conversion quality and cuts complaints. Readers reward being told the truth.
• Commercial pages need the shortest claim-verification cycle in the portfolio. They earn the most and go stale the fastest.

8.5 How do you place ads without wrecking the page?

What is it?

Ad layout where every slot has its height reserved in CSS before anything loads, the first screen stays readable, and Core Web Vitals are measured with ads actually serving.

Why it matters

Ads are the most common cause of a good page becoming a bad experience, and the damage is usually invisible to the operator: you tested performance in a private window with an ad blocker on. Layout shift from an unreserved slot is felt by every visitor and measured by the platforms whose behaviour you cannot control.

How to do it

1. Reserve every slot's height in CSS with a fixed min-height per breakpoint, so nothing moves when the ad arrives — or fails to.
2. Keep the first screen free of ads above the answer. The leaderboard goes below the page head, not on top of the content.
3. Place in-article slots at natural section boundaries, never mid-sentence and never inside a tool's input area.
4. Load ad scripts without blocking rendering, and make the page fully functional if they never load at all.
5. Measure Core Web Vitals with ads live, on a mid-range phone on a throttled connection. Any measurement without ads is fiction.
6. Cap slots per page and record the cap. If revenue per visit only holds up by adding slots, the underlying asset is failing.

Ad layout & CWV record
  Page template | Slots: header / in-article ×N / sidebar / footer
  Reserved height per slot per breakpoint (mobile / tablet / desktop)
  MEASURED WITH ADS LIVE, mid-range phone, throttled:
    LCP ___  CLS ___  INP ___   | date | device | connection profile
  Same page with ads blocked: LCP ___ CLS ___ INP ___  (the gap is the ad cost)
  Slot cap per template: ___   | Revenue per visit: ___

Tools needed

Lab and field CWV data, a real mid-range phone, throttling, and your ad configuration.

Lab 8.5

Measure LCP, CLS and INP on one template twice — once with ads serving and once blocked — on a mid-range phone with a throttled connection. Record the gap. Then reserve any slot heights that are missing and re-measure.

Artifact

Ad layout & CWV record: both measurement sets, the gap, slot caps, and fixes shipped

Common mistakes

• Measuring performance with an ad blocker on, which produces numbers no real visitor experiences.
• Unreserved slot heights, the single largest source of layout shift on independent sites.
• Adding slots to defend revenue per visit, which accelerates the decline it is meant to fix.

Pro astuces

• The measured gap between ads-on and ads-off is the true cost of your advertising. Once you can state it, the density conversation stops being an argument about taste.
• A functional page with zero ads loaded should still look deliberate. If it collapses, the layout is dependent on the ads rather than reserving space for them.

8.6 How do you test honestly at small sample sizes?

What is it?

Making improvement decisions on low traffic without pretending to statistical rigour you do not have: qualitative observation, sequential rollouts, and an explicit note about what your sample can and cannot show.

Why it matters

A three-site portfolio in month four does not have the traffic for meaningful split tests, and running them anyway produces confident conclusions from noise — which is worse than no test, because you act on it. The honest alternative is not "don't test": it is testing the things that are visible at small samples.

How to do it

1. Before testing, calculate roughly how many conversions you would need to detect the effect you care about. If you cannot reach it in a reasonable window, do not run a split test.
2. At low volume, prefer qualitative methods: watch five real people use the page. Five sessions reliably reveal usability failures that a split test never would.
3. Test large, structural changes rather than small ones. A rebuilt page can show an effect visible above the noise; a button colour cannot.
4. Use sequential before/after with a stated caveat, and never over a period containing a seasonal or algorithmic event.
5. Write the decision rule before you look at the data, so you cannot rationalise afterwards.
6. Log every test with its sample size and an explicit power note, including the ones you abandoned.

Tools needed

Analytics, five willing humans, and a written test log.

Lab 8.6

Run one decision-quality test. If your volume is low, that means watching five people rather than splitting traffic. Write the decision rule first, record the sample size, and add the power note stating what the result cannot prove.

Artifact

Test log
  Test | Change | Method (5-user / sequential / A-B) | Decision rule written BEFORE
  Sample size | Result | POWER NOTE: what this sample cannot show
  Decision taken | Abandoned tests and why

Common mistakes

• Reporting "a 34% lift" from 22 conversions, which is noise presented as a finding.
• Stopping a test the moment it looks favourable, guaranteeing a false positive.
• Testing trivial changes because they are easy to implement, while the structural problem goes untouched.

Pro astuces

• Five real users watched in silence is the highest-value research a small publisher can do, and it needs no traffic at all.
• Writing the power note is what stops you believing your own noise a month later. Keep the abandoned tests in the log for the same reason.

Scenario assessment: the comparison page that earns everything

On the B2B SaaS site, one comparison page produces 60% of all affiliate revenue. Sessions to it are down 30% year on year, but revenue is flat because conversion per visit has risen. The table is ordered by an unstated "overall score" that happens to correlate almost perfectly with commission rate. Disclosure is a line in the footer. Four of the eleven listed prices were last verified nine months ago. The operator's plan: add two more ad slots to the page to offset the session decline, and run an A/B test on the call-to-action button colour. Total monthly conversions on the page: 41.

Final project: one page, one tool, one honest money page

Rebuild the three page types that matter — an answer-first content page, a tool with a keepable output, and a commercial page that survives being read aloud.

Deliverable
1. One page rebuilt answer-first, with the answer and a verified date in the first screen
2. One tool shipped: defaults, minimum inputs, keepable output, stated method, local-only storage
3. One real person observed using the tool, with the hesitations recorded and fixed
4. Conversion path map for 3 assets with conversion-per-visit baselines
5. One commercial page rebuilt to the standard: disclosure above the first recommendation, criteria stated, negatives included, prices in the claim register
6. Ad layout & CWV record measured WITH ads live on a mid-range phone, plus the ads-off comparison
7. One test log entry with a decision rule written first and an explicit power note

Pass standard: the tool returns a keepable result with no gate, the commercial page's ranking basis is stated and commission-free, and you can quote your CWV numbers with ads serving.

Course 8 checklist

• Answer and verified date appear in the first screen
• First screen checked on a real phone, not just desktop
• Exactly one primary action per page
• Tool shows a real result with zero inputs (sensible defaults)
• Required inputs reduced to the minimum that is defensible
• Keepable output: copy, export or shareable permalink
• Tool method and assumptions stated on the page
• Result never gated behind an email
• Email offered at the result, inline, not as an arrival modal
• One real user observed; hesitations logged and fixed
• Conversion measured per visit, not as a total
• Disclosure placed above the first recommendation, in plain language
• Ranking criteria stated; commission excluded from ordering
• Real negatives and a "not for you if" section on every commercial page
• Every price and feature claim in the register on a 30-day cycle
• Every ad slot height reserved in CSS at every breakpoint
• CWV measured with ads LIVE on a mid-range phone, and the ads-off gap recorded
• Slot cap per template written down
• Test method matched to actual conversion volume
• Decision rule written before looking at data; power note recorded

AI-agent prompt for Course 8

Act as a conversion and on-page auditor for an independent publisher whose traffic is being filtered by AI-generated answers. Assume visitors arrive better informed, in smaller numbers, with less patience.

I will paste: page URLs or copy, my monthly conversion volume per page, my current ad slot layout, and my affiliate or sponsor relationships.

Do this:
1. For each page, tell me how many words appear before the direct answer and rewrite the first screen so the answer plus a verified date appears within it. List every element sitting above the answer that is not the answer.
2. Identify which pages should become interactive tools instead of articles. For each, specify: the calculable job, the minimum input set, sensible defaults that produce an immediate result, and the keepable output (copy / export / permalink).
3. Never propose gating a tool result behind an email. Instead, write the inline post-result offer, and make it specific to what keeps the result current.
4. Map a conversion path per asset: what the visitor already knows, what a summary would have omitted, and the most DURABLE next step (rank: subscriber > returning tool user > commercial click > ad impression).
5. Audit every commercial page against: disclosure above the first recommendation, ranking criteria stated with commission excluded, dated method, real negatives per option, and all prices/features registered with a 30-day verification cycle. Flag any ordering that correlates with commission.
6. Review my ad layout: confirm every slot has a reserved height per breakpoint, that no slot sits above the answer in the first screen, and that the page is fully functional if ad scripts never load.
7. Given my ACTUAL conversion volume, tell me which test method is legitimate (watch-5-users under ~30/month; sequential before/after ~30-200; simple A/B above ~200). If I ask for an A/B test my volume cannot support, refuse and say why.

Rules:
- Never report or estimate a percentage lift from a sample too small to support it. Attach a power note to every proposed test.
- Never invent benchmark conversion rates, RPMs or CTRs. If I have not measured it, mark it UNMEASURED.
- Treat disclosure as a legal matter: state that requirements vary by jurisdiction and that you are not giving legal advice.
- Prefer removing friction and slots over adding them. Never recommend more ad slots to offset a traffic decline.
- Assume all performance numbers I give you were measured WITHOUT ads unless I say otherwise, and tell me to re-measure with ads live.
Output as tables, with the refused tests and the disclosure failures called out in plain text above the tables.

Primary sources

• FTC endorsement, influencer and review guidance — the primary reference for disclosure on comparison, review and affiliate pages.
• Web Vitals — definitions and thresholds for LCP, CLS and INP.
• Optimize Cumulative Layout Shift — including reserving space for late-loading elements such as ad slots.
• Creating helpful, reliable, people-first content — the page-experience and main-content questions.

Ad platform policies, CWV thresholds and disclosure expectations all change. Every claim here is a dated claim with a 90-day expiry — log it in your register and re-verify against the primary source.