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 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.