How to Optimize Website Loading Speed

Proven techniques to reduce load times and improve Core Web Vitals

10 min

Loading speed is not just a technical metric — it is a direct factor in conversion, retention and SEO ranking. Google has used Core Web Vitals (LCP, FID, CLS) as ranking signals since 2021. Every 100 ms improvement in load time can increase conversions by up to 8%, according to Akamai data.

This guide covers the most effective techniques for reducing load time: image optimisation, code splitting, caching strategies, CDN, web fonts and third-party script management. Techniques applicable to any stack, with measurable impact.

Core Web Vitals: the metrics that matter

Core Web Vitals are three metrics Google considers essential for user experience: Largest Contentful Paint (LCP) measures loading time of the main content, First Input Delay (FID) measures interactivity and Cumulative Layout Shift (CLS) measures visual stability.

  • LCP (Largest Contentful Paint): target < 2.5 seconds. Optimise the hero image, server and critical rendering path
  • INP (Interaction to Next Paint): replaces FID since 2024, target < 200 ms. Reduce blocking JavaScript and improve interaction responsiveness
  • CLS (Cumulative Layout Shift): target < 0.1. Reserve space for images, ads and dynamic content

Image optimisation

Images typically account for 40% to 70% of a page’s total weight. Optimising them is the action with the greatest immediate impact on loading speed.

  • Use modern formats: WebP reduces size by 25-35% vs JPEG, AVIF by an additional 50%
  • Implement responsive images with srcset and sizes to serve the right size for each device
  • Apply native lazy loading (loading="lazy") for images below the fold
  • Compress with tools like Sharp, Squoosh or ImageOptim without perceptible quality loss
  • Preload the LCP image with <link rel="preload"> to reduce rendering time

Code splitting and lazy JavaScript loading

JavaScript is the most expensive resource in terms of performance: it is not only downloaded but also parsed, compiled and executed. Code splitting divides your bundle into smaller chunks that load on demand, reducing the initial JavaScript the browser needs to process.

Frameworks like Next.js, Astro and Nuxt apply automatic per-route code splitting. For heavy components (editors, maps, charts), use dynamic import() to load them only when the user needs them. Tree shaking removes dead code from your bundles.

Caching strategies

Caching prevents the browser from downloading resources that have not changed. A well-designed caching strategy can drastically reduce load times on repeat visits and save bandwidth for both the user and the server.

  • Cache-Control with immutable for hashed assets (CSS, JS): max-age=31536000
  • ETag or Last-Modified for HTML and dynamic resources: enables conditional revalidation
  • Service Workers for programmatic caching in PWAs: stale-while-revalidate or cache-first strategies
  • Server-side caching: Redis or Varnish for dynamically generated pages

CDN: content delivery network

A CDN distributes copies of your static assets across servers located in multiple regions worldwide. When a user requests a resource, it is served from the nearest node, reducing network latency. Cloudflare, Fastly, AWS CloudFront and Bunny CDN are popular choices.

Beyond serving static assets, modern CDNs offer edge computing (running logic at the network edge), automatic Brotli compression, on-the-fly image optimisation and integrated DDoS protection.

Web font optimisation

Custom web fonts can add 100 KB to 500 KB to page weight if not managed properly. FOIT (Flash of Invisible Text) and FOUT (Flash of Unstyled Text) affect both perceived speed and CLS.

  • Preload critical fonts: <link rel="preload" as="font" type="font/woff2" crossorigin>
  • Use font-display: swap to show text immediately with a system font while the custom font loads
  • Limit character sets: include only the glyphs you need (latin, latin-extended)
  • Self-host instead of using Google Fonts to avoid connections to external domains
  • Use WOFF2 format: the best compression with universal support in modern browsers

Third-party script management

Third-party scripts (analytics, chat widgets, conversion pixels, maps) are one of the main causes of performance degradation. Each script adds weight, network requests and JavaScript execution time that competes with your content for browser resources.

Audit all third-party scripts regularly: remove those that do not deliver measurable value. Load non-critical scripts with defer or async. Consider Partytown or web worker strategies to move third-party scripts off the main thread.

Key Takeaways

  • Core Web Vitals (LCP, INP, CLS) are direct Google ranking factors
  • Optimising images (WebP/AVIF, lazy loading, responsive) has the greatest immediate impact
  • Code splitting and tree shaking reduce the JavaScript the browser needs to process
  • A well-designed caching strategy drastically improves repeat visits
  • Audit and minimise third-party scripts: they are the hidden cause of degraded performance

Does your website need to improve its loading speed?

We perform performance audits with professional tools and optimise your site to achieve the best Core Web Vitals.