Шрифт для отображения: swap

Внести вклад UX
1

Здравствуйте,

Я заметил, что используется Google Fonts (и в настройках, как я знаю, можно выбрать несколько шрифтов).

Для улучшения пользовательского опыта до загрузки шрифта рекомендуется добавить &display=swap к загрузчику CSS Google Fonts.

Итак: 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;
}

Превращается в: 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;
}

Подробнее читайте по ссылке:

P.S. Некоторые точки оставлены, потому что я, как новичок, не могу вставить более двух ссылок в одном сообщении :wink:

2 лайка
2

font-display: swap; влияет на время блокировки и замены при ожидании загрузки шрифта, однако мы подключаем шрифты через бэкенд (у нас есть отдельный discourse-fonts gem — такой подход исключает обращение к Google и возможность отслеживания).

Поскольку шрифты включаются в состав приложения Discourse при первоначальной загрузке, я не думаю, что мы увидим какую-либо выгоду, так как шрифты не задерживают рендеринг, как это произошло бы при обращении к Google (или другому CDN) в нашем CSS.

Тем не менее, использование font-display: swap; всё ещё является хорошей рекомендацией для тех, кто добавляет пользовательские шрифты из стороннего CDN в тему.

6 лайков
3

Хм… Является ли try.discourse.org репрезентативным экземпляром для анализа проблем с производительностью?

Я увидел, что там шрифты загружаются из Google, и предположил, что это глобальная проблема.

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

1 лайк
4

А, это понятно. Мы импортировали шрифт в Try, потому что у нас есть заголовок, совпадающий с discourse.org (который использует Open Sans)… там можно использовать swap или даже включить шрифт прямо в тему.

Вы можете использовать Try при анализе проблем с производительностью, но, возможно, лучше запустить в safe-mode, чтобы убедиться, что это не связано с незначительными доработками, которые мы добавили.

4 лайка