Por qué tu tema de PrestaShop está cargando 15 fuentes que no necesitas

El coste oculto del exceso de fuentes en los temas de PrestaShop

Abre las DevTools de tu navegador, cambia a la pestaña Red, filtra por "Font" y recarga tu tienda PrestaShop. Si ves más de tres o cuatro archivos de fuentes descargándose, tienes un problema que está costándote clientes silenciosamente. La mayoría de los temas de PrestaShop incluyen una cantidad asombrosa de recursos de fuentes que la tienda promedio nunca utiliza, y cada uno de ellos retrasa el momento en que tus visitantes pueden realmente leer tu contenido.

El exceso de fuentes es uno de los problemas de rendimiento más ignorados en PrestaShop. Los propietarios de tiendas dedican horas a optimizar imágenes, habilitar CCC (Combinar, Comprimir, Cachear) y ajustar configuraciones del servidor, pero ignoran el hecho de que su tema está cargando 800KB o más de archivos de fuentes en cada carga de página. Este artículo explica exactamente por qué esto ocurre, cómo auditar la carga de fuentes y qué hacer al respecto.

Cómo los temas de PrestaShop empaquetan las fuentes

Los temas de PrestaShop se distribuyen como paquetes autocontenidos. Cuando un desarrollador de temas construye un tema, quiere que funcione de inmediato para la mayor cantidad posible de tiendas. Esto significa que incluyen cada variante de fuente y biblioteca de iconos que podrían llegar a necesitar. El resultado es un tema que incluye muchos más recursos de fuentes de los que cualquier tienda individual llegará a utilizar.

Un tema típico de PrestaShop incluye tres categorías de fuentes. Primero, están las fuentes de visualización usadas para encabezados, texto del cuerpo y elementos de interfaz. Estas suelen ser fuentes de Google Fonts como Roboto, Open Sans, Lato o Montserrat. Segundo, están las fuentes de iconos como FontAwesome, Material Icons o conjuntos de iconos específicos del tema. Tercero, están las fuentes de respaldo o decorativas que el tema usa para componentes específicos como banners, insignias o secciones promocionales.

El problema se multiplica porque cada familia de fuentes típicamente incluye múltiples pesos y estilos. Una sola fuente como Roboto puede incluir Regular (400), Medium (500), Bold (700) y sus variantes en cursiva, cada una como un archivo WOFF2 separado. Multiplica eso por dos o tres familias de fuentes más una biblioteca de iconos, y rápidamente llegas a 12 o 15 archivos de fuentes individuales cargándose en cada página.

El problema de FontAwesome

FontAwesome merece su propia sección porque es el mayor infractor de rendimiento relacionado con fuentes en los temas de PrestaShop. La biblioteca completa de FontAwesome 5 pesa aproximadamente 150KB solo para el archivo de fuente web, más otros 60-80KB para su CSS. FontAwesome 6 es aún más grande. La biblioteca contiene más de 1.600 iconos, pero la tienda PrestaShop promedio usa quizás entre 20 y 30 de ellos.

Eso significa que estás obligando a cada visitante a descargar más de 200KB de datos de fuentes y CSS solo para mostrar un icono de carrito de compras, una lupa de búsqueda y algunos logotipos de redes sociales. Este es un compromiso absurdo, y ocurre porque a los desarrolladores de temas les resulta más fácil incluir toda la biblioteca que crear un subconjunto para las necesidades específicas de cada tienda.

El tema Classic en PrestaShop 1.7 y 8.x incluye FontAwesome 4.7, que es ligeramente más pequeño pero sigue conteniendo cientos de iconos que nunca usarás. El tema Hummingbird en PrestaShop 8.x se alejó de FontAwesome en favor de iconos SVG, lo cual es una mejora significativa, pero muchos temas y módulos de terceros siguen dependiendo de FontAwesome y cargan su propia copia además de lo que el tema proporciona.

Google Fonts y el impuesto al rendimiento

Google Fonts es el servicio de fuentes web más popular, y los temas de PrestaShop hacen un uso intensivo de él. Sin embargo, cargar Google Fonts de la manera predeterminada crea una cadena de solicitudes que perjudican el rendimiento.

Cuando tu tema carga Google Fonts mediante la etiqueta link estándar, el navegador primero debe conectarse a fonts.googleapis.com para descargar el archivo CSS. Ese archivo CSS luego indica al navegador que descargue los archivos de fuentes reales desde fonts.gstatic.com. Cada una de estas conexiones requiere resolución DNS, negociación TCP y negociación TLS. En conexiones móviles, esta cadena puede añadir de 300 a 500ms de retraso antes de que un solo carácter de texto se renderice en pantalla.

Aún peor, el CSS de Google Fonts usa el descriptor font-display establecido en "swap" por defecto desde 2019, pero muchos temas antiguos todavía hacen referencia a URLs de CSS de Google Fonts que son anteriores a este cambio. Sin font-display: swap, el navegador puede ocultar todo el texto de la página hasta que la fuente se descargue, creando el temido Flash de Texto Invisible (FOIT) donde los visitantes ven una página en blanco durante uno a tres segundos.

También existe una preocupación de privacidad. Cargar fuentes desde el CDN de Google significa que Google recibe información sobre cada visitante de tu tienda, incluyendo su dirección IP y las páginas que visita. Bajo el RGPD, esto requiere consentimiento explícito, y un tribunal alemán dictaminó en enero de 2022 que usar Google Fonts sin consentimiento viola el RGPD, resultando en multas.

Cómo auditar la carga de fuentes

Antes de poder solucionar el problema, necesitas entender exactamente qué fuentes está cargando tu tema y cuáles realmente necesitas. Aquí tienes un enfoque sistemático.

Abre Chrome DevTools (F12), ve a la pestaña Red y marca la casilla "Deshabilitar caché". Recarga tu página y filtra por "Font" en la barra de filtros. Verás cada archivo de fuente que el navegador descarga. Anota los nombres de archivo, tamaños y la columna de iniciador que te indica qué archivo CSS solicitó cada fuente.

A continuación, usa la pestaña Cobertura (Coverage) en DevTools (Ctrl+Shift+P, luego escribe "Coverage"). Inicia una grabación de cobertura y navega por tu tienda. La pestaña de Cobertura te muestra exactamente cuánto de cada archivo CSS se usa realmente. Para el CSS de FontAwesome, normalmente verás un 90% o más marcado como no utilizado.

También puedes usar la auditoría de Lighthouse en DevTools. Ejecuta una auditoría de rendimiento y busca las oportunidades "Reducir CSS no utilizado" y "Asegurar que el texto permanezca visible durante la carga de fuentes web". Lighthouse señalará específicamente los problemas de rendimiento relacionados con fuentes.

Para un análisis más exhaustivo, usa WebPageTest (webpagetest.org) para ejecutar una prueba desde una conexión móvil. Observa el gráfico de cascada y encuentra las solicitudes de fuentes. Nota cuándo comienzan a cargarse en relación con otros recursos y cuánto tiempo tardan. En una conexión 3G, los retrasos en la carga de fuentes se vuelven dolorosamente evidentes.

Eliminación de fuentes no utilizadas paso a paso

Una vez que sepas qué fuentes carga tu tema y cuáles realmente necesitas, es momento de eliminar el exceso. El enfoque varía dependiendo de la arquitectura de tu tema.

Para temas que cargan Google Fonts mediante una etiqueta link en la plantilla del encabezado, encuentra el archivo de plantilla que contiene la referencia a Google Fonts. En la mayoría de los temas, esto está en templates/layout/head.tpl o un archivo similar. Si estás usando un tema hijo, copia esta plantilla a tu directorio de tema hijo antes de editarla. Elimina o modifica el enlace de Google Fonts para incluir solo los pesos y familias que realmente usas.

Para FontAwesome, verifica si tu tema lo carga mediante un archivo CSS en el directorio assets/css o mediante un enlace CDN. Si es un archivo local, tienes dos opciones. Puedes reemplazar el paquete completo de FontAwesome con un subconjunto que contenga solo los iconos que usas, o puedes reemplazar el uso de fuentes de iconos con SVGs en línea completamente.

Para crear un subconjunto de FontAwesome, usa una herramienta como IcoMoon (icomoon.io) o Fontello (fontello.com). Estas herramientas te permiten seleccionar solo los iconos específicos que necesitas y generar un archivo de fuente personalizado que podría ser de 5-10KB en lugar de 150KB. Necesitarás actualizar los nombres de clases CSS si la herramienta genera nombres diferentes, pero la mayoría permite mantener los nombres de clase originales de FontAwesome.

Para Google Fonts, verifica cada archivo CSS de tu tema en busca de declaraciones @font-face. Los desarrolladores de temas a veces importan fuentes directamente en CSS en lugar de a través de la plantilla del encabezado. Usa la búsqueda de DevTools (Ctrl+Shift+F) para buscar en todos los recursos cargados "@font-face" y "fonts.googleapis.com".

Implementación de font-display: swap

Si conservas alguna fuente web, asegúrate absolutamente de que use el descriptor font-display: swap. Esto indica al navegador que muestre el texto inmediatamente usando una fuente del sistema como respaldo mientras la fuente web se descarga en segundo plano. Una vez que la fuente web está lista, el navegador la intercambia. Esto elimina el FOIT y asegura que tu contenido sea legible instantáneamente.

Para Google Fonts cargadas vía CDN, añade el parámetro display=swap a la URL. Por ejemplo, cambia fonts.googleapis.com/css2?family=Roboto:wght@400;700 a fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap. Ten en cuenta que Google añadió este parámetro por defecto en 2019, pero muchos temas de PrestaShop todavía usan formatos de URL más antiguos.

Para fuentes alojadas localmente con declaraciones @font-face en tu CSS, añade font-display: swap a cada bloque @font-face. Abre el archivo CSS de tu tema que contiene las reglas @font-face y añade la propiedad. Va dentro del bloque @font-face junto a font-family, src y font-weight.

Ten en cuenta que font-display: swap puede causar un Flash de Texto Sin Estilo (FOUT) donde el texto aparece brevemente en la fuente de respaldo antes de cambiar a la fuente web. Esta es una experiencia mucho mejor que el texto invisible, pero puedes minimizar el impacto visual eligiendo fuentes de respaldo que coincidan estrechamente con las métricas de tu fuente web. Las propiedades CSS size-adjust, ascent-override y descent-override ayudan con esto.

Alojamiento propio de fuentes vs carga desde CDN

Alojar tus fuentes localmente en lugar de cargarlas desde el CDN de Google ofrece varias ventajas significativas para las tiendas PrestaShop.

El rendimiento mejora porque eliminas la búsqueda DNS adicional y la conexión a los servidores de Google. Tus fuentes se cargan desde el mismo dominio que tus otros recursos, lo que significa que el navegador puede reutilizar conexiones existentes. Con HTTP/2 o HTTP/3, todos tus archivos de fuentes pueden descargarse simultáneamente a través de una sola conexión.

El cumplimiento de la privacidad se simplifica porque los datos de los visitantes ya no se envían a Google. Esto elimina por completo una preocupación del RGPD, y no necesitas añadir Google Fonts al banner de consentimiento de cookies.

La fiabilidad mejora porque no dependes de un servicio externo. Si el CDN de Google tiene un problema (raro pero posible), tus fuentes siguen cargándose.

Para alojar Google Fonts localmente, usa la herramienta google-webfonts-helper (gwfh.mranftl.com/fonts) que proporciona una interfaz sencilla para descargar cualquier fuente de Google en formato WOFF2 con el CSS @font-face correcto. Descarga solo los pesos y estilos que necesitas, coloca los archivos en el directorio assets/fonts de tu tema y añade el CSS @font-face a la hoja de estilos de tu tema.

La única desventaja potencial del alojamiento propio es que pierdes la posibilidad de un acierto de caché si el visitante ya ha cargado la misma fuente desde el CDN de Google en otro sitio. Sin embargo, los navegadores han eliminado en gran medida esta caché entre sitios por razones de privacidad desde 2020, por lo que esta ventaja ya no existe en la práctica.

Subsetting de fuentes: La opción radical

El subsetting de fuentes significa eliminar caracteres que no necesitas de un archivo de fuente. Una fuente web latina típica incluye caracteres para docenas de idiomas, muchos de los cuales tu tienda no usa. Al crear un subconjunto con solo los caracteres que tu tienda necesita, puedes reducir el tamaño de los archivos de fuentes entre un 50 y un 70%.

La herramienta pyftsubset de la biblioteca Python fonttools es la forma más fiable de crear subconjuntos de fuentes. Puedes especificar exactamente qué rangos Unicode incluir. Para una tienda que opera solo en español, podrías crear un subconjunto de Latín Básico (U+0020-007F) más Suplemento Latín-1 (U+00A0-00FF) para símbolos de moneda y caracteres acentuados.

Para tiendas que operan en múltiples idiomas, necesitas ser más cuidadoso. Incluye los rangos Unicode para todos los idiomas que tu tienda soporta. El CSS de Google Fonts realmente hace esto automáticamente con descriptores unicode-range, cargando subconjuntos de caracteres bajo demanda, pero las fuentes alojadas localmente necesitan subsetting manual.

Un enfoque más sencillo es usar el formato WOFF2 exclusivamente y eliminar el soporte para formatos más antiguos. WOFF2 usa compresión Brotli y produce archivos un 30% más pequeños que WOFF. Todos los navegadores modernos soportan WOFF2, así que a menos que necesites soportar Internet Explorer 11, no hay razón para incluir formatos WOFF, TTF o EOT. Muchos temas de PrestaShop todavía incluyen los cuatro formatos por compatibilidad con versiones anteriores que ya no es necesaria.

Pilas de fuentes del sistema: La alternativa sin coste

La solución más radical al rendimiento de fuentes es no usar fuentes web en absoluto. Los sistemas operativos modernos incluyen fuentes de alta calidad que se ven excelentes en pantalla. Una pila de fuentes del sistema usa cualquier fuente que el sistema operativo proporcione, lo que significa cero archivos de fuentes que descargar y renderizado de texto instantáneo.

La pila moderna de fuentes del sistema se ve así: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif. Esto te da San Francisco en dispositivos Apple, Segoe UI en Windows y Roboto en Android. Todas estas son fuentes sans-serif limpias, modernas y altamente legibles.

GitHub, Bootstrap 5 y muchos sitios web de alto rendimiento usan pilas de fuentes del sistema. La diferencia visual entre una fuente del sistema y una fuente de Google como Open Sans o Roboto es mínima, especialmente para el texto del cuerpo. La mayoría de tus clientes no notarán ni les importará si tu tienda usa Roboto cargada desde un servidor o Roboto ya instalada en su teléfono Android.

Para implementar una pila de fuentes del sistema en PrestaShop, necesitas modificar el CSS de tu tema para reemplazar las declaraciones font-family existentes, eliminar las reglas @font-face y las etiquetas link de Google Fonts, y eliminar los archivos de fuentes del directorio de recursos de tu tema. Si estás usando un tema hijo, puedes sobreescribir las declaraciones de fuente del tema padre sin modificar los archivos del tema padre.

¿Y las fuentes de iconos?

Si eliminas FontAwesome u otra fuente de iconos, necesitas una alternativa para mostrar iconos. El mejor enfoque moderno es SVG en línea. Los iconos SVG se renderizan de forma nítida a cualquier tamaño, pueden estilizarse con CSS y solo añaden peso por los iconos específicos que usas en lugar de cargar una biblioteca de iconos completa.

El tema Hummingbird de PrestaShop usa iconos SVG de forma nativa, que es una de las razones por las que rinde mejor que Classic. Si tu tema usa FontAwesome, puedes reemplazar iconos individuales con SVGs de fuentes como Heroicons, Feather Icons o incluso los propios archivos SVG de FontAwesome (que están disponibles por separado de la versión de fuente).

Para una tienda PrestaShop, normalmente necesitas menos de 30 iconos únicos: carrito, búsqueda, cuenta de usuario, corazón/lista de deseos, flechas, logotipos de redes sociales y algunos iconos específicos de categorías. Como SVGs en línea, estos podrían sumar entre 10 y 15KB, comparado con los 150-200KB de la fuente y CSS completos de FontAwesome.

Medición del impacto

Después de eliminar las fuentes no utilizadas, mide la mejora. Ejecuta Lighthouse antes y después, comparando la puntuación de Rendimiento, First Contentful Paint (FCP) y Largest Contentful Paint (LCP). La optimización de fuentes típicamente mejora el FCP entre 200 y 500ms en conexiones móviles.

Verifica el tamaño total de transferencia en la pestaña Red de DevTools. Una tienda PrestaShop bien optimizada debería transferir menos de 50KB de datos de fuentes en total. Si cambias a fuentes del sistema, esa cifra baja a cero.

También verifica que tu tienda siga viéndose correcta. Revisa todos los tipos de página: inicio, categoría, producto, carrito y checkout. Algunos temas usan fuentes específicas para elementos específicos, y eliminar una fuente podría causar un renderizado de respaldo inesperado. Siempre prueba exhaustivamente antes de desplegar cambios de fuentes en producción.

Resumen: Lista de verificación de carga de fuentes

Audita tu carga de fuentes actual con la pestaña Red de DevTools filtrada por fuentes. Identifica qué fuentes se usan realmente verificando la cobertura de CSS. Elimina cualquier familia o peso de Google Fonts que no uses. Reemplaza las fuentes de iconos completas con versiones de subconjunto o SVGs en línea. Añade font-display: swap a todas las declaraciones @font-face restantes. Aloja tus fuentes localmente en lugar de cargarlas desde el CDN de Google. Considera usar solo WOFF2 para eliminar formatos más antiguos y pesados. Evalúa si las fuentes del sistema podrían reemplazar tus fuentes web completamente. Mide antes y después con Lighthouse y WebPageTest. El objetivo es sencillo: carga solo lo que necesitas, cárgalo de forma eficiente y nunca hagas esperar a tus visitantes por fuentes que no pueden ver.