Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
fuente sistema

Utiliza fuentes de sistema y mejora tu WPO

Las fuentes dan un estilo característico a nuestra web. Los diseñadores suelen hacer uso de fuentes, o incluso algunos clientes tienen fuentes corporativas, como seña de identidad de su imagen de marca.

Últimamente se utilizan mucho las Fuentes de Google o Google Fonts. Un extenso catálogo de fuentes donde podemos elegir las familias, los tipos, etc…

Suelen quedar muy bonitas, pero luego llega el pánico cuando metes la URL en una herramienta tipo Google PageSpeed Insights y te sale la alerta de Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página.

Ahí aparece tu fuente, bloqueando la visualización del contenido de la mitad superior de la página. Y es cuando te preguntas, ¿cómo puedo solucionar esto? La respuesta puede ir en dos sentidos:

  • O lo asumes por imperativo de diseño
  • O utilizas alguna estrategia como google font loader para cargar la fuente en diferido. Ésto último pasa el filtro de PageSpeed Insights, pero te encontrarás con el FOUT, un efecto (a mi parecer horrible) de un pequeño “flash” de apenas milisegundos, donde ves que primero tienes una fuente y cuando el font loader entra en acción, la cambia al vuelo por la fuente de Google.

 

Puedes consultar esta entrada donde hablo un poco más en profundidad sobre esto.

Normalmente suelo recomendar vivir con ello si quieres utilizar una fuente de Google si o si. Carga la fuente en el head como debe ser, vive con esa alerta de PageSpeed Insights, y olvídate del font loader.

 

Fuentes de sistema ¿al rescate?

Si no tienes que utilizar una fuente por imperativo de diseño, o porque tu cliente no dispone de fuentes corporativas, plantéate el uso de fuentes de sistema.

Cada sistema operativo dispone de fuentes nativas. No requieren de tiempo de descarga por parte del navegador, porque son propias. Por lo tanto, si hacemos uso de ellas, evitamos bloquear la visualización del contenido de la mitad superior de la página con una petición más, y evitamos el tiempo de descarga de estas fuentes.

Las fuentes del sistema no requieren ningún tiempo de descarga por parte del navegador. Esto puede ayudar a reducir el peso general de la página en tu sitio web. Hay estudios que dicen que las fuentes web en promedio representan alrededor del 4% del peso total de un sitio web.

Un 4% no es mucho realmente, pero es con cada granito de arena como se van consiguiendo grandes resultados de optimización. Es una pequeña mejora en nuestro WPO.

En CSS-Tricks hacen un breve resumen de las fuentes web de los sistemas operativos más utilizados:

Sistema Operativo Versión System Font
Mac OS X El Capitan San Francisco
Mac OS X Yosemite Helvetica Neue
Mac OS X Mavericks Lucida Grande
Windows Vista Segoe UI
Windows XP Tahoma
Windows 3.1 to ME Microsoft Sans Serif
Android Ice Cream Sandwich (4.0)+ Roboto
Android Cupcake (1.5) to Honeycomb (3.2.6) Droid Sans
Ubuntu All versions Ubuntu

He de reconocer que no queda tan bonito, pero es más práctico y rápido. Para utilizar las fuentes del sistema, añade esto a tu hoja de estilos:

 

¿Sabes que WordPress utiliza fuentes del sistema en el panel de administración?

Pues si. No tienes más que entrar en tu panel de administración e inspeccionar un elemento. WordPress, en el panel de administración, utiliza fuentes de sistema:

¿Te animas a probarlas? Te ahorras una petición HTTP, te ahorras el tiempo de descarga, y al fin y al cabo estarás utilizando algo estandarizado. No tan bonito como pueda ser una fuente, pero darás otro pasito en la optimización de tu sitio web.

Puede que también te interese

Mejora la puntuación de Google PageSpeed Insights: Habilita la compresión
Mejora la puntuación de Google PageSpeed Insights: Habilita la compresión
1. Optimizar imágenes 2. Minificar CSS y JS 3. Especificar caché de navegador 4. Habilita la compresión 5. Reducir el tiempo de respuesta del servidor…
WordPress Hooks: Filters
WordPress Hooks: Filters
En la entrada anterior vimos lo que eran los Actions en WordPress. En esta vamos a ver el otro tipo de hook: los filters. Los…
Creando un tema desde cero para WordPress parte 2: Escribiendo el tema
Creando un tema desde cero para WordPress parte 2: Escribiendo el tema
1. Creando un tema desde cero para WordPress: Consideraciones previas 2. Creando un tema desde cero para WordPress: Escribiendo el tema 3. Creando un tema…
Cómo permitir a un colaborador subir archivos en WordPress
Cómo permitir a un colaborador subir archivos en WordPress
Como sabéis, existen diferentes tipos de usuarios en WordPress: Administrador, Editor, Autor, Colaborador y Suscriptor: Cada uno de estos roles tiene permitidas una serie de…