Надо ли предзагружать шрифт через link:rel=preload?

Question

[weranda]

Приветствую.
Измерил сайт мерилкой от гугла и там написано, что

Чтобы основные ресурсы загружались в первую очередь, используйте для них элемент ``

И указано, что надо загрузить так шрифты. Вот и встал у меня вопрос о необходимости такой предзагрузки — нужна ли она или нет?
Сейчас в таблицу стилей встроен вот такой код:

@font-face {
    font-family: "ubuntu400";
    src: url("font/ubuntu400.eot");
    src: url("font/ubuntu400.eot?#iefix") format("embedded-opentype"),
        url("font/ubuntu400.woff2") format("woff2"),
        url("font/ubuntu400.woff") format("woff"),
        url("font/ubuntu400.ttf") format("truetype");
    font-style: normal;
}

Стоит ли в блоке HEAD HTML встаивать вот это?

<link rel="preload" href="font/ubuntu400.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
<link rel="preload" href="font/ubuntu400.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="font/ubuntu400.woff" as="font" type="font/woff" crossorigin="anonymous">
<link rel="preload" href="font/ubuntu400.ttf" as="font" type="font/ttf" crossorigin="anonymous">
<link rel="preload" href="font/ubuntu400.svg" as="font" type="image/svg+xml" crossorigin="anonymous">

Comments

[Ankhena]

В таком виде как написали вы, точно не имеет смысла.
Предзагружать нужно только woff2.
И еще указать font-display.

И для актуальных на сегодняшний день браузеров достаточно woff2 и woff, остальные вообще удаляйте.

[sergski]

вы уверены, что вам действительно необходима глубокая поддержка давно устаревших браузеров?
в 2020 уже достаточно одного woff2

[Vaultboy84]

sergski, уже достаточно тупо подрубить в конец документа гугл фонт и не париться, особенно с учетом того, что самые ходовые гугл шрифты могут быть вероятнее всего закешированы у пользователя в браузере. Особенно это касается всяких ubuntu и roboto которые встречаются на огромном количестве сайтов.

[Алексей Махметхажиев]

Vaultboy84, нет

[Vaultboy84]

Алексей Махметхажиев, да

Answer 1

[Дмитрий Медведев]

Большое кол-во rel="preload" негативно скажется на скорости загрузки сайта.
Пэйджспид ругается на шрифты, так как текст в контенте отображается невидимым до тех пор пока шрифты не загрузятся.
Соответственно вам нужно добавить в CSS - "font-display: swap;"
Он говорит браузеру "Отображай системные шрифты, пока нужные шрифты не загрузятся"
Соответственно пропадает необходимость загружать раньше ваши файлы шрифтов.
Вот тут про шрифты посмотрите https://loading.express/blog/live/google-fonts-pre...

Comments

[weranda]

Вы где откопали ссылку на видео этих двух инфоцыган? За 40 минут толком ничего не смогли объяснить...

[Алексей Махметхажиев]

weranda, Спасибо за обратную связь, что именно вам непонятно в нашем подробном видео?

[weranda]

Алексей Махметхажиев, Если вы решились на комментарий, пишите его публично. Без вашего позволения я приведу его полностью. Люди поймут ваш подход к делу. А вот и ваш коммент:

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

[Алексей Махметхажиев]

weranda, материал вы не смотрели и написали просто так оскорбление, всё ясно.
учите мат часть, практикуйте и когда-нибудь вы всё поймете.

[weranda]

Алексей Махметхажиев, вы бы воспринимали это как здоровую критику и мотали на ус, коль ступили на скользкую дорожку инфоциганства без всяких "все ясно" и утвердительных предположений.

[Алексей Махметхажиев]

weranda, вопринимать "это" это что?
Где здоровая критика? Хоть строчка? Не нашел.