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

Cómo definir una plantilla diferente por categoría para el detalle de los posts
Cómo definir una plantilla diferente por categoría para el detalle de los posts
En WordPress se usa la plantilla single.php para el detalle de los posts. Podemos crear plantillas para los posts de un custom post type concreto…
Cómo agregar el generador de contraseña fuerte de WordPress en nuestro formulario de registro personalizado
Cómo agregar el generador de contraseña fuerte de WordPress en nuestro formulario de registro personalizado
En la entrada anterior veíamos cómo crear un formulario de registro personalizado en WordPress. En el ejemplo, generábamos una contraseña automáticamente, pero ahora vamos a…
Añadir un icono personalizado a nuestro custom post type
Añadir un icono personalizado a nuestro custom post type
La versión 3.8 de WordPress trajo consigo nuevas mejoras, el tema Twentyfourteen, y un cambio completo de diseño en el Back End. Con éste cambio,…
Cómo añadir campos personalizados o custom fields al back-end de WordPress de forma elegante
Cómo añadir campos personalizados o custom fields al back-end de WordPress de forma elegante
En esta entrada vamos a ver como añadir campos personalizados o custom fields al back-end de WordPress de manera elegante, es decir, utilizando meta_boxes. Actualmente…