# Performance Plan - Kevron Suites & Apartments

## 1. Asset Optimization Pipeline

### 1.1 Dynamic Image Processing
* Optimize all local property assets under the `pictures/` root directory.
* Generate responsive markup (`srcset` / `sizes`) on standard cards, ensuring browsers request optimal scale layouts.
* Add native `loading="lazy"` tags on all list grids, gallery collections, and blog templates.
* Inject lightweight SVG icons instead of bloated icon fonts (e.g. Lucide SVGs).

### 1.2 Video Embedding optimization
* Lazy load Vimeo walkthrough (`1169265971`) and landscape (`1186235401`) player embeds.
* Display static poster images with smooth Alpine.js transition layers, avoiding player loading delays until explicitly triggered by the guest.

---

## 2. Dynamic Component Lazy Loading

Prevent bloated global imports of heavyweight scripting libraries (Three.js, Leaflet, Glide, GSAP). Code-split and load elements asynchronously only on routes that explicitly require them:
* **Leaflet + OpenStreetMap**: Initialized on-demand on the Contact page, Neighborhood guide, and Directions module only.
* **GSAP / Parallax Scripting**: Loaded on the Cinematic Homepage and Interactive tour sections only.
* **Tiny-Slider / Glide.js**: Initialized on the Room carousels and gallery slider elements only.

---

## 3. PWA (Progressive Web Application) Features

Implement a performance PWA structure to guarantee robust offline experience and fast loading speeds:
* **Manifest Configurations**: Compile `manifest.json` setting up branding colors (`#2B3192`), app shortcuts, orientation parameters, and home screen icons.
* **Lean Service Worker**: Configure custom service worker `sw.js`:
  * Pre-cache critical static elements: layout sheets, brand logos, system fonts, and generic offline page.
  * Cache CSS, JS, and image assets dynamically upon visits using a Stale-While-Revalidate caching model.
  * Explicitly bypass sensitive booking checkout routes, administrative Filament panels, and dynamic availability checks.
* **Offline Fallback Page**: Design a beautiful, helpful offline layout displaying essential contact numbers, address details, and manual booking routes.