@weranda

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

Приветствую.
Измерил сайт мерилкой от гугла и там написано, что
Чтобы основные ресурсы загружались в первую очередь, используйте для них элемент ``
И указано, что надо загрузить так шрифты. Вот и встал у меня вопрос о необходимости такой предзагрузки — нужна ли она или нет?
Сейчас в таблицу стилей встроен вот такой код:
@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">
  • Вопрос задан
  • 138 просмотров
Пригласить эксперта
Ответы на вопрос 1
medvedevseo
@medvedevseo
SEO-специалист
Большое кол-во rel="preload" негативно скажется на скорости загрузки сайта.
Пэйджспид ругается на шрифты, так как текст в контенте отображается невидимым до тех пор пока шрифты не загрузятся.
Соответственно вам нужно добавить в CSS - "font-display: swap;"
Он говорит браузеру "Отображай системные шрифты, пока нужные шрифты не загрузятся"
Соответственно пропадает необходимость загружать раньше ваши файлы шрифтов.
Вот тут про шрифты посмотрите https://loading.express/blog/live/google-fonts-pre...
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы