# Velyr Blog — Full Index

> Every published article on the Velyr blog. Velyr is an AI growth agent that ships one weekly conversion fix — a GitHub Pull Request on your repo or a direct change to your Shopify theme. These guides cover conversion optimization, PostHog analysis, Core Web Vitals, and shipping growth fixes as code.

## Framework Conversion Fixes
- [How to Improve Conversion on a Shopify Product Page Without an App](https://velyr.io/blog/improve-conversion-shopify-product-page-without-app): Three theme-code edits that lift Shopify product page conversion without installing another app: a sticky add-to-cart snippet, an audit of the JavaScript your apps inject, and reserved space for late-loading widgets.
- [How to Reduce Form Abandonment in a Plain HTML Signup Form](https://velyr.io/blog/reduce-form-abandonment-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](https://velyr.io/blog/cut-signup-abandonment-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](https://velyr.io/blog/fix-hydration-delayed-cta-nextjs): 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](https://velyr.io/blog/improve-conversion-astro-landing-page-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](https://velyr.io/blog/improve-conversion-nextjs-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](https://velyr.io/blog/improve-conversion-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](https://velyr.io/blog/optimise-astro-image-component-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](https://velyr.io/blog/reduce-form-abandonment-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](https://velyr.io/blog/reduce-signup-form-abandonment-nextjs-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](https://velyr.io/blog/use-sveltekit-form-action-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](https://velyr.io/blog/use-useasyncdata-nuxt-3-prefetch-and-speed-cta): 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)](https://velyr.io/blog/fix-low-converting-react-hero-section): 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](https://velyr.io/blog/improve-conversion-nextjs-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 Find Rage Clicks and Dead Clicks in PostHog](https://velyr.io/blog/find-rage-clicks-dead-clicks-posthog): PostHog captures $rageclick automatically and $dead_click once you enable it. Runnable HogQL to rank both by page and by device, plus how to tell a real conversion blocker from a carousel false positive.
- [How to Build a Retention Chart in PostHog for a SaaS](https://velyr.io/blog/build-retention-chart-posthog-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](https://velyr.io/blog/create-cohort-high-intent-visitors-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](https://velyr.io/blog/create-conversion-goal-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](https://velyr.io/blog/find-most-viewed-pages-posthog-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](https://velyr.io/blog/measure-time-page-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](https://velyr.io/blog/track-button-click-as-custom-event-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](https://velyr.io/blog/track-outbound-link-clicks-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](https://velyr.io/blog/use-posthog-paths-see-where-users-go-after-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](https://velyr.io/blog/build-signup-funnel-posthog): 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](https://velyr.io/blog/measure-scroll-depth-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](https://velyr.io/blog/track-cta-clicks-posthog): 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
- [Mobile vs. Desktop Conversion Rate: How Big Should the Gap Be?](https://velyr.io/blog/mobile-vs-desktop-conversion-rate-gap): Desktop converts 74% higher than mobile in Contentsquare's 2026 benchmark of 99 billion sessions. A gap is normal, so here is how to work out whether yours is intent, attribution, or a layout defect you can fix.
- [What Is the Average Time on Page for a SaaS Landing Page?](https://velyr.io/blog/average-time-page-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?](https://velyr.io/blog/good-click-through-rate-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?](https://velyr.io/blog/good-demo-request-conversion-rate-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?](https://velyr.io/blog/good-scroll-depth-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?](https://velyr.io/blog/good-signup-conversion-rate-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?](https://velyr.io/blog/good-bounce-rate-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?](https://velyr.io/blog/average-bounce-rate-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?](https://velyr.io/blog/good-conversion-rate-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?](https://velyr.io/blog/good-trial-to-paid-conversion-rate-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?](https://velyr.io/blog/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](https://velyr.io/blog/fix-cumulative-layout-shift-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](https://velyr.io/blog/fix-slow-lcp-nextjs-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?](https://velyr.io/blog/inp-affect-conversion-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](https://velyr.io/blog/lcp-affect-conversion-rate-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 Answer Engine Optimization (AEO)?](https://velyr.io/blog/what-is-answer-engine-optimization-aeo): Answer engine optimization is writing so an AI assistant can quote you accurately. Here is a plain definition, how AEO relates to SEO and GEO, and what changes on a landing page when visitors arrive already convinced.
- [What Is Above the Fold in Web Design?](https://velyr.io/blog/above-fold-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?](https://velyr.io/blog/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)?](https://velyr.io/blog/call-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?](https://velyr.io/blog/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?](https://velyr.io/blog/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](https://velyr.io/blog/what-is-a-micro-conversion): 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)?](https://velyr.io/blog/what-is-conversion-rate-optimization): 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](https://velyr.io/blog/validating-llm-code-edits-without-running-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?](https://velyr.io/blog/approval-gate-pattern-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](https://velyr.io/blog/automate-conversion-fixes-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](https://velyr.io/blog/can-ai-agent-open-pull-requests-repo-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](https://velyr.io/blog/safely-auto-roll-back-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](https://velyr.io/blog/calculate-sample-size-ab-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?](https://velyr.io/blog/many-visitors-you-need-ab-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?](https://velyr.io/blog/my-ab-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](https://velyr.io/blog/ab-test-landing-page-without-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](https://velyr.io/blog/ab-testing-tools-vs-shipping-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](https://velyr.io/blog/cro-agency-vs-ai-growth-agent-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](https://velyr.io/blog/posthog-vs-google-analytics-4-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](https://velyr.io/blog/posthog-vs-mixpanel-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](https://velyr.io/blog/anatomy-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](https://velyr.io/blog/pricing-page-layouts-that-convert-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](https://velyr.io/blog/get-first-100-saas-signups-as-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.