Website modernization & performance · demo
The same website, before and after modernization
Halverne Studio is a fictional architecture and interiors studio. Its website exists here twice, with the same text and the same pictures: once built the way many older websites are, and once modernized. Open both, compare them side by side, and measure them yourself.
Before
A typical ageing website
- A fixed 1100px desktop layout
- jQuery, jQuery UI, a slider and a lightbox on every page
- All of Font Awesome for five icons; a font in six weights
- One large picture for every screen size
After
The same site, modernized
- Responsive: it fits any screen
- Built from components with Next.js and React
- The browser’s own dialog, accordion and scrolling instead of plugins
- Each device downloads a picture that fits it, in a modern format
The problem
“Our website runs on technology nobody wants to touch.”
The old site is hand-edited HTML pages with jQuery plugins bolted on. The new one is built from components: change the header or a project card once, and every page follows.
The problem
“Our pages take too long to load.”
Same text, same pictures. The new version sends a fraction of the data and has nothing blocking the first paint. Measure both from your own browser.
The problem
“Our site works badly on phones.”
The old site is a fixed desktop page: on a phone you pinch, zoom and scroll sideways. The new one rearranges itself for any screen.
Lighthouse performance scores (home page)
| Version | Mobile | Desktop |
|---|---|---|
| Before | 62 | 93 |
| After | 86 | 99 |
Measured on 2026-09-25 with Lighthouse 13.5.0 on a local copy of both versions, median of three runs each. These scores describe these two demo builds only, not any client project.