Нужно ли в head помещать все типы шрифтов для preload?
Сейчас там только woff2
<link rel="preload" as="font" href="/fonts/Roboto-Regular.woff2" type="font/woff2" crossorigin="anonymous" /> |
<link rel="preload" as="font" href="/fonts/Roboto-Regular.woff2" type="font/woff2" crossorigin="anonymous" />
Если смысл добавлять для preload тот же шрифт в формате woff?
<link rel="preload" as="font" href="/fonts/Roboto-Regular.woff" type="font/woff" crossorigin="anonymous" /> |
<link rel="preload" as="font" href="/fonts/Roboto-Regular.woff" type="font/woff" crossorigin="anonymous" />
Дополнительно:
Ну какбэ сам подумай. Если добавить все варианты то и грузиться будут всё. Т.е. ради пары процентов сидящих на древнем браузере ты вынудишь всех тратить трафик и пропускной канал на бесполезный мусор.
Если же грузить только один - то тут уже сидящий на древнем браузере будет грузить бесполезный для себя мусор , хоть и в одном экземпляре, а также не получит никакого преимущества в скорости загрузки.
Попробую нагляднее показать:
<link href="/fonts/MyFont.woff2" ... /> <link href="/fonts/MyFont.woff" ... /> <link href="/fonts/MyFont.ttf" ... /> @font-face { font-family: 'MyFont'; src: url('/fonts/MyFont.woff2') format('woff2'), url('/fonts/MyFont.woff') format('woff'), url('/fonts/MyFont.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } |
<link href="/fonts/MyFont.woff2" ... /> <link href="/fonts/MyFont.woff" ... /> <link href="/fonts/MyFont.ttf" ... /> @font-face { font-family: 'MyFont'; src: url('/fonts/MyFont.woff2') format('woff2'), url('/fonts/MyFont.woff') format('woff'), url('/fonts/MyFont.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; }
Тоже самое что:
<link href="/fonts/a.woff2" ... /> <link href="/fonts/b.woff" ... /> <link href="/fonts/c.ttf" ... /> @font-face { font-family: 'MyFont'; src: url('/fonts/a.woff2') format('woff2'), url('/fonts/b.woff') format('woff'), url('/fonts/c.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } |
<link href="/fonts/a.woff2" ... /> <link href="/fonts/b.woff" ... /> <link href="/fonts/c.ttf" ... /> @font-face { font-family: 'MyFont'; src: url('/fonts/a.woff2') format('woff2'), url('/fonts/b.woff') format('woff'), url('/fonts/c.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; }
Браузер никак не может знать, что в preload a.woff2, b.woff и c.ttf - это один и тот же шрифт, для него это просто три разных файла.
Когда он спарсит font-face - там да, уже понятно, но preload на то и preload, что грузит заранее.
Не нужно и не имеет никакого смысла. Даже скорее сделает хуже.
Все браузеры которые понимают rel="preload" поддерживают woff2.
Т.е. добавив в предзагрузку woff ты заставишь их скачать ненужный файл.
А те браузеры которым нужен именно woff всё равно не поддерживают предзагрузку.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Да, помещение всех типов шрифтов для preload в раздел вашего HTML-документа может быть полезным для улучшения производительности вашего сайта. Preload - это механизм, который позволяет браузеру начинать загружать ресурсы (такие как шрифты) до того, как они будут необходимы для отображения страницы. Это может существенно сократить время загрузки и улучшить пользовательский опыт.
Помещение всех типов шрифтов для preload позволит браузеру начинать загрузку всех шрифтов сразу, что может быть особенно полезно, если у вас на сайте используется несколько разных шрифтов. Это позволит ускорить загрузку страницы и сделать ее более отзывчивой для пользователей.
Ниже приведен пример того, как вы можете использовать тег с атрибутом rel="preload" для загрузки всех типов шрифтов в разделе вашего HTML-документа:
Здесь каждая строка представляет собой загрузку отдельного шрифта с указанием его формата и типа. Обязательно укажите атрибут crossorigin для предотвращения проблем с безопасностью при загрузке шрифтов из другого источника.
Важно помнить, что preload не всегда приносит значительное улучшение производительности, поэтому перед добавлением всех типов шрифтов для preload на ваш сайт, рекомендуется провести тестирование и оценить его эффективность в конкретном случае.