Developing a High-Performance Digital Showroom for Silchar's Premier Hotel
How we built an elite direct-booking portal, optimizing Core Web Vitals to bypass JS render delays, lazy-load maps, and eliminate OTA commission drag.
Client
Hotel Luxuria Grand Management
Location
Kuarpar Rd, Ghungoor, Masimpur, Silcoorie Grant, Assam 788010
Timeline
3 weeks
Role
Lead Full-Stack Developer & Performance Architect
Team
2 people
Live Site
www.hotelluxuriagrand.comHotel Luxuria Grand is an upscale luxury hotel in Silchar, Assam, offering refined accommodations across seven categories. In order to establish regional brand authority before incoming competitors enter the Barak Valley market, we designed and built the hotel's first-ever digital home from scratch. Previously, the hotel had no website of its own and relied entirely on third-party listings and manual bookings. We built a premium direct-booking marketing site featuring a high-end WhatsApp concierge system and refined page speeds.
Client Results
Launch of First Digital Storefront
Established the hotel's first-ever premium web showroom and booking flow completely from scratch, eliminating immediate OTA commission dependency.
Lighthouse Score Dominance
Achieved 100/100 ratings in Accessibility, Best Practices, and SEO, alongside a 95+ Performance score on mobile.
LCP Load Time Under 1.0s
Reduced Largest Contentful Paint (LCP) load time significantly by compressing background hero assets and removing JavaScript runtime delays.
Zero Polyfill Bundle Size
Standardized build targets to modern browsers, removing unnecessary baseline JS polyfills and shrinking bundle weight.
Lighthouse Audit
Google Search Console
Performance Overview
Core Web Vitals
Prior to this project, the hotel had zero dedicated web presence—operating only with a basic Google Business Profile listing. This forced the property to rely entirely on manual reservation calls or high-commission OTAs (MakeMyTrip, Booking.com), which absorbed 15-22% of booking margins. The primary challenge was building their digital storefront completely from scratch while ensuring it loads instantly on mobile viewports, achieves 100/100 accessibility standards, and maintains strict visual discipline under the hotel's Onyx & Gold brand guidelines.
- 01
Establish a gorgeous, fast direct-booking showroom on hotelluxuriagrand.com to capture direct bookings and reduce commission margins.
- 02
Achieve 100% Core Web Vitals compliance, including a sub-1.0s Largest Contentful Paint (LCP) on mobile networks.
- 03
Optimize media asset delivery by switching YouTube preview thumbnails to high-compression formats.
- 04
Implement deferral strategies for heavy third-party iframe elements (Google Maps) to protect the main-thread parser.
- 05
Resolve all accessibility violations, including contrast ratios, frames titles, and heading structure rules.
- 06
Maintain strict design discipline adhering to the hotel's bespoke Onyx & Gold visual branding.
We engineered and launched the hotel's first-ever premium web application from scratch using Next.js 16, React 19, and Tailwind CSS v4. To deliver elite performance from day one, we replaced client-side javascript animations on the main hero header with pre-compiled CSS transitions that compile during initial paint. We replaced heavy map frames with a lazy-loading Intersection Observer mount and switched YouTube preview images to compressed WebP. Lastly, we corrected heading hierarchies (H2 to H3), boosted text contrast to 6.5:1, and cleaned up duplicate link destinations.
Key Features
CSS-Based LCP Hero Animations
Hardware-accelerated CSS keyframe animations that render instantly on first paint without waiting for client-side JavaScript hydration.
Viewport Map Deferral
Intersection Observer container that lazily mounts the Google Maps iframe only when the contact section is scrolled near the viewport.
Interactive Menu Flipbook
Custom digital menu catalog with optimized page-flip animations and mobile-friendly aria-labeled PDF downloads.
WhatsApp Concierge Flow
Custom room occupancy parameters mapping to secure, pre-filled WhatsApp booking links for seamless conversion.
Local Discovery Strategy
NAP Consistency
Hotel Luxuria Grand, Ghungoor Kuarpar Road, Near Saint Capitanio School, Silchar, Assam 788015 | Phone: +91 91810 43994
Local Keywords
Target Areas
“Building our direct booking channel has been a game-changer. Previously, we lost up to 22% in OTA commissions to MakeMyTrip and Booking.com. The new Next.js portal has established a premium brand showroom, drives continuous direct bookings through our WhatsApp concierge, and loads instantly on mobile viewports. Our guests constantly compliment the elegant design.”
Hotel Luxuria Grand CMO
Manager · Hotel Luxuria Grand
Questions & Answers
Q1How did you solve the mobile LCP element render delay?
We replaced Framer Motion animations on the Hero text with pre-compiled CSS fadeInUp and letter-spacing keyframe transitions. This allowed the browser to render the text instantly on parsing the HTML without waiting for client-side JS bundle hydration.
Q2How did you lazy-load the Google Maps iframe?
We implemented an Intersection Observer on the map container. The iframe only mounts in the DOM once the user scrolls within 200px of the contact section, saving over 223 KiB of unused JS payload on page initialization.
Q3How did you resolve the accessibility duplicate link warning?
Lighthouse flagged having multiple links named 'Book Now' going to different destinations (the book page and the telephone link). We resolved this by changing the telephone CTA text to 'Call to Book' and reserving 'Book Now' for page routing.
Ready to build a direct booking engine?
Let us design a premium, high-speed, search-optimized web experience that increases direct margins and showcases your brand in its best light.