Affichage-police : échange

Contribuer UX
1

Bonjour,

J’ai remarqué que Google Fonts est utilisé (et je sais dans les paramètres que plusieurs polices peuvent être sélectionnées).

Pour améliorer l’expérience utilisateur avant le chargement de la police, il est recommandé d’ajouter &display=swap au chargeur CSS de Google.

Ainsi : 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;
}

Devient : 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;
}

Pour en savoir plus :

PS. Certains points sont présents car je ne peux pas coller plus de deux liens dans un post en tant que nouveau membre :wink:

2 « J'aime »
2

font-display: swap; affecte les temps de blocage et d’échange lors de l’attente du chargement d’une police, mais nous intégrons la police depuis le backend (nous utilisons le gem discourse-fonts — cette méthode évite d’effectuer un appel à Google et d’être suivi).

Ainsi, comme les polices sont incluses dans l’application Discourse dès le chargement initial, je ne pense pas que nous verrions un quelconque avantage, car les polices ne bloquent pas le rendu comme elles le feraient si nous faisions un appel vers Google (ou un autre CDN) dans notre CSS.

Cependant, l’utilisation de font-display: swap; reste probablement un bon conseil pour quiconque ajoute des polices personnalisées provenant d’un CDN tiers dans un thème.

6 « J'aime »
3

Hmm… try.discourse.org est-il une instance représentative à examiner en ce qui concerne les problèmes de performance ?

J’ai vu que des polices étaient chargées depuis Google, et j’ai supposé qu’il s’agissait d’un problème global.

Screen Shot 2020-11-17 at 22.42.45
Screen Shot 2020-11-17 at 22.42.45986×490 66.7 KB

1 « J'aime »
4

Ah, cela a du sens. Nous avons importé la police sur Try car nous avons un en-tête qui correspond à discourse.org (qui utilise Open Sans)… nous pouvons utiliser swap là-bas ou même inclure la police directement dans le thème.

Vous pouvez utiliser Try pour examiner les problèmes de performance, mais essayez peut-être le mode sans échec juste pour être sûr que cela n’est pas lié aux légères personnalisations que nous avons ajoutées.

4 « J'aime »