Stack: WordPress · Carbon Fields · WPGraphQL · Astro SSG · Tailwind CSS · Netlify
El reto
Un despacho de abogados necesita una presencia online que transmita autoridad, confianza y profesionalidad desde el primer segundo. Pero también necesita que el equipo jurídico pueda actualizar contenidos sin tocar una sola línea de código.
Las soluciones tradicionales con WordPress monolítico funcionan, pero el frontend queda atado a los temas de WordPress. Las soluciones puramente estáticas no permiten que el cliente gestione su propio contenido.
La solución: arquitectura headless. WordPress como motor de contenidos, Astro como frontend estático ultrarrápido.
Arquitectura de la solución
Content Layer: WordPress con Carbon Fields para campos personalizados y WPGraphQL para exponer la API GraphQL.
Frontend Layer: Astro SSG con consultas GraphQL tipadas, componente Image para optimización automática y Tailwind CSS.
Delivery Layer: Netlify CDN con deploy hooks y Edge Network con menos de 50ms de TTFB global.
Por qué esta arquitectura
Para el cliente
Edición sin fricción. Gestión completa desde wp-admin: textos del hero, áreas de práctica, perfiles de abogados, datos de contacto. Sin intervención de un desarrollador.
Velocidad real. El sitio se sirve como HTML estático desde la CDN. No hay PHP ejecutándose en cada visita.
Seguridad. Al no exponer WordPress directamente, la superficie de ataque se reduce drásticamente.
Coste controlado. WordPress en hosting compartido + Netlify en plan gratuito = infraestructura de producción por menos de 10 euros al mes.
Para desarrolladores
Separación de responsabilidades limpia. Backend y frontend son repositorios independientes con ciclos de deploy separados.
TypeScript de extremo a extremo. Las queries GraphQL generan tipos TypeScript que fluyen hasta los props de cada componente Astro.
Zero JS por defecto. Astro no envía JavaScript al navegador salvo donde sea estrictamente necesario. HTML puro, accesible y rastreable.
Campos personalizados con Carbon Fields
En lugar de usar ACF (de pago) opté por Carbon Fields, una librería PHP open source que ofrece campos complejos (listas anidadas, imágenes, texto enriquecido) con una API limpia. Cada campo se expone al schema GraphQL mediante resolvers propios en el plugin martinez-fields.
Optimización de imágenes: doble capa
En el servidor (WordPress): Conversión a WebP con cwebp -q 82. El plugin expone sourceUrl (JPG, fallback) y webpUrl (WebP, prioritario) en el schema GraphQL.
En el frontend (Astro): Image de astro:assets reoptimiza en build time y aplica lazy loading. Fotos de 60 KB (JPG) a 18 KB (WebP), una reducción del 70%.
Flujo editorial del cliente
El flujo es completamente autónomo: el abogado edita en wp-admin, WordPress llama al Deploy Hook de Netlify automáticamente, Netlify lanza un nuevo build de Astro en unos 30 segundos y el sitio actualizado se despliega en la CDN global. Sin intervención técnica.
Resultados
Lighthouse Performance: 98/100 en móvil
TTFB menor de 50ms servido desde CDN, sin base de datos
0 dependencias JS en el bundle del cliente
Imágenes 70% más ligeras con doble optimización WebP
Deploy automático en menos de 30 segundos al guardar en WordPress
Reflexión final
Este proyecto demuestra cómo una arquitectura moderna puede dar respuesta a necesidades reales sin sobredimensionar la solución. WordPress donde aporta valor real, Astro donde importa la velocidad y GraphQL como contrato explícito entre ambas capas.
El resultado es un sitio que el cliente puede mantener de forma autónoma, que carga en milisegundos desde cualquier parte del mundo y que cualquier desarrollador puede entender y extender sin fricción.
Paco Pastor
Desarrollador web freelance especializado en rendimiento, SEO técnico y arquitecturas modernas con Astro, WordPress Headless y Sanity.
