Carga responsiva de fuentes web, una nueva estrategia
Optimización de la carga de fuentes para dispositivos móviles más lentos con precarga responsiva y declaraciones font-face responsivas
Font display responsivo y estrategia de precarga responsiva de fuentes
Como especialista en Core Web Vitals veo diferentes soluciones creativas cada día. La mayoría no tienen mucho sentido, pero de vez en cuando encuentro una estrategia tan simple y elegante que sí tiene sentido para ciertos sitios.
Este artículo explica cómo implementar la precarga responsiva de fuentes para escritorio junto con font display:optional para eliminar el Flash Of Unstyled Text (FOUT) mientras se carga la fuente de forma predeterminada para móvil usando font-display: swap.
tip: esta estrategia funciona bien para sitios con un critical rendering path más extenso.
El problema con la carga temprana de fuentes
Al optimizar los Core Web Vitals hay una regla simple que siempre aplica:
"Todo lo que hagas antes del Largest Contentful Paint ralentizará ese Largest Contentful Paint".
Este principio también aplica a las fuentes web. Priorizar la carga de fuentes web durante la carga de la página puede mejorar la experiencia de usuario, pero si tu sitio tiene dificultades para cumplir los umbrales de Core Web Vitals, especialmente para tipos específicos de dispositivos, puede que necesites equilibrar la UX con la mejora del LCP.
Consideremos el ejemplo a continuación de un sitio de noticias holandés. En un dispositivo móvil se encolan 3 fuentes antes del elemento LCP. Esto hace que las 3 fuentes compitan por los recursos de red tempranos y retrasen el timing de la imagen.
¡La estrategia responsiva de fuentes al rescate!
En casos como este donde hay mucha competencia temprana de red, tiene sentido distinguir entre tipos de dispositivos. Normalmente, los dispositivos de escritorio más rápidos con conexiones por cable (y conexiones de red más rápidas) pueden manejar más recursos de red tempranos a la vez y tiene todo el sentido precargar algunos archivos de fuentes críticos.
Los dispositivos móviles, por otro lado, pueden usarse en el trayecto al trabajo bajo condiciones de red menos que óptimas. Los dispositivos móviles también suelen tener CPUs más lentas y menos memoria disponible en comparación con los escritorios. Estas limitaciones significan que tratar la carga de fuentes de forma diferente según el tipo de dispositivo puede tener sentido.
- Escritorio: La precarga de fuentes mejora el rendimiento de renderizado en dispositivos con mejor ancho de banda y potencia de procesamiento. Usa font-display: optional para minimizar el bloqueo y eliminar problemas de intercambio de fuentes. Esto asegura que la fuente solo se use si está disponible dentro de los 100ms de ser solicitada, mientras que la precarga garantiza que se cumpla ese objetivo.
- Móvil: No precargues la fuente debido a la competencia de red. Usa font-display: swap para un renderizado de texto más rápido. Este enfoque muestra las fuentes fallback inmediatamente mientras la fuente personalizada continúa cargándose en segundo plano, ofreciendo una mejor experiencia en dispositivos menos potentes.
Implementación usando <link rel="preload"> y Media Queries
En lugar de cargar la fuente de forma universal, puedes usar el atributo media en la etiqueta <link> del HTML junto con CSS para aplicar diferentes estrategias de fuentes según los tipos de dispositivos.
Estructura HTML
<head>
<!-- Precargar fuente solo para escritorio -->
<link rel="preload" href="/fonts/custom-font.woff2"
as="font" crossorigin="anonymous"
media="(min-width: 768px)">
<style>
/* Configuración global de fuentes */
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom-font.woff2') format('woff2');
font-display: swap;
}
/* Configuración de fuentes para escritorio */
@media (min-width: 767px) {
@font-face {
font-display: optional;
}
}
body {
font-family: 'CustomFont', sans-serif;
}
</style>
</head> Beneficios de este enfoque
- Enfoque en la UX de escritorio: El escritorio renderiza con la fuente web inmediatamente, previniendo el FOUT o FOIT.
- Enfoque en el rendimiento móvil:
font-display: swapasegura que los usuarios vean el texto inmediatamente, incluso si la fuente personalizada aún no se ha cargado. - Simplicidad declarativa: Evita JavaScript, reduciendo la complejidad y mejorando la mantenibilidad.
Caso de uso real
Como se mencionó en la introducción: esta estrategia se basa en un ejemplo real que encontré. Un sitio web de comercio electrónico dirigido tanto a usuarios de escritorio como móviles implementó esta estrategia. El resultado:
- Escritorio: Mejora del CLS y la UX con fuentes estilizadas apareciendo casi inmediatamente.
- Móvil: First Contentful Paint y Largest Contentful Paint más rápidos aseguraron una experiencia de usuario veloz, incluso en conexiones más lentas.
Performance degrades unless you guard it.
I do not just fix the metrics. I set up the monitoring, the budgets, and the processes so your team keeps them green after I leave.
Start the Engagement
