Surf Holiday Bali
A fast, booking-focused website for a Bali surf-holiday operator — rebuilt from the ground up for mobile guests and near-instant load times.
- Astro
- React
- Tailwind
- Booking flow
- SEO
Tantangannya
Surf Holiday Bali was getting most of its traffic on mobile from travellers with patchy connections, but the old site was slow to load and made it hard to understand packages or actually book a lesson. Inquiries depended entirely on Instagram DMs, and the site did nothing to build trust before that first message.
Pendekatan saya
I rebuilt the site on Astro so it ships almost zero JavaScript by default, with React used only where real interactivity was needed — a booking enquiry flow and an image lightbox. Every photo goes through optimised, correctly-sized images to kill layout shift, and the whole thing was tuned against a strict performance budget. Content lives in structured files so the team can update packages without touching code.
Hasilnya
The new site loads in well under 1.5s on a simulated 4G connection and scores 95 on Lighthouse performance. Guests can now understand packages and start a booking enquiry in a couple of taps, and the WhatsApp-first contact flow turns interest into a real conversation immediately. It's become the anchor link the business shares everywhere.
Why it matters
This is the flagship build that the rest of my work is measured against. It proves the core thesis behind everything I do for tourism businesses: a website that loads instantly and earns trust on a phone screen converts referral traffic far better than a slow, generic page.
What I built
- A mobile-first homepage with a clear value proposition and dual call-to-action (WhatsApp + view packages).
- A structured booking-enquiry flow with client-side validation and instant feedback — no full page reloads.
- A photography-led gallery with a custom lightbox (keyboard navigation, prev/next, image counter).
- Open Graph and Twitter share cards tuned for WhatsApp link previews, since that’s where most of the link-sharing happens.
- A content layer so packages, testimonials and gallery images can be updated without code changes.
The numbers
Built against a strict performance budget and measured on every deploy: Lighthouse 95 on performance, sub-1.5s load on simulated 4G, and a clean sweep on accessibility, best practices and SEO.