How do I make my website load faster?

A fast website feels better, ranks better, converts better, and costs less (because you’re shipping fewer bytes and doing less work on the server). The good news: most speed wins come from a handful of repeatable fixes.

Below is a practical, prioritized guide you can follow whether you run a simple marketing site or a large web app.

Measure first (so you don’t guess)

Before changing anything, capture a baseline and identify what’s actually slow.

Tools to use

• Chrome DevTools → Lighthouse (quick audit + Core Web Vitals hints)
• Chrome DevTools → Network tab (what’s big, what blocks rendering, what’s uncached)
• WebPageTest.org (waterfall view, real-world test locations/devices)
• Performance panel (if the page “loads” but feels janky)

Metrics that matter

• LCP (Largest Contentful Paint): how fast the main content appears
• INP (Interaction to Next Paint): how responsive it feels
• CLS (Cumulative Layout Shift): visual stability

Pick one or two pages (homepage + a heavy inner page) and focus there first.

Biggest wins first: reduce what you ship

Optimize images (usually the #1 win)

• Serve modern formats: AVIF (best) or WebP
• Resize to the actual display size (don’t send 4000px images into a 400px slot)
• Use responsive images (srcset) so mobile downloads smaller files
• Lazy-load below-the-fold images

Example:

<img
  src="/img/hero-800.webp"
  srcset="/img/hero-800.webp 800w, /img/hero-1600.webp 1600w"
  sizes="(max-width: 800px) 100vw, 800px"
  loading="lazy"
  decoding="async"
  alt="..."
/>

Remove or delay heavy JavaScript

JavaScript can block rendering and tie up the main thread.

• Delete unused code and dependencies
• Split bundles (load only what each page needs)
• Defer non-critical scripts

<script src="/app.js" defer></script>

Minify and compress assets

• Minify JS/CSS/HTML
• Enable Brotli (best) or Gzip compression on your server/CDN

Make rendering faster (what users feel)

Eliminate “render-blocking” CSS/JS

• Inline critical CSS for above-the-fold content
• Load the rest asynchronously
• Avoid huge CSS frameworks if you use only a small portion

Reduce expensive layout shifts

• Always set image/video dimensions (or aspect-ratio)
• Avoid injecting banners/toolbars above content after load
• Reserve space for ads/embeds

.hero {
  aspect-ratio: 16 / 9;
}

Use smarter font loading

Fonts can cause invisible text or layout shifts.

• Prefer system fonts when possible
• If using web fonts: self-host, subset, and preload key fonts
• Use font-display: swap;

@font-face {
  font-family: "MyFont";
  src: url("/fonts/myfont.woff2") format("woff2");
  font-display: swap;
}

Speed up the server and caching

Enable strong caching for static files

Static assets should be cached “forever” with content-hashed filenames.

• Example: app.83f1c2.js,
styles.a91b0.css

Recommended headers for hashed assets:

• Cache-Control: public, max-age=31536000, immutable

Reduce TTFB (Time to First Byte)

If the initial server response is slow:

• Add caching (page caching, fragment caching, query caching)
• Optimize database queries + add indexes
• Avoid doing heavy work on every request
• Use faster hosting, more CPU, or better regions

Use a CDN

A CDN helps by:

• Serving files closer to users
• Offloading bandwidth
• Often providing image optimization, Brotli, HTTP/2/3, edge caching

Use modern delivery protocols

• HTTP/2 (or HTTP/3) helps multiplex requests efficiently
• Enable TLS 1.3 if available
• Consider Early Hints (103) and preconnect for critical third-party domains:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Be careful with third-party scripts

Analytics, chat widgets, A/B testing tools, tag managers, and ad networks can dominate load time.

Tactics:

• Remove what you don’t truly need
• Load third-party scripts after first paint or on interaction
• Use server-side tagging where possible
• Audit regularly (these scripts change over time)

Keep it fast over time (monitoring)

Performance regressions happen silently. Add:

• Automated Lighthouse checks in CI
• Real User Monitoring (RUM) to track LCP/INP/CLS for actual visitors
• Budgets: max JS size, max image size, max requests

Quick checklist (copy/paste)

Images

• Convert to AVIF/WebP
• Resize properly + srcset
• Lazy-load below fold

JavaScript/CSS

• Remove unused dependencies
• Code-split bundles
• defer non-critical scripts
• Inline critical CSS

Caching + CDN

• Long cache for hashed assets (immutable)
• CDN enabled
• Brotli/Gzip on

Server

• Reduce TTFB (cache, DB indexes, faster hosting)
• HTTP/2 or HTTP/3 enabled

Third-party

• Delete or delay non-essential scripts