Una gran tipografía en la página puede tener un efecto positivo en las conversiones. Elegir las fuentes correctas y optimizarlas es crucial. Google Fonts es un servicio muy popular porque está bien diseñado y puede agregar un nivel adicional de elegancia a sus páginas web predeterminadas. Desafortunadamente, como todo lo demás en la web, pueden afectar negativamente el rendimiento de su sitio web si no se usan correctamente. En este artículo, veremos 5 consejos de optimización del rendimiento al usar Google Fonts con WordPress.
Fuentes de Google y rendimiento del sitio de WordPress
Fuentes de Google es un directorio de más de 1300 familias de fuentes gratuitas proporcionadas por Google que cualquiera puede usar en sus sitios web o en proyectos impresos. Aunque son utilizados por millones de sitios de WordPress, son una excelente manera de mejorar el diseño de su sitio. Seguro que encuentras un diseño único entre ellos. Las fuentes de Google generalmente se agregan a su sitio de WordPress descargándolas del CDN de Google. Esto significa que están alojados en los servidores más cercanos al usuario, incluida la fuente y la hoja de estilo.
Las fuentes de Google descargadas de Internet no son tan rápidas como las fuentes del sistema (las que están instaladas en su computadora). El tráfico web fuera del sitio se convierte en parte de su velocidad de carga. Los tiempos de carga de las fuentes de Google tienen menos impacto en el rendimiento del sitio web que los archivos más grandes. Después de todo, las fuentes son mucho más pequeñas que las imágenes. Sin embargo, cada solicitud de su sitio es el tiempo que pasa cuando el usuario no puede acceder a él. Por lo tanto, tiene sentido optimizar las fuentes de Google para mejorar la velocidad de carga de su sitio web.
Afortunadamente, hay varias formas de optimizar el rendimiento al usar Google Fonts con WordPress.
1. Usa menos fuentes
Es mejor usar la menor cantidad de fuentes posible. Idealmente, debe usar dos conjuntos de fuentes emparejadas para obtener mejores resultados.
Cuando hablamos de fuentes, en realidad estamos hablando de familias de fuentes. A menudo pensamos en una fuente básica cuando hablamos de un tipo de fuente, pero las fuentes vienen con muchas variaciones, como diferentes pesos, cursivas, números y símbolos. Estos se conocen como glifos.
Muchas fuentes contienen pesos como Fino, Ligero, Medio, Negrita, Negrita, Ultra Negrita y más. Cada una es una fuente diferente en la familia de fuentes. Además, cada peso incluye cursiva lo que duplica el número de fuentes. Cuando usa esta familia de fuentes, también carga todas sus variantes. Eso es mucho si te pones manos a la obra.
Por ejemplo, Roboto es una fuente popular en los sitios web en estos días. La familia tiene 12 conjuntos de fuentes con 282 glifos por fuente. Esto es 3384 glifos para una familia de fuentes, multiplicado por el número de extensiones de fuentes que desea utilizar. Agregue Roboto Condensed y Roboto Slab a eso, y verá fácilmente cómo la cantidad de fuentes utilizadas en un sitio web puede volverse astronómica. Al usar varias familias de fuentes, puede usar decenas de miles de fuentes.
2. Aloja las fuentes de Google en tu servidor de WordPress
Es posible descargar y alojar fuentes de Google en su servidor de WordPress. De esta manera, la tipografía del sitio se entregará al usuario desde la misma ubicación que el sitio. El sitio no tendrá que solicitar los archivos de fuentes de ningún otro lugar y la página se cargará más rápido para el usuario.
Después de seleccionar una fuente en el sitio web de Google Fonts, verá una opción de descarga. Descargue la familia de fuentes, luego envíelas por FTP a su carpeta de carga/contenido. Para usarlos, no haga referencia a un host de fuente externo en el área de sus páginas. En su lugar, consulte la extensión URL/fonts/FONT_FILE_NAME.file-extension en la hoja de estilo.
Con todo esto en mente, solo cargue las fuentes y los pesos que necesita. No utilice todas las opciones posibles de peso y cursiva. Utilice TTF, EOT, WOFF y WOFF2 para cada fuente.
3. Precarga las fuentes de Google
Las fuentes de Google generalmente se descargan desde Google CDN. Aunque es un servidor rápido, las fuentes generalmente se descargan tarde en el proceso de carga de la página web.
Si hay un problema con la conexión y las fuentes no se descargan, la página se renderizará con fuentes genéricas del sistema. Luego, la página se renderizará nuevamente después de descargar las fuentes. En pocas palabras, una página se carga con una fuente y luego cambia a una fuente diferente. Esto se conoce como destello de texto sin estilo (FOUT). Esto es mejor que esperar. Pero todavía no es genial.
Una forma de resolver este problema es precargar las fuentes. La precarga de las fuentes de Google también reduce los tiempos de carga en aproximadamente 100 ms. El motivo de esto es cargar DNS, TCP y TLS en paralelo con el archivo CSS de Google Fonts.
La carga previa requiere una conexión previa y el uso de un enlace de carga previa en una hoja de estilo. Puede cargar la familia de fuentes y la hoja de estilo con código HTML en el área de su sitio web.
Aquí hay un ejemplo de código HTML usando preconectar con Planeta CDN:
<head> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Open+Sans|Roboto:[email protected]&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans|Roboto:[email protected]&display=swap"> </head>
Anular roboto en el ejemplo anterior, así como todas las opciones de fuente con las fuentes y opciones que desea utilizar.
4. Optimice las fuentes de Google con el complemento de WordPress
Como ocurre con la mayoría de las cosas de WordPress, los complementos facilitan mucho la optimización de las fuentes de Google. Ellos se encargan del lado del software por usted, por lo que no tiene que preocuparse por dónde colocar el código.
Hay muchos buenos complementos que pueden optimizar sus fuentes de Google. es especialmente interesante para mi Dios mío | Aloja las fuentes de Google localmente. Fue diseñado específicamente para optimizar las fuentes de Google que ya usa. Como muchos otros complementos de Google Fonts, este tiene una versión gratuita y otra premium. La versión gratuita solo viene con configuraciones manuales, lo que puede ser complicado. Pero su configuración no es demasiado complicada.
Lo principal que se destaca de esta versión es que la versión gratuita viene con algunas optimizaciones que cualquiera puede aprovechar, en lugar de simplemente hacer que las fuentes sean más fáciles de usar. La mayoría de estos complementos solo brindan optimización en la versión premium. Para mejores resultados, recomiendo la versión premium. La versión gratuita tiene suficientes optimizaciones para comenzar.
El complemento almacena en caché las fuentes y puede alojar las fuentes de Google localmente. Las fuentes en cola se eliminan automáticamente del encabezado y se reemplazan con fuentes locales. Puede precargar fuentes en la parte de la página visible en la pantalla y evitar que se carguen algunas fuentes y hojas de estilo.
Puede reemplazar o eliminar fuentes en la configuración de detección. Esto puede ser especialmente útil después del rediseño para evitar cargar recursos antiguos que nunca se entregarán a los usuarios.
Y si mantiene su casa realmente limpia, la Configuración avanzada le permitirá elegir el directorio para el caché de fuentes.
5. Utilice la integración de fuentes de Google con módulos Divi
600 fuentes de Google están integradas con todos los módulos Divi que usan texto y están disponibles tanto en Divi Theme como en Divi Plugin y están optimizadas para el mejor rendimiento y diseño posibles. Elija una familia de fuentes, peso y estilo, y personalice su tamaño, color, altura de línea, interlineado y sombras para el cuerpo y todos los tamaños de encabezado individualmente. Incluso puede personalizarlos para dispositivos individuales.
Las fuentes de Google se almacenan en caché y solo las fuentes utilizadas se cargan en el módulo. Como resultado, el navegador no carga variantes de fuentes que no sean necesarias.
Hay varias configuraciones de fuentes de Google en las opciones del tema Divi, en General > Actuación Correa. Ambos están habilitados de forma predeterminada. Esto quiere decir que si eres usuario de Divi y no sabías que era algo que soporta el tema, ya te han solucionado.
Mejorar la carga de fuentes de Google almacena en caché las fuentes de Google y las carga directamente para reducir los tiempos de carga de la página y las solicitudes de bloqueo de procesamiento. A continuación se muestra una opción llamada Restrinja la compatibilidad con las fuentes de Google para navegadores más antiguos. Esta función reduce el tamaño de las fuentes de Google para reducir los tiempos de carga. La desventaja es que la compatibilidad con las fuentes de Google está limitada en algunos navegadores antiguos.
Pensamientos finales
Es muy probable que su sitio ya esté usando Google Fonts de alguna manera. Pero si sigues estos 5 consejos de optimización de rendimiento al usar Google Fonts con WordPress, creo que notarás la diferencia. Si bien pueden ser pequeñas, las fuentes de Google no optimizadas pueden afectar los tiempos de carga de su sitio web y la experiencia general del usuario. Hay algunas opciones manuales para optimizar las fuentes de Google, pero recomiendo a la mayoría de los usuarios que instalen un complemento de optimización de fuentes como OMGF. Por supuesto, Divi siempre es una excelente opción para cualquier tipo de optimización y administración de fuentes.
Queremos escuchar de ti. ¿Está utilizando alguno de estos consejos de optimización de fuentes de Google con WordPress? Háganos saber en los comentarios.
Imagen destacada a través de Sammby / shutterstock.com
