Demo
Website before and after
Demo project. Test data
I show the difference using a fictional coffee shop: a deliberately outdated website and its reworked version that you can compare on one screen.
What it shows
- A Before / After switch and a side-by-side mode on wide screens
- Phone and desktop views
- What exactly changed and the Lighthouse measurements of both versions
Try it
Coffee shop "Demo": website before and after
A fictional coffee shop: the same content in an outdated and in a reworked version. Switch the version and the device.
Before
Coffee shop "Demo" | Freshly roasted coffee and homemade pastry Deal of the dayHot pricesSeason hitNew |
Deal of the day Hot prices Season hit New You are visitor no. 000123 | A small corner coffee shop: we roast the beans ourselves and bake pastry every morning. Menu
| Opening hours
Contacts Address: 1 Primernaya St. |
What changed
- Structure: semantic blocks (header, menu, opening hours, contacts) instead of nested tables.
- Mobile version: the layout adapts to the screen width, and the phone frame has no horizontal scroll.
- Readability: larger text, sufficient contrast, clear headings and prices.
- Speed: lighter decoration and faster loading; the measurements are below.
- Modern stack: the new version is built from React and Next.js components instead of tables.
Lighthouse measurements
| Metric | Before | After |
|---|---|---|
| Performance | 92 | 100 |
| Accessibility | 96 | 100 |
| Best practices | 100 | 100 |
Lighthouse, mobile profile, median of 3 runs, 15 Nov 2026, service demo pages. The pages include the site's shared header, footer and cookie banner, which narrows the gap. SEO is not shown because the service pages are closed from indexing.
This kind of work is ordered as
- Website redesign
For a website that works but looks dated and is awkward on a phone.
- Website speed optimization
For a website that is slow to open on a phone and loses visitors before it has even loaded.
- Website migration from a site builder or CMS
For a website on a site builder or an old CMS, when the platform holds you back or costs too much.
- Mobile adaptation
For a website that is hard to use on a phone: small text, misaligned blocks, buttons out of reach.
Contact
Tell me about your task — I'll reply with possible solutions. Or message me directly in the messenger you prefer.