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 preconectar
fonts.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
Desde Microsoft , buscan la fuente tipográfica por defecto para la tan utilizada Suite de Microsoft Office. Entre las alternativas a ser las sucesoras de Calibri: Tenorite, Bierstadt, Skeena, Seaford o Grandview. Aunque es posible que las fuentes predeterminadas no tengan el mismo estilo que algunas de las más llamativas (como Bauhaus 93 o Showcard Gothic) transmiten una personalidad de manera más tranquila. Una fuente predeterminada ¡SEGUIR LEYENDO!
- June & Lucy (Autor)
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!
Los desarrolladores pasan todo el día usando editores de código, emuladores de terminal y en otras herramientas de desarrollo o en la creación de proyectos. El uso de una fuente que te resulte cómoda a la vista puede marcar una gran diferencia y mejorar en gran medida tu productividad. Aquí hay una recopilación de las mejores fuentes gratuitas de espacio único para codificar y programar junto ¡SEGUIR LEYENDO!
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!