Cómo cargar Adobe Fonts (Typekit) más rápido con JavaScript
Como he estado buscando mejorar el rendimiento de mi sitio, un área de preocupación es cargar las fuentes personalizadas que estoy usando a través de Adobe Fonts desde Adobe Creative Cloud (también conocido como TypeKit). Si desea cargar fuentes, hay bastantes maneras:
- Fuentes seguras para el navegador: Al evitar el uso de fuentes personalizadas y, en su lugar, usar las fuentes predeterminadas compatibles con el navegador, puede aumentar drásticamente la velocidad de un sitio. Si bien esto puede parecer una opción, la estética general sería horrible. No es una opción realista para la mayoría de las empresas, ya que está limitado a Arial, Helvetica, Times New Roman, Georgia y Courier New.
- Fuentes de alojamiento propio: Puede comprar una licencia para las fuentes y cargarlas en su servidor. También se puede realizar un desarrollo adicional para que se carguen más rápido... pero parece bastante trabajo.
- Fuentes alojadas: La mayoría de los diseñadores web utilizan bibliotecas alojadas en las que puede crear un paquete de fuentes e implementar código para hacer referencia a ellas y mostrarlas en su sitio con un fragmento de código rápido. Los dos jugadores clave en este mercado son Adobe y Google Fonts. Muchos CMS Las plataformas incorporan la funcionalidad para incluir estos.
Fuentes de Adobe
Con Adobe Fonts, selecciona las fuentes que desea mostrar en su sitio y luego crea un proyecto con ellas. Un aspecto crítico aquí es cargar solo las fuentes que desea usar en su sitio y no más... cuantas más fuentes y estilos seleccione, más lento será su sitio.
Observe cómo el ID del proyecto (xxxxxx) se utiliza en cada uno de los ejemplos de código. Si desea utilizar este código, solo asegúrese de reemplazar el ID del proyecto con su ID del proyecto o, de lo contrario, no funcionará. Como puede ver, el script predeterminado proporcionado para cargar las fuentes es:
<link rel="stylesheet" href="https://use.typekit.net/xxxxxx.css">
Desafortunadamente, Adobe Fonts no ofrece una mejor opción para cargar sus fuentes... aunque existe. El siguiente código JavaScript heredado proporcionado por Adobe es más rápido que cargar fuentes a través de CO por algunas razones:
- El código JavaScript utiliza asincrónico loading, lo que significa que el navegador puede continuar cargando la página mientras se recupera el script. Por el contrario, cuando carga fuentes a través de CSS, el navegador debe esperar a que se descargue y analice el archivo CSS antes de que pueda comenzar a cargar las fuentes. Esto puede provocar un retraso en la carga de fuentes y tiempos de carga de página más lentos.
- El código JavaScript utiliza el Cargador de fuentes web Typekit, que proporciona funcionalidad adicional para cargar fuentes. Por ejemplo, el cargador de fuentes web puede detectar si el navegador admite la
@font-face
regla y puede evitar cargar fuentes innecesariamente en navegadores que no soportan@font-face
. También puede proporcionar un mejor rendimiento de carga de fuentes y una mejor representación de fuentes. - El método CSS requiere un adicional HTTP solicitud para obtener el archivo CSS, mientras que el código JavaScript es autónomo y no requiere ningún archivo adicional para ser buscado Esto puede resultar en tiempos de carga ligeramente más rápidos para el código JavaScript.
En general, usar este método de JavaScript heredado para cargar fuentes Typekit puede resultar en una carga de fuentes más rápida y confiable que usar el método CSS.
<script src="//use.typekit.net/xxxxxxx.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
Si está ejecutando un sitio de WordPress, también puede actualizar su archivo functions.php para cargar su proyecto:
add_action( 'wp_head', 'theme_typekit_inline' );
function theme_typekit() {
wp_enqueue_script( 'theme_typekit', '//use.typekit.net/xxxxxx.js', '', false);
}
add_action( 'wp_enqueue_scripts', 'theme_typekit' );
function theme_typekit_inline() {
if ( wp_script_is( 'theme_typekit', 'done' ) ) { ?>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<?php }
}
Cada poquito cuenta cuando intentas mejorar la velocidad de tu sitio. Adobe Fonts no es un servicio muy rápido, por lo que ayudar a ahorrar algo de tiempo con cada carga de página puede marcar la diferencia.