En este artículo, vamos a ver un aspecto específico de la precarga: la precarga de fuentes Google Fonts y fuentes alojada en local.
Hoy en día, la velocidad es todo. Los navegadores intentarán cachear el contenido de la página web para acelerar la carga. La Precarga (Preload) de las fuentes es una de esas características de caché que ayuda a mejorar la velocidad de carga de la página de un sitio de WordPress.
Precargar te permite indicar recursos específicos que un navegador debe solicitar sin bloquear el resto del renderizado de tu página.
Básicamente, te da más control sobre cómo se cargan los recursos de una página web, lo que te ayuda a optimizar el rendimiento de tu sitio y a mejorar la percepción del tiempo de carga de la página.
A continuación, vas a aprender qué es la precarga de fuentes y cómo funciona. Luego, también te compartiré algunas de las mejores prácticas para la precarga de fuentes web.
¿Qué es la precarga de fuentes?
Precargar, como el nombre indica, informa al navegador para que empiece a cachear los recursos de una página web inmediatamente cuando la página empiece a cargarse. Esto ayudará a cachear el CSS, los scripts y las fuentes que se requieran más adelante.
Cuando alguien visita tu sitio web, su navegador carga todos los recursos de esa página web en un cierto orden, que puedes ver en la pestaña Network de las herramientas para desarrolladores de Chrome o en una herramienta de pruebas de rendimiento como GTmetrix o Pingdom.
En la imagen a continuación, puedes ver el resultado de la carga de uno de mis sitios web sin precarga de las fuentes Google Fonts. Entonces se encuentra todo abajo y es uno de los últimos elementos cargados.
Y ahora con la precarga Google Fonts. Entonces se carga dentro de los primeros elementos.
Por defecto, los navegadores web deciden cómo cargar estos recursos en función del orden en que se declaran en el HTML de tu sitio, lo que no siempre es óptimo desde el punto de vista del rendimiento y/o de la experiencia del usuario.
Con la precarga, puedes forzar a los navegadores a cargar ciertos recursos al principio, como las fuentes. Esto te da más control sobre la forma en que se carga tu sitio, lo cual, cuando se implementa correctamente, te permite mejorar el rendimiento de tu sitio.
El contenido es una de las partes más importantes del SEO. Ahora imagina si un visitante que acaba de entrar en tu página web verá primero los anuncios, imágenes y demás, y por último la fuente. Bueno, este usuario, si no tiene nada que leer, podría dejar tu página web mientras se está cargando y esto aumentará tu tasa de rebote.
Para evitar eso, la mejor arma que tenemos es cargar la fuente primero. Entonces este usuario puede empezar a leer el contenido que aparecerá primero mientras se carga el resto.
Puedes obtener más información sobre la precarga en este artículo de Google.
¿Cómo precargar las fuentes en WordPress?
Es importante distinguir los 2 tipos de fuentes que puedes usar en tu sitio web.
O bien las Google Fonts, vienen de dos fuentes externas: fonts.googleapis.com y fonts.gstatic.com.
O bien las fuentes que están alojadas de forma local en tu WordPress. Pueden ser las fuentes predeterminadas de tu tema activo o pueden ser fuentes de Google Fonts pero las habrás descargado previamente.
Para optimizar al máximo tu sitio web, te aconsejo encarecidamente que añadas las fuentes que quieres usar en tu servidor. Para hacerlo puedes leer mi tutorial Cómo agregar fuentes de Google Fonts en WordPress donde te explico todo.
No te preocupes, en este tutorial te mostraré las dos opciones: Google Fonts y fuente alojada desde local.
Primero te explicaré el código que debes escribir y luego te mostraré cómo implementarlo en tu WordPress.
El código Preload para la precarga de fuentes
Para precargar las fuentes, necesitarás añadir un código a la sección </head> de tu sitio WordPress. El código que usarás es el siguiente:
<link rel="preload" href="URL de tu fuente" as="font" type="font/woff2" crossorigin="anonymous">- rel – le dice al navegador que precargue el archivo de la fuente.
- href – es el enlace al archivo de la fuente. Necesitarás editarlo para recoger la fuente que quieres precargar.
- as – le dice al navegador que está precargando un archivo de fuente.
- type – especifica el tipo de archivo de la fuente. Tendrás que cambiarlo si quieres precargar un tipo de archivo diferente.
- crossorigin – sin este atributo, la fuente precargada es ignorada por el navegador, y se produce una nueva búsqueda. Esto se debe a que se espera que las fuentes se obtengan de forma anónima por el navegador, y la solicitud de precarga sólo se hace de forma anónima mediante el uso de este atributo.
Precargar fuentes de Google Fonts
Para añadir una tipografía de Google Fonts a tu sitio web, necesitas usar el Api de Google Fonts. Para ayudarte a elegir tu fuente, puedes visitar la lista completa de fuentes de Google Fonts.
Especificar familias de fuentes y estilos en una hoja de estilos URL
Para determinar qué URL utilizar en el enlace de la hoja de estilos, empieza con la URL base del API de Google Fonts:
https://fonts.googleapis.com/cssLuego, agrega el parámetro ?family=fuente, con uno o más nombres de familias de fuentes y estilos. Por ejemplo, para pedir la fuente Roboto:
https://fonts.googleapis.com/css?family=RobotoRecuerda que te dije que Google Fonts viene de dos fuentes externas, pues esta que es fonts.googleapis.com es el CSS de esta fuente.
El otro, fonts.gstatic.com, es sobre el subset. En pocas palabras, es el alfabeto utilizado, el lenguaje. En tu navegador, ve a la dirección de la API de Roboto y verás que hay varios alfabetos: latin, greek, cyrillic, etc.
Como hispanohablante, sólo necesitamos el subset /* latin */. Sólo tienes que copiar la URL de la @font-face y añadirla al código rel="preload", lo que da:
<link rel="preload" href="https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2" as="font" type="font/woff2" crossorigin="anonymous">El código para precargar la fuente de Google Fonts está listo, puedes usar esta técnica para cualquiera Google Fonts.
Precargar fuentes desde local
Para crear el código rel="preload" de una fuente alojada en tu servidor, nada más simple, sólo toma la dirección URL donde se encuentra.
Si seguiste mis consejos en el tutorial Cómo agregar fuentes de Google Fonts en WordPress, entonces esta dirección es /wp-content/uploads/fonts/roboto-v20-latin-regular.woff2.
Si no es el caso, busca la dirección exacta de tu fuente.
El código rel="preload" será, por lo tanto, el siguiente:
<link rel="preload " href="
/wp-content/uploads/fonts/roboto-v20-latin-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">Los códigos de precarga de tu fuente están listos, ahora veremos cómo implementarlos en tu WordPress.
Cómo implementar la precarga de Google Fonts en WordPress
Aunque hay algunos plugins que pueden ayudarte a precargar las fuentes cuando las alojas localmente (OMGF), tienes algunas opciones para insertar el código en la sección </head> de tu sitio de WordPress.
Precarga fuentes en cualquier tema de WordPress
Si estás usando un tema gratuito para tu sitio web, es probable que no tengas acceso a las funciones para añadir código a tu encabezado </head>.
En este caso, te aconsejo que instales un plugin y el que uso en otros sitios web es Insert Headers and Footers.
Una vez activado, en el menú Ajustar, haz clic en la nueva pestaña Insert Headers and Footers y pega el código rel="preload" en el Scripts en la cabecera como en la imagen a continuación.
Haz clic en Guardar, vacía la caché y ya estás listo.
Si compras un tema para tener la versión Premium, entonces tendrás funciones como añadir código en la cabecera. Cada tema será diferente, por lo tanto, a continuación, te muestro como hacerlo con el tema que uso en esta página web: GeneratePress.
Precarga fuentes en GeneratePress
GeneratePress es un tema gratuito y ligero que puede ser ampliado mediante la instalación de un plugin Premium que permite añadir muchas características y funciones. Es un tema receptivo personalizable y bien codificado construido con un enfoque en la velocidad y la usabilidad.
1 – Crea un elemento Hook
Para este método, necesitas habilitar el módulo de Elementos en la configuración del tema Premium de GeneratePress.
Apariencia > GeneratePress > Módulos > Elementos > Activar
De la misma manera que para Google Analytics, el primer paso es crear un nuevo elemento Hook. Ingresa a tu área de administración de WordPress y haz clic en Apariencia > Elementos en la barra izquierda y luego haz clic en Añadir un nuevo Elemento arriba y selecciona Hook en la lista desplegable.
En la pantalla que sigue, puedes editar tu nuevo elemento Hook.
2 – Añade tu código rel="preload"
Agrega un título a este gancho, en este caso Font Preload.
En el cuadro de edición, copia y pega el código.
3 – Configura los ajustes del Hook
La ubicación del Hook debe ser en wp_head para que sea en la cabecera </head> de tu tema y pincha Ejecutar PHP.
En la pestaña Reglas para Mostrar, junto a Posición, selecciona Todo el sitio y publica tu gancho.
Vacía la caché y ya estás listo.
Mejor práctica para la precarga y optimización de fuentes
Limitar el número de fuentes y formatos que precargues
Si utilizas varias fuentes, puede parecer interesante precargar todas las fuentes que utilizas en todos los formatos.
Sin embargo, hay compensaciones de rendimiento por el uso de la precarga de fuentes.
Con la precarga, esencialmente estás forzando a los navegadores a hacer una solicitud de alta prioridad para la URL de la fuente, sea o no necesaria. Si cargas fuentes innecesarias, retrasarás innecesariamente la carga del resto de tu sitio en el navegador de un visitante.
Para equilibrar estas compensaciones, debes limitar el número de fuentes que precargas a sólo las que son absolutamente necesarias para la carga de la página inicial.
Dependiendo de tu diseño, este podría ser la fuente que uses para tus títulos, o también podría incluir la fuente que usas para el cuerpo del texto.
Conclusión
Tomar en cuenta dichas optimizaciones básicas mejorará la experiencia del usuario UX general de tu página web además de ser buenas para tu SEO.
Espero que hayas encontrado útil este artículo y si te gustó no dudes en compartirlo en las redes sociales. Y si tienes alguna pregunta, pregúntame en los comentarios.
