17/07/2017
Usar Google fonts, un apunte sobre performance
Este blog, así como miles de sitios en internet, usa Google fonts: es fácil, es rápido y tiene una cantidad interesante de fuentes tipográficas. Pero, ¿cual es la mejor manera de usar este servicio?
La manera rápida.
Añadir un enlace a la cabecera de tu página:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Libre+Baskerville">
Cool, ya está, ya podemos hacer:
font-family: "Libre Baskerville", serif;
Pero. Estás referenciando una hoja de estilos, las hojas de estilo son recursos que bloquean la descarga de otros recursos hasta que el navegador se descarga el archivo y lo procesa. A ver, es un servicio de Google, no suele fallar y no es súper problemático, pero no es lo más óptimo a no ser que sea algo absolutamente necesario para el funcionamiento de tu página (que no debería).
Y bueno, ya que estamos hablando de performance, si vamos a PageSpeed Insights nos va a reñir con: «Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página».
No problem, tengo un truco: cargar el archivo en el footer de la página. Esto hace que la carga de la hoja de estilos no bloquée la carga de otros recursos. Nice. Pero. Es sólo un truco, entonces...
La manera completa.
Usar Web Font Loader que permite cargar no sólo fuentes de Google sino también de otros servicios (como Typekit) e incluso hojas de estilo propias. También te permite aplicar estilos según eventos relacionados con la carga de las propias fuentes.
Permite cargar las fuentes de manera asíncrona, lo que es bien, pero tiene la pega de que provoca un FOUT, bueno, vamos a probar:
WebFontConfig = {
google: {
families: ['Libre Baskerville', 'Rubik:300,300i,700,700i']
}
};
(function(d) {
var wf = d.createElement('script'), s = d.scripts[0];
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
wf.async = true;
s.parentNode.insertBefore(wf, s);
})(document);
Ese snippet carga todas las familias que uso de manera asíncrona.
Análisis.
Esta página carga relativamente rápido (yuhu), así que igual no es el mejor ejemplo, pero intento sacar conclusiones.
Bueno, vamos a comparar:
Hummmm... Bueno, no hay mucha diferencia, y... viendo sólo esa imagen, si cargo las fuentes usando el primer método me ahorro el FOUT, cool. Pero. ¿Será siempre así? Afortunadamente webpagetest.org permite hacer un montón de pruebas, y en una de ellas se materializó mi miedo, tachán:
5 segundos de página en blanco, y eso cargando la hoja de estilos desde el pie de la página (por eso es sólo un truco, no usar).
Conclusión.
La manera completa es también la mejor manera para mí, penaliza ligeramente la experiencia al hacer el FOUT (siempre mejor que un FOIT, imho), pero en los casos (esperemos que sea poco) en los que por lo que sea el servicio de Google o la red del cliente no vaya bien pues por lo menos podrá ver el contenido con las fuentes del sistema.
Y bueno, esto es para Google fonts, más posibilidad de optimización sería servir las fuentes desde el dominio propio, probablemente...
Bonus point. Self hosted fonts.
Una de las ventajas de usar el servicio de Google es que es muy sencillo probar diferentes fuentes, una vez que se han decidido ya no tiene tanta importancia. Así que vamos a comprobar que tal iría.
Lo primero es que es más lío, hay que descargarse las fuentes, añadir las hojas de estilo, quizás tocar algo del servidor para que tenga en cuenta los formatos woff y woff2. La primera ventaja es que son menos peticiones, una menos si es la hoja de estilos y dos menos si es con el font loader, además de que al enviar todo en la misma hoja de estilos reducimos el bloqueo de recursos.
Al final, en mi caso, los resultados no son muy distintos, pero como no perjudica me lo quedo, es como más adecuado dejar de depender de un servicio externo sólo para descargarme 4 archivos. Ah, bueno, y como sólo tengo el archivo de analytics que escapa a mi control pues he pasado a tener una «A» en webpagetest (yuhu \( ﾟヮﾟ)/).
