Desarrollo a medida · Tienda WooCommerce · Sitio en 4 idiomas
El Pobill Ecològics produce aceite de oliva virgen extra ecológico en su propia finca del Maestrat (Castellón), con premios como la plata en el Fòrum AOVE de Cocentaina. Pero su web anterior competía en su contra: unos 41 segundos de carga en móvil con una red lenta simulada, 49 plugins acumulados. Reconstruí el sitio completo (WordPress, Breakdance, WooCommerce) en cuatro idiomas de verdad, con la información de producto que un aceite premium necesita. La reconstrucción está terminada en el entorno de pruebas y pendiente de pasar a producción: las cifras de "después" son de ese entorno.
2,4 s
Carga de lo principal en móvil (entorno de pruebas), antes 41 s
17
Plugins activos en el entorno de pruebas, antes 49 (recuento del 01/08/2026)
4
Idiomas con contenido real: valencià, español, inglés y alemán
523 KB
Peso de la portada en móvil (entorno de pruebas)
El cliente
David Taus cultiva sus propias olivas y elabora su aceite en el Maestrat (Castellón), sin intermediarios ni mezclas. El Pobill Ecològics tiene certificación ecológica (CAECV, UE-ES-ECO) y premios como la plata en el Fòrum AOVE de Cocentaina 2022, además de una historia de marca real detrás de cada botella.
Pero la web anterior no reflejaba nada de eso: unos 41 segundos de carga en móvil, 49 plugins acumulados con los años. Para un producto premium que también se vende por su historia, una web lenta y genérica jugaba en su contra.
El reto
El encargo no era un simple rediseño visual. Era reconstruir la base técnica desde cero mientras se preservaba, y se enriquecía, todo el contenido narrativo que hace especial a esta marca.
Una base técnica que lastraba todo
49 plugins acumulados, unos 41 segundos de carga en móvil. Cualquier mejora de contenido o de conversión era secundaria mientras la web fuera casi inutilizable en el dispositivo donde llega la mayoría del tráfico.
Cuatro idiomas, contenido real
El Pobill vende también fuera de España: la web necesitaba valencià, español, inglés y alemán con contenido propio en cada ficha de producto, no una traducción automática de la interfaz.
Información de producto que exige precisión
Notas de cata, maridajes, y un perfil de salud con datos de polifenoles y vitamina E amparado en la normativa europea de declaraciones saludables. Cualquier imprecisión aquí tiene implicaciones legales, no solo de marketing.
Lo que se desarrolló
Construí el sitio en WordPress con Breakdance y WooCommerce, con WPML para gestionar los cuatro idiomas de forma nativa.
Reconstrucción técnica completa
De 49 plugins (recuento del 01/08/2026) a 17 activos en el entorno de pruebas, con una plantilla de ficha de producto propia (no la plantilla genérica por defecto), zoom real y navegación por pestañas.
Rendimiento mejorado, con trabajo pendiente
En el entorno de pruebas, lo principal de la portada en móvil pasa de unos 41 s a 2,4 s y la portada pesa 523 KB (traza de Chrome con red lenta y caché fría). Aún puede bajar: lo que pinta el LCP es el banner de cookies, y queda por decidir si se difiere jQuery o se rediseña el banner.
Sitio completo en cuatro idiomas
Valencià, español, inglés y alemán, con contenido propio en cada ficha de producto, la home, la tienda y el blog, no traducción automática.
Ficha de producto con perfil de salud
Notas de cata, maridajes y un recuadro de polifenoles y vitamina E amparado en la normativa europea de declaraciones saludables, visible en los productos con datos ya cargados.
Quiz de recomendación editable
Un quiz para quien no sabe qué aceite elegir, que el cliente edita desde el panel (preguntas, opciones y recomendación), en los cuatro idiomas.
Datos estructurados para Google Shopping
Schema.org Producto en cada ficha, para que el catálogo pueda aparecer en resultados de compra de Google.
Resultados
Los números de rendimiento son el cambio más directo: de unos 41 segundos hasta pintar lo principal en móvil y 0,47 de desplazamiento de diseño, a 2,4 segundos y 0 en el entorno de pruebas (traza de Chrome con red Slow 4G, CPU 4x y caché fría, 03/11/2026). Y de 49 plugins heredados a 17 activos, una base mucho más ligera y fácil de mantener.
Y no es solo velocidad: la tienda se navega igual de bien desde el móvil que desde el escritorio. Los packs de regalo, la selección guiada por tipo de compra ("para el día a día", "para regalar") y el resto de la experiencia funcionan exactamente igual en la pantalla donde llega la mayoría del tráfico.
El contenido de producto (fichas, notas de cata, perfil de salud) está construido para escalar a todo el catálogo, no solo a los primeros productos: el sistema ya está listo para que cada ficha nueva se complete con el mismo nivel de detalle, en los cuatro idiomas.
David sigue aportando contenido (fotografía de producto, textos de las cajas de regalo) mientras el catálogo se completa. Es un proyecto vivo, no una entrega cerrada de un día para otro.
Diseño
Pobill Ecològics cultiva sus olivos en el Maestrat y elabora su propio aceite. Su tienda, hecha con un maquetador antiguo, no contaba nada de eso. La rediseñé con identidad, rapidez y una condición: todo lo que se dice del producto lo valida el cliente. Está en el entorno de pruebas, pendiente de pasar a producción, y las cifras del rediseño son de ese entorno.
La web de Pobill tenía 49 plugins (recuento del 01/08/2026), fichas de producto pobres y un proceso de compra con fricción.
En móvil, la portada tarda unos 41 s en pintar lo principal y la página se mueve mientras carga (desplazamiento de diseño de 0,47), medido el 02/11/2026. El encargo era una web con identidad, rápida y que venda.
La portada abre con la finca y el aceite ("Oli ecològic nascut al Maestrat"), no con una parrilla de productos. El catálogo llega después. Para quien no sabe qué elegir, hay un quiz que el cliente edita él mismo desde el panel (preguntas, opciones y recomendación), en los cuatro idiomas.
Una franja de reconocimientos entre el hero y el quiz reúne los premios reales del cliente: 24, con una cinta animada de cinco destacados que enlaza a una cronología por campaña en "Nosaltres". La cifra pasó de 22 a 24 al contarlos uno a uno: un dato que se publica se cuenta, no se copia.
El mapa de cómo llegar se tiñó con el terracota de la marca con un modo de mezcla que conserva el relieve (descarté "multiplicar", que lo aplana), y su botón va en ámbar. Se aprobó tras tres rondas de ajuste.
Cada texto técnico sobre el producto se acordó con el cliente, y los términos que descartó se eliminaron en los cuatro idiomas. Lo que no se puede afirmar con soporte, no se escribe.
Capturas del 24/10/2026: a la izquierda, la web actual; a la derecha, el rediseño en el entorno de pruebas. Mismo contenido, otro sistema.
| Página | Móvil |
|---|---|
| Elemento principal de la portada (LCP) | anterior 41 s actual 2,4 s |
| Desplazamiento de diseño (CLS) | anterior 0,47 actual 0 |
| Peso de la portada | sin dato actual 523 KB |
| Solicitudes | sin dato actual 28 |
Traza de rendimiento de Chrome en la portada en catalán: móvil de 390 px, red Slow 4G, CPU 4x y caché fría. Web actual medida el 02/11/2026 y el 03/11/2026 (41,1 s y 40,8 s); rediseño medido el 03/11/2026 en el entorno de pruebas (mediana de tres cargas: 2,4 s). "Sin dato": la web actual no se midió en esa casilla con este método. SEO no es comparable, porque el entorno de pruebas va con noindex.
Son cifras de laboratorio con una red muy lenta: sirven para comparar antes y después, no como la experiencia de un visitante real. Lo que pinta el LCP en el rediseño es el párrafo del banner de cookies (unos 2,4 s); bajarlo más exige diferir jQuery o rediseñar el banner, y está por decidir.
Más detalle
En el diseño de "Más allá del aceite", los productos gourmet van en chips pequeños con una foto cuadrada, no en tarjetas grandes: tienen que respirar menos que los aceites. Una imagen decorativa de fondo competía con los chips, así que la quité, y las fotos se asientan sobre un fondo crema. Son cinco chips, sin tarjetas grandes.
Un bloque de confianza en la ficha de producto cuenta el compromiso social y el proceso "de la oliva a la botella". Cambia de peso: va solo en los productos gourmet y acompañado del proceso en los aceites.
La página de experiencias parte el precio, avisa de la venta de alcohol, explica el proceso en tres pasos y reúne la información práctica en siete filas. La reserva y el formulario, que competían, se fusionaron en un único cierre.
Para el blog "Diari del Maestrat" probé cuatro cabeceras: la actual, una oscura de marca, un lomo vertical de periódico y un collage atrevido. Se eligió la oscura y fui quitando adornos: la inicial gigante, el número de edición y el borde lateral. Sin boletín, el cierre del blog lleva a los productos.
En los productos simples (regalos, caviares, mermelada, crema y polvo) el selector de cantidad y el botón de compra aparecían en filas separadas. El fallo estaba en la plantilla compartida, y un único arreglo lo corrigió en todo el catálogo.
En las portadas en castellano, inglés y alemán, el móvil las maquetaba a 1.440 px (carrito y menú fuera de pantalla, con un LCP de unos 6 s). Dos líneas de CSS lo corrigieron y esas tres portadas cargan ahora en unos 2,4 a 2,5 s.
Verde oliva oscuro, crema y ámbar como base, con un marrón tierra para el texto. Titulares en Cormorant Garamond, texto en DM Sans y etiquetas y precios en JetBrains Mono.
Contrastes de la paleta, calculados con WCAG 2.1:
Texto y botones: tinta marrón sobre crema 15,69:1; tinta marrón sobre crema cálida 14,68:1; verde oliva sobre ámbar (botón principal) 5,19:1; crema sobre verde oliva 12,54:1; ámbar sobre verde oliva (etiquetas) 5,19:1.
Un producto premium merece una web que no lo traicione en el primer segundo de carga. Si tu tienda online arrastra plugins, lentitud o una base técnica que ya no sostiene lo que quieres vender, hablemos.