How I made this website fast: a practical checklist

Site speed affects both user experience and search visibility. Google measures page experience with a set of metrics called Core Web Vitals. Before optimizing anything, you need to know what is being measured.

The metrics

• LCP (Largest Contentful Paint): how long the biggest visible content takes to appear. Target: under 2.5 s.
• CLS (Cumulative Layout Shift): how much content jumps while loading. Target: under 0.1.
• INP (Interaction to Next Paint): how fast the page reacts to a tap or click. Target: under 200 ms.

Measure with Lighthouse (inside Chrome DevTools) or PageSpeed Insights — and read the mobile result, which is usually the worse one.

Eight things that actually work

1. Optimize images. Usually the single biggest win: correct dimensions, WebP, sensible quality, srcset (image compression guide, what is WebP?).

2. Load the hero image early. Mark the LCP element with fetchpriority="high" (and preload if needed); lazy-load everything below the fold.

3. Set width and height. On images and videos, so space is reserved and CLS stays low.

4. Slim the fonts. Only the weights you use, woff2, font-display: swap, self-hosted when possible.

5. Ship less JavaScript, deferred. Heavy libraries (animations, sliders) only on pages that need them. Render-blocking JS is a classic cause of bad LCP.

6. Configure caching. Static assets (images, fonts, hashed CSS/JS) get long-lived cache; HTML gets short cache or revalidation. On Vercel or Netlify, use the headers config.

7. Compress text. Gzip or Brotli for HTML, CSS, JS and JSON. Most modern hosts do it automatically — verify.

8. Use a CDN. Serving files from the nearest point to the user cuts network latency. And if your audience is in Iran, test that the CDN you picked is actually reachable.

A note on CDN libraries

If styling runs through an in-browser build script (like the Tailwind CDN version), the work happens on the visitor's machine. For production, build the CSS ahead of time and ship only the classes you use — that's what we did here (the migration story).

Real numbers from this site

After the image, font and CSS work, the homepage transfers about 450 KB on mobile with no heavy JS — the FX layer (GSAP + tilt) simply never loads on phones. Most of that weight is the font and two hero images, which are cached after the first visit.

Common questions

Do I need to chase a 100 score? No. The vitals thresholds matter more than the number; a 90 with real fast loading beats a 100 with tricks.

Which one change gives the most? Almost always image optimization. Start there.