Предзагрузка шрифтов кажется крутой тактикой для увеличения...

150

Предзагрузка шрифтов кажется крутой тактикой для увеличения скорости сайта! 🚀

Многие крупные сайты так делают 🤓

В общем, как только шрифт загрузился, браузеру нужно его применить (= новая отрисовка) к странице — ваш тщательно подобранный кастомный (или иконочный) шрифт.

Но когда вы предзагружаете шрифт, вы (или ваш сайт/стек) по сути говорите браузеру: "Сейчас прилетит кое-что важное, что тебе может понадобиться".

Поэтому, вместо того чтобы выполнять две отрисовки, браузер пытается схитрить: он ненадолго задерживает начальную отрисовку, пока не будут получены предзагруженные ресурсы.

Результат для скорости сайта?

Небольшое ухудшение FCP (первой отрисовки контента) и (в зависимости от ваших изображений/элементов и других ресурсов и приоритетов) LCP (отрисовки крупнейшего элемента).

Влияние на UX?

Ваша страница выглядит так, будто она дольше загружается, или ваш самый большой элемент дольше отображается.

(Негативный) эффект может даже усугубиться при использовании:

— Вариативные шрифты → файл больше, загрузка дольше

— Иконочные шрифты → часто больше по размеру и не нужны для отрисовки на первом экране

— Дополнительный CDN → дополнительное соединение, больше задержка

— HTTP/1 → нет мультиплексирования, шрифты загружаются один за другим

Но стоит отметить, что предзагрузка — это не всегда плохо.

Потому что ОТКАЗ от предзагрузки шрифтов означает:

❌ несколько отрисовок за короткий промежуток времени, что тоже не идеально с точки зрения технической/веб-производительности

🤷 пользователи могут даже заметить, как подменяются шрифты

💡в итоге, нужно тестировать + отслеживать результаты