Display-font: swap

Contribuir UX
1

Hola,

He notado que se utiliza una fuente de Google (y sé en la configuración que se pueden seleccionar más de una).

Para mejorar la experiencia del usuario antes de que se cargue la fuente, es recomendable añadir &display=swap al cargador CSS de Google.

Por lo tanto: css?family=Open+Sans:400,400i,700

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url(...) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

Se convierte en: css?family=Open+Sans:400,400i,700&display=swap

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(...) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

Lee más en:

PD: Hay algunos puntos porque no puedo pegar más de dos enlaces en una publicación como nuevo usuario :wink:

2 Me gusta
2

font-display: swap; afecta los tiempos de bloqueo y de intercambio al esperar a que se cargue una fuente, pero estamos incluyendo la fuente desde el backend (tenemos un gem de discourse-fonts separado; hacerlo de esta manera elimina la necesidad de realizar una llamada a Google y ser rastreados).

Por lo tanto, dado que las fuentes se incluyen como parte de la aplicación Discourse en la carga inicial, no creo que veamos ningún beneficio, ya que las fuentes no están retrasando la renderización como lo harían si estuviéramos haciendo una llamada a Google (o a otra CDN) en nuestro CSS.

No obstante, usar font-display: swap; sigue siendo probablemente un buen consejo para cualquier persona que agregue fuentes personalizadas desde una CDN de terceros en un tema.

6 Me gusta
3

Hmmm… ¿Es try.discourse.org una instancia representativa para analizar cuando se trata de problemas de rendimiento?

Vi que se cargaban fuentes de Google allí y asumí que era algo global.

Captura de pantalla 2020-11-17 a las 22.42.45
Captura de pantalla 2020-11-17 a las 22.42.45986×490 66.7 KB

1 me gusta
4

Ah, eso tiene sentido. Importamos la fuente en Try porque tenemos un encabezado que coincide con discourse.org (que usa Open Sans)… podemos usar swap allí o incluso incluir la fuente directamente en el tema.

Puedes usar Try al analizar problemas de rendimiento, pero quizás sea mejor usar el modo seguro solo para asegurarte de que no esté relacionado con las pequeñas personalizaciones que hemos añadido.

4 Me gusta