Skip to content
Performance

PageSpeed 100: Why Static Websites Win

Statically delivered websites hold a structural edge in the Core Web Vitals. What LCP, INP and CLS mean in practice and how to read the numbers properly.

12 min read PageSpeedCore Web VitalsPerformanceHosting

A green score in a performance report is not a trophy. It is the visible result of an architectural decision: is the page assembled again on every single request, or does it already exist as a finished file that the server simply hands over? That one difference decides how much work sits between the click and the first thing a visitor actually sees. This article explains why statically delivered pages hold a structural advantage in the Core Web Vitals, what LCP, INP and CLS mean in everyday terms, and how to read measurements without letting one isolated number mislead you.

PageSpeed 100 through static delivery Request path and metrics compared From request to HTML Rendered at request time Request Database Template Modules HTML Delivered statically Request HTML file from cache visible at once No database, templates or extensions at request time The web server reads one file and sends it out Core Web Vitals: targets LCP Main content visible 2.5 s INP Response to input 200 ms CLS Layout stability 0.1 good needs work poor Why static delivery helps structurally No render path Finished HTML instead of per-request work Cache-friendly Long lifetimes and a high hit rate Less ballast No extension stack, fewer third parties Target corridor: Lighthouse 100 across all four categories

Lab and field answer different questions

A lab result is produced under controlled conditions, which is what makes it comparable over time. Field data comes from real sessions on a wide spread of devices, networks and locations. Both views are useful: the lab number shows whether the architecture is sound, the field data shows what visitors genuinely experience. Looking at only one of the two typically means optimising past reality.

The three Core Web Vitals in plain language

The Core Web Vitals bundle three questions. When does the visitor see the main content (LCP)? How quickly does the page answer an interaction (INP)? And does the layout stay calm while all of that happens (CLS)?

Only around 48 percent (HTTP Archive Web Almanac) of websites requested on mobile devices reach a good rating across all three. The cause is rarely one single mistake. It is the sum of many small runtime decisions: an oversized title image, a font that arrives late, a script that occupies the main thread, a banner that pushes the text downwards. In practice the advice boils down to three moves: ship less, ship it earlier, and change less after the first paint. All three depend directly on how the page is produced. How a business website comes into existence in the first place is covered in our piece on building a website with AI — and the architecture chosen there is what later shows up in the numbers.

LCP: main content visible

Measures when the largest visible element inside the viewport has finished painting, usually an image or a headline. Server time, image weight and render-blocking resources feed straight into this value.

INP: response to input

Rates the delay between a click or keypress and the next visible reaction. Long JavaScript tasks occupy the main thread and push this value up noticeably on weaker devices.

CLS: a calm layout

Captures how much content still jumps around after the first paint. Images without dimensions, late-arriving fonts and injected banners are the usual culprits behind poor scores.

Scroll table sideways

MetricGoodNeeds workPoor
LCP (largest content element)up to 2.5 seconds2.5 to 4.0 secondsover 4.0 seconds
INP (response to input)up to 200 milliseconds200 to 500 millisecondsover 500 milliseconds
CLS (layout shift)up to 0.10.1 to 0.25over 0.25
  1. The request reaches the web server and is passed on to the interpreter
  2. Framework, configuration and extensions are loaded and initialised
  3. Database queries for content, navigation, settings and translations are executed
  4. Templates are assembled while filters and extension points intervene
  5. The finished HTML is emitted, and only now does the transfer begin
  6. The browser discovers fonts, images and scripts and requests them one by one

Every millisecond a server spends assembling a page is a millisecond the browser no longer has for painting the content people came to see.

The structural edge of static delivery

Delivered statically means the HTML already exists before the first visitor shows up. The web server looks up a file and sends it out; nothing else happens per request.

The entire runtime render path disappears, and the time to first byte comes down to network distance and file size. On top of that, such a file stays unchanged until it is rebuilt, and that is what makes caching genuinely effective: in the browser, in a reverse proxy, at distributed delivery points. A cache hit is the shortest possible route to the first byte because no application server is involved at all. For editorial work, very little changes: content is still maintained in an interface, with a build step in between that turns the configuration into finished pages. The difference lies in when the work happens, not in how the work feels day to day. What the result looks and feels like can be seen in our example websites.

No render path at runtime

No interpreter start, no database query, no template assembly per request. The server reads a prepared file and returns it unchanged to whoever asked for it.

Cache and CDN friendly

Unchanged files can be served with long lifetimes and held at distributed locations. Returning visitors often reload almost nothing, which shows up directly in the field data.

Fewer moving parts

Without runtime extensions, the classic sources of trouble disappear: slow queries, module conflicts and load spikes when many people arrive at the same moment.

Scroll table sideways

AspectProduced at request timeDelivered statically
Time to first byteDepends on database, templates and extensionsFile is read and sent straight away
Behaviour under loadComputing effort grows with every requestThe same file serves every request
Caching strategyFragmented, often limited by personalisationLong lifetimes and a high hit rate
Typical bottlenecksExtensions, queries and session handlingImage weight and embedded third parties
Operational riskUpdates can quietly change deliveryChanges happen at build time, not in production
  • Font files pulled from external services instead of hosted in your own directory
  • Video embeds that fetch heavy scripts long before anyone presses play
  • Mapping material loaded on every page rather than only on the contact page
  • Several measurement and marketing tools running in parallel with overlapping purposes
  • Extensions whose stylesheets load globally although they affect a single page
  • Slider and animation libraries for effects that plain CSS could deliver as well

Third parties are a legal topic too

External resources transmit the IP addresses of your visitors to somebody else's server, often before any consent has been given. Performance and data protection point the same way here: whatever you host yourself or drop entirely is usually both faster and more privacy-friendly. Review every embed twice — once technically and once legally.
  • Measure on mobile, not only on a desktop with a fast connection
  • Run each page at least three times and work with the middle result
  • Look at the home page, a service page and a detail page separately
  • Place lab results and field data side by side instead of playing them off
  • Re-measure after every larger change and record the outcome with a date
  • Document the cache state and the consent status of each test run

The 75th percentile sets the bar

Field data is evaluated over a rolling window of 28 days. What counts is not the average but the value that three quarters of all page views stay below. A page can therefore look excellent in the laboratory and still fail in the field when a meaningful share of visitors arrives on older devices or over weak mobile networks. That is precisely why lowering the baseline weight of a page pays off more than polishing individual figures.

Images, fonts and caching strategy

Once the architecture is settled, the remaining adjustments are craft.

Images need explicit width and height attributes so the browser can reserve their space before the file has arrived; that single habit removes a large share of layout shifts. They also belong in modern formats and at the size they are actually displayed. Fonts belong on your own server, trimmed to the weights you really use, with display behaviour controlled through font-display and a preload hint for the cut needed above the fold. Delivery follows a simple split: versioned assets get long lifetimes, HTML stays short-lived and revalidates. Source order matters too: whatever the visible area needs should load early, everything else later or only on demand. Images below the fold can be deferred without any visitor noticing the difference. What is covered in which package is listed on our pricing page.

Excerpt: preload, image dimensions, cache headers
<!-- Self-host fonts and preload the cut used above the fold -->
<link rel="preload" href="/fonts/inter-var.woff2" as="font"
      type="font/woff2" crossorigin>

<!-- Fixed dimensions reserve space and prevent layout shifts -->
<img src="/images/reception.avif" width="1280" height="720"
     alt="Reception area of the practice"
     fetchpriority="high" decoding="async">

<!-- Delivery: long lifetime for versioned assets, short for HTML -->
Cache-Control: public, max-age=31536000, immutable   (CSS, JS, images)
Cache-Control: public, max-age=300, must-revalidate  (HTML)
  • Static delivery per domain, with no page assembly at request time
  • Self-hosted fonts and images in modern formats with explicit dimensions
  • Accessibility on a WCAG 2.2 AA basis from the very first page
  • A consent banner included as standard, with no external service in the load path
  • Multilingual setup with hreflang and translated slugs, no extra module required
  • Contact form, blog and AI assistant without a heavy runtime stack behind them
  1. List every resource a typical page loads and sort the list by origin
  2. Justify each external embed in writing or remove it without replacement
  3. Resize images to the dimensions they are shown at and convert them to a modern format
  4. Self-host fonts, reduce them to the weights in use and preload them deliberately
  5. Question whether the page has to be generated at request time in the first place
  6. Re-measure on mobile after the rebuild and watch the field data for four weeks

Speed is ultimately a question of architecture rather than fine-tuning. Assembling a page on every request means working against your own delivery indefinitely; shipping finished files moves that effort once into the build and typically leaves the measurements quiet afterwards. The decision reaches far beyond load time: it touches accessibility, data protection and international discoverability as well, as our piece on multilingual websites and hreflang describes. For many companies that is also the most practical order of operations: settle delivery first, then build out content and visibility. The number a testing tool reports at the end merely confirms a choice that was made much earlier.

This article is based on data from: HTTP Archive Web Almanac, the Federal Statistical Office of Germany, Bitkom, the WebAIM Million, W3C and the European Commission.