01 / 08 Performance guide

How to make a landing page feel premium without making it slow

Visitors decide whether a page feels premium in its first second, and that second is spent mostly on the network and the first render. The premium feel has to come from typography, spacing and composition that arrive with the page, not from code that arrives after it.

Written by Iavor Kolev, software architect and product builder

26 KB

HTML, CSS and script on this site's service pages, gzipped, before enhancement

0.4 s

Largest contentful paint on the same pages in the desktop lab test

0

Web font files requested

02 / 08 Principle

Premium is a first-screen decision, not a feature list

A visitor judges quality before any animation has loaded. Whatever makes the first screen feel considered has to arrive with the HTML.

Iavor Kolev

Most slow premium sites fail for the same reason: the impression depends on assets that arrive late. A hero that waits for a font file, a video or an animation library first shows a blank or shifting screen, and that is the impression that sticks.

The reliable approach is to build the page in two layers. The first layer is the complete page: content, hierarchy, typography and layout, delivered as static HTML and CSS. The second layer is enhancement: motion, 3D and interaction that load later and can fail without taking anything away.

03 / 08 Budget

Set a byte budget before the design is final

A budget turns "make it fast" into a constraint that designers and developers can both check. These four lines are where most of it is spent.

01 / Critical path

Everything the first screen needs, and nothing else

On this site a service page's HTML, CSS and interaction script total about 26 KB gzipped. Anything outside that set has to justify why the first screen cannot render without it.

02 / Fonts

Earn the premium look from typography, not font files

This site uses system fonts only: no font requests, no invisible text while a file loads and no layout shift when it arrives. Scale, weight, spacing and contrast do the work a custom typeface is usually hired for.

03 / Media

Give every visual a size and a reason to load early

Declare dimensions so nothing shifts, serve modern formats and load anything below the first screen lazily. Treat a hero video or carousel as enhancement unless it is the product itself.

04 / Third parties

Treat every external tag as a cost

Analytics, chat widgets and embeds each add requests, main-thread work and privacy obligations. This site records conversion events with a first-party beacon that sends no cookies or identifiers.

04 / 08 Motion

Make motion an enhancement, never a dependency

Motion is where premium sites usually lose their speed. It can stay, as long as the page is complete without it.

  • Content first

    Every word is in the static HTML

    Headings, copy, links and calls to action are rendered at build time. The page reads correctly with JavaScript disabled, which also means search engines receive the full content on the first request.

  • Load late

    Heavy scripts wait for idle time or a first interaction

    The scroll choreography and the 3D sculpture on this site load after the first pointer, scroll, touch or key event, or after 1.4 seconds, whichever comes first. They never compete with the first render.

  • Respect the visitor

    Reduced motion means nothing is downloaded

    When a visitor asks their operating system for reduced motion, the animation code is not fetched at all, rather than downloaded and paused.

  • Match the device

    Expensive effects run where they are affordable

    The WebGL sculpture runs only on screens wider than 820 pixels. Phones receive the same content in a static composition and never download the three.js chunk.

If turning JavaScript off breaks the page, the animation was carrying content it should never have owned.

05 / 08 Craft

Premium signals that cost almost nothing to load

Most of what reads as expensive is decided in CSS and copy, not in scripts.

Typography

A clear scale with deliberate contrast

Use few sizes, consistently, with generous line height for reading and tight tracking for display headings.

Composition

Space and alignment instead of decoration

A strict grid, hairline rules and consistent margins make a page feel engineered, and they add no requests.

Restraint

One palette and one idea per screen

This site is fully monochrome. Removing colour choices makes hierarchy depend on scale and spacing, which also keeps the stylesheet small.

Precision

States, focus and copy that feel finished

Visible focus rings, clear hover states, accurate labels and specific headings are what visitors notice as care. They are cheap in bytes and expensive in attention.

06 / 08 Measure

Measure it before every release, not after launch

Performance regresses quietly, one tag or asset at a time. The only reliable defence is a gate that fails the build.

  • Lab gate

    Lighthouse runs on four targets before any deploy

    The homepage and a service page are audited on mobile and desktop. The latest run scored 98 to 100 for performance and 100 for accessibility, SEO and best practices on all four.

  • Budgets

    Numbers that fail the build

    The interaction script has an 8 KiB ceiling enforced by the smoke check, and the release fails when a Lighthouse score falls below its threshold.

  • Stability

    Zero layout shift is a design requirement

    Every audited page measures a cumulative layout shift of 0. That comes from sizing everything up front, not from tuning after the fact.

  • Field data

    Confirm the result with real visitors

    A lab score is a controlled test. Real-user Core Web Vitals from Search Console or the Chrome UX Report show whether the budget holds on actual devices and networks.

07 / 08 Evidence

See the approach in shipped work

Each of these was built on the same two-layer model: a complete static page first, enhancement second.

08 / 08 Next step

Put these five questions to any landing page proposal

Ask them before design starts. The answers show whether speed is designed in or merely hoped for.

Five questions

  1. What does the first screen need, and how many kilobytes is that?
  2. Which fonts, images and scripts load before the first render, and why?
  3. What happens when JavaScript fails or the visitor prefers reduced motion?
  4. Which effects run on phones, and which are desktop-only?
  5. Which numbers fail the release if performance regresses?