Core Web Vitals for Hospitality Websites (Fix These First)

53% of mobile visitors leave if your page takes longer than three seconds

For a hotel or restaurant, that's not a bounce rate — it's a lost booking. And the painful irony is that hospitality sites, which depend more than almost any other industry on first impressions, are typically among the worst performers for Core Web Vitals.

We've audited dozens of hospitality websites over the past few years. Full-screen hero videos that take 12 seconds to load on mobile. Booking widgets that trigger layout shifts mid-scroll, causing users to accidentally tap the wrong date. Font loading issues that make a luxury hotel's landing page flash unstyled text before snapping into place. These aren't edge cases — they're standard.

Google's Core Web Vitals are now a confirmed ranking factor. But more importantly, they measure real user experience signals that directly affect whether someone makes a booking or closes the tab.

This guide covers the three Core Web Vitals metrics, why hospitality sites fail them so consistently, and the specific fixes that make the biggest difference.

What Core Web Vitals actually measure

Core Web Vitals are three specific performance metrics Google uses to assess page experience:

• LCP (Largest Contentful Paint) — how quickly the largest visible element loads. For hospitality sites, this is almost always the hero image or video. Target: under 2.5 seconds.
• CLS (Cumulative Layout Shift) — how much the page jumps around while loading. Target: under 0.1.
• INP (Interaction to Next Paint) — how quickly the page responds when a user clicks or taps something. Replaced FID in March 2024. Target: under 200 milliseconds.

You can check your current scores in Google Search Console under the "Core Web Vitals" report, or run a quick test at PageSpeed Insights. Field data (real user data) matters more than lab data for ranking purposes, so always check Search Console rather than relying solely on Lighthouse scores.

LCP: your hero image is almost certainly the problem

The single biggest LCP culprit on hospitality sites is the hero section — and it's usually failing for one of three reasons.

The image is too large and not properly optimised

A full-width hero image on a hospitality site should weigh no more than 150–200KB for mobile and 400–500KB for desktop. We routinely see hotels uploading 4MB JPEG files directly from a photographer's hard drive, then wondering why their site feels sluggish.

The fix: - Convert images to WebP or AVIF format. WebP is typically 30–50% smaller than JPEG at equivalent quality. - Serve different image sizes at different breakpoints using the srcset attribute or Next.js's <Image> component, which handles this automatically. - Add fetchpriority="high" to your hero image element so the browser prioritises it immediately. - Never lazy-load the hero image — this is a surprisingly common mistake. Lazy loading exists for images below the fold. The hero image should load as fast as possible.

You're using a hero video

Full-screen autoplay videos are visually impressive and SEO-destroying. Google uses the largest *contentful* element for LCP — a video's poster image counts, but the video itself takes considerably longer to load than an optimised still image.

If you're committed to video, use a high-quality static image as the poster and lazy-load the video after the page has fully loaded. Better still: consider whether the video is actually converting visitors better than a great photograph. For most hotels and restaurants, it isn't.

Your hosting or CDN is slow

A slow server adds seconds before the browser even starts loading images. If your site is hosted on a shared server in the US and most of your visitors are in the UK, every request is crossing the Atlantic before anything loads.

The fix is a CDN (Content Delivery Network) that serves assets from the location closest to your visitor. Vercel, Cloudflare, and AWS CloudFront all handle this well. We've seen LCP drop from 6+ seconds to under 1.5 seconds simply by moving a hotel's static assets to a proper CDN.

CLS: layout shifts destroy trust during the booking process

Cumulative Layout Shift measures how much your page visually jumps as it loads. A CLS score above 0.1 means users are experiencing meaningful instability — buttons moving as they're about to tap them, text jumping as an ad loads above it, or a booking form shifting just as someone fills in their check-in date.

For hospitality sites, the main CLS culprits are:

Third-party booking widgets

Most hotels embed booking widgets from providers like SiteMinder, Booking.com, or ResDiary. These widgets load asynchronously — the page renders, then the widget drops in, pushing everything below it down the page.

The fix is to reserve space for the widget before it loads. Set explicit min-height on the widget container so the page layout doesn't shift when the widget initialises. Even an approximation (e.g., min-height: 120px) is far better than no reservation at all.

Web fonts loading late

Custom typography is part of a hospitality brand. But if your fonts aren't loading correctly, visitors see a flash of unstyled text — the browser renders fallback system fonts first, then swaps them out for your custom typeface, causing a layout shift as the line heights and letter spacing change.

The fix: - Use font-display: swap combined with a carefully matched fallback font. The Fallback Font Generator tool can calculate adjusted size-adjust, ascent-override, and descent-override values that make your fallback font match your custom font's metrics closely enough to eliminate visible shift. - Preload your primary font files in the <head>: <link rel="preload" href="/fonts/your-font.woff2" as="font" crossorigin>. - Self-host your fonts rather than loading from Google Fonts — one fewer external request, and you control caching.

Images without explicit dimensions

Every <img> tag should have explicit width and height attributes. Without them, the browser doesn't know how much space to reserve while the image loads, so it collapses to zero height and then expands — causing a layout shift.

In Next.js, the <Image> component enforces this automatically. In plain HTML, always include dimensions even if you're overriding them with CSS.

INP: your booking form interactions are probably too slow

INP (Interaction to Next Paint) measures how quickly your page responds to user input — clicks, taps, keyboard events. It replaced FID (First Input Delay) as a Core Web Vitals metric in March 2024 and is more comprehensive because it measures all interactions, not just the first one.

Hospitality sites tend to struggle with INP for two reasons:

Heavy JavaScript from third-party scripts

Google Tag Manager, Hotjar, live chat widgets, retargeting pixels, cookie consent platforms — hospitality marketing teams tend to accumulate these over time. Each one executes JavaScript on the main thread, competing with user interactions.

Run your site through WebPageTest and check the "Main Thread Work" breakdown. If third-party scripts are consuming more than 30% of main thread time, you have a problem.

The fix: - Audit every third-party script. Remove anything that isn't actively contributing to revenue. - Load non-critical scripts with defer or async attributes, or move them to fire after the page has fully loaded. - If you're using Google Tag Manager, audit the container — it's common to find legacy scripts for services that were cancelled years ago still loading on every page.

Date picker and availability calendar performance

Booking date pickers are notoriously JavaScript-heavy. When a user taps a date, the browser often has to recalculate availability, update UI state, and re-render components — all of which can make the interaction feel sluggish on mobile.

If you're building a custom booking flow (or working with a developer who is), ensure date selection updates are handled efficiently. Preload the next month's availability data so calendar navigation feels instant. Avoid synchronous API calls that block the main thread.

Key takeaways: Core Web Vitals checklist for hospitality sites

LCP (target: under 2.5s) - Convert hero images to WebP, serve correct size per device - Add fetchpriority="high" to the hero image — never lazy-load it - Move static assets to a CDN - Replace autoplay hero videos with optimised static images

CLS (target: under 0.1) - Reserve explicit space for third-party booking widgets - Preload fonts and use font-display: swap with a matched fallback - Add width and height attributes to all images

INP (target: under 200ms) - Audit and remove unnecessary third-party scripts - Load non-critical scripts with defer or after page load - Preload calendar availability data to make booking interactions feel instant

General - Check your actual field data in Google Search Console, not just Lighthouse scores - Test on a real mid-range Android device on mobile data — not a MacBook on fibre - Fix LCP first. It has the highest impact on both rankings and conversion

The business case for fixing this

We worked with a coastal hotel group whose site was scoring 28/100 on mobile performance. Their top three pages — rooms, dining, and weddings — were all failing LCP by more than two seconds. Organic traffic had been declining for eight months despite consistent investment in content.

We rebuilt the site in Next.js with server-side rendering, optimised every hero image, replaced their self-hosted booking embed with a properly reserved iframe, preloaded fonts, and moved all assets to Vercel's edge CDN. Mobile performance scores went from 28 to 94. Organic traffic recovered to pre-decline levels within six weeks, and direct bookings — the ones without OTA commission — increased by 34% in the following quarter.

Core Web Vitals aren't a technical vanity metric. For hospitality businesses, they are directly correlated with whether people book with you or go back to Booking.com.

Want to know where your site is losing bookings?

We audit hospitality websites regularly and know exactly where the performance and conversion bottlenecks tend to hide. If your Core Web Vitals scores are poor — or you simply don't know what they are — get in touch. We'll give you an honest picture of where you stand and what it would take to fix it.