Case study / 04

Beach.lk

A travel and stays platform whose audience browses on a phone, on hotel wifi, usually somewhere with one bar of signal.

Client
Beach.lk
Year
2024
Role
Design, development
Stack
Next.js, headless CMS, Vercel
Status
Live
Beach.lk homepage

01

The problem

The listings were good and the site was heavy. Full-size hero photography, a map library loaded on every route, and a filter panel that re-fetched on every keystroke.

On a fast connection it felt fine. On the connection the actual audience uses, the first meaningful paint was arriving after four seconds and people were leaving before the photos resolved.

02

The approach

Design decisions came with a byte budget attached. The hero became a single optimised image rather than a carousel, the map moved behind an explicit interaction, and filters were debounced and reflected in the URL so a filtered view is shareable.

The stay card was redrawn to carry the three things people compare on — price, location, and what the room actually looks like — and nothing else.

03

The build

Static generation for listing pages with on-demand revalidation when a property updates, so the common path never touches a server render.

Everything below the fold is lazy, every image has explicit dimensions, and the map bundle is only fetched when someone asks for the map.

▪ Outcome
Largest Contentful Paint on a throttled 4G profile
1.8s
JavaScript shipped on the listing route
-64%
Cumulative Layout Shift
0.02
Lighthouse performance, mobile
94

Indicative figures — replaced with the client’s own analytics once supplied.

Bookings are simpler for guests and the site finally loads properly on a phone by the beach. That mattered more than anything else.
Dhammika Ranasinghe
Owner · Palm Paradise Cabanas & Villas