Most "best websites" lists are aesthetic rankings with no substance behind them. This one is different. We measured actual Core Web Vitals, analysed the information architecture, and identified the repeating patterns that make these sites work — not just look good.
What follows is a teardown of ten marketing sites we consider genuinely excellent, with specific attention to what you can take and apply to your own.
For each site, we captured:
LCP: 0.8s | INP: 42ms | CLS: 0.0 | Lighthouse: 98
Linear's site is the benchmark for developer-tool marketing. What it does right:
The hero claim is precise. "The issue tracking tool you'll enjoy using" names the category, makes a specific claim (enjoyment — unusual in B2B), and is provable by the demo immediately below it.
Interactive demo above the fold. Instead of a static screenshot, the hero contains a live, keyboard-navigable mini-version of the product. Visitors experience the speed claim rather than read about it.
Zero unnecessary animation. Every motion serves a purpose — demonstrating a feature, guiding attention. There are no decorative animations that add load time without adding information.
Typography as brand. The Inter typeface used at very tight tracking with high contrast creates a visual language that is immediately distinctive without custom typography.
What to take: Interactive product demos outperform static screenshots. Put the proof inside the hero, not below it.
LCP: 1.1s | INP: 38ms | CLS: 0.01 | Lighthouse: 96
Vercel's site targets developers with enterprise buyers. This dual audience creates interesting choices.
The headline changes based on scroll. As you scroll past the hero, the fixed header changes to a product-specific CTA. This is technically complex but behaviourally smart — repeat visitors get a direct path without seeing the full pitch again.
Social proof by category. Instead of a random logo wall, Vercel organises logos by industry vertical. This lets a fintech buyer see fintech companies, an e-commerce buyer see e-commerce companies. Relevance dramatically increases proof weight.
Dark theme as a performance decision. Dark backgrounds mean fewer bytes in images (dark pixels compress better) and lower GPU load on OLED screens. The aesthetic choice is also a performance choice.
What to take: Segment your social proof by buyer category. A relevant logo is worth ten irrelevant ones.
LCP: 1.4s | INP: 55ms | CLS: 0.0 | Lighthouse: 91
Stripe's marketing site is a graduate-level lesson in trust architecture for financial products.
The hero skips the pitch. The headline on Stripe.com is not "the best payment solution" — it's "Financial infrastructure for the internet." The positioning is category-defining, not benefit-listing. They're not selling features; they're claiming a category.
Code examples in the hero. For a developer-first product, showing working code in the hero is the most direct proof of capability. It says: we're built for you without needing to say it.
Progressive trust disclosure. The page is structured: claim → code proof → logo wall → detailed feature breakdown → pricing transparency → compliance signals → case studies. Each section addresses a specific objection in the order a buyer raises them.
What to take: Order your proof to match the order of buyer objections. The page structure should mirror the sales conversation.
LCP: 1.6s | INP: 71ms | CLS: 0.02 | Lighthouse: 88
Notion's site is an education in handling an extremely broad product with a landing page.
The hero narrows the frame. Rather than listing every feature, the headline picks one: "Write, plan, share. With AI at your side." This is a deliberate choice — breadth confuses; specificity converts.
Use-case navigation in the hero. Below the headline, quick links let visitors self-select: "For personal use," "For teams," "For enterprise." Instead of trying to convert everyone with one message, the site routes different buyers to different pages.
Template gallery as a conversion tool. Below the features, a gallery of use-case templates shows the product in context. Visitors who see their specific workflow represented click more.
What to take: If your product serves multiple audiences, route them from the hero — don't try to convert everyone with one message.
LCP: 1.8s | INP: 89ms | CLS: 0.0 | Lighthouse: 85
Loom is instructive because it markets a video product without using video in the hero (on mobile, at least). A deliberate performance tradeoff.
The hero CTA has specificity. "Record a video — it's free" beats "Get started" on every metric. The specificity ("record a video") tells you exactly what you'll do. The qualifier ("it's free") removes the principal objection.
The problem-first structure. Below the hero, Loom doesn't lead with features — it leads with the problem. "Stop scheduling meetings to say what a message could." The pain comes before the solution. Buyers who feel the pain convert at higher rates than buyers who see the solution cold.
What to take: Lead with the problem your product solves. Features are the evidence; the problem is the reason to care.
LCP: 2.1s | INP: 94ms | CLS: 0.01 | Lighthouse: 82
Intercom's performance is the weakest in this list. It has third-party chat widget overhead that costs approximately 0.5s of LCP — ironic for a chat company. The lesson here is negative: your own product can hurt your site if not lazy-loaded.
What it does right: the pricing page. Intercom's pricing page is a case study in making complex pricing legible. Tier comparisons, feature attribution, FAQ section, and a live chat CTA positioned at exactly the moment of highest intent.
What to take: Lazy-load your own product widget. Never let your product category be the reason your site is slow.
LCP: 1.2s | INP: 51ms | CLS: 0.0 | Lighthouse: 94
Pitch is a presentation tool competing in a market dominated by Google Slides and PowerPoint. Their site makes the design argument immediately.
The product is the hero. The above-fold area shows actual Pitch presentations — not mockups, not screenshots, but live embedded presentations in the product's visual style. The product's quality speaks before a word is read.
Animation is the proof. Every animation demonstrates a feature: slide transitions, collaboration cursors, design flexibility. The motion is not decoration; it's documentation.
Competitor framing done right. The site doesn't say "better than PowerPoint" — it shows a migration path from Google Slides with a one-click import. The competitor comparison is practical, not combative.
What to take: If your product is visually distinctive, show it above the fold. Nothing else makes the argument as efficiently.
LCP: 0.9s | INP: 29ms | CLS: 0.0 | Lighthouse: 99
Framer's site is built in Framer. This is the most direct possible proof of capability.
The site is the demo. Visitors immediately experience what Framer can produce — because they're looking at it. The performance numbers are exceptional precisely because Framer has every incentive to optimise their own showcase.
Community-generated proof. Below the hero, Framer shows templates and sites built by users. User-generated content as marketing proof is efficient and scalable in a way testimonials are not.
What to take: If you can, build your marketing site in your own product. The authenticity signal is unmatched.
LCP: 1.3s | INP: 62ms | CLS: 0.0 | Lighthouse: 92
Figma's site has an unusual strength: the illustration language. Every section uses custom illustrations that communicate collaboration concepts without photography. This creates a completely platform-independent visual language and avoids the diversity problems of stock photography.
The CTA hierarchy is visible. Primary CTA: "Get started — it's free." Secondary CTA: "Contact Sales." These are visually distinct in size, colour, and placement. The page never confuses which action they want most from you.
What to take: Custom illustration is expensive upfront and timeless in use. If you can afford it, it compounds better than stock photography.
LCP: 0.7s | INP: 35ms | CLS: 0.0 | Lighthouse: 99
Raycast is built for macOS power users. Their site is the best example we've found of highly specific positioning executed without compromise.
The hero speaks only to the target audience. "Your shortcut to everything." The copy assumes a macOS user who thinks in keyboard shortcuts. Non-target-audience visitors will find it slightly puzzling. That's intentional.
Platform specificity as design language. The UI components shown in the screenshots use macOS design patterns. Non-macOS users immediately understand this product isn't for them — and macOS users immediately feel understood.
Speed as the design principle. Every design choice — monospace fonts, high-contrast dark theme, minimal decoration — communicates speed and efficiency before a feature is listed.
What to take: Specificity converts. A site that feels built for your exact buyer is more compelling than a site that tries to appeal to everyone.
Across all ten sites, the same structural choices appear:
These aren't rules. They're what the best-performing sites consistently choose. The reasons why are the subject of every other article in this blog.
Want to know what your site does well and where it falls short? Start a conversation — we'll review your current site and give you honest feedback.
We take on a small number of projects each quarter. Tell us what you're building.