Lighthouse Performance Report

Before & after comparison measuring the real impact of WebP conversion, responsive srcSet, bundle splitting, and resource hints.

Live data — updated 29 May 2026, 17:39

Overall Score

After Optimization

Before: 62→75(+13)

Category Breakdown

Performance

62 → 75

NaN

Accessibility

91 →

NaN

Best Practices

80 →

NaN

SEO

88 →

Core Web Vitals

Lab data before & after — green = passes Google threshold

Largest Contentful Paint (LCP)Needs Work

Before

4.2s

After

2544.48s

Change

-60482.9%

First Input Delay (FID)Needs Work

Before

145ms

After

Change

NaN%

Cumulative Layout Shift (CLS)Good

Before

0.18

After

0.06

Change

+66.7%

Real User Metrics (CrUX)

Field data from actual visitors — rolling average, updated live

Live

Time to First Bytedesktop

588msavg

Goodn=136 · 54 sessions

Latest: 2.35s

Time to First Bytemobile

455msavg

Goodn=86 · 24 sessions

Latest: 5ms

First Contentful Paintdesktop

2.07savg

Needs Improvementn=131 · 45 sessions

Latest: 4.32s

First Contentful Paintmobile

1.60savg

Goodn=69 · 7 sessions

Latest: 4.62s

Interaction to Next Paintmobile

187msavg

Goodn=65 · 3 sessions

Latest: 208ms

Interaction to Next Paintdesktop

125msavg

Goodn=75 · 12 sessions

Latest: 96ms

Cumulative Layout Shiftmobile

0.060avg

Goodn=65 · 2 sessions

Latest: 0.146

Cumulative Layout Shiftdesktop

0.060avg

Goodn=102 · 16 sessions

Latest: 0.001

Largest Contentful Paintmobile

2.54savg

Needs Improvementn=67 · 6 sessions

Latest: 6.38s

Largest Contentful Paintdesktop

2.23savg

Goodn=94 · 18 sessions

Latest: 3.56s

Audit Results

7 passed, 2 warnings, 0 failed

Serve images in next-gen formatsPassed

Converted hero and package card images to WebP format with responsive srcSet.

12 images converted from JPEG to WebP. Estimated savings: 340KB on mobile, 520KB on desktop.

LCP reduced by ~1.8s on mobile

Eliminate render-blocking resourcesPassed

Added dns-prefetch and preconnect hints for fonts, Supabase, and Stripe.

Preloaded hero image with fetchpriority="high". DNS-prefetch added for 4 external origins.

FCP improved by ~0.4s

Reduce unused JavaScriptPassed

Split vendor bundles by domain — react, i18n, charts, datepicker each in separate chunks.

Vite manual chunks: vendor, i18n, charts, stripe, firebase, supabase, date.

Initial JS reduced by ~180KB on non-chart pages

Properly size imagesPassed

Added responsive srcSet with 5 breakpoints (640w–1920w) and sizes="100vw".

Mobile now downloads 640w image instead of 1920w. Desktop gets 1920w only when needed.

Hero image weight cut by ~60% on mobile

Efficiently encode imagesPassed

All images now served with format=webp via the image CDN.

WebP format used for all large images. AVIF ready but WebP has broader support.

Additional 15–25% compression vs JPEG

Avoid enormous network payloadsPassed

Total page weight reduced through image compression + lazy loading + bundle splitting.

Home page mobile payload: before ~2.4MB, after ~1.6MB.

Total transfer size down ~33%

Minimize main-thread workWarning

Bundle splitting allows smaller initial parse/compile. IntersectionObserver rootMargin bumped to 300px.

Still room for improvement — consider code-splitting heavy blog post pages.

Reduce JavaScript execution timeWarning

React 19 with SWC build. Bundle chunks now loaded on demand.

Some blog pages still load large mock data objects upfront. Consider dynamic imports.

Use HTTP/2 or HTTP/3Passed

Server supports HTTP/2. All resources multiplexed efficiently.

Confirmed via network tab — h2 protocol active on marmarisholidays.co.uk.

Impact Summary

Total Page Weight

1.6 MB

from 2.4 MB

Hero Image (mobile)

150 KB

from 420 KB

Initial JS Bundle

420 KB

from 680 KB

LCP (mobile)

2544.48s

from 4.2s

Next Optimization Steps

Code-split heavy blog pagesHigh

Some blog post pages load large mock data upfront. Convert to dynamic imports.

Add AVIF fallback for newer browsersMedium

WebP is solid, but AVIF offers 20-30% better compression. Use <picture> element.

Implement service worker cachingMedium

Cache static assets and images for repeat visitors.

Preload critical CSSMedium

Inline above-the-fold CSS to eliminate render-blocking stylesheet.

Font subsetting & swapLow

Subset Google Fonts to only needed characters. Use font-display: swap.

Lazy load below-fold sectionsHigh

Use IntersectionObserver to hydrate React components below the fold only when visible.