Cómo medir el impacto real del rendimiento de tu tema de PrestaShop

Tu tema probablemente es más lento de lo que crees

Todo propietario de una tienda PrestaShop tiene una opinión sobre la velocidad de su tema, pero muy pocos tienen datos reales. Decir "mi tienda se siente rápida" no tiene sentido cuando Google está midiendo tus Core Web Vitals al milisegundo y usando esos números para determinar tu posicionamiento en búsquedas. Para entender el impacto real del rendimiento de tu tema, necesitas un enfoque de medición sistemático que aísle la contribución del tema del rendimiento del servidor, la sobrecarga de los módulos y las condiciones de la red.

Este artículo recorre una metodología completa de medición del rendimiento. Aprenderás a usar Lighthouse, WebPageTest, Chrome DevTools y monitoreo de usuarios reales para cuantificar exactamente cuánto te cuesta tu tema en tiempo de carga, interactividad y estabilidad visual. Más importante aún, aprenderás a separar el rendimiento del tema de todo lo demás para que puedas tomar decisiones informadas sobre optimización o reemplazo.

Por qué el rendimiento del tema importa más de lo que piensas

Tu tema controla toda la experiencia front-end. Determina qué archivos CSS se cargan, cuánto JavaScript se ejecuta, cómo se renderizan las imágenes, cómo se cargan las fuentes y cómo se construye la maquetación. Un tema mal construido puede añadir de 2 a 5 segundos a tu tiempo de carga de página independientemente de lo rápido que sea tu servidor o lo bien codificados que estén tus módulos.

Los Core Web Vitals de Google miden directamente aspectos de la experiencia del usuario que tu tema controla. Largest Contentful Paint (LCP) mide qué tan rápido se hace visible el contenido principal. First Input Delay (FID) y su sucesor Interaction to Next Paint (INP) miden qué tan rápido responde la página a la interacción del usuario. Cumulative Layout Shift (CLS) mide la estabilidad visual mientras la página carga. Las tres métricas están fuertemente influenciadas por la arquitectura del tema.

El impacto empresarial es concreto. Las investigaciones muestran consistentemente que cada segundo adicional de tiempo de carga reduce las tasas de conversión entre un 7 y un 10%. Un tema que añade 2 segundos de tiempo de carga innecesario podría estar costándote entre un 15 y un 20% de tus ventas potenciales. Eso convierte la medición del rendimiento del tema no en un ejercicio técnico sino en un análisis crítico para el negocio.

Configuración de tu entorno de pruebas

Antes de comenzar a medir, necesitas un entorno de pruebas controlado. Medir el rendimiento en tu tienda en producción mientras los clientes navegan y la carga del servidor fluctúa producirá resultados inconsistentes. Necesitas minimizar las variables.

Idealmente, configura una copia de staging de tu tienda PrestaShop. Esta debe ser una copia idéntica de tu tienda de producción ejecutándose en el mismo hardware de servidor o una configuración similar. Instala los mismos módulos, importa los mismos productos y usa la misma configuración del tema. La única diferencia debería ser que ningún cliente real esté accediendo a ella.

Si no es posible un entorno de staging completo, ejecuta tus pruebas durante las horas de menor tráfico cuando la carga del servidor es mínima. Ejecuta cada prueba al menos tres veces y promedia los resultados para tener en cuenta la variabilidad de la red y del servidor.

Deshabilita cualquier proxy de caché (como Cloudflare) para tus pruebas, o usa la URL de staging que evite el CDN. El caché del CDN oculta el verdadero rendimiento de tu tema al servir contenido almacenado en caché. Quieres medir lo que sucede cuando un visitante llega a tu servidor de origen con una caché de navegador vacía.

Documenta tu configuración base. Anota la versión de PHP, la versión de PrestaShop, los módulos activos, la configuración CCC (Combinar, Comprimir, Cachear) y las especificaciones del servidor. Necesitarás esta información para reproducir resultados y comparar mediciones a lo largo del tiempo.

Lighthouse: Tu punto de partida

Google Lighthouse está integrado en Chrome DevTools y proporciona la auditoría de rendimiento más accesible disponible. Simula un dispositivo móvil en una conexión con throttling y mide las métricas clave que Google usa para el posicionamiento en búsquedas.

Para ejecutar una auditoría de Lighthouse, abre Chrome DevTools (F12), navega a la pestaña Lighthouse, selecciona "Rendimiento" como categoría, elige "Móvil" como dispositivo y haz clic en "Analizar carga de página". Lighthouse recargará la página en un entorno simulado y generará un informe detallado.

La puntuación de Rendimiento (0-100) es un compuesto ponderado de seis métricas: First Contentful Paint (10%), Speed Index (10%), Largest Contentful Paint (25%), Total Blocking Time (30%), Cumulative Layout Shift (25%). Ten en cuenta que Total Blocking Time y Largest Contentful Paint juntos representan el 55% de la puntuación, por lo que estas son las métricas más susceptibles de verse afectadas por la calidad del tema.

Ejecuta la auditoría en al menos cuatro tipos de página: tu página de inicio, una página de categoría, una página de producto y la página del carrito o checkout. Cada tipo de página tiene diferente complejidad de DOM y requisitos de recursos, y tu tema puede rendir de forma muy diferente en cada uno.

Advertencia importante: Lighthouse se ejecuta en un entorno simulado con throttling de CPU y red. Los números absolutos que produce no coinciden con el rendimiento del mundo real. Son útiles para comparaciones (antes vs después, tema A vs tema B) pero no deben tomarse como la experiencia real que tienen tus clientes. Para números del mundo real, necesitas el Monitoreo de Usuarios Reales, cubierto más adelante en este artículo.

Registra cada resultado de Lighthouse en una hoja de cálculo. Incluye la URL probada, la fecha y hora, la puntuación general de Rendimiento y el valor de cada métrica individual. Esto crea una línea base a la que puedes referirte mientras realizas cambios.

WebPageTest: Análisis en profundidad

WebPageTest (webpagetest.org) es una herramienta gratuita que proporciona mucho más detalle que Lighthouse. Ejecuta navegadores reales en hardware real desde ubicaciones de todo el mundo, dándote una imagen más precisa de lo que experimentan tus clientes.

Inicia una prueba introduciendo la URL de tu tienda, seleccionando una ubicación de prueba cercana a tu audiencia principal y eligiendo una velocidad de conexión. Para tiendas europeas, usa una ubicación de prueba en Frankfurt o Londres con un perfil de conexión Cable o 4G. Ejecuta al menos tres pruebas para obtener resultados medianos.

El gráfico de cascada es el resultado más valioso de WebPageTest. Muestra cada recurso individual que carga tu página, en orden cronológico, con el tiempo que cada recurso tarda en descargarse. Esta visualización hace inmediatamente obvio qué recursos bloquean el renderizado y cuáles se cargan innecesariamente.

Busca estos patrones en la cascada. CSS y JavaScript que bloquean el renderizado aparecen como barras largas en la parte superior del gráfico antes de que se renderice cualquier contenido. Archivos de fuentes grandes que se descargan antes del contenido crítico indican una estrategia deficiente de carga de fuentes. Solicitudes de terceros (analítica, widgets sociales, plugins de chat) que bloquean o retrasan los recursos de tu tema.

WebPageTest también proporciona una vista de tira de película que muestra capturas de pantalla de tu página a intervalos de 100ms durante la carga. Esto es increíblemente útil para entender la experiencia visual de carga. Puedes ver exactamente cuándo aparece el texto, cuándo se renderizan las imágenes y cuándo ocurren los cambios de diseño.

La vista "Desglose de Contenido" muestra el peso total de tu página desglosado por tipo de contenido: HTML, CSS, JavaScript, imágenes, fuentes y otros recursos. Para un tema bien optimizado, el CSS debería estar por debajo de 100KB comprimido, el JavaScript por debajo de 150KB comprimido y las fuentes por debajo de 50KB. Si tus números son significativamente superiores, tu tema lleva peso excesivo.

Pestaña Performance de Chrome DevTools: Análisis fotograma a fotograma

La pestaña Performance de Chrome DevTools proporciona el análisis más granular disponible. Registra una línea temporal detallada de todo lo que el navegador hace durante la carga de la página, incluyendo ejecución de JavaScript, cálculos de diseño, operaciones de pintado y composición.

Para usarla, abre DevTools (F12), ve a la pestaña Performance, marca "Capturas de pantalla" y "Web Vitals", selecciona el throttle de red "Slow 3G" y la ralentización de CPU "4x slowdown", luego haz clic en el botón de grabación y recarga la página. Detén la grabación una vez que la página haya cargado completamente.

La línea temporal resultante muestra varios carriles de información. El carril Network muestra las solicitudes de recursos. El carril Frames muestra capturas de pantalla en momentos clave. El carril Main muestra la ejecución de JavaScript en el hilo principal. Los marcadores de Web Vitals muestran exactamente cuándo ocurren los eventos de FCP, LCP y CLS.

Concéntrate en el carril del hilo principal (Main). Los bloques amarillos largos son ejecución de JavaScript. Busca tareas de JavaScript que tarden más de 50ms, ya que estas son "tareas largas" que bloquean la interacción del usuario y contribuyen al Total Blocking Time. Identifica qué ficheros causan estas tareas largas haciendo clic en ellas para ver la pila de llamadas. Si las tareas largas provienen de los archivos JavaScript de tu tema, ese es un problema de rendimiento del tema.

Los bloques rojos en el carril Main indican layout thrashing, donde el navegador se ve obligado a recalcular el diseño múltiples veces en rápida sucesión. Esto ocurre frecuentemente cuando el JavaScript lee propiedades de diseño (offsetHeight, getBoundingClientRect) y luego modifica el DOM en un bucle. El código del tema que causa layout thrashing es una fuente común de puntuaciones INP deficientes.

Las pestañas "Bottom-Up" y "Call Tree" debajo de la línea temporal te permiten ordenar la ejecución de JavaScript por tiempo total o tiempo propio. Esto muestra qué funciones específicas consumen más tiempo de CPU durante la carga de la página. Si las funciones del tema dominan esta lista, tu tema es el cuello de botella del rendimiento.

Análisis de cascada de red para recursos del tema

La pestaña Red en DevTools proporciona una vista diferente de la carga de recursos. Filtra por tipo de recurso (CSS, JS, Font, Img) para aislar los recursos específicos del tema y entender su impacto.

Comienza identificando todos los recursos que pertenecen a tu tema. Estos normalmente se cargan desde rutas como /themes/tu-tema/assets/ o similar. Anota el número total y el tamaño combinado. Luego identifica los recursos cargados por módulos (desde rutas /modules/) para entender la contribución de los módulos por separado.

Activa la casilla "Deshabilitar caché" y recarga. Esto simula un visitante nuevo. Anota el tamaño total de transferencia y el tiempo hasta DOMContentLoaded y los eventos Load. Luego recarga sin la casilla para ver la experiencia con caché (visitante recurrente). La diferencia te indica cuánto se beneficia tu tema de la caché del navegador.

Observa la columna "Iniciador" para entender la cadena de dependencias. Un archivo CSS cargado por la plantilla head de tu tema es un recurso crítico que bloquea el renderizado. Un archivo JavaScript cargado con el atributo async o defer es no bloqueante. Entender estas dependencias te ayuda a identificar qué recursos del tema están en la ruta crítica y cuáles podrían diferirse.

Usa la columna "Prioridad" (habilítala mediante el menú contextual del encabezado de columna) para ver cómo el navegador prioriza cada recurso. Los recursos con prioridad "Highest" o "High" son los que el navegador considera más importantes. Si tu tema carga recursos no críticos con alta prioridad, esa es una oportunidad de optimización.

La comparación con y sin tema

Para aislar verdaderamente el impacto del rendimiento de tu tema, necesitas una comparación. El enfoque más riguroso es probar tu tienda con tu tema actual y luego cambiar al tema mínimo predeterminado de PrestaShop y probar de nuevo.

En tu entorno de staging, ejecuta un conjunto completo de mediciones con tu tema actual activo. Registra todas las métricas. Luego cambia el tema a Classic de PrestaShop (o Hummingbird si estás en PrestaShop 8.x+) y ejecuta las mismas mediciones. La diferencia representa el impacto incremental de tu tema respecto al predeterminado.

Esta comparación no es perfecta porque el tema predeterminado no tiene tus personalizaciones y la salida visual es diferente. Pero te da un techo para cuánta mejora de rendimiento es posible mediante la optimización del tema. Si tu tema actual puntúa 30 puntos menos que el predeterminado en Lighthouse, sabes que hay un margen significativo para la mejora.

Una comparación más controlada implica deshabilitar progresivamente las funcionalidades del tema. Comienza con todas las funcionalidades habilitadas, mide, luego deshabilita las fuentes personalizadas y mide de nuevo. Deshabilita los efectos JavaScript del tema y mide. Elimina la fuente de iconos del tema. Cada paso te muestra el coste incremental de esa funcionalidad específica.

Core Web Vitals: Lo que Google realmente mide

Los Core Web Vitals son las tres métricas que Google usa con fines de posicionamiento. Se miden en usuarios reales a través del Chrome User Experience Report (CrUX), no mediante herramientas de laboratorio como Lighthouse. Entender la diferencia entre mediciones de laboratorio y de campo es fundamental.

Las mediciones de laboratorio (Lighthouse, WebPageTest) usan condiciones simuladas. Las mediciones de campo (CrUX, Monitoreo de Usuarios Reales) capturan experiencias reales de usuarios en diferentes dispositivos, redes y ubicaciones. Tu puntuación de Lighthouse podría ser 75, pero si la mayoría de tus clientes están en teléfonos más antiguos con conexiones lentas, tus datos de campo podrían contar una historia muy diferente.

Para ver tus datos de campo, usa el informe de Core Web Vitals de Google Search Console o PageSpeed Insights (pagespeed.web.dev). PageSpeed Insights muestra tanto datos de laboratorio como de campo cuando están disponibles. Si tu sitio tiene suficiente tráfico, verás datos de usuarios reales junto a la simulación de Lighthouse.

Los umbrales para buenos Core Web Vitals son: LCP por debajo de 2,5 segundos, INP por debajo de 200 milisegundos y CLS por debajo de 0,1. Google evalúa el percentil 75 de tus usuarios, lo que significa que el 75% de tus usuarios necesitan tener una buena experiencia para que una métrica se clasifique como "buena". Este es un listón alto porque tus visitantes con peor rendimiento (teléfonos antiguos, redes lentas) influyen fuertemente en el percentil 75.

Tu tema impacta directamente en las tres métricas. El LCP se ve afectado por el tamaño del archivo CSS (que bloquea el renderizado), la estrategia de carga de fuentes y la implementación de la imagen principal. El INP se ve afectado por la ejecución de JavaScript, la eficiencia de los event handlers y cómo el tema responde a los clics y desplazamientos. El CLS se ve afectado por los marcadores de posición de imágenes, la inserción dinámica de contenido y la carga de fuentes.

Monitoreo de Usuarios Reales: La verdad de los datos

El Monitoreo de Usuarios Reales (RUM) captura datos de rendimiento de tus visitantes reales mientras navegan por tu tienda. Esta es la medida más precisa del impacto real del rendimiento de tu tema porque refleja los dispositivos, redes y patrones de uso reales de tu audiencia.

Google Analytics 4 captura los Core Web Vitals automáticamente si tienes el fragmento de código gtag.js en tu sitio. Puedes ver estos datos en GA4 en Informes, Experiencia del usuario, o creando una exploración personalizada.

Para un RUM más detallado, servicios dedicados como SpeedCurve, Datadog o la biblioteca JavaScript gratuita web-vitals proporcionan datos granulares. La biblioteca web-vitals (disponible en npm) es particularmente útil porque puedes añadirla a tu tema y enviar datos de rendimiento a cualquier endpoint de analítica.

Con datos RUM, puedes segmentar el rendimiento por tipo de dispositivo (móvil vs escritorio), navegador (Chrome vs Safari vs Firefox), país y tipo de página. Esta segmentación a menudo revela que tu tema rinde de forma muy diferente para diferentes segmentos de audiencia. Un tema podría puntuar bien para usuarios de Chrome en escritorio pero mal para usuarios de Safari en móvil debido a diferencias en el rendimiento del motor JavaScript o el renderizado CSS.

Rastrea los datos RUM a lo largo del tiempo para correlacionar cambios de rendimiento con actualizaciones del tema, instalaciones de módulos o cambios de configuración. Si tu LCP aumenta repentinamente 500ms, verifica qué cambió en tu tema o conjunto de módulos en esa fecha.

Perfilado del lado del servidor: Separando backend de frontend

A veces la velocidad deficiente de una página se atribuye al tema cuando el problema real es el tiempo de procesamiento del lado del servidor. Antes de optimizar tu tema, verifica que el servidor esté generando HTML rápidamente.

PrestaShop incluye un perfilador integrado que puedes habilitar en el back office en Parámetros Avanzados, Rendimiento, Modo Debug. El perfilador añade una barra de depuración en la parte inferior de cada página mostrando el conteo de consultas SQL, el tiempo de ejecución SQL, el tiempo de generación de la página y el uso de memoria.

Una instalación de PrestaShop bien configurada debería generar la mayoría de las páginas en menos de 500ms del lado del servidor. Si la generación del servidor tarda más de un segundo, el problema no es tu tema sino tu servidor, las consultas a la base de datos o los hooks de módulos. Arreglar el tema no ayudará si el servidor tarda 3 segundos solo en generar el HTML.

También puedes medir el tiempo de respuesta del servidor (Time to First Byte, TTFB) desde la pestaña Red en DevTools. Haz clic en la solicitud del documento HTML y observa la sección Timing. El valor "Waiting (TTFB)" muestra cuánto tiempo esperó el navegador a que el servidor respondiera. Resta la latencia de red (que puedes estimar del valor "Connection") para obtener el tiempo de procesamiento aproximado del servidor.

Si tu TTFB es alto pero los recursos de tu tema son rápidos, concéntrate en la optimización del servidor (PHP OPcache, caché de consultas MySQL, Redis/Memcached, caché de objetos de PrestaShop) en lugar de la optimización del tema. Si tu TTFB es rápido pero la página sigue cargando lentamente, el tema es probablemente el cuello de botella.

El framework de benchmarking antes/después

Al hacer cambios de rendimiento en el tema, necesitas una comparación rigurosa antes/después para verificar que el cambio realmente ayudó. Aquí tienes un framework que produce resultados fiables.

Antes de hacer cualquier cambio, ejecuta cinco auditorías de Lighthouse en cada página objetivo y registra la puntuación mediana y las métricas individuales. También ejecuta tres pruebas de WebPageTest y registra los valores medianos. Guarda los informes completos, no solo las puntuaciones, porque podrías necesitar examinar los detalles más tarde.

Realiza tu cambio. Limpia todas las cachés, incluyendo la caché Smarty de PrestaShop, OPcache y cualquier caché CDN. Espera al menos 60 segundos para que OPcache se reinicie completamente si cambiaste archivos PHP.

Ejecuta las mismas cinco auditorías de Lighthouse y tres pruebas de WebPageTest en las mismas páginas. Compara los resultados medianos. Un cambio es significativo si produce una mejora consistente en todas las ejecuciones de prueba. Si algunas ejecuciones muestran mejora y otras muestran regresión, el impacto del cambio está dentro del margen de error de medición.

Sé escéptico con las mejoras pequeñas. Las puntuaciones de Lighthouse pueden variar en más o menos 5 puntos entre ejecuciones idénticas debido a la variabilidad del throttle simulado de red y CPU. Un cambio que mejora tu puntuación de 62 a 65 podría no ser una mejora real. Un cambio de 62 a 75 casi con certeza lo es.

Para la comparación más rigurosa, usa la función de comparación visual de WebPageTest. Introduce tu URL de staging (antes del cambio) y la URL de producción (después del cambio), o ejecuta la misma URL en momentos diferentes y compara las pruebas guardadas. WebPageTest genera una tira de película lado a lado y resalta las diferencias.

Problemas comunes de rendimiento del tema y cómo detectarlos

A través de la medición, identificarás problemas de rendimiento específicos. Estos son los problemas más comunes relacionados con el tema y las métricas que los revelan.

El CSS que bloquea el renderizado aparece como un FCP y LCP alto con una brecha larga entre el TTFB y el FCP en la cascada. La solución es incluir CSS crítico en línea y aplazar las hojas de estilo no críticas. El JavaScript excesivo se manifiesta como TBT alto y puntuaciones INP deficientes. Las tareas largas en la línea temporal de la pestaña Performance confirman esto. La carga de fuentes no optimizada se manifiesta como FOIT (texto invisible) en la tira de película o una brecha entre el FCP y el momento en que el texto realmente aparece. El cambio de diseño por imágenes sin dimensiones o contenido inyectado dinámicamente aparece como puntuaciones CLS altas.

Cada problema tiene una firma de medición específica. Aprender a leer estas firmas es lo que transforma el trabajo de rendimiento de adivinación en ingeniería. Mide primero, diagnostica basándote en datos, corrige el problema específico y luego mide de nuevo para verificar que la corrección funcionó.

Creación de una rutina de monitoreo de rendimiento

La medición del rendimiento no debería ser una actividad puntual. Construye una rutina que detecte regresiones antes de que afecten a tus clientes y al posicionamiento en búsquedas.

Semanalmente, ejecuta Lighthouse en tus cuatro tipos de página clave y registra los resultados. Mensualmente, ejecuta un análisis completo con WebPageTest y compáralo con el mes anterior. Después de cada actualización del tema o instalación de módulos, ejecuta una comparación antes/después. Configura el monitoreo de Core Web Vitals en Google Search Console y revísalo mensualmente.

Considera automatizar esto con herramientas como Lighthouse CI (para ejecuciones automatizadas de Lighthouse en tu pipeline de despliegue) o SpeedCurve (para monitoreo continuo con alertas). Estas herramientas te notifican inmediatamente cuando el rendimiento se degrada, permitiéndote identificar y corregir la causa antes de que afecte a tu posicionamiento en búsquedas.

El objetivo no es una puntuación perfecta en Lighthouse. El objetivo es entender exactamente dónde van tu tiempo y tus recursos en cada carga de página, y tomar decisiones deliberadas y basadas en datos sobre qué optimizar, qué conservar y qué eliminar.