Deliver performance and responsive images

Performance is part of Aurelia’s quiet presentation. Keep the first viewport focused on one Hero image, one heading and the primary booking action. Use the theme’s local assets and route-specific CSS so Rooms, Search Availability, Booking and confirmation do not download homepage-only styles or media.

Protect the budget

• Serve responsive srcset and sizes values with a deliberate mobile crop; do not ship a desktop Hero to a 320px viewport when a smaller source exists.
• Set intrinsic dimensions and reserved aspect ratios for Hero, room cards, galleries and offers to prevent layout shift.
• Keep critical CSS and typography local. The production package allows zero external runtime asset dependencies and excludes source maps, tests and development files.
• Lazy-load below-the-fold photography, but keep the real LCP Hero available without a JavaScript gate.
• Re-run the mobile and desktop budgets after changing image dimensions, CSS roots or template composition. Record LCP, CLS, request count and asset weight with the viewport and cache state.

Do not trade away focus visibility or readable no-JavaScript content for a smaller payload. A performance failure is fixed in theme assets and delivery, not by changing availability, pricing or payment behavior.

Next: extend Aurelia safely with a child theme.