Reference

Every metric, explained.

This document aims to explain the meaning of the website performance indicators used within the demo.

What this demo simulates

This is a controlled static simulation, not a live URL loader. The browser frame contains a purpose-built mockup page designed to illustrate the performance gap between unoptimized origin delivery and edge-accelerated delivery. Real URL loading was considered and rejected: most production websites block iframe embedding via security headers, which would cause silent failures at exactly the wrong moment. A clearly-labeled simulation is more honest and more reliable.

The OFF state simulates a page served from a single origin server with no CDN, no image optimization, no caching strategy, and uncompressed assets. The loading times and metric values are based on real-world benchmarks for unoptimized pages served from a single US-East origin to a European user.

Where the numbers come from

Metric values in the ON state reflect documented performance improvements from bunny.net's CDN, Optimizer, and caching features. Image compression ratios are based on WebP conversion benchmarks (average 85–93% reduction from uncompressed JPEG). Latency improvements reflect the difference between a single-origin round trip (~180ms transatlantic) versus edge delivery (~18ms from nearest PoP).

What this is not

This is not a real performance test of any website. It is a demonstrative simulation designed to illustrate the categories of improvement that edge delivery infrastructure provides. For real-world performance testing, see bunny.net's documentation or run a Lighthouse audit.

Built with

Lovable (Claude Code), deployed to bunny.vladstoiculescu.ro. Built as a take-home task submission for the Developer Product Marketer role at bunny.net. Github code available by request.

Metric

OFF

What it measures

Loading Time

5.2s

0.9s

Total time from the first request to the page being fully usable. Every extra second costs you roughly 7% in conversions. Bunny CDN serves assets from the nearest edge node, slashing round-trip time.

Total Blocking Time

320ms

45ms

How long the main thread was blocked and unable to respond to user input. High blocking time makes a page feel frozen. Edge scripting and optimized asset delivery reduce parse and execution overhead.

Largest Contentful Paint

4.8s

0.9s

When the largest visible element (usually your hero image or headline) finishes rendering. This is what users actually perceive as 'loaded'. Google uses this as a Core Web Vital for search ranking.

First Contentful Paint

3.1s

0.4s

When the browser renders the first piece of content. Users need this signal to know something is happening. Faster FCP means users don't bounce before your page even starts appearing.

Time to Interactive

7.2s

1.8s

When the page is fully interactive and reliably responds to user input. Until this point, clicking buttons or links may do nothing. Edge delivery and smaller asset payloads get you here faster.

Cumulative Layout Shift

0.48

0.04

How much your page layout jumps around as it loads. A score above 0.1 means elements are visibly shifting, which feels broken and causes misclicks. Optimized image delivery with known dimensions eliminates most CLS.

Avg. Image Size

1.6 MB

110 KB

The average size of images loaded on the page. Bunny Optimizer automatically converts images to WebP format and compresses them without visible quality loss, reducing payload by up to 93%.

Avg. Image Load Time

6.8s

0.6s

How long images take to fully render. Unoptimized images from a distant origin server are the single biggest cause of slow pages. Edge-cached, compressed images load before users notice they were loading.

Time to First Byte

880ms

32ms

How long the user's browser waits before receiving the first byte of the response. With a single distant origin, this includes a full transatlantic round trip. From the edge, it's a few milliseconds.

WebP Conversion

Off

WebP is a modern image format that is 25-34% smaller than JPEG at equivalent quality. Bunny Optimizer converts images automatically and serves the right format based on the user's browser.

Smart Routing

Off

Bunny's network automatically routes each request through the fastest available path, avoiding congested or degraded network segments in real time. Users always get the optimal route without any configuration.

Cache Headers

Off

Cache headers tell browsers and edge nodes how long to store assets locally. Without them, every page load re-fetches everything from the origin. Correct caching means repeat visitors barely touch your server.

Served From

Origin server

Edge node

Without a CDN, every request travels to your origin server regardless of where your user is. With Bunny CDN, requests are served from one of 119 global edge locations, typically within 24ms of the user.

Why Take the Leap?