Módulo 2: Aumentar la velocidad de los sitios web móviles

2.3.4 Optimización de fuentes web

La tipografía es fundamental para que el diseño, la marca, la lectura y la accesibilidad sean excelentes. Las fuentes web sirven para conseguir todo esto y mucho más: el texto admite un elevado número de puntos por pulgada y se puede seleccionar, buscar y ampliar. Todas estas ventajas proporcionan un renderizado de texto nítido y coherente con independencia del tamaño y la resolución de la pantalla. Las fuentes web son esenciales para obtener un rendimiento, una experiencia de usuario y un diseño excepcionales.

La optimización de las fuentes web es una parte fundamental de la estrategia de rendimiento general. Cada fuente es un recurso adicional y algunas pueden impedir el renderizado del texto; sin embargo, el hecho de que la página use fuentes web no significa que tenga que tarde más en renderizarse. Por el contrario, si se combinan las fuentes optimizadas con una buena estrategia de carga y aplicación en la página, se puede reducir el tamaño de esta y mejorar los tiempos de renderizado.

A continuación, te indicamos algunos consejos y técnicas que debes tener en cuenta cuando trabajes en la estrategia de almacenamiento en caché:

  • Inspecciona y controla el uso de fuentes: no utilices demasiadas fuentes en las páginas y minimiza el número de variantes que se usan para cada una. Así podrás proporcionar una experiencia más coherente y rápida a los usuarios.
  • Crea subconjuntos de recursos de fuentes: se pueden crear subconjuntos de muchas fuentes o dividirlas en varios intervalos Unicode para proporcionar los glifos necesarios para una página en concreto. De esta forma, se reduce el tamaño del archivo y se mejora la velocidad de descarga del recurso. Sin embargo, cuando definas los subconjuntos, procura optimizarlos para reutilizar las fuentes. Por ejemplo, no descargues un conjunto de caracteres diferentes en cada página; solápalos. Se recomienda crear subconjuntos basados en tipos de escritura: por ejemplo, latín, cirílico, etc.
  • Utiliza formatos de fuentes optimizados en cada navegador: utiliza cada fuente en formatos WOFF2, WOFF, EOT y TTF. Asegúrate de aplicar la compresión GZIP en los formatos EOT y TTF, ya que no están comprimidos de forma predeterminada.
  • Especifica las políticas de almacenamiento en caché óptimas y la revalidación: las fuentes son recursos estáticos que no se suelen actualizar. Asegúrate de que los servidores proporcionan una marca de tiempo con una antigüedad máxima de larga duración y un token de revalidación para volver a usar las fuentes de forma eficaz entre diferentes páginas.
  • Utiliza la API Font Loading para optimizar la ruta de renderizado crítica: los tiempos de carga largos pueden dar lugar a que se retrase el renderizado del texto. Con la API Font Loading puedes anular este comportamiento para determinadas fuentes y especificar las estrategias de renderizado y tiempo de espera para el resto de contenido de la página. Puedes usar la biblioteca Web Font Loader JavaScript o una estrategia de integración de CSS para los navegadores más antiguos que no son compatibles con la API.

En esta página encontrarás más información.

¿Te ha sido útil este artículo?
¿Cómo podemos mejorar esta página?