Browser-Aware Web Design

Modern websites should be visually rich but mechanically boring. Design pages that work with the browser's rendering pipeline, so the first screen appears fast, motion stays smooth, and the layout never shifts while users are reading or acting.

Adapted from Addy Osmani's writing on modern browser internals.

Paste into your AI chat

Copy the entire guide as markdown to use as context in Cursor, Claude, ChatGPT, or any AI tool.

The browser pipeline

Design so the browser can discover important things early and never wait on a later step.

1

Discover the HTML

2

Discover critical resources

3

Build the DOM

4

Build the CSSOM

5

Calculate styles

6

Calculate layout

7

Paint pixels

8

Composite layers

9

Run JavaScript

10

Respond to input

Design principles

1. Make the first screen cheap

The first viewport should be easy for the browser to construct.

2. Prioritise the real LCP element

Treat the hero/product/lead image as a first-class asset: preloaded, responsive, and high-priority.

3. Do not block HTML parsing without a reason

Classic scripts block parsing by default and delay page discovery.

4. Treat CSS as critical infrastructure

The browser needs CSS to compute styles, layout, and paint, not just to decorate.

5. Prefer compositor-friendly motion

Animate transform and opacity; be careful with anything that forces layout or paint.

6. Use will-change sparingly

A targeted optimisation for a known active element, not a blanket page rule.

7. Avoid layout thrashing

Repeated JS write-then-read of layout values forces the browser to recompute geometry.

8. Design stable layouts

Cumulative layout shift is a design problem before it becomes an engineering one.

9. Make rich media earn its cost

Large visuals are often worth it, but treat them as budgeted assets.

10. Keep third-party scripts on a leash

They can dominate main-thread time and delay interactivity.

11. Use prefetch and prerender for likely next steps

Prepare predictable next navigations, but only where the path is likely.

12. Hydration should enhance, not rescue

Do not let hydration become a hidden design dependency.

Website design checklist

Use this during design review or implementation handoff.

First viewport

  • One clear LCP candidate, obvious above-the-fold content
  • Page looks coherent before JavaScript runs
  • Custom fonts limited, preloaded, or gracefully swapped
  • Hero/media dimensions stable; primary image loaded eagerly

Layout

  • Media and card dimensions constrained
  • Components handle long text without breaking
  • Loading states match the size of loaded states
  • Embeds, ads, maps, and videos given reserved space
  • Mobile uses appropriately cropped assets

Motion

  • Core animations based on transform and opacity
  • Layout-changing animations rare and intentional
  • will-change used only for active animated elements
  • Page remains usable with reduced motion

JavaScript & navigation

  • Non-critical scripts deferred; third-party scripts isolated
  • Expensive components lazy-loaded below the fold
  • No unnecessary client rendering for static content
  • Likely next pages prefetched only when the path is predictable

Practical patterns

What to reach for, and what to avoid, by page type.

Product landing page

Recommended: Server-rendered hero content, one optimised product visual, critical CSS early, deferred analytics, motion limited to fades and transforms.

Avoid: Full-screen loading animations, heavy background video, multiple font families, and hero images loaded via JavaScript.

SaaS dashboard

Recommended: Dense but stable layout, skeletons that preserve panel dimensions, virtualised long tables, server-rendered shell, deferred charts below the fold.

Avoid: Panels resizing independently on load, charts blocking the whole dashboard, JS masonry for core layout, controls that shift when values change.

Editorial / content site

Recommended: Fast text rendering, optimised lead image, minimal blocking scripts, stable ad/embed slots, good typographic fallbacks.

Avoid: Third-party embeds in the article path before content, late font swaps, and ads inserted without reserved dimensions.

Ecommerce product page

Recommended: Prioritised product imagery with responsive sets, stable purchase controls, lazy-loaded reviews, prefetched cart/checkout when intent is clear.

Avoid: Loading the gallery after hydration and layout shifts around price, variants, or the buy button.

Red flags in a design

Signs the browser may struggle to render the page well.

  • The page starts as a blank app shell.
  • The hero depends on a client-side API call.
  • The layout needs JavaScript to know its own size.
  • Every scroll section animates layout properties.
  • The main image is a CSS background with no preload plan.
  • The loading state is a spinner, then everything appears at once.
  • The page has five third-party scripts in the head.
  • All cards have dynamic heights and lazy-loaded media with no aspect ratio.
  • The mobile page downloads the desktop hero.

Want the full guide as context for your AI coding assistant?