Habilite el intercambio de fuentes web para acelerar su 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, y cuando compite con el resto del mundo, cada milisegundo cuenta. Posponer la carga de las fuentes de su sitio puede darle un ligero impulso.

Las fuentes web están bloqueando la representación

Si un activo está bloqueando el procesamiento, debe cargarse antes de que su sitio alcance su primer diseño de contenido. Los recursos de bloqueo de renderización deben mantenerse al mínimo absoluto para cualquier sitio optimizado.

La desventaja aquí es obvia: si un cliente necesita cargar recursos adicionales antes de que se cargue su sitio, deberá establecer una conexión segura adicional y un protocolo de enlace TCP antes de comenzar a descargar el recurso de bloqueo de procesamiento, que puede agregar cientos de milisegundos a tiempos de carga en el móvil. Si está cargando recursos de bloques grandes, también está poniendo sus tiempos de carga a merced del otro host.

La solución es cambiar la forma en que se manejan las fuentes. De forma predeterminada, los caracteres no son opcionales y todo el texto se bloquea hasta que se pueda mostrar con el carácter correcto. Pero todos los usuarios tienen instaladas las fuentes predeterminadas como Arial y Times New Roman, por lo que puede ver esas fuentes primero y luego cambiar a la fuente web una vez que esté cargada.

Puede especificar este comportamiento en su @font-face directiva usando el font-display parámetro:

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

Sin embargo, si está utilizando fuentes de Google, font-face La directiva se definirá en el archivo CSS que le dan para agregar el carácter. Por lo tanto, no puede editarlo directamente, pero afortunadamente Google agregó recientemente soporte para font-display: swap en la API. Debería establecerse de forma predeterminada si está agregando una nueva fuente, pero si agregó la fuente hace algún tiempo, puede actualizarla agregando el &display=swap Parámetro de URL al final:

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

Esto es todo lo que necesitas hacer. Una vez que la fuente está configurada en swap, romperá el bloque de renderizado. Puede notar que su sitio se carga con la fuente predeterminada antes de parpadear rápidamente con la actualizada; Para minimizar esto, busque una fuente predeterminada que se asemeje más a su fuente web principal. La mayoría de los usuarios de escritorio probablemente no notarán esto 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á buscando exprimir cada milisegundo de rendimiento, puede usar una opción diferente: font-display: fallback La opción hará que se cuelgue por un corto tiempo (no más de 100 ms en la mayoría de los navegadores), luego volverá a intercambiarse cada vez que el personaje decida cargar. Esto elimina el problema del parpadeo para la mayoría de los usuarios de escritorio con buenas conexiones, pero agrega un tiempo de carga de ~ 100ms (dependiendo del navegador) en el peor de los casos si la fuente no se carga a tiempo.

Pre-conectar fonts.gstatic.com

Este consejo no afecta el aspecto del bloqueador de representación de fuentes web, pero acelera las fuentes de Google en particular.

Cuando un cliente necesita recuperar un recurso de otra fuente, debe realizar un protocolo de enlace de TCP y (si el sitio se creó en algún momento dentro de esta década) establecer una conexión HTTPS segura. Hacerlo lleva tiempo, por lo que realizar viajes de ida y vuelta innecesarios ralentizará las descargas.

Esto es exactamente lo que hace Google Fonts. Primero el fonts.googleapis.com está cargado con toda la información de la fuente. La src A continuación, se lee el parámetro de 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á protegido detrás de la hoja de estilo CSS en otra fuente.

Para solucionar esto, puede pre-conectarfonts.gstatic.com. La preconexión es algo especial link opción que le dice al navegador que siga adelante y realice el protocolo de enlace HTTPS antes de que se le haya dado un enlace para abrir. Reduce en gran medida la latencia de hacer dos viajes de ida y vuelta como este.

Puede preconectarse con lo siguiente link etiqueta:

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

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

Si está sirviendo las fuentes usted mismo, querrá asegurarse de que las suyas Cache-Control los encabezados están configurados correctamente para que sus fuentes se carguen desde la caché cuando un usuario vuelva a visitar. También puede considerar usar una CDN si desea alojar las fuentes usted mismo, ya que reducirá la latencia en las solicitudes de objetos estáticos.

¿Qué te ha parecido?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir