Шрифты имеют огромное значение для любого веб-сайта, но при...

207

Шрифты имеют огромное значение для любого веб-сайта, но при оптимизации загрузки страниц ими часто пренебрегают.

Как можно оптимизировать форматы изображений, так можно оптимизировать и шрифты с помощью подмножеств и переменных шрифтов.

Применение этих методов на сайте CKEditor позволило снизить нагрузку на передачу шрифтов на 71%, до 26 кБ на посетителя.

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

Это сокращает количество необходимых файлов шрифтов, оптимизируя время загрузки.

Переменная оси шрифта, состоящая из четырех символов, например wght для размера, управляет этой интерполяцией.

Однако у переменных шрифтов есть недостатки.

Они требуют двух буквенных форм на символ, что увеличивает размер файла по сравнению с одним статическим шрифтом.

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

Оптимизация переменных шрифтов сложна и часто требует использования таких инструментов, как fonttools и pyftsubset, но Google Fonts предлагает более простое решение с некоторыми настройками.

Google Fonts предоставляет ряд бесплатных переменных шрифтов с открытым исходным кодом, но и здесь есть свои нюансы.

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

Чтобы гарантировать, что вы получите переменный шрифт, настройте ссылку на таблицу стилей Google Fonts, чтобы включить диапазоны значений, например wght@0,200..1000.

Подмножество шрифтов создает файл, содержащий только необходимые символы, что уменьшает размер файла.

Вопреки распространенному мнению, unicode-range не урезает шрифты; оно лишь ограничивает использование символов.

Для истинного урезания требуются генераторы веб-шрифтов или скрипты Python.

Шрифты Google Fonts можно урезать, добавив в URL &text=<text> и включив только нужные символы.

О том, как это сделать я писал тут.

Чтобы избежать ненужных загрузок, разделите обычные и курсивные шрифты на разные семейства и соответствующим образом измените стек шрифтов.

Таким образом, курсив будет загружаться только в случае необходимости.

Чтобы минимизировать кумулятивный сдвиг макета (CLS), добавьте system-ui к стеку шрифтов и измените отображение с swap на optional.

Команда CKEditor уменьшила размер файла статического шрифта со 104 кБ до 90,1 кБ за счет урезки, и еще больше - до 25,8 кБ с помощью переменного шрифта с урезанием.

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

https://ckeditor.com/blog/optimize-font-size-with-variable-fonts/

Как урезать шрифты на Питоне, можно чекнуть тут.

@MikeBlazerX