Rendimiento y Core Web Vitals

Core Web Vitals 2026: pasar PrestaShop al verde (caché, Critical CSS, imágenes next-gen)

Core Web Vitals 2026 : passer PrestaShop au vert (cache, Critical CSS, images next-gen)

Los Core Web Vitals ya no son un tema de nicho para desarrolladores. Desde que Google los convirtió en un factor de posicionamiento directo, un LCP de 4 segundos o un CLS que salta cuesta posiciones en las búsquedas de producto — y por tanto ingresos. En 2026, el INP ha sustituido al FID y aprieta aún más en móvil. La buena noticia: una tienda PrestaShop puede pasar al verde sin rehacerla, siempre que se ataquen las tres métricas en el orden correcto.

Este artículo detalla la cadena de optimización completa: qué pesa realmente en LCP, INP y CLS, y las palancas técnicas que hacen pasar el estado de Search Console de «Mejorable» a «Bueno».

Entender qué mide cada métrica

LCP (Largest Contentful Paint) mide el tiempo de renderizado del mayor elemento visible — a menudo la imagen principal de la ficha de producto o el visual hero de la home. INP (Interaction to Next Paint) mide la capacidad de respuesta: el retardo entre un clic y la respuesta visible de la página, lastrado por el JavaScript. CLS (Cumulative Layout Shift) mide la estabilidad visual: todo elemento que «empuja» el contenido a posteriori (una imagen sin dimensiones, un banner inyectado) degrada la puntuación.

Paso 1 — La caché full-page, la mayor palanca de LCP

PrestaShop regenera el HTML en cada visita si nada lo cachea. En un alojamiento compartido, el TTFB (time to first byte) se dispara y tira del LCP hacia arriba. Una caché full-page sirve el HTML ya construido en pocos milisegundos. Es, con diferencia, la palanca con más impacto en el LCP — antes incluso de tocar las imágenes. Combinada con la generación de Critical CSS (el CSS mínimo necesario para mostrar el above-the-fold, inyectado inline, y el resto cargado en diferido), se elimina el render-blocking que retrasa el primer renderizado.

Eso es exactamente lo que reúne un pack de rendimiento dedicado a PrestaShop: caché de página, Critical CSS y optimizaciones avanzadas en un solo módulo, sin manipular el servidor.

Caché de Página y Optimización de Velocidad PrestaShop 8 y 9Caché de página, Critical CSS y optimización avanzada para PrestaShop 8 y 9.149,00

Paso 2 — Las imágenes next-gen (WebP / AVIF)

En una tienda, las imágenes suelen representar el 70 % del peso de las páginas. Servir JPEG/PNG en 2026 es dejar entre un 30 y un 60 % de peso inútil. WebP y sobre todo AVIF ofrecen la misma calidad visual por una fracción del peso — una ganancia directa en el LCP móvil. La regla: conversión automática al vuelo, servicio en local (sin depender de un CDN de terceros de pago) y fallback para los navegadores antiguos.

En PrestaShop, el optimizador de imágenes WebP & AVIF realiza esta conversión automáticamente y 100 % en local. Si tu tienda funciona con WooCommerce, el equivalente es WebP AVIF Pro — misma lógica, sin suscripción.

Paso 3 — Dominar el CLS y el INP

El CLS se resuelve reservando el espacio: dimensiones explícitas o aspect-ratio en cada imagen e iframe, fuentes cargadas con font-display swap y fallback métrico. El INP se gana aligerando el JavaScript: diferir los scripts no críticos, evitar los sliders y popups pesados en la carga. Un caso clásico que lastra ambos: una galería de producto o un vídeo mal integrado — tema que detallamos en nuestro análisis vídeo de producto frente a Core Web Vitals.

El caso particular de las páginas con facetas

Las páginas de categoría filtradas (búsqueda por facetas) suelen ser las peores: recargas completas, URLs no indexables, JavaScript pesado. Un motor de facetas pensado para el rendimiento y el SEO, como la búsqueda por facetas & SEO para PrestaShop, resuelve los filtros en el lado servidor con landing pages indexables y renderizado rápido — en lugar de degradar el INP en cada clic de filtro.

Conclusión: optimizar en orden, medir en continuo

La secuencia ganadora es clara: caché full-page y Critical CSS primero (impacto máximo en LCP), luego imágenes next-gen, luego estabilidad (CLS) y capacidad de respuesta (INP). Mide antes/después en Search Console con datos de campo (CrUX), no solo en Lighthouse de laboratorio. Para profundizar en el método con código real, nuestra checklist Core Web Vitals 2026 con PHP y SQL va más lejos, y todas nuestras guías están reunidas en la categoría Rendimiento y Core Web VitalsOptimización del rendimiento y los Core Web Vitals: LCP, CLS, INP, lazy loading nativo y avanzado, conversión de imágenes a WebP / AVIF, CDN, generación de CSS crítico, caché de…