Какой font-display нужен Гуглу чтобы он заткнулся?

Question

[hckn]

На чертовом Pagespeed показывает предупреждение

Ensure text remains visible during webfont load

С ссылкой на статью об font-display

Я попробовал все font-display, и мне все равно показывает это предупреждение. Как вы от него избавлялись?

Comments

[Rustam Bainazarov]

Для @font-face — font-display: swap.

Для body прописывайте шрифты с «фолбеками», например, — font-family: "Custom-font", sans-serif.

[hckn]

Рустам Байназаров, все это и так есть. Это не работает

[Rustam Bainazarov]

hckn, полный код в студию.

[hckn]

Рустам Байназаров, чего? Я говорю есть swap и есть фоллбеки. Какой еще код нужен?

[Rustam Bainazarov]

hckn, мда, код скриншотами :))

Вообще, такой код нужно был изначально в вопросе выкладывать.

Попробуйте убрать такое количество fallback-шрифтов. Оставьте так:

body {
   font-family: "neue-haas-unica", sans-serif;
}

1. Если это поможет, оставьте по одному fallback-шрифту на систему.

2. Если это не поможет, то делайте по этому гайду:
https://web.dev/fast/avoid-invisible-text/codelab-...

P. S. В принципе, можно забить на это.

[hckn]

Набор бесполезных советов. Скриншот, потмоу что код постЦСС

font-family: config('fonts.main'), config('fonts.sans');

Вам бы ничего не дал. Поэтому сделал скриншот билда.

Гайд бесполезен, я и так использую webfontloader

Совет забить принимаю к сведению.

[hckn]

Впрочем, в гайде есть интеерсный совет

Your page should be styled to use a system font initially and custom fonts once the fonts-loaded class has been applied.

Забриаю слова обратно, это может быть полезно

html.fonts-loaded .header {
  font-family: 'Pacifico', cursive;
}

[Rustam Bainazarov]

hckn, дорогой пользователь, я вам помогаю, чем я могу, поэтому в целом глупо так отвечать даже на то, что не помогло вам.

Можно скопировать компилированный код и вставить.

Более того, у меня была оная ошибка, она решилась удалением лишних fallback-шрифтов, коих другой разработчик оставил в количестве 9 штук.

По ссылке, что я прислал выше, — не то сообщение, удалил.

[Rustam Bainazarov]

hckn, ну, в целом, так эта шняга и работает, шрифт изначально нужно поставить системный. Где-то в блоге Mozilla писали, что нужно ставить шрифт всегда в стили, чтобы быстрее рендеринг был. Мол, такой механизм обработки в современных браузерах.

P. S. Я пользовался этой хренью раньше всегда, но сейчас не вижу смысла в ней, если размер шрифтов не такой большой. Только лишний обработчик, а на скорость отображения влияет не так сильно. Но это, наверное, не применимо к highload-проектам, где нужны такие оптимизации.

[hckn]

Рустам Байназаров, да, спс за помощь. Насчет кода - ну сами понимаете будни современной разработки - все минифицировано, и в каком файле оно засунуто я буду выяснять дольше, чем сделаю скриншот))

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

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

Остановлюсь здесь



Итого: используя swap, webfonloader, woff2 - всего этого не достаточно чтобы исправить это замечание. Пусть это будет уроком нубам, которые надеятся добится хороших результатов в этом геморойном, тупом, бесполезном тесте (я видел сайт, который у меня загружался до полного взаимодействия около минуты, а эта тварь ему дает 98 - и накой тогда заморачиватся, спрашивается).

[Rustam Bainazarov]

hckn, я на эти отдельные пункты этих тестоа забил по полной. Страницы проектов Google их не проходят нормально, что уж говорить.

Согласен. Главное, чтобы страница имела там адекватный рейтинг (помогает в рекламе, если Google AdWords), работала и загружалась быстро — и всем будет счастье.

[hckn]

Вспомнил что я использую утилити-классы! Вот она выгода утилитарного ЦСС!!!

.font-main {
  font-family: config('fonts.sans') !important;
}
.wf-active .font-main {
  font-family: config('fonts.main') !important;
}
.font-heading {
  font-family: config('fonts.sans') !important;
}
.wf-active .font-heading {
  font-family: config('fonts.heading') !important;
}

Впрочем, замечание по прежнему висит, НО, теперь дает 99, ха-ха

[hckn]

Рустам Байназаров, Google AdSense наверное все же? Что за плюсы?

[Rustam Bainazarov]

hckn, нет, реклама именно AdWords. Рекламщики говорят, что чем больше рейтинги у сайта, тем меньше ставка, стоимость клика и т. п. Facebook тоже, говорят, учитывает это, если реклама там тоже. Рейтинг сайта у Google в т. ч. состоит и из показателей Page Insight, новой какой-то там шняги с маяком и огромной кучи внутренних показателей.

Ну, может, и для AdSense есть какие-то плюсы, конечно.

[Rustam Bainazarov]

Указанная выше информация актуальна для рекламных кампаний в США. В России и др. странах могут быть другие критерии, а эти ни на что не влиять.

[hckn]

Рустам Байназаров, интересно, не знал такого! Кстати, совет с ссылкой можете вынести, отмечу решением. Все же конструктивно ответили. и многим может пригодится

[Одиночка Айс]

hckn, мда, мне, стороннему наблюдателю, аж интересно стало, начерта такое кол-во шрифтов указывать? Обычно указывается подключаемый, стандартный и семейство.

[hckn]

Одиночка Айс, "обычно" и "просто" это не про шрифты (как видно даже из этой темы)

Вот например тот же Буцтрап юзает

font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

Буцтрап это вроде "обычно"? Я его не юзаю если что)

https://bitsofco.de/the-new-system-font-stack/
markdotto.com/2018/02/07/github-system-fonts
https://flaviocopes.com/css-system-fonts/

[Rustam Bainazarov]

hckn, да, спасибо, сейчас напишу ответ.

[No_Bugs]

Не знаю почему, но font-display надо указывать в самом верху

Answer 1

[Rustam Bainazarov]

Гайд по ссылке помогает получить доп. баллы от Google и в целом доп. увеличить скорость рендеринга сайта. Данный гайд при этом не является панацеей от данной ошибки, но скорость первичного отображения сайта как таковая от следования ему только увеличивается.

Появление данной ошибки в случае соблюдения всех рекомендаций и оптимизаций — скорее всего является недоработкой алгоритмов.