Hoy en día la mayor parte de los sitios web actuales utilizan tipografías no predeterminadas, de sistema, ya que las tipografías personalizadas aportan mucha frescura y modernidad al diseño de la página. Sin embargo, también es sabido que los archivos de fuentes son pesados, pueden requerir el acceso a otros archivos independientes para los formatos de negrita y cursiva, con lo que el resultado es una mayor ralentización de carga del sitio web. En este artículo vamos a mostrar algunos consejos para acelerar esta carga.
1. Colocar las fuentes en CDN (Content Delivery Network)
Una solución simple para mejorar la velocidad de un sitio web es utilizar un CDN, y lo mismo para las fuentes. Es importante asegurar el CDN tiene los ajustes CORS adecuados:
# Apache config lt;FilesMatch ".(eot|ttf|otf|woff)"> Header set Access-Control-Allow-Origin "*" </FilesMatch>
# nginx config
if ($filename ~* ^.*?.(eot)|(ttf)|(woff)$){
add_header Access-Control-Allow-Origin *;
}
Aparecerán errores AJAX / cross-domain en la consola si la configuración CORS del CDN no está realizada correctamente.
2. Utiliza Non-Blocking CSS Loading
Hay una manera de evitar el bloqueo de la representación en la descarga del CSS:
<link rel="stylesheet" type="text/css" href="fonts.css" media="none" onload="this.media='all';"> <link rel="stylesheet" type="text/css" href="style.css" media="none" onload="this.media='all';">
Utilizando media = none permitimos al navegador descargar la hoja de estilos sin bloquear la representación, así cuando la hoja de estilo se ha descargado, se establece el valor de media en su ajuste deseado para hacer que la pantalla se vea como debería.
3. Separa los selectores de fuente
Si una fuente no se ha cargado en el tiempo que suele, el usuario verá un espacio vacío hasta que la fuente se haya cargado. Esto es, por supuesto, no es bueno si las fuentes no se pueden cargar. Lo mejor es mantener las declaraciones de fuentes personalizadas protegidas con una clase que se agrega al cuerpo después de que las fuentes han cargado:
h1 { font-family: Arial, serif; } /* basic system font */
.fontsloaded h1 { font-family: 'MySpecialFont', serif; } /* custom system font */
<link href="fonts.css" onload="document.body.className+=' fontsloaded';" rel="stylesheet" type="text/css" >
Es recomendable crear un Stylus / Sass / Less mixin para establecer la configuración de font-family para que el selector se ajuste automáticamente.
4. Almacenamiento de Fuentes en localStorage
¿Sabías que puedes almacenar fuentes en localStorage ?! Echa un vistazo a este artículo que detalla el proceso e incluso proporciona el código para hacerlo.
Comentarios