¿Cómo habilitar el intercambio de fuentes web para acelerar tu sitio web?

La optimización del sitio web es de vital importancia para obtener una buena clasificación en Google y otros motores de búsqueda puesto que cuando compites con el resto del mundo, cada milisegundo cuenta.

Aplazar la carga de las fuentes de tu sitio puede darte un ligero impulso y ganar algunos milisegundos de carga para optimizar la interacción de los usuarios con tu sitio.

Las fuentes web bloquean el renderizado

Si un recurso bloquea el renderizado, debe cargarse antes de que tu sitio alcance la primera pintura de contenido.

Los recursos de bloqueo de procesamiento deben mantenerse en un mínimo absoluto para cualquier sitio bien optimizado.

La desventaja aquí es obvia: Si un cliente debe cargar recursos adicionales antes de que se cargue tu sitio, deberás realizar una conexión extra segura y un protocolo de enlace TCP antes incluso de comenzar a descargar el recurso de bloqueo de procesamiento, esto puede transformarse en cientos de milisegundos de carga desde un dispositivo móvil.

Si estás cargando grandes recursos de bloqueo, también estás poniendo tus tiempos de carga a merced del otro host.

La solución es cambiar la forma en que se manejan las fuentes. De forma predeterminada, las fuentes no son opcionales y todo el texto está bloqueado hasta que se pueda representar con la fuente correcta.

Pero todos los usuarios tienen fuentes predeterminadas instaladas como Arial y Times New Roman, por lo que es posible mostrar esas fuentes primero y luego cambiar a la fuente web una vez que se carga.

Puedes especificar ese comportamiento en tu directiva @font-face usando el parámetro font-display:

@font-face {
  font-display: swap;
}

Sin embargo, si estás utilizando Google Fonts, la directiva font-face se definirá en el archivo CSS que se proporciona para agregar la fuente.

Por tanto, no puedes editarlo directamente, pero afortunadamente Google recientemente agregó soporte para ello en su API font-display: swap.

Debe establecerse de forma predeterminada si estás agregando una nueva fuente, pero si agregaste la fuente hace un tiempo, puede actualizarse agregando el parámetro &display=swap al final de la URL de googleapis:

https://fonts.googleapis.com/css?family=Lobster&display=swap

Eso es todo lo que necesitas hacer. Una vez que la fuente se establece en swap, dejará de bloquear el renderizado.

Vas a notar que tu sitio se carga con la fuente predeterminada antes de pasar rápidamente a la fuente actualizada. Si quieres minimizar este problema, busca una fuente predeterminada que coincida lo más posible con tu fuente web principal.

La mayoría de los usuarios de escritorio probablemente no lo notarán junto con el resto de la carga de la página, aunque si el usuario tiene una conexión móvil lenta, es posible que noten que la fuente aparece un segundo después.

Si no estás tratando de exprimir cada milisegundo de rendimiento, puedes usar una opción diferente. La opción de font-display: fallback hará que se bloquee durante un breve período de tiempo (no más de 100 ms en la mayoría de los navegadores), y luego volverá a cambiar cada vez que la fuente cargue.

Esto elimina el problema de parpadeo para la mayoría de los usuarios de escritorio con buenas conexiones, pero agrega un tiempo de carga de ~ 100 ms (dependiendo del navegador) en el peor de los casos si la fuente no se carga a tiempo.

Preconectar fonts.gstatic.com

Este consejo no afecta el aspecto de bloqueo de procesamiento de las fuentes web, pero acelera las fuentes de Google en particular.

Cuando un cliente necesita obtener un recurso de otro origen, debes realizar un protocolo de enlace TCP y (si el sitio se creó en algún momento de esta década) establecer una conexión HTTPS segura.

Hacerlo lleva tiempo, por lo que realizar viajes de ida y vuelta innecesarios ralentizarán las descargas.

Esto es exactamente lo que hacen las fuentes de Google. Primero, la hoja de estilo CSS de fonts.googleapis.com se carga con toda la información sobre las fuentes.

A continuación src lee el parámetro de la fuente y el cliente se conecta a fonts.gstatic.com para descargar la fuente.

El problema aquí es que el archivo de fuente que queremos está bloqueado detrás de la hoja de estilo CSS de origen.

Para resolver este problema, puede preconectarfonts.gstatic.com. La preconexión es un link opción especial que dice al navegador que continúe y realice el protocolo de enlace HTTPS antes de que se le haya dado un enlace para abrir.

Esto, reduce considerablemente la latencia de realizar dos viajes de ida y vuelta. Puedes preconectarte con la siguiente etiqueta de link:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

El parámetro crossorigin dice al navegador que realice un protocolo de enlace HTTPS en lugar de una simple búsqueda de DNS (el comportamiento predeterminado).

Si estás sirviendo fuentes por ti mismo, querrás asegurarte de que tus encabezados Cache-Control estén configurados correctamente para que tus fuentes se carguen desde el caché cuando un usuario te visite nuevamente.

Aunque, quizás, deberías considerar el uso de un CDN; ya que eso reducirá la latencia de las solicitudes entre objetos estáticos.

Relacionado

5 Extensiones de Chrome capaces de aumentar tu productividad como desarrollador

Como desarrollador de software, es importante poder aumentar la productividad para terminar las tareas más difíciles a su debido tiempo. Para optimizar los procesos, se requieren las mejores herramientas y tecnologías, entre ellas algunas de las mejores extensiones de Chrome. Aprender a programar es una de las tareas más difíciles y que consume más tiempo en los nuevos programadores. Una vez que hayas aprendido a programar ¡SEGUIR LEYENDO!

11 Mejores sitios web para Descargar Fuentes Tipográficas 2024

La tipografía juega un papel importante en el diseño web y las combinaciones de fuentes correctas pueden mejorar enormemente su trabajo. Sin embargo, encontrar fuentes óptimas para sus proyectos puede ser un desafío. Puedes tropezar con los tipos de letra que te gustan al azar mientras lee una revista en línea o mira un póster web. Pero incluso después de identificar una fuente, es posible que ¡SEGUIR LEYENDO!

Deja un comentario