glossary

How to Increase Website Speed: A Practitioner Playbook

How to increase website speed in priority order: cut TTFB, fix LCP and INP, trim JavaScript, add a CDN. Real thresholds, real diagnostics, no theory.

updated:

To increase website speed, work in the order browsers actually load a page: cut server response time (TTFB), then fix what the user sees and touches first (Largest Contentful Paint and Interaction to Next Paint), and only then chase the long tail of bytes. Speed is a sequence of bottlenecks. The win comes from fixing the one that currently dominates your real-user data, and a checklist run top to bottom rarely finds it.

How to Increase Website Speed

Increasing website speed means systematically reducing the time and work a browser needs to render a page and respond to input, measured by field metrics such as LCP, INP, CLS and TTFB collected from real users.

Diagnose before you optimize

The single most common mistake we see: teams “optimize” the wrong thing because they trusted a one-off lab score. A Lighthouse run is a synthetic snapshot on a simulated device and throttled network. It is useful for debugging and useless as a verdict. What Google uses and what users feel is field data: real Chrome users, real devices, real networks, aggregated in the Chrome User Experience Report (CrUX) and surfaced in PageSpeed Insights and Search Console’s Core Web Vitals report.

Start with three questions:

  • Which metric is failing in the field? LCP, INP or CLS; they have completely different fixes.
  • Where does the time go? Use the browser DevTools Performance panel and a WebPageTest waterfall to see whether the cost is server, network, render or script.
  • Which templates are affected? A slow product page and a slow blog post rarely share a root cause. Segment by template. Search Console already groups similar URLs together in its Core Web Vitals report.

Optimize the bottleneck that’s actually dominating your 75th-percentile field metric. Everything else is theater.

The priority order that actually works

Bytes and requests matter, but they matter in sequence. Here’s the order of operations, roughly highest-leverage first, with the diagnostic that proves the problem.

LayerFixTargets which metricHow you know it’s the problem
Server / originCut TTFB, add full-page cacheLCP, all metricsField TTFB above 800 ms; Lighthouse flags server response above 600 ms
Render pathInline critical CSS, preload LCP imageLCP, FCPLarge gap before first paint
JavaScriptDefer, split, delete unused JSINP, TBTLong tasks blocking the main thread
Images / mediaAVIF or WebP, responsive srcset, lazy-loadLCP, total weightHero image is the LCP element and oversized
Layout stabilityReserve space for media, fonts, adsCLSContent jumps as the page loads
DeliveryCDN, Brotli, HTTP/2 or HTTP/3TTFB, transfer timeHigh latency for distant users

1. Cut server response time (TTFB)

TTFB is the floor under every other metric: you cannot have a fast LCP behind a slow first byte. Google’s web.dev guidance rates a TTFB of 800 ms or less as good and anything above 1.8 seconds as poor, at the 75th percentile. The highest-leverage fix for most dynamic sites is full-page caching: serve a stored HTML response from cache so the server skips rebuilding it on every request. On WordPress that’s a page cache plus an object cache (Redis); on a custom stack it’s a reverse proxy or edge cache. Add OPcache for PHP, persistent database connections, and indexes for the queries showing up in your slow query log.

2. Fix what the user sees first (LCP)

Largest Contentful Paint should land under 2.5 seconds at the 75th percentile. The LCP element is usually a hero image or a headline. Three moves win most LCP battles:

  • Preload the LCP resource with <link rel="preload"> and fetchpriority="high" so the browser fetches it immediately and skips discovering it late.
  • Inline critical CSS for above-the-fold content and defer the rest, so the first paint never waits on a full stylesheet.
  • Right-size the hero image: serve AVIF or WebP at display dimensions. A 4000px original scaled down in CSS wastes most of its bytes.

A concrete preload for a responsive hero looks like this:

<link rel="preload" as="image" fetchpriority="high"
      imagesrcset="/hero-800.avif 800w, /hero-1600.avif 1600w"
      imagesizes="100vw" />

3. Make it responsive to input (INP)

Interaction to Next Paint replaced First Input Delay as a Core Web Vital in March 2024, and it’s the metric most sites quietly fail. INP looks at how fast the page responds across all interactions during a visit, where FID only measured the delay before the first one. The enemy is JavaScript hogging the main thread. Defer non-critical scripts, code-split so each route ships only what it needs, break up long tasks by yielding to the main thread (scheduler.yield() where supported, a setTimeout fallback elsewhere), and ruthlessly audit third-party tags: analytics, chat widgets and ad scripts are the usual culprits. Aim for INP under 200 ms.

4. Stop the page from jumping (CLS)

Cumulative Layout Shift should stay under 0.1. It’s the cheapest Vital to fix and the most often ignored: set explicit width and height (or aspect-ratio) on every image and embed, reserve space for ads and late-loading widgets, and use font-display: optional or swap with a size-matched fallback font so swapping web fonts doesn’t reflow text.

Images, fonts, and the byte budget

Once the render path and main thread are clean, attack transfer weight:

  • Images: modern formats (AVIF, then WebP), responsive srcset and sizes, lazy-load anything below the fold with loading="lazy", and never lazy-load the LCP image.
  • Fonts: subset to the characters you use, limit weights, self-host or preconnect to the font origin, and apply font-display.
  • Compression: Brotli for text assets (HTML, CSS, JS) usually compresses smaller than gzip; most CDNs apply it at the edge.
  • Caching: long Cache-Control: max-age with versioned filenames so returning visitors skip the network entirely.

A CDN ties it together: it moves static assets (and, with edge caching, whole pages) to servers near the user, cutting connection time and latency for global audiences. HTTP/2 lets many resources share one connection; HTTP/3 runs over QUIC, which also removes the TCP-level head-of-line blocking HTTP/2 still suffers on lossy mobile networks. A faster origin also helps your crawl budget: Google says faster server responses let Googlebot fetch more pages without straining the site.

Speed in the AI-Overviews era

Google confirms that Core Web Vitals are used by its ranking systems, and it also says a good page experience does not override relevance. In practice speed works as a tiebreaker among comparable results. For what speed does and does not do to rankings, see how site speed influences SEO; this page is the how-to.

Two things raised the stakes anyway. With AI Overviews and AI-assisted search compressing clicks, the sessions you do win are more precious, so a slow page that bounces a hard-won visitor costs more than it used to. And the faster, more stable page converts better once the user lands. Treat speed as a conversion and retention lever first and a ranking nudge second. It compounds with everything else you do, from improving conversion rate to growing organic traffic. If your stack is JavaScript-heavy, also make sure it’s rendered in a crawler-friendly way.

Measure, budget, and hold the line

Optimization without monitoring regresses within a quarter: a marketing team adds a tag, a developer ships a fat component, and you’re back where you started. Lock in the gains:

  • Field monitoring: track 75th-percentile LCP, INP and CLS in the Search Console Core Web Vitals report and a real-user monitoring (RUM) tool.
  • Lab debugging: Lighthouse and WebPageTest to reproduce and diagnose, never to grade.
  • Performance budgets in CI: fail the build when a bundle or LCP threshold is exceeded, so regressions get caught before they ship.

This is the same discipline as any SEO automation: set the budget, automate the alert, fix the regression before it touches the field data.

When site speed becomes a business problem

If your Core Web Vitals pass in the field, stop. Chasing a Lighthouse score from 90 to 100 buys nothing your visitors or Google will notice, and a small site that fails one metric can usually fix it in an afternoon with the steps above.

Speed turns into a paid problem when it lives in the platform. Search Console marks a whole template group as Poor, and every fix regresses with the next release. A page builder or plugin stack loads a dozen scripts on every page. Field data fails on mobile while the team keeps celebrating desktop lab scores.

On a fractional SEO engagement, the two founders find the bottleneck per template, fix it in the template and put a budget in CI so it stays fixed. Sometimes the answer is a new stack: Prawomat moved off WordPress and a letter page went from 17 scripts to none, one of three moves in the release that preceded 2.9x daily Google clicks.

Frequently Asked Questions

What is a good website loading speed?

Aim for the Core Web Vitals “good” thresholds at the 75th percentile of real users: Largest Contentful Paint under 2.5 seconds, Interaction to Next Paint under 200 ms, and Cumulative Layout Shift under 0.1. Time to First Byte should stay at 800 ms or less. These are field-data targets measured on real visits; a one-off lab score can’t confirm them.

What is the single biggest cause of slow websites?

For dynamic sites, it’s usually server response time (TTFB) from uncached, database-heavy page builds, fixed with full-page caching. For modern JavaScript sites, it’s main-thread blocking from oversized or third-party scripts, which wrecks INP. Diagnose with a WebPageTest waterfall before assuming either.

Does website speed actually affect Google rankings?

Yes, modestly. Core Web Vitals are part of the page experience signals Google’s ranking systems use, and they mostly separate comparable results. Relevance and authority still dominate. The larger, more direct payoff is conversion and retention: fast pages keep the hard-won visitors that AI-era search delivers.

How do I increase website speed on WordPress specifically?

Layer caching first: a full-page cache plus an object cache (Redis), then OPcache for PHP. Optimize images to AVIF or WebP, limit and audit plugins that inject scripts, defer non-critical JavaScript, and put a CDN in front. Most WordPress speed problems come from uncached page builds and plugin bloat, and better hosting alone rarely fixes them.

Is Lighthouse score the same as real-world speed?

No. Lighthouse runs a synthetic test on simulated hardware and network conditions; it’s excellent for debugging and says nothing certain about your actual visitors. Real-world speed lives in field data (CrUX) from real Chrome users, surfaced in PageSpeed Insights and Search Console. Always validate optimizations against field metrics.

where we come in

Core Web Vitals failing across whole page templates?

Senior SEO without hiring a team: the two founders run strategy and execution for a fixed monthly fee, one client per vertical.

2.9x

Prawomat: Daily Google clicks; 1.3x on the same dates in 2025

read the case study →

  • Not sure yet? The free AI SEO audit is a founder-reviewed snapshot of your site, no obligation.

or ask a founder

30 min · intro, founder-to-founder

Book a call