20 meilleurs sites de restaurants et de gastronomie en 2026, tests de vitesse inclus

Voici 20 des meilleurs sites de restaurants et de gastronomie actuellement en ligne : restaurants, salles à manger d'hôtels, torréfacteurs de café, producteurs et marchands de vin, fabricants de produits alimentaires, un festival gastronomique, un site de recettes et quelques marques de l'hôtellerie. Et aucun n'a été sélectionné selon le goût. J'ai tiré les 20 au hasard parmi 24 sites alimentaires et hôteliers en direct, examinés à la main, j'ai vérifié que chacun se charge, je l'ai mesuré sur un téléphone et j'ai noté ce qu'un restaurant pourrait copier. Le résultat le plus significatif : le score Lighthouse mobile médian est 61,5, et 5 des 13 sites ayant suffisamment de données de vrais visiteurs réussissent les trois Core Web Vitals de Google. Ceci est la section gastronomie et boissons de 64 beaux sites, vérifiés en direct et testés en vitesse.

Comment ces 20 sites ont été sélectionnés et testés

La plupart des listes des meilleurs sites de restaurants sont les préférés de quelqu'un. C'est utile pour trouver des idées, mais cela masque ce qu'un site gastronomique bien conçu coûte généralement en temps de chargement, car les sites lents disparaissent silencieusement de la vue. J'ai donc utilisé un tirage au hasard à la place.

• La base : 24 sites alimentaires, de boissons et hôteliers en direct issus d'une base de données de conception que j'entretiens. Chacun a été examiné à la main, dispose de captures d'écran pour ordinateur et téléphone, et a réussi une vérification de disponibilité au cours des 30 derniers jours.
• Le tirage : 20 sites dans un ordre aléatoire fixe, avec au maximum deux sites du même studio. Rien ici n'est mon travail de client, et personne n'a payé pour être inclus.
• Trois échanges, chacun pour une raison indiquée : deux sites parmi les 20 premiers se trouvent derrière des écrans de vérification d'âge qui masquent tout le design, et je ne clique pas sur les vérifications d'âge légal. Un troisième vend désormais des configurateurs de produits 3D plutôt que des aliments ou boissons. Chacun a été remplacé par le site suivant du tirage.
• La vérification en direct : chaque site a été ouvert dans un navigateur (Chromium) le 31 octobre 2026 et a chargé le même site pour lequel il était répertorié.
• Le test en laboratoire : une exécution Lighthouse mobile par site entre le 12 et le 20 octobre 2026, enregistrant le score de performance, le Largest Contentful Paint et le poids de la page.
• Les données de vrais visiteurs : les chiffres du Chrome UX Report pour les téléphones, que Google collecte auprès de vrais utilisateurs de Chrome sur une fenêtre glissante de 28 jours. Tous les sites ne reçoivent pas assez de visiteurs pour apparaître (Chrome UX Report), donc 5 des 20 affichent « pas de données ».
• Pas un classement : l'ordre ci-dessous est l'ordre du tirage.

Ce que 20 sites de restaurants et de gastronomie coûtent en vitesse

Google juge qu'une page est bonne quand son Largest Contentful Paint (LCP) est 2,5 secondes ou moins, son Interaction to Next Paint (INP) est 200 millisecondes ou moins et son Cumulative Layout Shift (CLS) est 0,1 ou moins, mesuré au 75e centile des chargements de page. Une page réussit les Core Web Vitals uniquement si elle satisfait aux trois critères (web.dev).

La page la plus lourde du tirage est aussi l'une des cinq qui réussissent. Slurp, un bar à ramen à Copenhague, pèse 53,4 MB, mais les vrais visiteurs voient son contenu principal en 1,9 secondes. Peu importe ce que la page contient d'autre, le premier écran arrive à temps. Et c'est exactement ce que mesure la LCP.

Le score de labo et le résultat des vrais visiteurs sont souvent en désaccord. Qissa partage le meilleur score de labo de 87 avec Studenterkilden, mais ses vrais visiteurs attendent 2,7 secondes pour le contenu principal, juste au-delà du seuil de Google, donc elle échoue. Paul & Bohne obtient 56 en labo et réussit les trois pour les vrais visiteurs. Lighthouse est une seule exécution de labo sur un téléphone émulé, tandis que le Chrome UX Report est ce que Google Search utilise pour son signal page experience (Chrome UX Report).

La vitesse de chargement est là où la plupart de ces sites faiblissent. Sur les 8 sites qui échouent, 6 manquent la cible LCP de 2,5 secondes, 4 ont trop de décalage de mise en page et seulement 1 est lent pour réagir aux appuis. C'est le schéma habituel des sites alimentaires: une grande photographie ou vidéo héros, servie en taille réelle, devient ce pour lequel tout le monde attend.

Il y a une deuxième conclusion à connaître si vous lisez l'article. Dans le tirage de 64 sites, aucun des huit sites alimentaires, de boisson et d'hospitalité n'a réussi Core Web Vitals. Avec 20 tirés du même bassin, cinq le font: Raw House, Woolmers Estate, Slurp, Paul & Bohne et Eatery Berlin. Donc un petit échantillon peut faire paraître une catégorie entière pire, ou meilleure, qu'elle ne l'est.

Ce avec quoi ces 20 sont construits

WordPress fait fonctionner 7 des 20, plus que toute autre plateforme. Nuxt en a 3, et Next.js, Shopify et Webflow en ont 2 chacun, avec un site chacun sur Astro et Gatsby et 2 où la pile n'a pas pu être lue à partir du HTML. Les deux sites Shopify, Paul & Bohne et Best Bean Best Cup, sont les deux qui vendent du café en ligne. Raw House, sur Astro, a la LCP des vrais visiteurs la plus rapide du tirage à 0,8 secondes, et Eatery Berlin, sur Gatsby, a la page la plus légère à 0,5 MB. Si vous choisissez un framework, Astro vs Next.js couvre le compromis.

Ce que les 20 ont en commun

Chaque site dans la base de données est étiqueté par style lors de son examen, et la pile est détectée à partir du HTML en direct. Ce sont donc des comptages plutôt que des impressions.

• La photographie alimentaire domine. 9 des 20 sont étiquetés photographiques, plus que tout autre style. Les meilleurs utilisent une grande assiette unique, rapprochée et bien éclairée plutôt qu'une grille de petites.
• La couleur est un choix, pas une valeur par défaut. 8 sont étiquetés colorés, et ceux qui fonctionnent choisissent une ou deux couleurs fortes dans l'alimentation ou la marque et les utilisent partout.
• La typographie dit tout. 7 utilisent une grande typographie d'affichage et 6 une serif, et les deux apparaissent souvent ensemble: un titre serif défini en grand sur une photographie ou une couleur plate.
• Le mouvement est courant mais n'est pas le problème. 7 chargent une bibliothèque smooth-scroll ou animation (GSAP et Lenis sur 4 chacun). Leur score de labo médian est 66, contre 60 pour les autres, donc dans ce tirage l'animation seule n'explique pas les scores lents.

Les 20 sites web de restaurants et d'alimentation

Les 20 dans l'ordre du tirage, mesures d'abord, puis un regard plus proche sur chacun avec une capture de sa page d'accueil, le motif à emprunter et le compromis à connaître. Les chiffres des vrais visiteurs proviennent de téléphones; "pas de données" signifie que Google avait trop peu de visiteurs pour rapporter. Pour votre propre établissement, voir conception de site web de restaurant.

1. Studenterkilden

Un titre en serif grand et densément composé remplit le centre d'une page beige clair épurée, avec un espace vide généreux au-dessus et au-dessous pour que le message ait de la place. Le bouton de couleur sable chaud est la seule couleur chaude, ce qui rend l'action de réservation facile à repérer, et le bouton secondaire en contour s'assoit discrètement à côté. Une photographie ensoleillée d'un bâtiment en bois aux toits de tourbe apparaît en bas, juste assez pour donner un aperçu du lieu.

À emprunter : Associez un seul bouton de réservation de couleur chaude avec un bouton en contour discret pour les menus ou les forfaits, et répétez la paire dans l'en-tête afin que l'étape suivante ne soit jamais hors de portée.

Attention : Le test de laboratoire l'a noté moyen, bien que la page elle-même soit légère, et l'animation et les scripts de défilement fluide ajoutés à Webflow ajoutent du travail pour le navigateur. Mais il n'y avait pas assez de données de visiteurs réels pour dire comment elle fonctionne pour les véritables clients.

Créé par SOUR. Visitez studenterkilden.dk.

2. Meatopia

La marque verbale fait tout le travail. Des lettres majuscules épaisses et inclinées avec une ombre portée noire sont remplies d'un paysage montagneux en orange, bleu canard et olive, et un ruban rouge traverse le bas comme une carte postale vintage. Posée seule au milieu d'un champ crème chaleureux avec un seul bouton rouille en dessous, elle donne à la page une mise au point claire et une ambiance confiante et ludique.

À emprunter: Reprenez l'habitude de remplir un logo en lettres audacieuses avec une texture ou une photo de paysage, puis laissez beaucoup de couleur unie autour et un seul bouton clair.

À surveiller: La page est plus lourde que la moyenne et n'a obtenu que des résultats moyens en laboratoire. Les visiteurs réels constatent un chargement lent du contenu principal et une réactivité ralentie aux appuis et clics. L'illustration du grand logo vaut donc la peine d'être compressée plutôt que traitée comme une décoration inoffensive.

Créé par Arro Labs. Visitez visitmeatopia.com.

3. Pier88 Coast par MONARQ

Une seule photographie fait tout le travail: une crevette orange brillante sur une fourchette, sur fond d'une mer bleu canard calme et d'un ciel bleu doux. L'orange chaud contre les bleus froids est instantanément appétissant. Le titre s'incurve en minuscules blanches fines au-dessus de la crevette, épousant le bord de l'assiette, tandis que le logo et le menu restent discrets sur les côtés. Et le bord blanc ondulant en bas fait allusion à la marée sans insister.

À emprunter: Choisissez une photographie de héros confiante de votre plat signature, placez-la dans un cadre qui suggère le lieu, et gardez le titre court et léger sur le ciel ou l'arrière-plan.

À surveiller: La page est très lourde et le test en laboratoire a donné des résultats moyens, ce qui correspond à une photographie pleine saignée plus les bibliothèques d'animation comme GSAP, Lenis et Lottie. Les connexions plus lentes ressentiront donc d'abord les choix visuels.

Visitez pier88coast.com.

4. Le Saint Georges

Une photographie pleine saignée de tables dressées à côté d'une fenêtre montagne fait presque tout le travail, et le logotype pâle et la navigation fine s'y superposent sans barre lourde. Le panneau d'annonce crème utilise un titre chaud en serif et un bouton marron foncé, qui correspond aux tons bois et cuivre de l'image. Sur mobile, la vache peinte donne à la page un caractère local et légèrement ludique.

À emprunter: Associez une photographie honnête de votre propre salle à manger avec un seul panneau crème et un seul bouton marron foncé pour annoncer un menu saisonnier.

À surveiller: La page elle-même est légère, mais les visiteurs réels constatent un chargement lent de la zone d'image principale et un décalage de mise en page pendant qu'elle se stabilise. Le grand héros et la fenêtre contextuelle valent donc la peine d'être vérifiés sur des connexions téléphoniques ordinaires, pas seulement sur un aperçu de bureau net.

Créé par Ludovic Dind. Visitez lesaintgeorges.ch.

5. Raw House

Un seul enseigne en néon courbée à la main en rose chaud se trouve au milieu d'un écran noir pur, et rien d'autre ne rivalise avec lui. La lueur donne de la profondeur à la marque verbale sans aucune photographie. Le rose est répété dans la navigation en forme de pilule, le bouton Réserver maintenant et le logo rond, de sorte que toute la page ressemble à une seule enseigne allumée dans une pièce sombre.

À emprunter: Construisez l'ensemble du premier écran autour d'un logo ou d'une enseigne confiant sur un fond plat foncé, et répétez sa couleur unique dans les boutons pour que le lien de réservation soit impossible à manquer.

Attention: la page est plus lourde que la moyenne et obtient un score moyen au test en laboratoire, bien que les vrais visiteurs vivent une bonne expérience sur les trois Core Web Vitals. Le poids est là, mais il ne nuit pas aux gens en pratique.

Conçu par webeleven. Visitez rawhouseathens.gr.

6. Soufflet Malt

Un fond bleu marine profond et une énorme marque en forme de pétale doré donnent à la page une identité immédiate, et la palette limitée garde tout calme. Le titre est composé en majuscules épaisses et larges qui passent du blanc au gris au fur et à mesure qu'elles se révèlent, ce qui suggère une animation de défilement ou de chargement. La barre de menu en forme de pilule et le bouton d'achat doré restent ordonnés et faciles à trouver.

Empruntez ceci: construisez le héros autour d'une seule marque de marque surdimensionnée dans une couleur d'accent chaud sur un fond profond, pour qu'une petite marque alimentaire obtienne un premier écran mémorable à partir d'une forme plate plutôt que d'une séance photo.

Attention: la page est plus lourde que la moyenne, obtient un score moyen au test en laboratoire et les vrais visiteurs voient un chargement lent du contenu principal. Donc le grand héros animé est le premier endroit où chercher, pas un détail à laisser pour plus tard.

Conçu par Allan LE GOUIL. Visitez souffletmalt.com.

7. Meyers

Une seule photographie rapprochée d'une salade de pommes de terre rôties, de chou kale et de grenade remplit l'écran, et ses verts profonds et ses graines rouges font la majeure partie du travail. Le titre se situe bas dans une sans-serif épaisse et massive avec des formes de lettres farfelues, or moutarde sur crème, pour qu'il se lise clairement sur l'image assombrie. La barre supérieure brun foncé et l'onglet beige maintiennent la palette chaleureuse et liée à la nourriture.

Empruntez ceci: posez un titre lourd en moutarde et crème sur une photographie rapprochée teintée de foncé de votre meilleur plat, pour qu'une bonne photo porte le haut de la page.

Attention: la page est légère, mais elle était lente au test en laboratoire et les vrais visiteurs voient des décalages de mise en page. Mais cela pointe vers la grande image et le titre qui bougent au fur et à mesure qu'ils se chargent, pas vers le poids brut de la page seul.

Créé par Dwarf. Visitez meyers.dk.

8. Woolmers Estate

Une photographie aérienne pleine largeur de la maison et des champs fait le gros du travail, avec un voile foncé sur la moitié inférieure pour que le texte blanc reste lisible. Le titre est composé dans un serif haute contrast, la dernière ligne en italic doré qui fait écho au logo et au bouton beige. Un petit libellé en majuscules espacées au-dessus et une règle mince donnent au groupe une impression calme et ordonnée, tandis que les boutons bleu pâle et beige restent clairement distincts.

Empruntez ceci: associez une large photographie de vos propres locaux avec un léger voile sombre, un titre en serif se terminant par une ligne d'accent italique, et deux boutons de couleurs différentes pour les actions principales.

Attention: le résultat en laboratoire est moyen, mais la page est légère et les vrais visiteurs vivent une bonne expérience sur chaque mesure des Core Web Vitals. Donc la grande image héros gagne sa place plutôt que simplement d'ajouter du poids.

Conçu par YourMarketingExperts. Visitez woolmers.com.au.

9. White Desert

Un film pleine largeur joue à travers un hublot d'avion, le cadre sombre devient donc un vignettage naturel et la lisière de glace pâle se situe au milieu de la page. L'énorme titre capital condensé et allongé s'exécute le long du bas, avec une petite ligne serif italique blottie à gauche. Des règles verticales mince, une navigation encadrée et un seul bouton orange chaud sur mobile maintiennent la retenue cohérente.

Empruntez ceci: associez une seule courte ligne serif italique avec un seul titre condensé surdimensionné sur une boucle d'un film de votre propre cuisine, pour que l'ambiance soit établie avant que quiconque ne lise un menu.

Attention: La page est lente aux tests de labo et plus lourde que la moyenne. Les vrais visiteurs voient des décalages de mise en page pendant le chargement. Le film plein écran et les grands caractères ont donc un coût en stabilité.

Créé par Malvah. Visitez white-desert.com.

10. Agrumea Farm

Un fond crème chaleureux porte l'ensemble, les petits accents orange brûlé et prune se lisent clairement. L'ouverture sur desktop est épurée : un logo compact d'un agriculteur tenant un panier, des toggles de langue arrondis et une pastille de menu, puis une grande forme mauve poussiéreuse avec de hautes capitales évasées qui se courbent autour de son bord. Sur mobile, des légumes plats en papier découpé en violet aubergine, rouge tomate, jaune citron et vert s'amassent en anneau, avec de grands chiffres orange qui percent par le milieu.

À reprendre : dessinez les produits sous forme de formes colorées plates et trapues sur un fond crème uni, ce qui donne à une petite marque alimentaire un look distinctif à partir de simples fichiers vectoriels.

Attention : la page est légère, mais le résultat aux tests est moyen et les vrais visiteurs constatent un chargement lent du contenu principal. Cela suggère que la grande illustration prend un moment pour apparaître, même si la page entière n'est pas particulièrement lourde.

Créée par Studio K95. Visitez agrumeafarm.it.

11. Slurp

La page est presque entièrement un unique film de dessus de nouilles que l'on soulève d'un bol en grès tacheté, sur fond de grain de bois orange chaleureux. Rien ne rivalise avec cela : la navigation est un petit texte crème en haut et le nom est en bas en énormes capitales géométriques largement espacées. La palette chaleureuse et la main tenant les baguettes la rendent humaine et appétissante.

À reprendre : filmez une unique vue de dessus de votre plat le plus photogénique sur une table en bois uni et laissez-le remplir tout l'écran derrière un petit menu.

Attention : la page est très lourde et le score aux tests moyen, bien que les vrais visiteurs obtiennent un bon résultat sur chaque mesure Core Web Vitals. Cela rappelle qu'il faut séparer le poids de la première chose pour laquelle les gens attendent réellement.

Créée par Studio Morfar. Visitez slurpramen.dk.

12. Paul & Bohne

Une photo de grains torréfiés étroitement cadrée et doucement floue remplit l'écran, et un grand titre blanc condensé est placé au centre mort avec beaucoup de contraste. De fortes bandes jaunes en haut et en bas encadrent la barre de navigation sombre, la palette reste donc jaune, noir profond et marron café. Le type est fort mais ordonné, et la vue mobile garde le même titre et un grand en-tête noir sur jaune au-dessous.

À reprendre : associez une photo étroitement cadrée de vos propres grains, pâtisseries ou assiettes à un unique titre bold condensé et une couleur de marque éclatante dans les bandes autour de lui.

Attention : la page est plus lourde que la moyenne et seulement moyenne aux tests de labo, bien que les vrais visiteurs obtiennent une bonne expérience sur les trois Core Web Vitals. L'imagerie en pleine saignée ne blesse donc pas les gens en pratique.

Créée par ONTU. Visitez paulundbohne.at.

13. Ossa Wines Tasmania

Une photographie en noir et blanc pleine largeur de pics rocheux déchiquetés remplit l'écran, avec de lourds nuages au-dessus et des éboulis sombres en bas. Le nom est épelé dans une grille de majuscules géométriques larges, des lettres blanches s'échelonnant en diagonale avec des répétitions grises qui traînent derrière, ce qui laisse entrevoir une animation décalée. Le petit mot rouge Tasmanie est la seule couleur, et rien d'autre ne rivalise pour attirer l'attention.

Empruntez ceci : Utilisez une photographie en noir et blanc pleine largeur de votre propre terrain, cuisine ou salle à manger, posez un court wordmark sur elle en majuscules géométriques larges, et réservez une seule touche de couleur marque pour un petit label.

Attention à : La page est légère, ce qui joue en sa faveur, mais le résultat du test lab est moyen et il n'y a pas assez de données de vrais visiteurs de Google pour dire comment elle fonctionne pour les vrais visiteurs.

Conçu par Inhouse Design. Visitez ossa.wine.

14. Don Molinico

Une photographie en vue plongeante pleine largeur d'une table dressée avec charcuteries, fromages, pots et assiettes à motifs remplit tout l'écran, pour que la nourriture parle avant toute autre chose. Le titre est composé dans une sans-serif condensée et haute en crème, assez grande pour se lire comme faisant partie de l'image, et le bloc de logo rouge avec lettrage doré ancre le haut centre. Les tons chauds de terre cuite lient la photo aux couleurs marque.

Empruntez ceci : Commencez par une photo en vue plongeante de votre propre table comme arrière-plan plein écran et posez un grand titre crème dessus, avec un bloc de couleur marque solide pour le logo.

Attention à : Le test lab a noté la page lente et les vrais visiteurs voient des problèmes avec le chargement du contenu principal et le décalage de mise en page, même si la page elle-même est légère. C'est donc la gestion des images qui mérite l'effort.

Créé par AUGE EXPERIENCE. Visitez donmolinico.es.

15. Benvenusa Italian Wines

Le wordmark s'étend d'un bord à l'autre dans une sans-serif lourde et large, ce qui fait du nom la première et la plus forte chose de la page. En dessous, une bande plate violet électrique contient de petites majuscules dans une sérif classique, qui se lit comme un label imprimé. La photographie de colline en noir et blanc maintient la couleur sobre, et la villa et le clocher donnent au mauve quelque chose de calme contre lequel pousser.

Empruntez ceci : Associez un wordmark surdimensionné à un seul bloc de couleur plate audacieux et une photographie en noir et blanc de votre propre lieu, pour que l'ensemble du look provienne de trois choix et aucun graphique supplémentaire.

Attention à : La page est plus lourde que la moyenne avec seulement des résultats lab moyens, c'est donc la grande photographie qui concentre probablement le poids. Et il n'y avait pas assez de données de vrais visiteurs pour dire comment cela se ressent pour les vrais visiteurs.

Créé par Sons & Co. Visitez benvenusa.com.

16. Monarque Événements

Un champ bourgogne profond porte un énorme titre composé dans une face de majuscules évasée et très contrastée, dans un blanc cassé chaud qui se lit facilement. Cinq photographies carrées s'y trouvent à des hauteurs et tailles inégales, chacune baignée de lumière chaude : un verre de vin, de la viande grillée, un groupe en direct, du fromage sur une planche, une boisson garnie. L'espace vide généreux empêche les images dispersées de paraître encombrées, et un seul lien discret se trouve sous le titre.

Empruntez ceci : Épinglez une poignée de photos baignées de lumière chaude et recadrées en carré de votre nourriture et de votre salle autour d'un grand titre sur une seule couleur d'arrière-plan unie, et oubliez le slider.

Attention à : La page est légère et le test lab a révélé des résultats moyens, tandis que la vue mobile montre une photo encore floue et le reste de l'écran vide. Les images peuvent donc arriver tardivement sur les connexions plus lentes, même si le poids de la page semble modeste.

Conçu par Solstice. Visitez monarque-evenements.com.

17. Best Bean Best Cup

Le vert forêt profond remplit toute la page, avec un grand titre noir dans une sans-serif grotesque étroite composée en majuscules en haut. En dessous, des formes géométriques plates en vert-gris assourdi forment un motif répétitif autour d'un graphique de tasse noir audacieux, répercutant les marques de logo demi-cercle et quart-cercle. La barre de navigation en forme de pilule en gris pâle se détache proprement, et la vue mobile garde le même titre gras audacieux empilé en lignes centrées soignées.

Empruntez ceci : Associez une seule couleur d'arrière-plan profonde avec un motif répétitif plat construit à partir de formes simples, pour qu'un petit café obtienne un look distinctif à partir d'artwork vectoriel de base.

Attention: la page est très lourde et obtient un score moyen au test de labo, ce qui s'ajoute aux outils d'animation détectés. Mais il n'y avait pas assez de données de vrais visiteurs pour dire comment elle se comporte pour les clients réels.

Réalisé par Nam Bui. Visitez bestbeanbestcup.com.au.

18. Eatery Berlin

La page fonctionne sur une palette serrer d'électrique violet, turquoise et blanc, donc le titre, la fine bande latérale turquoise et le portrait divisé forment un seul système. Un titre serif lourd aux bords doux s'oppose à une police monospace légère pour la navigation et les petits libellés, ce qui crée un contraste clair en tonalité et en taille. L'espace blanc généreux autour du titre le laisse porter la page, et le portrait moitié végétal, moitié humain raconte l'histoire.

À emprunter: associez un titre serif caractérisé avec une police monospace sobre pour les menus et les libellés, et gardez tout dans deux couleurs affirmées pour que la page ait l'air conçue sans budget photo important.

Attention: le test de labo a donné un score moyen, pourtant la page est légère et les vrais visiteurs obtiennent un bon résultat sur les trois Core Web Vitals. L'expérience réelle est donc solide.

Visitez eateryberlin.com.

19. Cozy Eating Village

Le style pixel-art donne à la page une personnalité claire: une police de capitale épaisse et en bloc, un fond bleu ciel pâle avec de petits nuages pixelisés, et des cartes crème qui ressemblent à des photos instantanées penchées. Les vraies photographies de nourriture maison-faite sont à l'intérieur de chaque carte, donc la chaleur vient de la cuisine plutôt que de la décoration. Les boutons de filtre avec des contours marron épais et les petites icônes d'ingrédients grisées gardent la grille rangée et lisible.

À emprunter: encadrez chaque photographie de plat dans une simple carte crème avec une courte légende et une rangée de minuscules icônes d'ingrédients, pour qu'un menu ou une grille de recettes se sente personnelle sans photographie personnalisée.

Attention: la page est très lourde, largement à cause du mur de photographies en plein format, et le résultat du test de labo était moyen. Mais il n'y avait pas assez de données de vrais visiteurs de Google pour dire comment elle se comporte en pratique.

Créée par Brooke Beswick. Visitez cozyeating.app.

20. Qissa

Un fond bleu marine minuit profond porte un seul accent métallisé or, utilisé sur le logo, les boutons de réserve et les petites capitales espacées, pour que l'œil se pose sur où réserver. Le nom du restaurant repose dans un serif léger, haut contraste, au-dessus d'un paragraphe sans serif pâle, tout centré avec beaucoup d'espace vide. Sur mobile, des couverts pâles arrangés en explosion rayonnante se tiennent derrière le texte et font écho au logo.

À emprunter: copiez l'association d'un fond foncé avec un seul accent métallisé chaud réservé au bouton de réserve, pour que l'action principale soit la chose la plus brillante de l'écran.

Attention: la page est plus lourde que la moyenne et les vrais visiteurs attendent un peu trop longtemps le contenu principal, donc l'imagerie de héros foncée et grande vaut la peine d'être compressée. Et le score de labo n'est que moyen.

Réalisé par Red Dash Media. Visitez qissa.co.uk.

Ce qu'un site de restaurant doit faire, au-delà de bien paraître

Un bel écran de départ attire l'attention. Mais la visite ne se transforme en réserve que si les détails pratiques sont faciles à trouver, pour les gens et pour Google.

• Mettez le menu sur sa propre page. Les conseils de Google pour les entreprises alimentaires demandent "l'URL complétement qualifiée du menu" dans vos données structurées, donc le menu a besoin d'une adresse propre (Google Search Central).
• Publiez les horaires, le téléphone et l'adresse en tant que texte. Le balisage des entreprises locales de Google prend les heures d'ouverture, une adresse et un numéro de téléphone qui inclut l'indicatif pays et l'indicatif régional (Google Search Central).
• Utilisez le type Restaurant. Google conseille le type d'entreprise le plus spécifique disponible et cite Restaurant comme exemple; servesCuisine dit ce que vous cuisinez (Google Search Central). acceptsReservations de Schema.org peut pointer directement vers votre page de réserve (schema.org).
• Gardez votre Google Business Profile à jour. L'éditeur de menu y répertorie les plats avec descriptions et prix, et les modifications peuvent prendre 24 à 48 heures pour s'afficher sur Maps et Search (Aide Google Business Profile).
• Rendez le bouton de réservation la chose la plus évidente de la page. Qissa place « Réserver une table » à côté de « Voir le menu » au premier écran, et Studenterkilden affiche « Réserver une table » deux fois avant que vous fassiez défiler.
• Dimensionnez la photographie héroïque pour un téléphone. C'est la plus grande chose sur la plupart de ces pages, et LCP était la métrique qui échouait le plus souvent.

Si le site de votre restaurant paraît dépassé, ou paraît bien mais se charge lentement, c'est ce qu'une refonte de site web devrait corriger. La page conception de site web pour restaurant explique comment je crée des menus, des pages de réservation et de localisation pour les restaurants, et l'optimisation des performances web est le travail plus léger quand seule la vitesse a besoin de travail.

Questions que les gens posent

Qu'est-ce qui rend un site web de restaurant bon ?

Il répond à quatre questions au premier écran : ce que vous servez, où vous êtes, quand vous êtes ouvert et comment réserver. Parmi ces 20, ceux qui paraissent les meilleurs commencent avec une seule photographie de nourriture puissante ou un grand titre avec empattements et laissent tout le reste de côté. Ceux qui fonctionnent le mieux sur un téléphone chargent aussi cette photographie rapidement.

Qu'est-ce qu'un site web de restaurant devrait inclure ?

Votre nom, adresse, numéro de téléphone, horaires d'ouverture, un menu sur sa propre page web et un moyen clair de réserver ou commander. Les conseils de Google sur les entreprises locales demandent aux entreprises alimentaires l'URL du menu et un numéro de téléphone avec l'indicatif du pays et l'indicatif régional, et recommandent le type Restaurant dans vos données structurées (Google Search Central).

À quelle vitesse un site web de restaurant devrait-il se charger ?

Google considère qu'un LCP de 2,5 secondes ou moins, un INP de 200 millisecondes ou moins et un CLS de 0,1 ou moins sont bons, au 75e percentile des chargements de page (web.dev). Parmi les 13 sites ici avec suffisamment de données de vrais visiteurs, 5 les satisfont tous les trois.

Quelle plateforme les sites web de restaurant utilisent-ils ?

Dans ce tirage, WordPress fait fonctionner 7 des 20, et les deux torréfacteurs de café utilisent Shopify pour leurs boutiques en ligne. Les sites qui réussissent et ceux qui échouent fonctionnent tous les deux sur WordPress ici, donc la plateforme seule ne décide pas de la vitesse.

Où puis-je voir davantage de beaux sites web ?

Le pilier 64 beaux sites web couvre huit catégories, des studios aux musées, avec les mêmes tests. Pour les designers et studios, voir les 20 meilleurs sites portfolio, et pour les galeries à parcourir, l'article sites d'inspiration en conception web.