Cómo reducir la carga de fuentes en Shopify sin alterar el diseño de la marca

Solución rápida con Thunder

Si PageSpeed Insights muestra advertencias de fuentes, la ruta más rápida es instalar Thunder, probar las mismas URL de productos y colecciones, y observar si LCP, FCP y la representación de texto mejoran. Thunder está construido a partir de investigaciones de velocidad en más de 20,000 tiendas Shopify optimizadas y maneja el trabajo común de carga de recursos que la mayoría de los comerciantes no deberían editar manualmente.

Para obtener una imagen más amplia del rendimiento, combínelo con el guía completa de optimización de velocidad de Shopify, el Guía de optimización de fuentes de Shopify, y el Desglose de la función Thunder. Las fuentes son solo una parte de Core Web Vitals, pero pueden frenar silenciosamente las tiendas que de otro modo estarían limpias.

Por qué la carga de fuentes perjudica Shopify Core Web Vitals

Las fuentes afectan la velocidad porque el texto no se puede pintar limpiamente hasta que el navegador sabe qué tipo de letra, archivo y comportamiento de respaldo usar. Si tu tema solicita múltiples familias de fuentes de un dominio externo, el navegador tiene que abrir conexiones, descargar una hoja de estilos, descubrir los archivos de fuentes reales y luego buscar cada archivo WOFF2. En dispositivos móviles, esa cadena puede competir directamente con la imagen principal que determina Pintura con contenido más grande.

El patrón común de Shopify es pesado: una fuente de título normal y negrita, una fuente de cuerpo normal, media, seminegrita y negrita, además de una fuente de icono dejada por un creador de páginas o una aplicación de reseñas. Esto puede crear de seis a diez solicitudes de fuentes antes de que el comprador haya leído el título del producto. La tienda puede parecer pulida después de que todo se carga, pero la primera impresión se retrasa.

Los intercambios de fuentes también pueden provocar movimientos en el diseño. Si la fuente alternativa es mucho más ancha o más alta que la fuente final de la marca, los títulos de los productos, las filas de precios, los botones y las etiquetas de navegación pueden cambiar. Por eso el trabajo tipográfico pertenece al lado de Correcciones de CLS, no solo correcciones de LCP.

Manual paso a paso: Reducir la carga de fuentes de forma segura

1. Inventario de cada solicitud de fuente

Abra Chrome DevTools, cargue su página de inicio y una página de producto, luego filtre el panel Red por "fuente". Anota cada familia, peso, origen y tamaño. Repita en la aceleración móvil. Está buscando duplicados, pesos no utilizados, fuentes de aplicaciones y fuentes de iconos antiguos.

2. Conserve solo los pesos que utiliza su tema

Muchas tiendas cargan 300, 400, 500, 600, 700 y variantes en cursiva cuando el diseño solo usa 400 y 700. Busca el CSS de tu tema font-weight antes de borrar cualquier cosa. Si ningún elemento visible usa 500 o 600, elimine esos archivos.

3. Hospede automáticamente fuentes importantes como WOFF2

Shopify puede servir activos desde su CDN, lo que suele ser más rápido que extraer CSS de un host de fuentes de terceros en cada página. Sube los archivos WOFF2 exactos que necesitas a los activos del tema, luego defínelos en CSS:

@font-face {
  font-family: 'Brand Sans';
  src: url('{{ "brand-sans-regular.woff2" | asset_url }}') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Brand Sans';
  src: url('{{ "brand-sans-bold.woff2" | asset_url }}') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

En un artículo de Astro podemos mostrar Liquid directamente, pero en un tema de Shopify esto pertenece a tu hoja de estilo o a un pequeño fragmento de fuente cargado desde theme.liquid.

4. Precargue una fuente crítica, no el sistema tipográfico completo

La precarga es útil cuando el primer texto visible necesita un archivo específico. Es perjudicial cuando precargas cada peso de fuente porque esas descargas pueden robar ancho de banda de tu imagen LCP. Empieza con una fuente:

<link
  rel="preload"
  href="{{ 'brand-sans-regular.woff2' | asset_url }}"
  as="font"
  type="font/woff2"
  crossorigin
>

5. Haga coincidir las fuentes alternativas para reducir el cambio de diseño

Utilice una pila alternativa con proporciones similares. Si la fuente de tu marca es una sans-serif limpia, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif suele comportarse bien. Si la fuente de su título es condensada o de alto contraste, pruebe antes y después con las tiras de película de WebPageTest o el panel Rendimiento.

Solución manual frente a solución Thunder

Qué no romper al reducir la carga de fuentes

No elimines las fuentes utilizadas en el cajón del carrito, la navegación, las insignias de productos, el selector de localización o la guía de tallas sin verificar esos estados. No precargues fuentes que aparecen solo debajo del pliegue. No apiles múltiples aplicaciones de optimización de fuentes sobre una reescritura a nivel de tema. Y no juzgues el éxito a partir de una sola ejecución de Lighthouse; utiliza medianas de antes y después y tendencias reales del Panel de Rendimiento Web de Shopify.

Si su tienda también tiene scripts pesados, corrija las fuentes junto Optimización de JavaScript de Shopify y Limpieza de CSS y JavaScript no utilizados. Una configuración de fuente limpia ayuda, pero los scripts lentos de terceros aún pueden retrasar el hilo principal y hacer que la página parezca atascada.

FAQ