Velyr Blog

The Velyr Blog

Practical, sourced guides on conversion optimization, PostHog analysis, Core Web Vitals, and shipping growth fixes as code — for developers and founders.

Framework Conversion Fixes

• How to Reduce Form Abandonment in a Plain HTML Signup Form — Cut plain HTML signup abandonment with native constraint validation: required, type, and pattern attributes give instant inline errors and keep input — no JavaScript framework needed.
• How to Cut Signup Abandonment with a Remix Action and useFetcher — Cut Remix signup abandonment: validate in a route action, return field errors, and submit with useFetcher for inline no-reload errors that still work without JavaScript.
• How to Fix a Hydration-Delayed CTA in Next.js — A Next.js CTA that's a button with onClick is dead until hydration finishes. Make it a server-rendered link that works immediately, and isolate any JS to a small client island.
• How to Improve Conversion on an Astro Landing Page with Islands — Improve Astro landing page conversion with islands: ship the hero and CTA as static HTML, and hydrate only interactive bits with client:visible or client:idle to keep the page fast.
• How to Improve Conversion on a Next.js Pricing Page — Improve Next.js pricing page conversion: make the plan toggle a client island, render plans in a server component for fast LCP, and default to annual — with App Router code.
• How to Improve Conversion on a Vue 3 Landing Page — Improve Vue 3 landing page conversion: keep the hero CTA above the fold, lazy-load below-fold sections with defineAsyncComponent, and reserve space so the page never shifts.
• How to Optimise the Astro Image Component for a Fast Hero LCP — Make your Astro hero LCP fast: use the astro:assets Image component with loading=eager and fetchpriority=high, and a correct width/height so the hero paints quickly without layout shift.
• How to Reduce Form Abandonment in a React Multi-Step Signup — Cut abandonment in a React multi-step signup: keep all answers in one state object, show a progress indicator, and never lose data when the user steps back — with a runnable wizard.
• How to Reduce Signup Form Abandonment in Next.js App Router — Cut Next.js signup abandonment with a Server Action: the form posts and validates server-side, works without client JS, and returns typed errors with useActionState — no value loss.
• How to Use a SvelteKit Form Action to Cut Checkout Drop-Off — Cut SvelteKit checkout drop-off with a form action: server-side validation, values preserved on error, and use:enhance for no-reload submits that still work without JavaScript.
• How to Use useAsyncData in Nuxt 3 to Render the CTA Before Data — Stop slow data blocking your Nuxt 3 CTA: use useAsyncData with lazy and server:false so the page and CTA render immediately while non-critical data streams in afterwards.
• Why Your React Hero Section Isn't Converting (and How to Fix It) — A low-converting React hero usually fails on three things: an unclear headline, a CTA below the fold, and no proof the CTA is even seen. Here's a runnable hero component with an IntersectionObserver that measures CTA visibility.
• How to Improve Conversion Rate on a Next.js Landing Page — Three high-leverage Next.js conversion fixes: get the primary CTA above the fold, make the hero image LCP-fast with next/image priority, and add a sticky CTA — with runnable App Router code.

PostHog Analysis Recipes

• How to Build a Retention Chart in PostHog for a SaaS — Build a retention chart in PostHog: use the native Retention insight to see what share of new users come back each week, and track weekly active users in HogQL as a supporting signal.
• How to Create a Cohort of High-Intent Visitors in PostHog — Create a high-intent visitor cohort in PostHog from behaviour like viewing pricing or deep scrolling, then size and use it. Includes the native cohort builder and a HogQL check.
• How to Create a Conversion Goal in PostHog — Create a conversion goal in PostHog: capture the event that represents the goal, track it as a Trends insight, and watch the rate over time with a weekly HogQL trend.
• How to Find Your Most-Viewed Pages in PostHog with HogQL — Find your most-viewed pages in PostHog with one HogQL query: group $pageview events by $pathname, count views and unique visitors, and order by traffic. Includes the native path.
• How to Measure Time on Page in PostHog — Measure time on page in PostHog: use the native session duration, or compute a session-duration proxy in HogQL with dateDiff between the first and last event in each session.
• How to Track a Button Click as a Custom Event in PostHog — Track a button click as a custom event in PostHog with posthog.capture, add properties for context, then count and segment the clicks in HogQL — with a runnable query.
• How to Track Outbound Link Clicks in PostHog — Track outbound link clicks in PostHog with a custom event that records the destination, then rank where your traffic leaves to in HogQL. A reliable, no-guesswork approach.
• How to Use PostHog Paths to See Where Users Go After the Homepage — Use PostHog's Paths insight to see the routes visitors take after the homepage, then confirm the most common destinations with a supporting HogQL pageview query.
• How to Build a Signup Funnel in PostHog for a SaaS Site — Build a signup funnel in PostHog step by step: define the events, create a Funnel insight, and reproduce it in HogQL with windowFunnel so you can see exactly which step leaks the most users.
• How to Measure Scroll Depth in PostHog — Measure scroll depth in PostHog using the $pageleave event's $prev_pageview_max_scroll_percentage property — including bounced sessions. Runnable HogQL for per-page averages and a distribution histogram.
• How to Track CTA Clicks in PostHog with Autocapture — Track CTA clicks in PostHog two ways: read them from $autocapture by element text, or fire a named custom event for reliability. Runnable HogQL to rank your most-clicked buttons and compute click-through.

Conversion Benchmarks

• What Is the Average Time on Page for a SaaS Landing Page? — As a rough guide, SaaS landing page visits last around 30–90 seconds, but time on page is a weak signal on its own. Here's how to measure your own session duration in PostHog.
• What Is a Good Click-Through Rate on a Hero CTA? — As a rough guide a hero CTA gets clicked by 5–15% of visitors, but the figure depends on traffic intent and whether the button is even seen. Here's how to measure your own in PostHog.
• What Is a Good Demo-Request Conversion Rate for B2B SaaS? — As a rough guide a B2B SaaS demo-request page converts 1–3% of visitors, lower than a free trial because the ask is bigger. Here's why, and how to measure your own in PostHog.
• What Is a Good Scroll Depth for a Landing Page? — As a rough guide a landing page averages 40–60% max scroll, but the number matters less than whether your CTA sits above or below where most people stop. Measure your own in PostHog.
• What Is a Good Signup Conversion Rate for a Developer Tool? — As a rough guide a developer tool converts 2–5% of visitors to signup, with GitHub/Google auth often pushing it higher. Here's why, and how to measure your own in PostHog.
• What Is a Good Bounce Rate for a SaaS Marketing Site? — As a rough guide a SaaS marketing site bounces around 40–60%, but 'bounce' is defined differently across tools and traffic sources. Here's how to measure your own in PostHog.
• What Is the Average Bounce Rate for Developer Tools? — Average bounce rate for SaaS and developer-tool sites typically lands around 40–60%, per public benchmarks from Contentsquare and others. Here's how to read that honestly and measure your own true bounce rate in PostHog.
• What Is a Good Conversion Rate for a SaaS Landing Page? — A good SaaS landing page converts 2–5% of visitors to signup, with the best pages hitting 6%+. Here are honest, sourced benchmarks and how to measure your own in PostHog.
• What's a Good Free-Trial-to-Paid Conversion Rate for SaaS? — Free-trial-to-paid conversion rates vary widely by model: opt-in (no card) trials often convert ~15–25%, opt-out (card-required) trials ~40–60%, per public benchmarks. Here's how to measure yours by cohort honestly.

Core Web Vitals & Conversion

• Does Cumulative Layout Shift Hurt Conversion? — Yes — layout shift causes mis-clicks and erodes trust, both of which cost conversions. web.dev's good CLS is under 0.1. Here's the mechanism and how to measure your own in PostHog.
• How to Fix Cumulative Layout Shift in React — Fix CLS in React: set width and height on images, reserve space for async content with a min-height, and use font-display swap. Get under web.dev's 0.1 good CLS threshold.
• How to Fix a Slow LCP on a Next.js Landing Page — Fix slow LCP in Next.js: load the hero with next/image priority, preload the font with next/font, and keep the hero in a server component. Get under web.dev's 2.5s good threshold.
• Does INP Affect Conversion on a Landing Page? — INP measures how fast your page responds to taps and clicks. A sluggish CTA feels broken and costs conversions. web.dev's good INP is under 200ms. Here's how to measure yours in PostHog.
• Does LCP Affect Conversion Rate? What the Evidence Shows — LCP affects conversion because a slow main paint delays when visitors can read and act. web.dev's 'good' LCP is under 2.5s. Here's the mechanism and how to measure the impact in PostHog.

CRO Concepts & Glossary

• What Is Above the Fold in Web Design? — Above the fold is everything a visitor sees before scrolling. It carries most of your conversion weight because many people never scroll. Here's what belongs there and why.
• What Is Bounce Rate vs Exit Rate? — Bounce rate is the share of single-page visits; exit rate is the share of visits to a page that ended there. They sound alike but answer different questions. Here's a worked example.
• What Is a Call to Action (CTA)? — A call to action (CTA) is the element that prompts a visitor to take the next step — usually a button or link like 'Start free trial'. Here's what makes one work, with examples.
• What Is a Conversion Funnel? — A conversion funnel is the ordered set of steps a visitor takes toward a goal, with people dropping off at each one. Here's a clear definition, a worked example, and how to read it.
• What Is a Landing Page? — A landing page is a standalone page built around a single goal — usually one conversion like a signup. It differs from a homepage by having one focused action. Here's how, with a structure.
• What Is a Micro-Conversion? Examples for SaaS — A micro-conversion is a small, measurable step a visitor takes toward your main goal — like starting a signup form or viewing pricing. Here's a clear definition, SaaS examples, and how to track one in PostHog.
• What Is Conversion Rate Optimization (CRO)? — Conversion rate optimization (CRO) is the practice of systematically increasing the share of visitors who take a desired action. Here's a plain-language definition, a worked example, and a repeatable CRO loop.

AI Agents & PR Automation

• Validating LLM Code Edits When You Can't Run the Code — How an autonomous agent validates code changes to production repos it cannot build, install, or execute: path denylists, byte-anchored edits, provable-only static checks, comparative validation, and an adversarial second model.
• What Is the Approval-Gate Pattern for AI Code Changes? — The approval-gate pattern keeps a human decision between an AI's proposed change and your live code: the agent opens a Pull Request, a person reviews and merges. Here's how and why.
• How to Automate Conversion Fixes with GitHub Pull Requests — Automate conversion fixes as Pull Requests: read analytics to find the leak, generate a scoped code change, open a PR with the reasoning, and keep a human merge. Here's the pipeline.
• Can an AI Agent Open Pull Requests on Your Repo? How It Works — Yes — an AI agent can open Pull Requests via a GitHub App with scoped permissions. It proposes changes you review and merge; it can't merge on its own. Here's the mechanism.
• How to Safely Auto-Roll-Back a Bad Deploy Using Bounce Rate — Auto-roll-back a backfiring change by comparing site-wide bounce rate before and after deploy. If it rises past a set threshold, open a revert PR. Here's the logic and the HogQL.

A/B Testing & Experimentation

• How to Calculate Sample Size for an A/B Test — Calculate A/B test sample size with n = 16 × p × (1−p) / δ² per variant, where p is the baseline rate and δ the absolute lift to detect. Includes a runnable function and worked example.
• How Many Visitors Do You Need for an A/B Test? — How many visitors an A/B test needs depends on your baseline rate and the smallest lift you want to detect. Small lifts need huge samples. Here's a quick reference table.
• Is My A/B Test Result Statistically Significant? — Your A/B test is significant if a two-proportion z-test gives |z| above 1.96 (p < 0.05) at a pre-decided sample size. Here's how to compute it and the mistakes that fake significance.
• How to A/B Test a Landing Page Without a Testing Platform — A/B test a landing page with no testing tool: split visitors with a cookie, tag the variant on every PostHog event, compare conversion in HogQL, and check significance by hand.

Comparisons & Alternatives

• A/B Testing Tools vs Shipping the Fix — A/B testing validates a change before committing but needs traffic and time; shipping the fix and measuring over time is faster on low traffic. Here's when each approach wins.
• CRO Agency vs AI Growth Agent for a Solo Founder — A CRO agency brings senior human expertise at agency prices and pace; an AI growth agent ships smaller fixes weekly for far less. For a solo founder, the honest tradeoff is depth vs cadence and cost.
• PostHog vs Google Analytics 4 for Conversion Tracking — PostHog gives event-level data, funnels, and session replay for conversion work; GA4 is free, ubiquitous, and strong on acquisition but harder for product funnels. Here's the honest split.
• PostHog vs Mixpanel for Product Analytics — PostHog bundles analytics, session replay, feature flags, and a self-host option; Mixpanel is a focused, polished analytics product with mature reporting. Here's the honest comparison.

Landing Page Patterns

• The Anatomy of a High-Converting SaaS Hero Section — A high-converting SaaS hero has six parts: eyebrow, outcome headline, specific subhead, one primary CTA, a quiet secondary, and a trust signal — all above the fold. Here's the annotated pattern.
• Pricing Page Layouts That Convert for Developer Tools — A developer-tool pricing page converts with three tiers, one featured plan, an annual default, and a free or usage-based entry. Here's the annotated layout and the dev-specific choices.

Founder Growth Playbooks

• How to Get Your First 100 SaaS Signups as a Solo Founder — Get your first 100 SaaS signups with a focused four-week plan: a sharp landing page, hand-to-hand outreach, one content bet, and a launch — measuring conversion at every step.

← Back to Velyr