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 pasar un parámetro a un filtro de WordPress
Cómo pasar un parámetro a un filtro de WordPress
Hace unos días publiqué una entrada sobre qué son, cómo crear y cómo utilizar los filtros de WordPress. En esta entrada vamos a ver cómo…
Cómo crear un formulario de registro personalizado en WordPress
Cómo crear un formulario de registro personalizado en WordPress
En entradas anteriores hemos visto cómo crear formularios de log-in / log-out personalizados, y cómo agregar campos personalizados al perfil de usuario de WordPress tanto…
Cómo personalizar el logo y el enlace del login de WordPress
Cómo personalizar el logo y el enlace del login de WordPress
Éste es el aspecto que presenta la pantalla de login para acceder al back-end de nuestro WordPress: Es muy común que algún cliente nos pida…
Cómo solucionar la pantalla blanca de la muerte en WordPress
Cómo solucionar la pantalla blanca de la muerte en WordPress
La WSOD (White Screen of Death o pantalla blanca de la muerte) es uno de los errores más comunes en WordPress. Identificaremos que nos encontramos…