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

Solución rápida con Thunder

If PageSpeed Insights shows font warnings, the fastest route is to install Thunder, test the same product and collection URLs, and watch whether LCP, FCP, and text rendering improve. Thunder is built from speed research across 20,000+ optimized Shopify stores and handles the common resource-loading work that most merchants should not be editing by hand.

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

Fonts affect speed because text cannot be painted cleanly until the browser knows which typeface, file, and fallback behavior to use. If your theme requests multiple font families from an external domain, the browser has to open connections, download a stylesheet, discover the actual font files, and then fetch each WOFF2 file. On mobile, that chain can compete directly with the hero image that determines 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 peso de fuente 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 can serve assets from its CDN, which is usually faster than pulling CSS from a third-party font host on every page. Upload the exact WOFF2 files you need to theme assets, then define them in 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 tema.liquido.

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

Preloading is useful when the first visible text needs a specific file. It is harmful when you preload every font weight because those downloads can steal bandwidth from your LCP image. Start with one font:

<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, sistema-ui, -sistema-apple, 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

Do not remove fonts used in the cart drawer, navigation, product badges, localization selector, or size guide without checking those states. Do not preload fonts that appear only below the fold. Do not stack multiple font optimization apps on top of a theme-level rewrite. And do not judge success from a single Lighthouse run; use before-and-after medians and real Shopify Web Performance Dashboard trends.

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