How to make your website load fast

By Ali Ghafori · 3 min read

Speed isn't a luxury for a website. Visitors leave slow pages, especially on mobile connections, and Google uses page experience signals as part of how it ranks sites. Fortunately, most slow websites are slow for the same few reasons, and fixing them doesn't require advanced engineering. Here's where to look and what to do.

Measure first

Don't guess — measure. Free tools show exactly what's slowing a page down:

• PageSpeed Insights (pagespeed.web.dev): tests mobile and desktop and shows real-user data when your site has enough traffic.
• Lighthouse, built into Chrome DevTools: run it locally on any page.
• The Network tab in DevTools: see every file the page downloads, its size, and how long it took.

Understand Core Web Vitals

Google summarizes the user experience with three metrics:

• Largest Contentful Paint (LCP): how quickly the main content, often a large image or heading, appears. Aim for under 2.5 seconds.
• Interaction to Next Paint (INP): how quickly the page responds when someone taps or clicks. Aim for under 200 milliseconds.
• Cumulative Layout Shift (CLS): how much the layout jumps around while loading. Aim for under 0.1.

1. Optimize images — usually the biggest win

Images are typically the heaviest part of a page. A single photo straight from a camera or AI generator can be several megabytes.

• Resize images to the largest size they're actually displayed at. A 4000-pixel-wide photo shown in an 800-pixel column wastes most of its data.
• Use modern formats. WebP and AVIF are usually much smaller than JPEG or PNG at similar quality.
• Compress sensibly — quality around 75–85 is rarely distinguishable from 100.
• Lazy-load images below the fold with loading="lazy", but not the main image at the top.
• Always set width and height attributes so the browser reserves space and the layout doesn't jump (this fixes much of CLS).

<img src="/images/work.webp" width="800" height="500"
     alt="Edited video project timeline" loading="lazy">

2. Reduce JavaScript

JavaScript is expensive: it must be downloaded, parsed and executed, which hurts both loading and responsiveness, especially on cheaper phones.

• Question every library and plugin. Do you need a whole framework for a simple page?
• Load non-essential scripts with defer so they don't block rendering.
• Be selective with third-party scripts — chat widgets, trackers and embeds often add more weight than the rest of the site combined.

3. Keep CSS lean and fonts under control

• Remove unused CSS from large frameworks.
• Use one or two font families and only the weights you need. System font stacks load instantly.
• If you use web fonts, serve them as WOFF2 and use font-display: swap so text appears immediately.

4. Turn on compression and caching

On the server, compress text files and let browsers cache static files. In Nginx:

gzip on;
gzip_types text/css application/javascript image/svg+xml;

location ~* \.(css|js|webp|avif|jpg|png|svg|woff2)$ {
    expires 30d;
    add_header Cache-Control "public";
}

When you change a cached file, change its name (for example style.v2.css) so browsers download the new version.

5. Use HTTP/2 and a CDN

HTTP/2 (or HTTP/3) lets the browser download many files over one connection efficiently — enable it on your web server; it requires HTTPS. A CDN stores copies of your site in data centers around the world, so visitors download from somewhere nearby. For a global audience, a CDN is one of the easiest big improvements.

6. Make the server respond quickly

If the first byte of HTML takes a long time to arrive, everything else waits. Static sites are naturally fast here. For dynamic sites, use page caching, keep the database tuned, and make sure the server isn't overloaded.

7. Prioritize what's above the fold

Help the browser show the visible part of the page first: keep the main image small and preloaded if needed, avoid render-blocking scripts in the <head>, and don't hide content behind animations that wait for JavaScript.

Checklist

Measure with PageSpeed Insights · resize, compress and convert images to WebP · set image dimensions · lazy-load below-the-fold images · cut unnecessary JavaScript and third-party scripts · limit fonts · enable compression and caching · use HTTP/2 and a CDN. Work through these in order and most sites go from sluggish to fast.

← Back to all articles