A fast restaurant site does not have to look generic. The goal is to spend the performance budget on what creates appetite and confidence—not on invisible complexity.
1. Give the hero image a job
Choose one strong, properly cropped image instead of a heavy slideshow. Export modern formats at the largest size actually rendered. Do not lazy-load the main above-the-fold image; do lazy-load lower gallery images.
2. Declare image dimensions
Set width and height or an aspect ratio for every meaningful image. The browser can then reserve space before the file arrives, preventing buttons and text from jumping while a diner tries to tap.
3. Treat fonts as a small system
Use one or two type families and only the weights needed. Self-host when it improves privacy and control. Ensure text remains visible while fonts load, and use strong system-font fallbacks.
4. Remove scripts that do not earn their delay
Audit chat widgets, trackers, reservation embeds, video players, and social feeds. Load essential actions first and defer secondary features. A direct reservation link is often faster and more resilient than a large embedded widget.
5. Render the menu as lightweight HTML
Text and modest CSS are extremely efficient. Large PDF viewers, image-only menus, and client-side menu frameworks add latency and accessibility problems to the most frequently requested content.
6. Keep primary actions stable
Reserve, order, call, menu, and directions should not move after the page appears. Give them comfortable touch targets, clear labels, and enough contrast. Avoid a popup that covers the menu before the visitor has read it.
7. Measure real visits, not only a desktop lab
Use field data when available and test on a real mid-range phone over a throttled connection. Core Web Vitals focus on loading, responsiveness, and visual stability. Largest Contentful Paint measures when the main content is rendered; Google’s current good threshold is 2.5 seconds or less at the 75th percentile.
The seven-fix release checklist
- One optimized above-the-fold image
- Dimensions reserved for every image
- Minimal font files and visible fallback text
- Nonessential scripts deferred or removed
- HTML menu available without a viewer
- Stable, accessible primary actions
- Mobile field metrics reviewed after launch
See the current web.dev guide to Largest Contentful Paint and the wider Core Web Vitals documentation.