Lighthouse 90+ Without Killing the Design

“Make it beautiful” and “make it a 96 on mobile” are not enemies. They become enemies when performance is postponed until after the art direction is emotionally locked and every asset is sacred. This spoke is how I keep film-grade work alive under Lighthouse and Core Web Vitals without turning the site into a sterile brochure. Parent pillar: Websites That Feel Like Films.

Fast website with animations

Animations are allowed. Unbudgeted animations are not. The path to a fast animated site:

1. Static fold that paints quickly
2. Modern image formats at correct dimensions
3. Fonts loaded with intent
4. JS islands only where interaction needs them
5. Motion limited to transform/opacity with teardown
6. Measurement on mid-tier Android, not only on M3 MacBook lab scores

If your animation plan requires hiding LCP text until a JS timeline runs, the plan is wrong. Fix the plan.

Image pipeline

• Prefer AVIF/WebP with fallbacks as needed
• Widths matched to layout (1x/2x, not 4000px everywhere)
• Hero prioritized; below-fold lazy
• Art-direct crops so you are not shipping unused pixels
• Avoid PNG for photographic heroes

Designers should see weight budgets the way they see color tokens. A “small tweak” that swaps in an uncompressed shoot can erase a week of perf work.

Fonts

• Two families max for most marketing sites
• Preconnect to font CDNs
• Subset when you control the files
• font-display: swap or optional for non-critical faces
• Prefer variable fonts when they reduce total bytes

Invisible text during font load hurts UX and metrics. Design the fallback stack so swap is not a layout explosion.

JavaScript

Ship HTML for the story. Hydrate carousels, forms enhancements, and motion on visibility or interaction when the stack allows. A 900kb homepage bundle for a marketing site is usually a process failure, not a requirement of taste.

Core Web Vitals for brand sites

LCP

Largest Contentful Paint is often the hero image or headline block. Optimize the actual LCP node. Priority hints, correct formats, and server/CDN TTFB matter. Brand films as autoplay backgrounds are LCP poison; use stills or controlled video.

INP / responsiveness

Heavy main-thread work from analytics, chat, motion libraries, and third-party embeds destroys interaction responsiveness. Audit third parties like they cost rent — because they do.

CLS

Reserve space for images, embeds, and consent banners. Fonts that reflow a three-line headline will move your CTA under a thumb. Set sizes. Avoid injecting sticky bars after load without reserved space.

What to cut first when scores slip

1. Ambient video
2. Extra webfont weights
3. Chat widgets on first load
4. Auto-carousels
5. Scroll libraries fighting each other
6. Decorative WebGL
7. Duplicate analytics tags

What not to cut first: readable type contrast, real photography that defines the brand, or the primary CTA clarity. Perf theater that deletes the brand is not a win.

Lab vs field

Lighthouse is a lab tool. Pair it with field data (CrUX, RUM) when you have traffic. A staging 95 that becomes a field 70 means real devices and third parties differ from your lab defaults. Test with extensions off, and also with a typical marketing tag soup if that soup will exist in production — then fight to remove the soup.

Performance as an art direction constraint

Give design constraints up front:

• Max hero weight
• Max font files
• Motion budget table
• Embed policy (one player, below fold, etc.)

Constraints produce better design than unlimited Figma followed by an engineer saying no. The best brand sites I ship treat performance as part of the aesthetic: snappy feels expensive.

Stack notes

Astro and other static-first shells make high scores easier because HTML arrives complete. Framer and Webflow can still perform when you are disciplined with assets and interactions; they punish carelessness faster. Custom React SPAs can hit 90+ but you must earn it with islands, code splitting, and ruthless dependency control.

Pair with Motion Systems That Ship for the animation half of this problem.

Sprint performance bar

On Spurlock Studios website sprints, we do not treat Lighthouse as a vanity screenshot. We check mobile on a real phone path before calling the fold done. If you need that bar on your domain, Explore /websites or book a sprint at /contact?intent=websites-sprint.

A practical optimization order that protects design

When a brand site scores poorly, resist random thrashing. Work this order:

1. Measure the real LCP element in DevTools — optimize that asset and server path first.
2. Kill duplicate tags and defer non-critical third parties.
3. Fix CLS from fonts, banners, and embeds with reserved space.
4. Reduce JS on the critical path; move motion and widgets later.
5. Re-encode media; redesign only if the hero concept requires impossible weight.
6. Then trim motion complexity.

Teams that start by deleting brand photography to chase a two-point gain usually regret it. Bytes first, art direction second, motion third.

CDN, hosting, and TTFB

Beautiful frontends on sleepy origins still feel slow. Use a CDN. Cache HTML where your architecture allows. Image CDNs (including platform tools like Netlify Image CDN) help when configured with sane defaults. Preview deploys should use comparable compression so you do not discover weight only in production.

Consent banners and CLS

Privacy banners are frequent CLS offenders. Reserve space or accept an overlay pattern that does not shove content. Coordinate with legal/marketing early — last-minute banner installs before launch are a classic Core Web Vitals regression.

Case study mindset without fake numbers

I do not publish invented “we went from 42 to 99 overnight” fairy tales. The honest pattern is: remove accidental weight, protect the LCP path, budget motion, and re-check on a phone. Gains come from discipline. If a site must show a 4K film loop behind type, admit the metric cost or change the creative.

Design QA paired with perf QA

Same build, two checklists:

Design: brand readable, fold job clear, spacing on system, states for hover/focus. Perf: LCP node optimized, lazy boundaries correct, JS partitioned, third parties justified.

Ship only when both pass. This pairing is how cinema-grade work survives contact with real networks — the same thesis as Websites That Feel Like Films.

Mobile CPU is part of the medium

Thermal throttle is real. A scroll page that runs many blur filters will melt frames after twenty seconds even if the first Lighthouse sample looked fine. Prefer long-session sanity: scroll the full homepage for a minute on device. Jank that appears late still trains users that the brand feels cheap.

Reporting to stakeholders

Show before/after Lighthouse mobile, a filmstrip of loading, and a phone recording — not only a desktop score screenshot. Stakeholders who approve heavy video need to see the cost. Make the tradeoff visible and let them choose with eyes open. Often they choose the still + craft move once they watch the stutter.

When 90+ is the wrong primary KPI

A live event microsite with unavoidable streams may never hit the same scores as a static brochure — and that can be acceptable for a 72-hour campaign if the business goal is the stream. Be explicit. For evergreen brand and studio sites, strong vitals are part of the product quality bar, not a nice-to-have. Explore /websites or book a sprint at /contact?intent=websites-sprint.

Animation budgets in milliseconds and kilobytes

Translate vibes into numbers. Example budget: hero entrance under 800ms CPU on mid Android; total JS for motion under an agreed cap; no more than one scroll-scrubbed scene on the homepage; images under weight caps per slot. Put the numbers in the project brief. When a new idea arrives mid-build, ask which budget line it spends. If the answer is “none, we will just add it,” that is how 90 becomes 70.

Prefetch and speculation — use carefully

Speculative loading can speed multi-page journeys and also waste bandwidth on mobile. Prefer intentional prefetch for the most likely next step (Work → Contact) rather than prefetching everything. Measure. Marketing sites with heavy media can punish users who were “helped” by aggressive speculation.

Third-party embed triage

YouTube, Maps, calendars, and social embeds are convenience with a cost. Patterns that help: facade technique (click-to-load), static map images linking out, self-hosted critical clips when small enough, and delaying non-essential embeds until after interaction. A brand site that loads five embeds on the homepage is usually designed as a scrapbook, not a composition. Cut until the page has one job again, then re-introduce embeds with facades where they still earn their place.

Continuous performance ownership

Assign an owner after launch. Perf is not a one-time certificate. When marketing adds a pixel, someone re-runs mobile Lighthouse and a phone smoke test. Put it in the monthly checklist beside content updates. Orgs that treat performance as a launch souvenir watch scores decay quietly while blaming “the algorithm” for fewer leads.

Dark UI and performance myths

Dark cinematic UIs do not automatically score better or worse. What matters is asset weight, script cost, and layout stability. Near-black backgrounds can hide compression artifacts in photos, which sometimes lets you use slightly smaller files — that is a craft bonus, not a free pass for 3MB hero films. Measure the build you actually have.

Reading time and perceived performance

Users judge speed before Lighthouse does. A clear fold that appears quickly feels faster than a blank stage that becomes perfect at 2.5s. Skeleton states help when used honestly; fake progress bars that stall destroy trust. Optimize for meaningful paint of brand + offer, not only for a green circle in a report PDF.

FAQ

Can I have a fast website with animations?

Yes. Keep critical content visible without JS, animate transform/opacity, budget scroll scenes, and optimize media first. Animation is rarely the only score killer — images, fonts, and third parties usually lead.

Which Core Web Vitals matter most for brand sites?

LCP for first impression, INP for interaction quality, CLS for layout stability. Brand sites often fail LCP via hero media and fail INP via tag managers and chat.

Is 90+ on desktop enough?

No. Mobile is the honest run. Desktop-only celebrations are how janky phone experiences ship.

Should I remove all motion to hit 90?

Remove unbudgeted motion and expensive properties. Keep micro-interactions and one earned entrance if they do not harm LCP/INP. Blind deletion can make a site feel broken without fixing the real byte problems.

Do Framer and Webflow prevent high Lighthouse scores?

They do not prevent them, but they make asset discipline mandatory. Oversized images and heavy interactions will show up immediately. Custom static stacks give more control, not automatic virtue.

How often should we re-run performance checks?

At fold lock, after motion pass, after marketing tags are added, and after launch. Tags added “just for a campaign” are a classic regression source.