El punt de partida
La Trattoria Da Luiggi és un dels referents de cuina italiana d’Olot. El seu propietari, en Luiggi, ha estat reconegut com a millor pizzaiolo de Catalunya els anys 2023 i 2024 i la trattoria acumula més de 500 ressenyes positives. El problema: la web no estava a l’altura del negoci.
La versió anterior estava construïda amb una plantilla de WordPress que ja ensenyava l’edat. A més del disseny, hi havia problemes tècnics importants que impactaven directament els clients:
- Un error fatal de PHP al peu de cada pàgina (
Fatal error: Uncaught Error: Call to undefined function wp_parse_auth_cookie()), visible per a qualsevol visitant. - Puntuació Google Lighthouse de 36/100 en rendiment al mòbil.
- Imatges i vídeos sense optimitzar que feien la càrrega extremadament lenta.
- Cookies, trackers i permisos de tercers instal·lats per defecte, amb impacte en privacitat.
- Un “captcha” al formulari de contacte que consistia en resoldre una suma simple, inútil contra bots reals.
- Pàgines redundants: “Qui som” i “Contacte” repetien informació que ja hi havia a la home.
- Dependència d’una quota mensual de hosting per mantenir el WordPress funcionant.
En resum: una web que semblava feta el 2010, amb manteniment car i que transmetia una imatge que no concordava amb la qualitat del restaurant.
L’aproximació
Vaig reconstruir la web sencera des de zero, sense WordPress, sense plugins, sense base de dades. Astro compila tot el codi a HTML, CSS i una mica de JavaScript, servits com a fitxers estàtics des de Cloudflare Pages. Això eliminava d’un sol cop els problemes de hosting, el PHP trencat, els plugins vulnerables i la quota mensual.
Decisions tècniques principals
- Astro + Tailwind CSS per construir la web com a site 100% estàtic. Res de servidor, res de base de dades, res que es pugui trencar sol.
- Tipografia editorial: Fraunces com a serif de display (variable, ajustada amb l’eix SOFT per donar calidesa) combinada amb Inter per al cos. Transmet qualitat i cura.
- Paleta italiana sòbria: carbó, crema, vermell accent i groc safrà. Barretes tricolores verda-blanca-vermella com a senyal d’identitat visual, sense caure en el clixé.
- Imatges optimitzades via el component
<Picture>d’Astro, que negocia automàticament AVIF/WebP segons el navegador del visitant. - Zero JavaScript en la majoria de pàgines. Només es carrega l’script de GloriaFood (integració de comandes) a la pàgina on fa falta.
- Deploy a Cloudflare Pages: hosting gratuït, CDN global i certificat SSL automàtic.
Estructura
Tres pàgines, ni una més:
- Home amb hero, la història d’en Luiggi, visites (localització, horaris, WhatsApp), ressenyes de clients i crides a l’acció clares.
- Carta amb més de 70 plats organitzats en 9 seccions, etiquetes dietètiques (sense gluten, especialitat de la casa, picant) i un índex lateral sticky que permet saltar entre seccions ràpidament.
- Ofertes de feina amb 3 ofertes estructurades amb schema.org (apareixen automàticament a Google for Jobs).
Vaig treure les pàgines “Qui som” i “Contacte” perquè la seva informació ja vivia a la home. Una web més curta, més clara i més efectiva.
Atenció als detalls
- Esquema.org complet per a restaurant, carta i ofertes de feina. Millora la visibilitat a Google (rich snippets amb preus, horaris, puntuació).
- Integració WhatsApp per a reserves i per enviar candidatures de feina directament.
- El menú diferencia els plats que només es poden menjar al restaurant dels que també es poden demanar a domicili.
- Accessibilitat real: skip link, etiquetes ARIA, HTML semàntic, focus rings visibles en safrà. El resultat: 100/100 de Lighthouse en accessibilitat.
- Ressenyes reals extretes de Google i de l’antiga web, respectant la veu original de cada client.
Els resultats
Un salt de 36 a 98 en rendiment al mòbil. Aquesta és la diferència entre una web que fa fugir els clients i una que els reté. Les altres mètriques també milloren de manera significativa:
- Rendiment: de 36 a 98
- Accessibilitat: de 77 a 100
- Bones pràctiques: de 73 a 100
- SEO: de 100 a 100 (mantenint el màxim)
I el que no es veu a les puntuacions però és igual d’important:
- Zero errors tècnics visibles als clients.
- Hosting gratuït de per vida a Cloudflare Pages. S’acaben les quotes mensuals.
- Propietat total del restaurant: codi font, hosting, domini. Tot al seu nom.
- Una imatge a l’altura del negoci: la web ara transmet qualitat, ofici i modernitat, exactament com la cuina que surt de les seves pizzes.