PageSpeed 99/100 en una tienda PrestaShop 9.1 real con más de 80 módulos

No es una demo. Es una tienda real.

Cuando se ven estudios de caso de PageSpeed en línea, normalmente muestran un sitio minimalista con un puñado de páginas y apenas funcionalidad. Esto no es así.

mypresta.rocks es nuestra tienda PrestaShop 9.1 en producción. Funciona con más de 80 módulos activos — y no son módulos ligeros solo de configuración. Hablamos de módulos que añaden funcionalidad front-end real: sliders animados, mega menú con desplegables, un checkout one-page completo, un motor de blog con comentarios y compartir, un widget de búsqueda en vivo, feeds de redes sociales, galerías de productos, popups de ventas, temporizadores de cuenta regresiva, banners de consentimiento de cookies, programas de fidelidad, paneles de análisis y mucho más.

Cada uno de estos módulos carga sus propios archivos CSS y JavaScript. Cada uno se engancha al front office y renderiza elementos visibles e interactivos en la página. Este es el tipo de configuración que normalmente destruye tu puntuación PageSpeed.

Y sin embargo, aquí están nuestras puntuaciones de Google PageSpeed Insights:

• Móvil: 99 Performance, 97 Accessibility, 100 Best Practices, 100 SEO
• Escritorio: 99 Performance, 97 Accessibility, 100 Best Practices, 100 SEO

Esto no es teoría. Es lo que Google mide ahora mismo en nuestra página de inicio en vivo.

Los números

Móvil (4G lento, Moto G Power)

• First Contentful Paint: 1,2s
• Largest Contentful Paint: 1,5s
• Total Blocking Time: 110ms
• Cumulative Layout Shift: 0
• Speed Index: 1,4s

Escritorio

• First Contentful Paint: 0,3s
• Largest Contentful Paint: 0,9s
• Total Blocking Time: 30ms
• Cumulative Layout Shift: 0,011
• Speed Index: 0,5s

Estos resultados provienen de Lighthouse 13 ejecutándose en la infraestructura de Google — la misma prueba que impulsa el informe PageSpeed Insights que comprueba cada propietario de tienda.

Cómo lo hicimos

No hay un único truco mágico. El rendimiento a este nivel proviene de un pipeline disciplinado que toca cada capa del stack. Cubrimos los fundamentos en nuestra guía de optimización del rendimiento de PrestaShop.

Extracción de Critical CSS

El mayor enemigo del renderizado rápido es el CSS que bloquea el renderizado. El sistema CCC de PrestaShop (Combine, Compress, Cache) fusiona todas las hojas de estilo de los módulos en un archivo grande. En nuestra tienda, ese archivo supera los 500KB.

Extraemos el CSS crítico above-the-fold usando la biblioteca Critters de Google y lo insertamos directamente en el HTML. La hoja de estilo completa se carga luego de forma asíncrona usando el patrón media="print" onload="this.media='all'". El navegador renderiza la página inmediatamente con los estilos insertados, y el resto se carga en segundo plano sin bloquear nada.

Purga de CSS

Con más de 80 módulos, el CSS combinado contiene miles de reglas que nunca se usan en ninguna página concreta. Ejecutamos PurgeCSS contra el HTML real de las páginas clave más todos los archivos JavaScript y de plantillas en el tema y los módulos.

El resultado: 852KB reducido a 548KB — una reducción del 36% en la carga útil CSS. Menos CSS significa descargas más rápidas, parsing más rápido y un intercambio más fluido sin desplazamiento del diseño.

División de JavaScript

No todo el JavaScript necesita ejecutarse inmediatamente. Dividimos el bundle JavaScript CCC en dos partes:

• Bundle síncrono (~140KB / 41KB gzip): Funcionalidad core — jQuery y los scripts core de PrestaShop
• Bundle diferido (~497KB / 111KB gzip): Bootstrap, scripts del tema y scripts de módulos no críticos cargados mediante <script defer>

El bundle diferido se carga sin bloquear el hilo principal. Esto por sí solo redujo nuestro JavaScript síncrono en más del 60%.

Carga inteligente de assets

El JavaScript del checkout (180KB+ minificado) se difiere completamente en las páginas que no son de checkout. Se carga mediante requestIdleCallback en la página de inicio y páginas de contenido, y solo se carga inmediatamente en las páginas de producto, carrito y checkout donde realmente se necesita.

El JavaScript de pago de Stripe se elimina por completo de las páginas que no son de checkout.

Optimización de imágenes

Todas las imágenes de productos y banners se sirven en formato AVIF mediante la negociación de contenido de Apache — cero overhead PHP. Nuestro convertidor por lotes procesó 5.399 imágenes, reduciendo el almacenamiento total de imágenes de 994MB a 44MB (reducción del 95,6%).

Nuestro banner hero móvil pesa solo 25KB. La versión de escritorio es de 56KB. Ambos mantienen una excelente calidad visual a estos tamaños.

Solo precargamos la imagen LCP móvil y nada más. En una conexión 4G lenta con ~200KB/s de ancho de banda, cada recurso precargado compite con el CSS crítico por el ancho de banda. Precargar una fuente o un banner de escritorio en realidad empeoró nuestro FCP — una lección aprendida por las malas.

Accesibilidad WCAG 2.1

La alta puntuación de accesibilidad requirió una atención cuidadosa a las relaciones de contraste en cada elemento de la página:

• Todos los textos cumplen los requisitos de contraste WCAG 2.1 AA (4,5:1 para texto normal, 3:1 para texto grande)
• Los elementos interactivos tienen indicadores de foco visibles
• Jerarquía de encabezados adecuada y etiquetas ARIA en todo el sitio
• Los elementos ocultos usan .visually-hidden correctamente para lectores de pantalla

Por qué esto importa

Google usa los Core Web Vitals como señal de clasificación. Una tienda rápida y accesible se posiciona mejor, convierte mejor y ofrece una mejor experiencia a cada visitante.

Pero más importante para nuestros clientes: cada técnica de optimización que usamos en mypresta.rocks está integrada en nuestros productos. El módulo Performance Revolution que impulsa este pipeline está disponible para todos nuestros clientes. La misma extracción de Critical CSS, la misma división de JavaScript, la misma carga inteligente de assets.

Si podemos alcanzar 99/100 con más de 80 módulos activos en una tienda real en producción — módulos que añaden sliders, búsqueda, checkout, blog, popups y todo lo demás — tu tienda también puede lograrlo. Combínalo con Instant Redis para el caché del lado del servidor y tendrás un stack de rendimiento completo.