At a glance

The most effective levers for a fast website: compress images as WebP and size them correctly, remove unnecessary JavaScript libraries, enable caching, lazy-load images below the fold, and use fast hosting. Goal: Core Web Vitals in the green zone (LCP under 2.5 s, CLS under 0.1, INP under 200 ms).

Every second counts. If your website takes too long to load, you lose many of your visitors. They click back, choose another result and never come back. At the same time, loading speed is an official Google ranking factor. Slow websites are pushed down in the search results.

In this guide I show you step by step how to make your site faster, from basics like image optimisation to advanced techniques like critical CSS and lazy loading.

Core Web Vitals: the 3 metrics Google measures

Google evaluates your site's performance via three concrete metrics, the Core Web Vitals:

1. Largest Contentful Paint (LCP)

Measures how fast the largest visible element of the page loads: typically a header image, video or big block of text.

Good: under 2.5 seconds
Needs improvement: 2.5–4.0 seconds
Bad: over 4.0 seconds

2. Interaction to Next Paint (INP)

Measures how fast the page reacts to user interactions, clicks, taps, keystrokes. Replaces the old First Input Delay (FID) since 2024.

Good: under 200 milliseconds
Needs improvement: 200–500 ms
Bad: over 500 ms

3. Cumulative Layout Shift (CLS)

Measures how much elements move on the page while it's loading. You know the feeling? You want to click a button but suddenly an image slides in and you click something else. That's high CLS.

Good: under 0.1
Needs improvement: 0.1–0.25
Bad: over 0.25

Image optimisation: the biggest lever

On most websites, images make up the largest share of the data volume. This is where the biggest optimization potential lies.

Choose the right image format

WebP: the best all-round format for 2026. Up to 30% smaller than JPEG at the same quality. Supported by all modern browsers
AVIF: even better than WebP (up to 50% smaller) and supported by all current browsers. Ideal as your first choice with WebP as a fallback
JPEG: for photos when WebP/AVIF aren't an option. Quality 75–85% is usually enough
PNG: only for images with transparency or sharp graphics/icons. Too big for photos
SVG: for logos, icons and simple graphics. Infinitely scalable, tiny file size

Size images correctly

One of the most common problems: an image is 4000 px wide but only shown at 800 px. The browser still has to download the full image and then scale it. Solution:

Create images at actual display size (max 2x for Retina displays)
Use the srcset attribute for responsive images: deliver different sizes for different screens
Always set width and height in HTML: this avoids layout shifts (CLS)

Image compression

Even after choosing format and size you can compress images further:

Squoosh (squoosh.app): free Google tool, directly in browser
TinyPNG (tinypng.com): compresses PNG and JPEG with minimal quality loss
ShortPixel: WordPress plugin for auto compression on upload

Rule of thumb: no single image on your site should be larger than 200 KB. Hero images max 300 KB. Thumbnails under 50 KB.

Lazy loading: only load what's visible

Lazy loading means images and other resources only load when the user scrolls to them. Anything outside the visible area (viewport) loads on demand.

Simplest implementation:

<img src="image.webp" loading="lazy" alt="description" width="800" height="600">

The loading="lazy" attribute is supported by all modern browsers and requires no JavaScript. Important: the first visible image (hero, logo) should not be lazy-loaded: that would hurt LCP.

Caching: speed up repeat visits

Browser caching stores static files (CSS, JavaScript, images, fonts) locally on the visitor's device. On the next visit these files don't have to be downloaded again.

Set cache-control headers

Via the web server (e.g. nginx, Apache, Caddy) you set how long files are cached:

Images, fonts: 1 year (they rarely change)
CSS and JavaScript: 1 month to 1 year (with versioning in the filename)
HTML files: short or no caching at all (should always be up to date)

CDN (Content Delivery Network)

A CDN distributes your files across servers worldwide. The nearest server delivers files: reducing latency considerably. For German sites with German audiences a CDN with servers in Frankfurt or Amsterdam is ideal.

Cloudflare: free base plan with CDN, DDoS protection and auto optimisation
Bunny CDN: cheap, powerful, EU servers

Optimise CSS and JavaScript

CSS optimisation

Minification: remove whitespace, comments and unnecessary characters. Tools: cssnano, clean-css
Critical CSS: extract the CSS needed for the above-the-fold area and inline it. The rest loads asynchronously
Remove unused CSS: many websites load plenty of CSS that isn't used on the current page. Tools: PurgeCSS, UnCSS

JavaScript optimisation

Defer and async: don't load JS render-blocking: <script defer src="..">
Tree shaking: with bundlers (Webpack, Vite): only ship the code actually used
Minimise third-party scripts: every external script (analytics, chat widgets, social buttons) slows the page. Check whether each is really needed

Optimise fonts

Web fonts (Google Fonts, Adobe Fonts) can heavily influence load time. Every font family and weight is an extra file.

Max 2 font families and 3–4 weights
Set font-display: swap: shows system font immediately and swaps once the web font loads
Host fonts locally instead of loading from Google Fonts, saves a DNS lookup and is more GDPR-friendly
Use WOFF2 format: the most compact web font format
Subsetting: load only the characters you need (Latin letters, no Cyrillic etc.)

Improve server performance

Hosting quality

Cheap shared hosting with dozens of other sites on the same server is the most common server-side performance killer. For a fast site you need:

Fast Time to First Byte (TTFB), ideally under 200ms
SSD storage: much faster than classic HDDs
Server in Germany: shortest pipe for German visitors
HTTP/2 or HTTP/3: faster data transfer than HTTP/1.1

Enable compression

Gzip or Brotli compression reduces file size of HTML, CSS and JavaScript by 60–80%. Brotli is newer and even more efficient than Gzip. Both should be enabled on the server.

The best tools for speed analysis

Google PageSpeed Insights (pagespeed.web.dev): the standard test, based on Lighthouse. Gives a 0–100 score and concrete suggestions
GTmetrix (gtmetrix.com): detailed report with waterfall. Shows exactly which files take how long
WebPageTest (webpagetest.org): the pro test. Various locations, connection speeds and browsers
Chrome DevTools: Network tab shows load times in real time, Performance tab measures Core Web Vitals
Google Search Console: shows Core Web Vitals for your whole site based on real user data

Conclusion: speed isn't a luxury

A fast site isn't nice-to-have: it's the foundation for good rankings, happy visitors and higher conversion rates. Most optimisations cost no money, only some time and know-how. Start with the images: it usually has the biggest immediate effect.

Want your website performance analysed and optimised professionally? I check your site for all relevant speed factors and carry out the optimisations for you, measurable and transparent.

Stefanos Svarnas, Knusperholz in Ludwigsburg. I build websites and make sure businesses get found on Google. Personally, without agency detours.

Book a first call More about me

Optimize website load time: make your site lightning fast