Industry
Restaurant and diner
Location
Small city, Midwest US (illustrative)
Example type: Restaurant website
WordPress-to-Gatsby rebuild
Disclaimer: This is an illustrative example showing the structure and approach for a restaurant website rebuild. It is not a real client project.
Rock River Diner (illustrative example)
What does this example show? This is an illustrative example of how a slow, broken WordPress restaurant website could be rebuilt into a fast Gatsby static site. It demonstrates the structure, technical approach, and typical improvements involved in a WordPress-to-Gatsby migration for a restaurant, including a mobile-first menu, a working reservation form, and accessibility upgrades.
Project specifications at a glance
| Aspect | Details |
|---|---|
| Industry | Restaurant and diner |
| Pages | 4 pages — Home, Menu, About, Reservations |
| Build time | Typically 1-2 weeks for a small restaurant site |
| Stack | Gatsby 5 static site, React 18, TypeScript, Netlify hosting |
| Key features | Mobile-first text menu, working reservation form, photo gallery, hours and location visible above the fold |
| SEO features | Restaurant schema markup with menu, hours, price range, and location, Google Business Profile update, sitemap submission |
| Accessibility | WCAG 2.2 AA compliant, semantic HTML menu (no PDF), proper form labels, keyboard navigation, alt text on all photos, skip-to-content link |
Common restaurant website problems
Many independent restaurants have WordPress websites that were built years ago and have become slow and difficult to maintain. Common issues include long mobile load times, menus published as PDFs that do not display well on phones, and reservation or contact forms that silently fail without the owner knowing. Over time, accumulated plugins can conflict with each other and create security and performance problems.
Restaurant owners often hear about these problems from customers who cannot view the menu on their phones or who never received a confirmation after submitting a reservation request. By the time the issues are noticed, the site may have been losing bookings for weeks or months.
What a typical restaurant site looks like before a rebuild
Page load time
Typically 6-10 seconds on mobile (throttled 4G). LCP often above 5 seconds. CLS and INP frequently in the poor range due to unoptimized images and plugin overhead.
Reservations
Reservation forms are often broken or unreliable. Owners may not realize the form is failing until a customer mentions it.
Mobile menu
PDF menus are common and require pinching and zooming on phones. The majority of restaurant visitors are on mobile, and a poor mobile menu experience drives high bounce rates.
What a project like this usually involves
- Budget: Site Refresh tier ($597) is a common fit for this scope.
- Timeline: Typically 1-2 weeks for a small restaurant site.
- Content: The owner provides the current menu text and interior photos. The menu is restructured for web display.
- Branding: Existing logo and color scheme are kept, with the layout modernized.
- Domain: The existing domain is retained and DNS is migrated to Netlify.
- Must-haves: Working reservation form, mobile-readable menu, hours and location visible without scrolling
What a rebuild looks like
The site is rebuilt as a 4-page Gatsby static site, replacing the WordPress installation entirely. The new site includes a mobile-first menu, a working reservation form, a photo gallery, and hours/location information visible above the fold on every page.
- Home page: Hero with hours and location, menu highlights, photo gallery, reservation CTA
- Menu page: Full menu organized by category (appetizers, mains, desserts, drinks) with prices. No PDF. Text-based, searchable, and mobile-readable.
- About page: The restaurant's story and history, interior photos, and customer reviews
- Reservations: Working form with date, time, party size, and contact info. Submissions sent to the owner's email and stored in a simple dashboard.
Accessibility, performance, and SEO
Performance
Target LCP under 2.5 seconds. Target CLS under 0.1. Target INP under 200ms. WordPress plugins are eliminated entirely. No JavaScript framework overhead.
Accessibility
WCAG 2.2 AA compliant. Menu is semantic HTML, not a PDF. Form has proper labels, error messages, and keyboard navigation. Alt text on all photos. Skip-to-content link added.
SEO
Restaurant schema markup with menu, hours, price range, and location. Google Business Profile updated with new website URL. Sitemap submitted to Google Search Console.
Get a free website plan
Call (608) 313-5373 or send a message through the contact page. If your current site is slow or broken, I will tell you exactly what it takes to fix it.