Introduction

A fast marketing site is one that reassures, holds attention and converts. Yet many web projects still suffer from avoidable slowness: oversized images, unnecessary scripts, poorly loaded fonts.

Here are five simple techniques I apply systematically on my projects to reach a Web Vitals score above 95 without sacrificing visual quality.


1. Optimise images at the source

Images are often the first cause of slowness. A single uncompressed visual can easily add several seconds to load time.

Good habits:

  • Convert files to WebP or AVIF.
  • Serve sizes matched to each breakpoint (srcset or picture).
  • Always set dimensions (width / height) to avoid CLS (Cumulative Layout Shift).

In Astro or React you can automate all of this with plugins like astro/assets, or next/image if you’re on Next.js.


2. Load fonts intelligently

External fonts are often underestimated in a performance audit. Every font, every style or weight is a file to download, sometimes several hundred kilobytes.

Tips:

  • Preload your main font with <link rel="preload">.
  • Use the woff2 format, which is lighter.
  • Where possible, host it locally rather than going through Google Fonts.

Above all, always define a fallback font to avoid the flash of invisible text (FOUT):

font-family: "Inter", system-ui, -apple-system, sans-serif;

3. Strip out non-essential JavaScript

This is one of the most neglected optimisations. On a marketing site, most interactions are simple: opening a menu, animating a section, showing a carousel. And yet you often find entire libraries imported for three lines of logic.

Every kilobyte of JavaScript counts: the bigger your bundle grows, the slower your site gets, especially on mobile.

Good habits:

  • Remove unused scripts (legacy modules, trackers, third-party widgets).
  • Load interactive code at the moment it becomes visible, using IntersectionObserver.
  • Prefer CSS or Framer Motion animations, depending on the need.
  • And above all, limit dependencies: a well-written micro-function often beats a whole package.

Astro already helps a lot here: as long as a component isn’t marked with client:load, client:idle or client:visible, it ships no client-side JavaScript at all. Simple, effective, and it stops you overloading the browser without noticing.


4. Make the browser cache work for you

Even the lightest site loses responsiveness if it has to reload everything on every visit. The browser cache is a simple, powerful lever for faster navigation.

Once a visitor has loaded your site, the browser can keep:

  • images,
  • CSS and JS files,
  • and even some fonts, for days or weeks.

Worth checking:

  • That static files get a long cache (Cache-Control: max-age=31536000).
  • That files are compressed with gzip or brotli.
  • That assets are versioned with a hash in the filename (e.g. main.abc123.js).

On platforms like Vercel, Netlify or Coolify, this is already configured. But a quick pass through Lighthouse or WebPageTest always helps confirm that no file escapes the rule.


5. Watch Web Vitals without becoming obsessed

The Core Web Vitals (LCP, CLS, INP) have become the key indicators of a healthy site. No need to turn it into a religion, but aiming above 95 guarantees real smoothness, and that’s often what separates an “okay” site from one people want to stay on.

What I watch first:

  • LCP (Largest Contentful Paint) → the main visual should appear in under 2.5 seconds.
  • CLS (Cumulative Layout Shift) → avoid any element shifting during load.
  • INP (Interaction to Next Paint) → make sure interactions feel instant.

These optimisations aren’t just “technical”: you feel them. A site that responds immediately builds trust. And a confident user becomes a lead, and sometimes a client.


Conclusion

Improving performance doesn’t always require complex tools or audits. More often it’s the sum of small details handled well: compressed images, JavaScript kept to the essentials, a properly configured cache.

Those quiet, consistent adjustments are what get you Web Vitals scores above 95 without particular effort. And they’re what make a client instantly notice the difference between a site that’s merely pretty and one that’s fast, smooth and under control.


Read next → Astro vs Next.js: why I picked Astro for my freelance portfolio